Porter.Yaml

dashboard/src/components/repo-selector/DetectContentsList.tsx

@@ -26,7 +26,6 @@ type PropsType = {
   dockerfilePath?: string;
   folderPath: string;
   porterYaml?: string;
-  buildConfig: BuildConfig;
   setActionConfig: (x: ActionConfigType) => void;
   setDockerfilePath: (x: string) => void;
   setFolderPath: (x: string) => void;
@@ -237,7 +236,6 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
           actionConfig={props.actionConfig}
           branch={props.branch}
           folderPath={props.folderPath}
-          buildConfig={props.buildConfig}
         />
       ) : (
         <AdvancedBuildSettings
@@ -250,7 +248,6 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
           actionConfig={props.actionConfig}
           branch={props.branch}
           folderPath={props.folderPath}
-          buildConfig={props.buildConfig}
         />
       )}
     </>

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useContext, useCallback } from "react";
 import { RouteComponentProps, withRouter } from "react-router";
 import styled from "styled-components";
 import yaml from "js-yaml";
+import { z } from "zod";
 
 import notFound from "assets/not-found.png";
 import web from "assets/web.png";
@@ -27,6 +28,7 @@ import Button from "components/porter/Button";
 import Services from "../new-app-flow/Services";
 import { Service } from "../new-app-flow/serviceTypes";
 import ConfirmOverlay from "components/porter/ConfirmOverlay";
+import { PorterYamlSchema } from "../new-app-flow/schema";
 
 type Props = RouteComponentProps & {};
 
@@ -42,7 +44,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   const { currentCluster, currentProject, setCurrentError } = useContext(
     Context
   );
-
+  const [rawYaml, setRawYaml] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
   const [appData, setAppData] = useState(null);
   const [error, setError] = useState(null);
@@ -60,6 +62,9 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   const [showRevisions, setShowRevisions] = useState<boolean>(false);
   const [newestImage, setNewestImage] = useState<string>(null);
   const [showDeleteOverlay, setShowDeleteOverlay] = useState<boolean>(false);
+  const [porterJson, setPorterJson] = useState<
+    z.infer<typeof PorterYamlSchema> | undefined
+  >(undefined);
 
   const getPorterApp = async () => {
     setIsLoading(true);
@@ -127,6 +132,34 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
     }
   };
 
