Update view

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -34,6 +34,7 @@ import { Link } from "react-router-dom";
 import Fieldset from "components/porter/Fieldset";
 import Select from "components/porter/Select";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
 import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
 import { useAuthState } from "main/auth/context";
 
@@ -155,124 +156,132 @@ const AddOnDashboard: React.FC<Props> = ({
         description="Add-ons and supporting workloads for this project."
         disableLineBreak
       />
-      {currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
-        <ClusterProvisioningPlaceholder />
-      ) : (
-
-        (addOns.length === 0 || (filteredAddOns.length === 0 && searchValue === "")) ? (
-
-          isLoading ?
-            (<Loading offset="-150px" />) : (
-              <DashboardPlaceholder>
-                <Text size={16}>
-                  No add-ons have been deployed yet
-                </Text>
-                <Spacer y={0.5} />
-                <Text color={"helper"}>
-                  Deploy from our suite of curated add-ons.
-                </Text>
-                <Spacer y={1} />
-                <Link to="/addons/new">
-                  <Button alt onClick={() => { }} height="35px" >
-                    Deploy add-ons <Spacer inline x={1} /> <i className="material-icons" style={{ fontSize: '18px' }}>east</i>
-                  </Button>
-                </Link>
-              </DashboardPlaceholder>
-            )
-        ) : (
-          <>
-            <Container row spaced>
-              <SearchBar
-                value={searchValue}
-                setValue={setSearchValue}
-                placeholder="Search add-ons . . ."
-                width="100%"
-              />
-              <Spacer inline x={2} />
-              <Toggle
-                items={[
-                  { label: <ToggleIcon src={grid} />, value: "grid" },
-                  { label: <ToggleIcon src={list} />, value: "list" },
-                ]}
-                active={view}
-                setActive={setView}
-              />
-              <Spacer inline x={2} />
-              <Link to="/addons/new">
-                <Button onClick={() => { }} height="30px" width="130px">
-                  <I className="material-icons">add</I> New add-on
-                </Button>
-              </Link>
-            </Container>
-            <Spacer y={1} />
-
-            {filteredAddOns.length === 0 ? (
-              <Fieldset>
-                <Container row>
-                  <PlaceholderIcon src={notFound} />
-                  <Text color="helper">{searchValue === "" ? "No add-ons have been deployed yet." : "No matching add-ons were found."}</Text>
-                </Container>
-              </Fieldset>
-            ) : (isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
-              <GridList>
-                {(filteredAddOns ?? []).map((app: any, i: number) => {
-                  return (
-                    <Block to={getExpandedChartLinkURL(app)} key={i}>
-                      <Container row>
-                        <Icon
-                          src={
-                            hardcodedIcons[app.chart.metadata.name] ||
-                            app.chart.metadata.icon
-                          }
-                        />
-                        <Text size={14}>{app.name}</Text>
-                        <Spacer inline x={2} />
-                      </Container>
-                      <StatusIcon src={healthy} />
-                      <Container row>
-                        <SmallIcon opacity="0.4" src={time} />
-                        <Text size={13} color="#ffffff44">
-                          {readableDate(app.info.last_deployed)}
-                        </Text>
-                      </Container>
-                    </Block>
-                  );
-                })}
-              </GridList>
+      {
+        currentCluster?.status === "DELETING" ?
+          <ClusterDeletingPlaceholder /> :
+
+          currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
+            <ClusterProvisioningPlaceholder />
+          ) : (
+
+            (addOns.length === 0 || (filteredAddOns.length === 0 && searchValue === "")) ? (
+
+              isLoading ?
+                (<Loading offset="-150px" />) : (
+                  <DashboardPlaceholder>
+                    <Text size={16}>
+                      No add-ons have been deployed yet
+                    </Text>
+                    <Spacer y={0.5} />
+                    <Text color={"helper"}>
+                      Deploy from our suite of curated add-ons.
+                    </Text>
+                    <Spacer y={1} />
+                    <Link to="/addons/new">
+                      <Button alt onClick={() => { }} height="35px" >
+                        Deploy add-ons <Spacer inline x={1} /> <i className="material-icons" style={{ fontSize: '18px' }}>east</i>
+                      </Button>
+                    </Link>
+                  </DashboardPlaceholder>
+                )
             ) : (
-              <List>
-                {(filteredAddOns ?? []).map((app: any, i: number) => {
-                  return (
-                    <Row to={getExpandedChartLinkURL(app)} key={i}>
-                      <Container row>
-                        <MidIcon
-                          src={
-                            hardcodedIcons[app.chart.metadata.name] ||
-                            app.chart.metadata.icon
-                          }
-                        />
-                        <Text size={14}>{app.name}</Text>
-                        <Spacer inline x={1} />
-                        <MidIcon src={healthy} height="16px" />
-                      </Container>
-                      <Spacer height="15px" />
-                      <Container row>
-                        <SmallIcon opacity="0.4" src={time} />
-                        <Text size={13} color="#ffffff44">
-                          {readableDate(app.info.last_deployed)}
-                        </Text>
-                      </Container>
-                    </Row>
-                  );
-                })}
-              </List>
-            )
-            )}
-          </>
-        ))}
+              <>
+                <Container row spaced>
+                  <SearchBar
+                    value={searchValue}
+                    setValue={setSearchValue}
+                    placeholder="Search add-ons . . ."
+                    width="100%"
+                  />
+                  <Spacer inline x={2} />
+                  <Toggle
+                    items={[
+                      { label: <ToggleIcon src={grid} />, value: "grid" },
+                      { label: <ToggleIcon src={list} />, value: "list" },
+                    ]}
+                    active={view}
+                    setActive={setView}
+                  />
+                  <Spacer inline x={2} />
+                  <Link to="/addons/new">
+                    <Button onClick={() => { }} height="30px" width="130px">
+                      <I className="material-icons">add</I> New add-on
+                    </Button>
+                  </Link>
+                </Container>
+                <Spacer y={1} />
+
+                {filteredAddOns.length === 0 ? (
+                  <Fieldset>
+                    <Container row>
+                      <PlaceholderIcon src={notFound} />
+                      <Text color="helper">{searchValue === "" ? "No add-ons have been deployed yet." : "No matching add-ons were found."}</Text>
+                    </Container>
+                  </Fieldset>
+                ) : (isLoading ? <Loading offset="-150px" /> : view === "grid" ? (
+                  <GridList>
+                    {(filteredAddOns ?? []).map((app: any, i: number) => {
+                      return (
+                        <Block to={getExpandedChartLinkURL(app)} key={i}>
+                          <Container row>
+                            <Icon
+                              src={
+                                hardcodedIcons[app.chart.metadata.name] ||
+                                app.chart.metadata.icon
+                              }
+                            />
+                            <Text size={14}>{app.name}</Text>
+                            <Spacer inline x={2} />
+                          </Container>
+                          <StatusIcon src={healthy} />
+                          <Container row>
+                            <SmallIcon opacity="0.4" src={time} />
+                            <Text size={13} color="#ffffff44">
+                              {readableDate(app.info.last_deployed)}
+                            </Text>
+                          </Container>
+                        </Block>
+                      );
+                    })}
+                  </GridList>
+                ) : (
+                  <List>
+                    {(filteredAddOns ?? []).map((app: any, i: number) => {
+                      return (
+                        <Row to={getExpandedChartLinkURL(app)} key={i}>
+                          <Container row>
+                            <MidIcon
+                              src={
+                                hardcodedIcons[app.chart.metadata.name] ||
+                                app.chart.metadata.icon
+                              }
+                            />
+                            <Text size={14}>{app.name}</Text>
+                            <Spacer inline x={1} />
+                            <MidIcon src={healthy} height="16px" />
+                          </Container>
+                          <Spacer height="15px" />
+                          <Container row>
+                            <SmallIcon opacity="0.4" src={time} />
+                            <Text size={13} color="#ffffff44">
+                              {readableDate(app.info.last_deployed)}
+                            </Text>
+                          </Container>
+                        </Row>
+                      );
+                    })}
+                  </List>
+                )
+                )}
+              </>
+            ))
+      }
+
+
       <Spacer y={5} />
     </StyledAppDashboard >
   );
