block launch flow if only clusters are being initially provisioned

dashboard/src/components/ClusterProvisioningPlaceholder.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState, useContext } from "react";
+import styled from "styled-components";
+import { RouteComponentProps, withRouter } from "react-router";
+import { pushFiltered } from "shared/routing";
+
+import loading from "assets/loading.gif";
+
+import { Context } from "shared/Context";
+import Heading from "components/form-components/Heading";
+import Helper from "components/form-components/Helper";
+
+type Props = {};
+
+const ClusterProvisioningPlaceholder: React.FC<RouteComponentProps> = (props) => {
+  const { currentCluster } = useContext(Context);
+
+  return (
+    <ClusterPlaceholder>
+      <Heading isAtTop>
+        <Img src={loading} /> Your cluster is being created
+      </Heading>
+      <Helper>
+        You can view the status of your cluster creation{" "}
+        <Link onClick={() => {
+          pushFiltered(props, "/cluster-dashboard", ["project_id"], {
+            cluster: currentCluster.name,
+          });
+        }}>
+          here
+          <i className="material-icons">arrow_forward</i> 
+        </Link>
+      </Helper>
+    </ClusterPlaceholder>
+  );
+};
+
+export default withRouter(ClusterProvisioningPlaceholder);
+
+const Link = styled.a`
+  text-decoration: underline;
+  position: relative;
+  cursor: pointer;
+  > i {
+    color: #aaaabb;
+    font-size: 15px;
+    position: absolute;
+    right: -17px;
+    top: 1px;
+  }
+`;
+
+const Img = styled.img`
+  height: 15px;
+  margin-right: 15px;
+`;
+
+const ClusterPlaceholder = styled.div`
+  padding: 25px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  padding-bottom: 10px;
+`;

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -32,8 +32,7 @@ import Loading from "components/Loading";
 import JobRunTable from "./chart/JobRunTable";
 import TagFilter from "./TagFilter";
 import ExpandedEnvGroupDashboard from "./env-groups/ExpandedEnvGroupDashboard";
-import Heading from "components/form-components/Heading";
-import Helper from "components/form-components/Helper";
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 
 // @ts-ignore
 const LazyDatabasesRoutes = loadable(() => import("./databases/routes.tsx"), {
@@ -181,27 +180,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     );
   };
 