+  const fetchPorterYamlContent = async (porterYaml: string) => {
+    try {
+      const res = await api.getPorterYamlContents(
+        "<token>",
+        {
+          path: porterYaml,
+        },
+        {
+          project_id: appData.app.project_id,
+          git_repo_id: appData.app.git_repo_id,
+          owner: appData.app.repo_name?.split("/")[0],
+          name: appData.app.repo_name?.split("/")[1],
+          kind: "github",
+          branch: appData.app.git_branch,
+        }
+      );
+      setRawYaml(atob(res.data));
+      let parsedYaml;
+      parsedYaml = yaml.load(rawYaml);
+      const parsedData = PorterYamlSchema.parse(parsedYaml);
+      const porterYamlToJson = parsedData as z.infer<typeof PorterYamlSchema>;
+      setPorterJson(porterYamlToJson);
+      console.log(porterJson);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   const renderIcon = (b: string, size?: string) => {
     var src = box;
     if (b) {
@@ -295,15 +328,16 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
       case "overview":
         const helmValues = appData?.chart?.config;
         const defaultValues = appData?.chart?.chart?.values;
-        if ((defaultValues && Object.keys(defaultValues).length > 0) || (helmValues && Object.keys(helmValues).length > 0)) {
+        if (
+          (defaultValues && Object.keys(defaultValues).length > 0) ||
+          (helmValues && Object.keys(helmValues).length > 0)
+        ) {
           const svcs = Service.deserialize(helmValues, defaultValues);
-          return <Services
-            setServices={(services: any[]) => {
-            }}
-            services={svcs}
-          />;
+          return (
+            <Services setServices={(services: any[]) => {}} services={svcs} />
+          );
         } else {
-          return <Text>No services found for this application yet.</Text>
+          return <Text>No services found for this application yet.</Text>;
         }
       case "build-settings":
         return (
@@ -412,7 +446,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             shouldUpdate={
               appData.chart.latest_version &&
               appData.chart.latest_version !==
-              appData.chart.chart.metadata.version
+                appData.chart.chart.metadata.version
             }
             latestVersion={appData.chart.latest_version}
             upgradeVersion={appUpgradeVersion}
@@ -423,20 +457,20 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             options={
               appData.app.git_repo_id
                 ? [
-                  { label: "Events", value: "events" },
-                  { label: "Logs", value: "logs" },
-                  { label: "Metrics", value: "metrics" },
-                  { label: "Overview", value: "overview" },
-                  { label: "Build settings", value: "build-settings" },
-                  { label: "Settings", value: "settings" },
-                ]
+                    { label: "Events", value: "events" },
+                    { label: "Logs", value: "logs" },
+                    { label: "Metrics", value: "metrics" },
+                    { label: "Overview", value: "overview" },
+                    { label: "Build settings", value: "build-settings" },
+                    { label: "Settings", value: "settings" },
+                  ]
                 : [
-                  { label: "Events", value: "events" },
-                  { label: "Logs", value: "logs" },
-                  { label: "Metrics", value: "metrics" },
-                  { label: "Overview", value: "overview" },
-                  { label: "Settings", value: "settings" },
-                ]
+                    { label: "Events", value: "events" },
+                    { label: "Logs", value: "logs" },
+                    { label: "Metrics", value: "metrics" },
+                    { label: "Overview", value: "overview" },
+                    { label: "Settings", value: "settings" },
+                  ]
             }
             currentTab={tab}
             setCurrentTab={setTab}

dashboard/src/main/home/app-dashboard/expanded-app/SharedBuildSettings.tsx

@@ -21,7 +21,6 @@ type Props = {
   folderPath: string;
   setFolderPath: (x: string) => void;
   setBuildConfig: (x: any) => void;
-  buildConfig: BuildConfig;
   porterYaml: string;
   setPorterYaml: (x: any) => void;
   imageUrl: string;
@@ -31,7 +30,6 @@ type Props = {
 const SharedBuildSettings: React.FC<Props> = ({
   actionConfig,
   setActionConfig,
-  buildConfig,
   branch,
   setBranch,
   dockerfilePath,
@@ -101,7 +99,7 @@ const SharedBuildSettings: React.FC<Props> = ({
         width="100%"
         setValue={setFolderPath}
       />
-      {actionConfig.git_repo && branch && buildConfig.builder != "" && (
+      {actionConfig.git_repo && branch && (
         <DetectContentsList
           actionConfig={actionConfig}
           branch={branch}
@@ -110,7 +108,6 @@ const SharedBuildSettings: React.FC<Props> = ({
           setActionConfig={setActionConfig}
           setDockerfilePath={setDockerfilePath}
           setFolderPath={setFolderPath}
-          buildConfig={buildConfig}
           setBuildConfig={setBuildConfig}
           porterYaml={porterYaml}
           setPorterYaml={setPorterYaml}

dashboard/src/main/home/app-dashboard/new-app-flow/AdvancedBuildSettings.tsx

@@ -26,7 +26,6 @@ interface AdvancedBuildSettingsProps {
   dockerfilePath?: string;
   setDockerfilePath: (x: string) => void;
   setBuildConfig: (x: any) => void;
-  buildConfig: BuildConfig;
 }
 
 type Buildpack = {

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -22,9 +22,7 @@ import EnvGroupArray, {
   KeyValueType,
 } from "main/home/cluster-dashboard/env-groups/EnvGroupArray";
 import GithubActionModal from "./GithubActionModal";
-import {
-  GithubActionConfigType,
-} from "shared/types";
+import { GithubActionConfigType } from "shared/types";
 import Error from "components/porter/Error";
 import { z } from "zod";
 import { AppsSchema, EnvSchema, PorterYamlSchema } from "./schema";
@@ -79,7 +77,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   const [imageTag, setImageTag] = useState("latest");
   const { currentCluster, currentProject } = useContext(Context);
   const [deploying, setDeploying] = useState<boolean>(false);
-  const [deploymentError, setDeploymentError] = useState<string | undefined>(undefined);
+  const [deploymentError, setDeploymentError] = useState<string | undefined>(
+    undefined
+  );
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [existingStep, setExistingStep] = useState<number>(0);
   const [formState, setFormState] = useState<FormState>(INITIAL_STATE);
@@ -143,8 +143,9 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       ) {
         setDetected({
           detected: true,
-          message: `Detected ${Object.keys(porterYamlToJson.apps).length
-            } apps from porter.yaml`,
+          message: `Detected ${
+            Object.keys(porterYamlToJson.apps).length
+          } apps from porter.yaml`,
         });
       } else {
         setDetected({
@@ -192,7 +193,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
         currentProject.id == null ||
         currentCluster.id == null
       ) {
-        throw ("Project or cluster not found");
+        throw "Project or cluster not found";
       }
 
       // validate form data
@@ -201,11 +202,11 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       const base64Encoded = btoa(yamlString);
       const imageInfo = imageUrl
         ? {
-          image_info: {
-            repository: imageUrl,
-            tag: imageTag,
-          },
-        }
+            image_info: {
+              repository: imageUrl,
+              tag: imageTag,
+            },
+          }
         : {};
 
       // write to the db
@@ -239,7 +240,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           cluster_id: currentCluster.id,
           project_id: currentProject.id,
         }
-      )
+      );
       if (!actionConfig?.git_repo) {
         props.history.push(`/apps/${formState.applicationName}`);
       }
@@ -247,7 +248,10 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     } catch (err) {
       // TODO: better error handling
       console.log(err);
-      const errMessage = err?.response?.data?.error ?? err?.toString() ?? 'An error occurred while deploying your app. Please try again.'
+      const errMessage =
+        err?.response?.data?.error ??
+        err?.toString() ??
+        "An error occurred while deploying your app. Please try again.";
       setDeploymentError(errMessage);
 
       return false;
@@ -393,7 +397,6 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   procfilePath={procfilePath}
                   setProcfilePath={setProcfilePath}
                   setBuildConfig={setBuildConfig}
-                  buildConfig={buildConfig}
                   porterYaml={porterYaml}
                   setPorterYaml={(newYaml: string) => {
                     validatePorterYaml(newYaml);
@@ -472,13 +475,17 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   if (imageUrl) {
                     deployPorterApp();
                   } else {
-                    setDeploymentError(undefined)
+                    setDeploymentError(undefined);
                     setShowGHAModal(true);
                   }
                 }}
-                status={deploying ? "loading" : deploymentError ? (
-                  <Error message={deploymentError} />
-                ) : undefined}
+                status={
+                  deploying ? (
+                    "loading"
+                  ) : deploymentError ? (
+                    <Error message={deploymentError} />
+                  ) : undefined
+                }
                 loadingText={"Deploying..."}
                 width={"150px"}
               >

dashboard/src/main/home/app-dashboard/new-app-flow/SourceSettings.tsx

@@ -33,7 +33,6 @@ type Props = {
   setProcfilePath: (x: string) => void;
   folderPath: string | null;
   setFolderPath: (x: string) => void;
-  buildConfig: BuildConfig;
   setBuildConfig: (x: any) => void;
   porterYaml: string;
   setPorterYaml: (x: any) => void;
@@ -41,7 +40,6 @@ type Props = {
 
 const SourceSettings: React.FC<Props> = ({
   source,
-  buildConfig,
   imageUrl,
   setImageUrl,
   imageTag,
@@ -118,7 +116,6 @@ const SourceSettings: React.FC<Props> = ({
         <div>
           {source === "github" ? (
             <SharedBuildSettings
-              buildConfig={buildConfig}
               actionConfig={actionConfig}
               branch={branch}
               dockerfilePath={dockerfilePath}