+
 };
 
 export default AddOnDashboard;

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -32,6 +32,7 @@ import Fieldset from "components/porter/Fieldset";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import Icon from "components/porter/Icon";
 import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
+import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
 
 type Props = {};
 
@@ -213,6 +214,12 @@ const AppDashboard: React.FC<Props> = ({ }) => {
         description="Web services, workers, and jobs for this project."
         disableLineBreak
       />
+      {
+        currentCluster?.status === "DELETING"
+        && (
+          <ClusterDeletingPlaceholder />
+        )
+      }
       {currentCluster?.status === "UPDATING_UNAVAILABLE" ? (
         <ClusterProvisioningPlaceholder />
       ) : (

dashboard/src/main/home/app-dashboard/apps/Apps.tsx

@@ -32,6 +32,7 @@ import web from "assets/web.png";
 
 import AppGrid from "./AppGrid";
 import { appRevisionWithSourceValidator } from "./types";
+import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
 
 export type ClientAddonWithEnv = {
   addon: ClientAddon;
@@ -78,7 +79,7 @@ const Apps: React.FC = () => {
             {
               deployment_target_id:
                 currentProject.managed_deployment_targets_enabled &&
-                !currentDeploymentTarget.is_preview
+                  !currentDeploymentTarget.is_preview
                   ? undefined
                   : currentDeploymentTarget.id,
               ignore_preview_apps: !currentDeploymentTarget.is_preview,
@@ -193,6 +194,9 @@ const Apps: React.FC = () => {
     if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
       return <ClusterProvisioningPlaceholder />;
     }
+    if (currentCluster?.status === "DELETING") {
+      return <ClusterDeletingPlaceholder />;
+    }
 
     if (
       status === "loading" ||

dashboard/src/main/home/cluster-dashboard/apps/AppDashboard.tsx

@@ -20,6 +20,7 @@ import ChartList from "../chart/ChartList";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import SortSelector from "../SortSelector";
 import Spacer from "components/porter/Spacer";
+import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
 
 type Props = RouteComponentProps & WithAuthProps & {
   currentView: PorterUrl;
@@ -55,6 +56,12 @@ const AppDashboard: React.FC<Props> = ({
         description="Continuously running web services, workers, and add-ons."
         disableLineBreak
       />
+      {
+        currentCluster?.status === "DELETING"
+        && (
+          <ClusterDeletingPlaceholder />
+        )
+      }
       {currentCluster.status === "UPDATING_UNAVAILABLE" ? (
         <ClusterProvisioningPlaceholder />
       ) : (

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupDashboard.tsx

@@ -17,6 +17,7 @@ import { getQueryParam, pushQueryParams, pushFiltered } from "shared/routing";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 import Spacer from "components/porter/Spacer";
+import ClusterDeletingPlaceHolder from "components/ClusterDeletingPlaceholder";
 
 type PropsType = RouteComponentProps &
   WithAuthProps & {
@@ -79,6 +80,9 @@ const EnvGroupDashboard = (props: PropsType) => {
   };
 
   const renderBody = () => {
+    if (props.currentCluster.status === "DELETING") {
+      return <ClusterDeletingPlaceHolder />
+    }
     if (props.currentCluster.status === "UPDATING_UNAVAILABLE") {
       return <ClusterProvisioningPlaceholder />
     }

dashboard/src/main/home/cluster-dashboard/jobs/JobDashboard.tsx

@@ -20,6 +20,7 @@ import LastRunStatusSelector from "../LastRunStatusSelector";
 import JobRunTable from "../chart/JobRunTable";
 import ChartList from "../chart/ChartList";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import ClusterDeletingPlaceholder from "components/ClusterDeletingPlaceholder";
 
 type Props = RouteComponentProps & WithAuthProps & {
   currentView: PorterUrl;
@@ -49,6 +50,12 @@ const JobDashboard: React.FC<Props> = ({
         description="Scripts and tasks that run once or on a repeating interval."
         disableLineBreak
       />
+      {
+        currentCluster?.status === "DELETING"
+        && (
+          <ClusterDeletingPlaceholder />
+        )
+      }
       {currentCluster.status === "UPDATING_UNAVAILABLE" ? (
         <ClusterProvisioningPlaceholder />
       ) : (

dashboard/src/main/home/database-dashboard/DatabaseDashboard.tsx

@@ -35,6 +35,7 @@ import {
   type CloudProviderWithSource,
 } from "./types";
 import { datastoreField } from "./utils";
+import ClusterDeletingPlaceHolder from "components/ClusterDeletingPlaceholder";
 
 type Props = {
   projectId: number;
@@ -165,6 +166,9 @@ const DatabaseDashboard: React.FC<Props> = ({ projectId }) => {
   };
 
   const renderContents = (): JSX.Element => {
+    if (currentCluster?.status === "DELETING") {
+      return <ClusterDeletingPlaceHolder />;
+    }
     if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
       return <ClusterProvisioningPlaceholder />;
     }
@@ -334,7 +338,7 @@ const MidIcon = styled.img<{ height?: string }>`
   margin-right: 11px;
 `;
 
-const Row = styled(Link)<{ isAtBottom?: boolean }>`
+const Row = styled(Link) <{ isAtBottom?: boolean }>`
   cursor: pointer;
   display: block;
   padding: 15px;