-  renderClusterCreatePlaceholder = () => {
-    return (
-      <Placeholder>
-        <Heading isAtTop>
-          <Img src={loading} /> Your cluster is being created
-        </Heading>
-        <Helper>
-          You can view the status of your cluster creation{" "}
-          <Link onClick={() => {
-            pushFiltered(this.props, "/cluster-dashboard", ["project_id"], {
-              cluster: this.context.currentCluster.name,
-            });
-          }}>
-            here
-            <i className="material-icons">arrow_forward</i> 
-          </Link>
-        </Helper>
-      </Placeholder>
-    )
-  }
-
   renderBodyForApps = () => {
     let { currentCluster, currentView } = this.props;
     const isAuthorizedToAdd = this.props.isAuthorized(
@@ -211,7 +189,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     );
 
     if (currentCluster.status === "UPDATING_UNAVAILABLE") {
-      return this.renderClusterCreatePlaceholder();
+      return <ClusterProvisioningPlaceholder />
     }
 
     return (
@@ -257,7 +235,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     );
 
     if (currentCluster.status === "UPDATING_UNAVAILABLE") {
-      return this.renderClusterCreatePlaceholder();
+      return <ClusterProvisioningPlaceholder />
     }
 
     return (
@@ -400,32 +378,6 @@ ClusterDashboard.contextType = Context;
 
 export default withRouter(withAuth(ClusterDashboard));
 
-const Link = styled.a`
-  text-decoration: underline;
-  position: relative;
-  cursor: pointer;
-  > i {
-    color: #aaaabb;
-    font-size: 15px;
-    position: absolute;
-    right: -17px;
-    top: 1px;
-  }
-`;
-
-const Img = styled.img`
-  height: 15px;
-  margin-right: 15px;
-`;
-
-const Placeholder = styled.div`
-  padding: 25px;
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  padding-bottom: 10px;
-`;
-
 const ToggleOption = styled.div<{ selected: boolean; nudgeLeft?: boolean }>`
   padding: 0 10px;
   color: ${(props) => (props.selected ? "" : "#494b4f")};

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

@@ -16,12 +16,7 @@ import ExpandedEnvGroup from "./ExpandedEnvGroup";
 import { RouteComponentProps, withRouter } from "react-router";
 import { getQueryParam, pushQueryParams, pushFiltered } from "shared/routing";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
-import { useQuery } from "@tanstack/react-query";
-import api from "shared/api";
-import Loading from "components/Loading";
-import Placeholder from "components/Placeholder";
-import Heading from "components/form-components/Heading";
-import Helper from "components/form-components/Helper";
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 
 type PropsType = RouteComponentProps &
   WithAuthProps & {
@@ -83,30 +78,9 @@ const EnvGroupDashboard = (props: PropsType) => {
     setExpandedEnvGroup(null);
   };
 
-  const renderClusterCreatePlaceholder = () => {
-    return (
-      <ClusterPlaceholder>
-        <Heading isAtTop>
-          <Img src={loading} /> Your cluster is being created
-        </Heading>
-        <Helper>
-          You can view the status of your cluster creation{" "}
-          <Link onClick={() => {
-            pushFiltered(props, "/cluster-dashboard", ["project_id"], {
-              cluster: currentCluster.name,
-            });
-          }}>
-            here
-            <i className="material-icons">arrow_forward</i> 
-          </Link>
-        </Helper>
-      </ClusterPlaceholder>
-    )
-  }
-
   const renderBody = () => {
     if (props.currentCluster.status === "UPDATING_UNAVAILABLE") {
-      return renderClusterCreatePlaceholder();
+      return <ClusterProvisioningPlaceholder />
     }
 
     const goBack = () =>
@@ -188,33 +162,6 @@ const EnvGroupDashboard = (props: PropsType) => {
 
 export default withRouter(withAuth(EnvGroupDashboard));
 
-const Link = styled.a`
-  text-decoration: underline;
-  position: relative;
-  cursor: pointer;
-  > i {
-    color: #aaaabb;
-    font-size: 15px;
-    position: absolute;
-    right: -17px;
-    top: 1px;
-  }
-`;
-
-
-const Img = styled.img`
-  height: 15px;
-  margin-right: 15px;
-`;
-
-const ClusterPlaceholder = styled.div`
-  padding: 25px;
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  padding-bottom: 10px;
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -25,7 +25,6 @@ const ClusterList: React.FC<Props> = ({}) => {
       { id: currentProject.id },
     )
       .then(({ data }) => {
-        console.log(data);
         setClusters(data);
         setIsLoading(false);
       })

dashboard/src/main/home/launch/Launch.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { Context } from "shared/Context";
 import api from "shared/api";
-import { ChartTypeWithExtendedConfig, PorterTemplate } from "shared/types";
+import { ChartTypeWithExtendedConfig, PorterTemplate, ClusterType } from "shared/types";
 
 import TabSelector from "components/TabSelector";
 import ExpandedTemplate from "./expanded-template/ExpandedTemplate";
@@ -11,6 +11,7 @@ import Loading from "components/Loading";
 import LaunchFlow from "./launch-flow/LaunchFlow";
 import NoClusterPlaceholder from "../NoClusterPlaceholder";
 import TitleSection from "components/TitleSection";
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
 
 import semver from "semver";
 import { RouteComponentProps, withRouter } from "react-router";
@@ -43,6 +44,7 @@ type StateType = {
   isOnLaunchFlow: boolean;
   clonedChart: ChartTypeWithExtendedConfig;
   tabOptions: TabOption[];
+  readyClusterStatus: string;
 };
 class Templates extends Component<PropsType, StateType> {
   private previousContext: any;
@@ -58,6 +60,7 @@ class Templates extends Component<PropsType, StateType> {
     isOnLaunchFlow: false,
     clonedChart: null as ChartTypeWithExtendedConfig,
     tabOptions: initialTabOptions,
+    readyClusterStatus: "checking",
   };
 
   componentDidMount() {
@@ -82,6 +85,30 @@ class Templates extends Component<PropsType, StateType> {
       return;
     }
 
+    // Block launch tab on initial provisioning
+    api.getClusters(
+      "<token>",
+      {},
+      { id: this.context.currentProject.id },
+    )
+      .then(({ data }) => {
+        let numUnavailable = 0;
+        data.forEach((cluster: ClusterType) => {
+          if (cluster.status === "UPDATING_UNAVAILABLE") {
+            numUnavailable += 1;
+          }
+        });
+
+        if (numUnavailable === data.length) {
+          this.setState({ readyClusterStatus: "none-ready" });
+        } else {
+          this.setState({ readyClusterStatus: "has-ready" });
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+
     let default_addon_helm_repo_url = this.context?.capabilities
       ?.default_addon_helm_repo_url;
     let default_app_helm_repo_url = this.context?.capabilities
@@ -336,7 +363,16 @@ class Templates extends Component<PropsType, StateType> {
   };
 
   renderContents = () => {
-    if (this.context.currentCluster) {
+    if (this.state.readyClusterStatus === "checking") {
+      return <Loading height="300px" />;
+    } else if (this.state.readyClusterStatus === "none-ready") {
+      return (
+        <>
+          <Br />
+          <ClusterProvisioningPlaceholder />
+        </>
+      )
+    } else if (this.context.currentCluster) {
       return (
         <>
           <TabSelector
@@ -353,7 +389,7 @@ class Templates extends Component<PropsType, StateType> {
         </>
       );
     } else if (this.context.currentCluster?.id === -1) {
-      return <Loading />;
+      return <Loading height="300px" />;
     } else if (!this.context.currentCluster) {
       return (
         <>
@@ -405,6 +441,11 @@ Templates.contextType = Context;
 
 export default withRouter(Templates);
 
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
 const Placeholder = styled.div`
   padding-top: 200px;
   width: 100%;