Merge branch 'stacks-v1' of github.com:porter-dev/porter into stacks-v1

dashboard/src/components/image-selector/ImageList.tsx

@@ -56,7 +56,7 @@ export default class ImageList extends Component<PropsType, StateType> {
 
     if (!this.props.registry) {
       api
-        .getProjectRegistries("<token>", {}, { id: currentProject.id })
+        .getProjectRegistries("<token>", {}, { id: currentProject?.id })
         .then((res) => {
           let registries = res.data;
           if (registries.length === 0) {
@@ -72,8 +72,8 @@ export default class ImageList extends Component<PropsType, StateType> {
                     "<token>",
                     {},
                     {
-                      project_id: currentProject.id,
-                      registry_id: registry.id,
+                      project_id: currentProject?.id,
+                      registry_id: registry?.id,
                     }
                   )
                   .then((res) => {
@@ -87,14 +87,14 @@ export default class ImageList extends Component<PropsType, StateType> {
                           kind: registry.service,
                           source: img.uri,
                           name: img.name,
-                          registryId: registry.id,
+                          registryId: registry?.id,
                         });
                       }
                       return {
                         kind: registry.service,
                         source: img.uri,
                         name: img.name,
-                        registryId: registry.id,
+                        registryId: registry?.id,
                       };
                     });
                     images.push(...newImg);
@@ -137,8 +137,8 @@ export default class ImageList extends Component<PropsType, StateType> {
           "<token>",
           {},
           {
-            project_id: currentProject.id,
-            registry_id: this.props.registry.id,
+            project_id: currentProject?.id,
+            registry_id: this.props.registry?.id,
           }
         )
         .then((res) => {
@@ -150,14 +150,14 @@ export default class ImageList extends Component<PropsType, StateType> {
                 kind: this.props.registry.service,
                 source: img.uri,
                 name: img.name,
-                registryId: this.props.registry.id,
+                registryId: this.props.registry?.id,
               });
             }
             return {
               kind: this.props.registry.service,
               source: img.uri,
               name: img.name,
-              registryId: this.props.registry.id,
+              registryId: this.props.registry?.id,
             };
           });
           images.push(...newImg);

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

@@ -47,7 +47,7 @@ export const BuildpackStack: React.FC<{
   branch: string;
   hide: boolean;
   onChange: (config: BuildConfig) => void;
-}> = ({ actionConfig, folderPath, branch, hide, builder, onChange }) => {
+}> = ({ actionConfig, folderPath, branch, hide, onChange }) => {
   const { currentProject } = useContext(Context);
 
   const [builders, setBuilders] = useState<DetectedBuildpack[]>(null);
@@ -115,7 +115,7 @@ export const BuildpackStack: React.FC<{
     if (typeof onChange === "function") {
       onChange(buildConfig);
     }
-  }, [builder, selectedStack, selectedBuildpacks]);
+  }, [selectedStack, selectedBuildpacks]);
 
   const detectBuildpack = () => {
     if (actionConfig.kind === "gitlab") {

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

@@ -26,6 +26,7 @@ const ExpandedApp: React.FC<Props> = ({
   const { currentCluster, currentProject } = useContext(Context);
   const [isLoading, setIsLoading] = useState(true);
   const [appData, setAppData] = useState(null);
+  const [error, setError] = useState(null);
   const [tab, setTab] = useState("events");
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -33,7 +34,7 @@ const ExpandedApp: React.FC<Props> = ({
     setIsLoading(true);
     const { appName } = props.match.params as any;
     try {
-      const res = await api.getPorterApp(
+      const resPorterApp = await api.getPorterApp(
         "<token>",
         {},
         {
@@ -42,9 +43,24 @@ const ExpandedApp: React.FC<Props> = ({
           name: appName,
         }
       );
-      setAppData(res.data);
+      const resChartData = await api.getChart(
+        "<token>",
+        {},
+        {
+          id: currentProject.id,
+          namespace: `porter-stack-${appName}`,
+          cluster_id: currentCluster.id,
+          name: appName,
+          revision: 0,
+        }
+      );
+      setAppData({
+        app: resPorterApp?.data,
+        chart: resChartData?.data,
+      });
       setIsLoading(false);
     } catch (err) {
+      setError(err);
       setIsLoading(false);
     }
   }

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

@@ -69,6 +69,7 @@ const AdvancedBuildSettings: React.FC<AdvancedBuildSettingsProps> = (props) => {
           folderPath={props.folderPath}
           onChange={(config) => {
             props.setBuildConfig(config);
+            props.setDockerfilePath("");
           }}
           hide={false}
         />

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

@@ -108,19 +108,31 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       parsedYaml = yaml.load(yamlString);
       const parsedData = PorterYamlSchema.parse(parsedYaml);
       const porterYamlToJson = parsedData as z.infer<typeof PorterYamlSchema>;
-      setPorterJson(porterYamlToJson)
-      console.log(porterYamlToJson)
+      setPorterJson(porterYamlToJson);
+      console.log(porterYamlToJson);
       // go through key value pairs and create services from them, if they don't already exist
       const newServices = [];
-      const existingServices = formState.serviceList.map(s => s.name);
+      const existingServices = formState.serviceList.map((s) => s.name);
       for (const [name, app] of Object.entries(porterYamlToJson.apps)) {
         if (!existingServices.includes(name)) {
           if (app.type) {
-            newServices.push(Service.default(name, app.type, { readOnly: true, value: app.run }))
-          } else if (name.includes('web')) {
-            newServices.push(Service.default(name, 'web', { readOnly: true, value: app.run }))
+            newServices.push(
+              Service.default(name, app.type, {
+                readOnly: true,
+                value: app.run,
+              })
+            );
+          } else if (name.includes("web")) {
+            newServices.push(
+              Service.default(name, "web", { readOnly: true, value: app.run })
+            );
           } else {
-            newServices.push(Service.default(name, 'worker', { readOnly: true, value: app.run }))
+            newServices.push(
+              Service.default(name, "worker", {
+                readOnly: true,
+                value: app.run,
+              })
+            );
           }
         }
       }
@@ -159,7 +171,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   };
   const deployPorterApp = async () => {
     try {
-      //Write build settings to the DB
+      // Write build settings to the DB
       const res = await api.createPorterApp(
         "<token>",
         {
@@ -167,8 +179,8 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           repo_name: actionConfig.git_repo,
           git_branch: branch,
           build_context: folderPath,
-          builder: "heroku",
-          buildpacks: "nodejs,ruby",
+          builder: (buildConfig as any)?.builder,
+          buildpacks: (buildConfig as any)?.buildpacks,
           dockerfile: dockerfilePath,
         },
         {
@@ -192,7 +204,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
           cluster_id: currentCluster.id,
           project_id: currentProject.id,
         }
-      )
+      );
     } catch (err) {
       console.log(err);
     }
@@ -200,7 +212,10 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     // TODO: update Porter stack
   };
 
-  const combineEnv = (dashboardSetVariables: KeyValueType[], porterYamlSetVariables: Record<string, string> | undefined): z.infer<typeof EnvSchema> => {
+  const combineEnv = (
+    dashboardSetVariables: KeyValueType[],
+    porterYamlSetVariables: Record<string, string> | undefined
+  ): z.infer<typeof EnvSchema> => {
     const env: z.infer<typeof EnvSchema> = {};
     for (const { key, value } of dashboardSetVariables) {
       env[key] = value;
@@ -211,32 +226,39 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       }
     }
     return env;
-  }
+  };
 
   const createApps = (serviceList: Service[]): z.infer<typeof AppsSchema> => {
     const apps: z.infer<typeof AppsSchema> = {};
     for (const service of serviceList) {
       let config = Service.serialize(service);
-      if (porterJson != null && porterJson.apps[service.name] != null && porterJson.apps[service.name].config != null) {
-        config = overrideObjectValues(config, porterJson.apps[service.name].config)
+      if (
+        porterJson != null &&
+        porterJson.apps[service.name] != null &&
+        porterJson.apps[service.name].config != null
+      ) {
+        config = overrideObjectValues(
+          config,
+          porterJson.apps[service.name].config
+        );
       }
       apps[service.name] = {
         type: service.type,
         run: service.startCommand.value,
         config,
-      }
+      };
     }
 
-    return apps
-  }
+    return apps;
+  };
 
   const createFinalPorterYaml = (): z.infer<typeof PorterYamlSchema> => {
     return {
       version: "v1stack",
       env: combineEnv(formState.envVariables, porterJson.env),
       apps: createApps(formState.serviceList),
-    }
-  }
+    };
+  };
 
   return (
     <CenterWrapper>
@@ -322,12 +344,17 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               <>
                 <Text size={16}>Application services</Text>
                 <Spacer y={0.5} />
-                {porterJson && porterJson.apps && Object.keys(porterJson.apps).length > 0 &&
-                  <AppearingDiv>
-                    <Text size={16} color={"green"}>Auto-detected {Object.keys(porterJson.apps).length} services from porter.yaml!</Text>
-                    <Spacer y={1} />
-                  </AppearingDiv>
-                }
+                {porterJson &&
+                  porterJson.apps &&
+                  Object.keys(porterJson.apps).length > 0 && (
+                    <AppearingDiv>
+                      <Text size={16} color={"green"}>
+                        Auto-detected {Object.keys(porterJson.apps).length}{" "}
+                        services from porter.yaml!
+                      </Text>
+                      <Spacer y={1} />
+                    </AppearingDiv>
+                  )}
                 <Services
                   setServices={(services: any[]) => {
                     setFormState({ ...formState, serviceList: services });
@@ -376,11 +403,8 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               */
               <Button
                 onClick={() => {
-                  // TODO: remove
-                  deployPorterApp();
-
                   if (imageUrl) {
-                    // deployPorterApp();
+                    deployPorterApp();
                   } else {
                     setShowGHAModal(true);
                   }