redirect after app deletion

dashboard/src/components/porter/ConfirmOverlay.tsx

@@ -49,7 +49,7 @@ const StyledConfirmOverlay = styled.div`
   font-size: 18px;
   color: white;
   flex-direction: column;
-  background: rgb(0, 0, 0, 0.73);
+  background: rgb(0, 0, 0, 0.55);
   backdrop-filter: blur(5px);
   animation: lindEnter 0.2s;
   animation-fill-mode: forwards;

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

@@ -8,6 +8,7 @@ import web from "assets/web.png";
 import box from "assets/box.png";
 import github from "assets/github.png";
 import pr_icon from "assets/pull_request_icon.svg";
+import loadingImg from "assets/loading.gif";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -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 Fieldset from "components/porter/Fieldset";
 
 type Props = RouteComponentProps & {};
 
@@ -44,6 +46,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   );
 
   const [isLoading, setIsLoading] = useState(true);
+  const [deleting, setDeleting] = useState(false);
   const [appData, setAppData] = useState(null);
   const [error, setError] = useState(null);
   const [forceRefreshRevisions, setForceRefreshRevisions] = useState<boolean>(
@@ -98,7 +101,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   };
 
   const deletePorterApp = async () => {
-    setIsLoading(true);
+    setShowDeleteOverlay(false);
+    setDeleting(true);
     const { appName } = props.match.params as any;
     try {
       const res = await api.deletePorterApp(
@@ -119,11 +123,10 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           namespace: `porter-stack-${appName}`,
         }
       );
-      console.log(res);
-      setIsLoading(false);
+      props.history.push("/apps");
     } catch (err) {
       setError(err);
-      setIsLoading(false);
+      setDeleting(false);
     }
   };
 
@@ -394,51 +397,66 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             Last deployed {getReadableDate(appData.chart.info.last_deployed)}
           </Text>
           <Spacer y={1} />
-          <DarkMatter />
-          <RevisionSection
-            showRevisions={showRevisions}
-            toggleShowRevisions={() => {
-              setShowRevisions(!showRevisions);
-            }}
-            chart={appData.chart}
-            refreshChart={() => getChartData(appData.chart)}
-            setRevision={setRevision}
-            forceRefreshRevisions={forceRefreshRevisions}
-            refreshRevisionsOff={() => setForceRefreshRevisions(false)}
-            shouldUpdate={
-              appData.chart.latest_version &&
-              appData.chart.latest_version !==
-              appData.chart.chart.metadata.version
-            }
-            latestVersion={appData.chart.latest_version}
-            upgradeVersion={appUpgradeVersion}
-          />
-          <DarkMatter antiHeight="-18px" />
-          <Spacer y={1} />
-          <TabSelector
-            options={
-              appData.app.build_packs
-                ? [
-                  { 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" },
-                ]
-            }
-            currentTab={tab}
-            setCurrentTab={setTab}
-          />
-          <Spacer y={1} />
-          {renderTabContents()}
+          {deleting ? (
+            <Fieldset>
+              <Text size={16}>
+                <Spinner src={loadingImg} /> Deleting "
+                {appData.app.name}"
+              </Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                You will be automatically redirected after deletion is complete.
+              </Text>
+            </Fieldset>
+          ) : (
+            <>
+              <DarkMatter />
+              <RevisionSection
+                showRevisions={showRevisions}
+                toggleShowRevisions={() => {
+                  setShowRevisions(!showRevisions);
+                }}
+                chart={appData.chart}
+                refreshChart={() => getChartData(appData.chart)}
+                setRevision={setRevision}
+                forceRefreshRevisions={forceRefreshRevisions}
+                refreshRevisionsOff={() => setForceRefreshRevisions(false)}
+                shouldUpdate={
+                  appData.chart.latest_version &&
+                  appData.chart.latest_version !==
+                  appData.chart.chart.metadata.version
+                }
+                latestVersion={appData.chart.latest_version}
+                upgradeVersion={appUpgradeVersion}
+              />
+              <DarkMatter antiHeight="-18px" />
+              <Spacer y={1} />
+              <TabSelector
+                options={
+                  appData.app.build_packs
+                    ? [
+                      { 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" },
+                    ]
+                }
+                currentTab={tab}
+                setCurrentTab={setTab}
+              />
+              <Spacer y={1} />
+              {renderTabContents()}
+            </>
+          )}
         </StyledExpandedApp>
       )}
       {showDeleteOverlay && (
@@ -458,6 +476,13 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
 
 export default withRouter(ExpandedApp);
 
+const Spinner = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 12px;
+  margin-bottom: -2px;
+`;
+
 const DarkMatter = styled.div<{ antiHeight?: string }>`
   width: 100%;
   margin-top: ${(props) => props.antiHeight || "-20px"};