Changes (#2988)

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

@@ -81,7 +81,17 @@ interface GithubAppAccessData {
   username?: string;
   accounts?: string[];
 }
-
+type Provider =
+  | {
+      provider: "github";
+      name: string;
+      installation_id: number;
+    }
+  | {
+      provider: "gitlab";
+      instance_url: string;
+      integration_id: number;
+    };
 const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   const [templateName, setTemplateName] = useState("");
 
@@ -129,7 +139,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     setAccessData(data);
     setShowGithubConnectModal(
       !hasClickedDoNotConnect &&
-      (accessError || !data.accounts || data.accounts?.length === 0)
+        (accessError || !data.accounts || data.accounts?.length === 0)
     );
   };
 
@@ -137,7 +147,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
     setAccessError(error);
     setShowGithubConnectModal(
       !hasClickedDoNotConnect &&
-      (error || !accessData.accounts || accessData.accounts?.length === 0)
+        (error || !accessData.accounts || accessData.accounts?.length === 0)
     );
   };
   const validatePorterYaml = (yamlString: string) => {
@@ -172,8 +182,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({
@@ -282,18 +293,18 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       const finalPorterYaml = createFinalPorterYaml(
         formState.serviceList,
         formState.envVariables,
-        porterJson,
+        porterJson
       );
 
       const yamlString = yaml.dump(finalPorterYaml);
       const base64Encoded = btoa(yamlString);
       const imageInfo = imageUrl
         ? {
-          image_info: {
-            repository: imageUrl,
-            tag: imageTag,
-          },
-        }
+            image_info: {
+              repository: imageUrl,
+              tag: imageTag,
+            },
+          }
         : {};
 
       await api.createPorterApp(
@@ -341,7 +352,11 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
   useEffect(() => {
     setFormState({ ...formState, serviceList: [] });
   }, [actionConfig, branch]);
-
+  useEffect(() => {
+    if (imageUrl || dockerfilePath || folderPath) {
+      setCurrentStep(Math.max(currentStep, 2));
+    }
+  }, [imageUrl, buildConfig, dockerfilePath, setCurrentStep, currentStep]);
   // useEffect(() => {
   //   const fetchGithubAccounts = async () => {
   //     try {
@@ -438,7 +453,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   imageUrl={imageUrl}
                   setImageUrl={(x) => {
                     setImageUrl(x);
-                    setCurrentStep(Math.max(currentStep, 2));
+                    setCurrentStep(Math.max(currentStep, 1));
                   }}
                   imageTag={imageTag}
                   setImageTag={setImageTag}
@@ -459,6 +474,8 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
                   }}
                   buildView={buildView}
                   setBuildView={setBuildView}
+                  setCurrentStep={setCurrentStep}
+                  currentStep={currentStep}
                 />
               </>,
               <>
@@ -682,7 +699,7 @@ const ConnectToGithubButton = styled.a`
     props.disabled ? "#aaaabbee" : "#2E3338"};
   :hover {
     background: ${(props: { disabled?: boolean }) =>
-    props.disabled ? "" : "#353a3e"};
+      props.disabled ? "" : "#353a3e"};
   }
 
   > i {

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

@@ -1,5 +1,5 @@
 import AnimateHeight from "react-animate-height";
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import Input from "components/porter/Input";
@@ -38,6 +38,8 @@ type Props = {
   setPorterYaml: (x: any) => void;
   buildView: string;
   setBuildView: (x: string) => void;
+  setCurrentStep: (x: number) => void;
+  currentStep: number;
 };
 
 const SourceSettings: React.FC<Props> = ({
@@ -59,6 +61,8 @@ const SourceSettings: React.FC<Props> = ({
   setPorterYaml,
   buildView,
   setBuildView,
+  setCurrentStep,
+  currentStep,
   ...props
 }) => {
   const renderDockerSettings = () => {