Fix Button Status (#2989)

Co-authored-by: jusrhee <justin@porter.run>

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

@@ -25,14 +25,8 @@ import {
 import { RouteComponentProps } from "react-router";
 import { Context } from "shared/Context";
 import ActionConfBranchSelector from "components/repo-selector/ActionConfBranchSelector";
-import DetectContentsList from "components/repo-selector/DetectContentsList";
-import { pushFiltered } from "shared/routing";
-import ImageSelector from "components/image-selector/ImageSelector";
-import SharedBuildSettings from "./SharedBuildSettings";
-import { BuildpackSelection } from "components/repo-selector/BuildpackSelection";
-import BuildpackConfigSection from "main/home/cluster-dashboard/expanded-chart/build-settings/_BuildpackConfigSection";
+
 import { BuildpackStack } from "components/repo-selector/BuildpackStack";
-import MultiSaveButton from "components/MultiSaveButton";
 import api from "shared/api";
 import { AxiosError } from "axios";
 import InputRow from "components/form-components/InputRow";
@@ -45,6 +39,7 @@ type Props = {
   setAppData: Dispatch<any>;
   onTabSwitch: () => void;
   updatePorterApp: (options: Partial<PorterAppOptions>) => Promise<void>;
+  clearStatus: () => void;
 };
 interface AutoBuildpack {
   name?: string;
@@ -55,6 +50,7 @@ const BuildSettingsTabStack: React.FC<Props> = ({
   appData,
   setAppData,
   onTabSwitch,
+  clearStatus,
   updatePorterApp,
 }) => {
   const { setCurrentError } = useContext(Context);
@@ -97,7 +93,7 @@ const BuildSettingsTabStack: React.FC<Props> = ({
     ...defaultActionConfig,
   });
   const [buttonStatus, setButtonStatus] = useState<
-    "loading" | "successful" | string
+    "loading" | "success" | string
   >("");
   const [imageUrl, setImageUrl] = useState(appData.chart.image_uri);
 
@@ -153,7 +149,7 @@ const BuildSettingsTabStack: React.FC<Props> = ({
         }
         setCurrentError(
           'The workflow is still running. You can "Save" the current build settings for the next workflow run and view the current status of the workflow here: ' +
-          tmpError.response.data
+            tmpError.response.data
         );
         return;
       }
@@ -223,7 +219,8 @@ const BuildSettingsTabStack: React.FC<Props> = ({
       await triggerWorkflow();
 
       onTabSwitch();
-      setButtonStatus("successful");
+      setButtonStatus("success");
+      clearStatus();
     } catch (error) {
       setButtonStatus("Something went wrong");
       console.log(error);
@@ -352,7 +349,7 @@ const StyledAdvancedBuildSettings = styled.div`
     cursor: pointer;
     border-radius: 20px;
     transform: ${(props: { showSettings: boolean; isCurrent: boolean }) =>
-    props.showSettings ? "" : "rotate(-90deg)"};
+      props.showSettings ? "" : "rotate(-90deg)"};
   }
 `;
 const StyledSourceBox = styled.div`

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

@@ -226,7 +226,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
         const finalPorterYaml = createFinalPorterYaml(
           services,
           envVars,
-          porterJson,
+          porterJson
         );
         const yamlString = yaml.dump(finalPorterYaml);
         const base64Encoded = btoa(yamlString);
@@ -242,7 +242,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             stack_name: appData.app.name,
           }
         );
-        setButtonStatus("success")
+        setButtonStatus("success");
       } else {
         setButtonStatus(<Error message="Unable to update app" />);
       }
@@ -324,7 +324,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
     ) {
       const svcs = Service.deserialize(helmValues, defaultValues, porterJson);
       setServices(svcs);
-      if (helmValues && 'global' in helmValues) {
+      if (helmValues && "global" in helmValues) {
         delete helmValues.global; // not necessary for displaying services or env variables
       }
       if (Object.keys(helmValues).length > 0) {
@@ -505,7 +505,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                 setServices(x);
               }}
               chart={appData.chart}
-              services={services} />
+              services={services}
+            />
             <Spacer y={1} />
             <Button
               onClick={updatePorterApp}
@@ -523,6 +524,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             appData={appData}
             setAppData={setAppData}
             onTabSwitch={getPorterApp}
+            clearStatus={() => setButtonStatus("")}
             updatePorterApp={updatePorterApp}
           />
         );
@@ -691,7 +693,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}
@@ -705,6 +707,25 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                   appData.app.git_repo_id
                     ? hasBuiltImage
                       ? [
+                          { label: "Logs", value: "logs" },
+                          { label: "Overview", value: "overview" },
+                          {
+                            label: "Environment variables",
+                            value: "environment-variables",
+                          },
+                          { label: "Build settings", value: "build-settings" },
+                          { label: "Settings", value: "settings" },
+                        ]
+                      : [
+                          { label: "Overview", value: "overview" },
+                          {
+                            label: "Environment variables",
+                            value: "environment-variables",
+                          },
+                          { label: "Build settings", value: "build-settings" },
+                          { label: "Settings", value: "settings" },
+                        ]
+                    : [
                         { label: "Overview", value: "overview" },
                         { label: "Events", value: "events" },
                         { label: "Logs", value: "logs" },
@@ -712,28 +733,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                           label: "Environment variables",
                           value: "environment-variables",
                         },
-                        { label: "Build settings", value: "build-settings" },
-                        { label: "Settings", value: "settings" },
-                      ]
-                      : [
-                        { label: "Overview", value: "overview" },
-                        {
-                          label: "Environment variables",
-                          value: "environment-variables",
-                        },
-                        { label: "Build settings", value: "build-settings" },
                         { label: "Settings", value: "settings" },
                       ]
-                    : [
-                      { label: "Overview", value: "overview" },
-                      { label: "Events", value: "events" },
-                      { label: "Logs", value: "logs" },
-                      {
-                        label: "Environment variables",
-                        value: "environment-variables",
-                      },
-                      { label: "Settings", value: "settings" },
-                    ]
                 }
                 currentTab={tab}
                 setCurrentTab={(tab: string) => {