Implemented provision component with title

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

@@ -9,9 +9,12 @@ import Helper from "components/form-components/Helper";
 import TitleSection from "components/TitleSection";
 import { useSnapshot } from "valtio";
 import { actions, OnboardingState } from "./OnboardingState";
+import Button from "components/Button";
+import { useRouting } from "shared/routing";
 
 export const NewProjectFC = () => {
   const snap = useSnapshot(OnboardingState);
+  const { pushFiltered } = useRouting();
 
   useEffect(() => {
     if (snap.userId !== null) {
@@ -22,7 +25,7 @@ export const NewProjectFC = () => {
   }, [snap.userId]);
 
   return (
-    <StyledNewProject>
+    <>
       <TitleSection>New Project</TitleSection>
       <Helper>
         Project name
@@ -51,7 +54,14 @@ export const NewProjectFC = () => {
           maxLength={25}
         />
       </InputWrapper>
-    </StyledNewProject>
+      <Button
+        onClick={() => {
+          pushFiltered("/onboarding/provision", []);
+        }}
+      >
+        Some stuff
+      </Button>
+    </>
   );
 };
 
@@ -106,20 +116,3 @@ const Warning = styled.span`
   margin-left: ${(props: { highlight: boolean; makeFlush?: boolean }) =>
     props.makeFlush ? "" : "5px"};
 `;
-
-const Title = styled.div`
-  font-size: 20px;
-  font-weight: 500;
-  font-family: "Work Sans", sans-serif;
-  color: #ffffff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const StyledNewProject = styled.div`
-  width: calc(90% - 130px);
-  min-width: 300px;
-  position: relative;
-  margin-top: calc(50vh - 340px);
-`;

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

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from "react";
 import { Context } from "shared/Context";
+import styled from "styled-components";
 import { actions } from "./OnboardingState";
 import Routes from "./Routes";
 
@@ -10,7 +11,18 @@ const Onboarding = () => {
     actions.initFromGlobalContext(context);
   }, [context]);
 
-  return <Routes />;
+  return (
+    <StyledOnboarding>
+      <Routes />
+    </StyledOnboarding>
+  );
 };
 
 export default Onboarding;
+
+const StyledOnboarding = styled.div`
+  width: calc(90% - 130px);
+  min-width: 300px;
+  position: relative;
+  margin-top: calc(50vh - 340px);
+`;

dashboard/src/main/home/onboarding/OnboardingState.ts

@@ -1,5 +1,6 @@
 import { ContextProps } from "shared/types";
 import { proxy } from "valtio";
+import { derive, devtools } from "valtio/utils";
 
 export type OnboardingStateType = {
   projectName: string;
@@ -14,6 +15,19 @@ export const OnboardingState = proxy<OnboardingStateType>({
   userId: null,
 });
 
+derive(
+  {
+    isProjectNameValid(get) {
+      return get(OnboardingState).projectName;
+    },
+  },
+  {
+    proxy: OnboardingState,
+  }
+);
+
+devtools(OnboardingState, "Onboarding state");
+
 export const actions = {
   setProjectName: (name: string) => {
     OnboardingState.projectName = name;
@@ -34,10 +48,10 @@ export const actions = {
     }
 
     const userId = context?.user?.id;
-    if (typeof userId === "boolean") {
-      actions.setIsProvisionerEnabled(userId);
+    if (typeof userId === "number") {
+      actions.setUserId(userId);
     } else {
-      actions.setIsProvisionerEnabled(null);
+      actions.setUserId(null);
     }
   },
 };

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

@@ -0,0 +1,23 @@
+import Helper from "components/form-components/Helper";
+import TitleSection from "components/TitleSection";
+import React from "react";
+import { useSnapshot } from "valtio";
+import ProvisionerSettings from "../provisioner/ProvisionerSettings";
+import { OnboardingState } from "./OnboardingState";
+
+const Provisioner = () => {
+  const snap = useSnapshot(OnboardingState);
+  return (
+    <>
+      <TitleSection>Getting Started</TitleSection>
+      <Helper>Provision a new cluster through us or link one later!</Helper>
+      <ProvisionerSettings
+        isInNewProject={true}
+        projectName={snap.projectName}
+        provisioner={snap.isProvisionerEnabled}
+      />
+    </>
+  );
+};
+
+export default Provisioner;

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

@@ -4,10 +4,9 @@ import { useSnapshot } from "valtio";
 import ProvisionerSettings from "../provisioner/ProvisionerSettings";
 import { NewProjectFC } from "./NewProject";
 import { OnboardingState } from "./OnboardingState";
+import Provisioner from "./Provisioner";
 
 export const Routes = () => {
-  const snap = useSnapshot(OnboardingState);
-
   return (
     <>
       <Switch>
@@ -15,11 +14,7 @@ export const Routes = () => {
           <NewProjectFC />
         </Route>
         <Route path={`/onboarding/provision`}>
-          <ProvisionerSettings
-            isInNewProject={true}
-            projectName={snap.projectName}
-            provisioner={snap.isProvisionerEnabled}
-          />
+          <Provisioner />
         </Route>
       </Switch>
     </>