Moving project creation to NewProject component

dashboard/src/main/home/onboarding/NewProject.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import styled from "styled-components";
 
 import gradient from "assets/gradient.png";
@@ -10,10 +10,14 @@ import TitleSection from "components/TitleSection";
 import { useSnapshot } from "valtio";
 import { actions, OnboardingState } from "./OnboardingState";
 import { useRouting } from "shared/routing";
+import { Context } from "shared/Context";
+import api from "shared/api";
 
 export const NewProjectFC = () => {
   const snap = useSnapshot(OnboardingState);
+  const { user, setProjects, setCurrentProject } = useContext(Context);
   const { pushFiltered } = useRouting();
+
   useEffect(() => {
     if (snap.userId !== null) {
       window.analytics.track("provision_new-project", {
@@ -22,6 +26,32 @@ export const NewProjectFC = () => {
     }
   }, [snap.userId]);
 
+  const createProject = async () => {
+    const { projectName } = snap;
+
+    try {
+      const project = await api
+        .createProject("<token>", { name: projectName }, {})
+        .then((res) => res.data);
+
+      // Need to set project list for dropdown
+      // TODO: consolidate into ProjectSection (case on exists in list on set)
+      const projectList = await api
+        .getProjects(
+          "<token>",
+          {},
+          {
+            id: user.userId,
+          }
+        )
+        .then((res) => res.data);
+      setProjects(projectList);
+      setCurrentProject(project);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <>
       <TitleSection>New Project</TitleSection>
@@ -52,6 +82,14 @@ export const NewProjectFC = () => {
           maxLength={25}
         />
       </InputWrapper>
+      <SaveButton
+        text="Submit"
+        disabled={!isAlphanumeric(projectName)}
+        onClick={this.onSkip}
+        status={buttonStatus}
+        makeFlush={true}
+        helper="Note: Provisioning can take up to 15 minutes"
+      />
       <NextButton
         disabled={false}
         onClick={() => {

dashboard/src/main/home/onboarding/Provisioner.tsx → dashboard/src/main/home/onboarding/ProvisionerForms.tsx

@@ -5,7 +5,7 @@ import { useSnapshot } from "valtio";
 import ProvisionerSettings from "../provisioner/ProvisionerSettings";
 import { OnboardingState } from "./OnboardingState";
 
-const Provisioner = () => {
+const ProvisionerForms = () => {
   const snap = useSnapshot(OnboardingState);
   return (
     <>
@@ -20,4 +20,4 @@ const Provisioner = () => {
   );
 };
 
-export default Provisioner;
+export default ProvisionerForms;

dashboard/src/main/home/onboarding/Routes.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Route, Switch } from "react-router";
 import { NewProjectFC } from "./NewProject";
-import Provisioner from "./Provisioner";
+import ProvisionerForms from "./ProvisionerForms";
 
 export const Routes = () => {
   return (
@@ -11,7 +11,7 @@ export const Routes = () => {
           <NewProjectFC />
         </Route>
         <Route path={`/onboarding/provision`}>
-          <Provisioner />
+          <ProvisionerForms />
         </Route>
       </Switch>
     </>

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -165,34 +165,6 @@ const AWSFormSectionFC: React.FC<PropsType> = (props) => {
     props.handleError();
   };
 
-  // Step 1: Create a project
-  // TODO: promisify this function
-  const createProject = async () => {
-    const { projectName } = props;
-    const { user, setProjects, setCurrentProject } = context;
-    try {
-      const project = await api
-        .createProject("<token>", { name: projectName }, {})
-        .then((res) => res.data);
-
-      // Need to set project list for dropdown
-      // TODO: consolidate into ProjectSection (case on exists in list on set)
-      const projectList = await api
-        .getProjects(
-          "<token>",
-          {},
-          {
-            id: user.userId,
-          }
-        )
-        .then((res) => res.data);
-      setProjects(projectList);
-      setCurrentProject(project);
-    } catch (error) {
-      catchError(error);
-    }
-  };
-
   const getAwsIntegrationId = async () => {
     const { currentProject } = context;
     try {
@@ -253,10 +225,6 @@ const AWSFormSectionFC: React.FC<PropsType> = (props) => {
     setButtonStatus("loading");
     const { projectName } = props;
 
-    if (projectName) {
-      await createProject();
-    }
-
     const awsIntegrationId = await getAwsIntegrationId();
 
     const filterNonAWSInfras = (infra: any) =>

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -125,31 +125,6 @@ const DOFormSectionFC: React.FC<PropsType> = (props) => {
     return;
   };
 
-  // Step 1: Create a project
-  const createProject = (callback?: any) => {
-    let { projectName } = props;
-    let { user, setProjects, setCurrentProject } = context;
-
-    api
-      .createProject("<token>", { name: projectName }, {})
-      .then(async (res) => {
-        let proj = res.data;
-
-        // Need to set project list for dropdown
-        // TODO: consolidate into ProjectSection (case on exists in list on set)
-        const res_1 = await api.getProjects(
-          "<token>",
-          {},
-          {
-            id: user.userId,
-          }
-        );
-        setProjects(res_1.data);
-        setCurrentProject(proj, () => callback && callback(proj.id));
-      })
-      .catch(catchError);
-  };
-
   const doRedirect = (projectId: number) => {
     let redirectUrl = `/api/projects/${projectId}/oauth/digitalocean?project_id=${projectId}&provision=do`;
     redirectUrl += `&tier=${subscriptionTier}&region=${doRegion}&cluster_name=${clusterName}`;
@@ -163,14 +138,8 @@ const DOFormSectionFC: React.FC<PropsType> = (props) => {
   // TODO: handle generically (with > 2 steps)
   const onCreateDO = () => {
     props?.trackOnSave();
-    let { projectName } = props;
     let { currentProject } = context;
-
-    if (!projectName) {
-      doRedirect(currentProject.id);
-    } else {
-      createProject((projectId: number) => doRedirect(projectId));
-    }
+    doRedirect(currentProject.id);
   };
 
   const getButtonStatus = () => {

dashboard/src/main/home/provisioner/ExistingClusterSection.tsx

@@ -24,39 +24,14 @@ class ExistingClusterSection extends Component<PropsType, StateType> {
     buttonStatus: "",
   };
 
-  onCreateProject = () => {
+  onSkip = () => {
     this.props?.trackOnSave();
-    let { projectName } = this.props;
-    let { user, setProjects, setCurrentProject } = this.context;
 
     this.setState({ buttonStatus: "loading" });
-    api
-      .createProject("<token>", { name: projectName }, {})
-      .then((res) =>
-        api.getProjects(
-          "<token>",
-          {},
-          {
-            id: user.userId,
-          }
-        )
-      )
-      .then((res) => {
-        if (res.data) {
-          setProjects(res.data);
-          if (res.data.length > 0) {
-            let proj = res.data.find((el: ProjectType) => {
-              return el.name === projectName;
-            });
-            setCurrentProject(proj, () =>
-              pushFiltered(this.props, "/dashboard", ["project_id"], {
-                tab: "overview",
-              })
-            );
-          }
-        }
-      })
-      .catch(console.log);
+
+    pushFiltered(this.props, "/dashboard", ["project_id"], {
+      tab: "overview",
+    });
   };
 
   render() {
@@ -72,7 +47,7 @@ class ExistingClusterSection extends Component<PropsType, StateType> {
         <SaveButton
           text="Submit"
           disabled={!isAlphanumeric(projectName)}
-          onClick={this.onCreateProject}
+          onClick={this.onSkip}
           status={buttonStatus}
           makeFlush={true}
           helper="Note: Provisioning can take up to 15 minutes"

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -150,36 +150,7 @@ const GCPFormSectionFC: React.FC<PropsType> = (props) => {
     props.handleError();
   };
 
-  // Step 1: Create a project
-  const createProject = (callback?: any) => {
-    let { projectName } = props;
-    let { user, setProjects, setCurrentProject } = context;
-
-    api
-      .createProject("<token>", { name: projectName }, {})
-      .then((res) => {
-        let proj = res.data;
-
-        // Need to set project list for dropdown
-        // TODO: consolidate into ProjectSection (case on exists in list on set)
-        api
-          .getProjects(
-            "<token>",
-            {},
-            {
-              id: user.userId,
-            }
-          )
-          .then((res) => {
-            setProjects(res.data);
-            setCurrentProject(proj, () => callback && callback());
-          })
-          .catch(catchError);
-      })
-      .catch(catchError);
-  };
-
-  const provisionGCR = (id: number, callback?: any) => {
+  const provisionGCR = (id: number) => {
     console.log("Provisioning GCR");
     let { currentProject } = context;
 
@@ -260,11 +231,7 @@ const GCPFormSectionFC: React.FC<PropsType> = (props) => {
     setButtonStatus("loading");
     let { projectName } = props;
 
-    if (!projectName) {
-      handleCreateFlow();
-    } else {
-      createProject(handleCreateFlow);
-    }
+    handleCreateFlow();
   };
 
   const getButtonStatus = () => {