onboarding redirect modal

dashboard/src/main/home/Home.tsx

@@ -198,6 +198,14 @@ class Home extends Component<PropsType, StateType> {
     urlParams.delete("gh_oauth");
     this.getProjects(defaultProjectId);
     this.getMetadata();
+
+    if (
+      !this.context.hasFinishedOnboarding && 
+      this.props.history.location.pathname &&
+      !this.props.history.location.pathname.includes("onboarding")
+    ) {
+      this.context.setCurrentModal("RedirectToOnboardingModal");
+    }
   }
 
   async checkIfProjectHasBilling(projectId: number) {
@@ -223,9 +231,6 @@ class Home extends Component<PropsType, StateType> {
       const res = await api.getOnboardingState("<token>", {}, { project_id });
 
       if (res?.data && res?.data.current_step !== "clean_up") {
-        if (!window.location.pathname.includes("/onboarding")) {
-          this.context.setCurrentModal("RedirectToOnboardingModal");
-        }
         this.context.setHasFinishedOnboarding(false);
       } else {
         this.context.setHasFinishedOnboarding(true);
@@ -238,6 +243,14 @@ class Home extends Component<PropsType, StateType> {
   // 2. Make sure switching projects shows appropriate initial view (dashboard || provisioner)
   // 3. Make sure initializing from URL (DO oauth) displays the appropriate initial view
   componentDidUpdate(prevProps: PropsType) {
+    if (
+      !this.context.hasFinishedOnboarding && 
+      prevProps.match.url !== this.props.match.url &&
+      this.props.history.location.pathname &&
+      !this.props.history.location.pathname.includes("onboarding")
+    ) {
+      this.context.setCurrentModal("RedirectToOnboardingModal");
+    }
     if (prevProps.currentProject?.id !== this.props.currentProject?.id) {
       this.checkOnboarding();
       this.checkIfProjectHasBilling(this?.context?.currentProject?.id)
@@ -402,11 +415,6 @@ class Home extends Component<PropsType, StateType> {
         )}
 
         <ViewWrapper>
-          <Navbar
-            logOut={this.props.logOut}
-            currentView={this.props.currentRoute} // For form feedback
-          />
-
           <Switch>
             <Route
               path="/new-project"
@@ -477,6 +485,10 @@ class Home extends Component<PropsType, StateType> {
             />
             <Route path={"*"} render={() => <Templates />} />
           </Switch>
+          <Navbar
+            logOut={this.props.logOut}
+            currentView={this.props.currentRoute} // For form feedback
+          />
         </ViewWrapper>
 
         <ConfirmOverlay

dashboard/src/main/home/modals/Modal.tsx

@@ -109,6 +109,7 @@ const StyledModal = styled.div`
     props.height ? props.height : "425px"};
   overflow: visible;
   padding: 25px 32px;
+  z-index: 999;
   font-size: 13px;
   border-radius: 10px;
   background: #202227;

dashboard/src/main/home/navbar/Navbar.tsx

@@ -241,7 +241,7 @@ const StyledNavbar = styled.div`
   align-items: center;
   padding-right: 5px;
   justify-content: flex-end;
-  z-index: 1;
+  z-index: 999;
 `;
 
 const NavButton = styled.a`

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/FormFlow.tsx

@@ -109,7 +109,7 @@ const FormFlowWrapper: React.FC<Props> = ({
         <CloseButton onClick={() => alert("go back")}>
           <i className="material-icons">keyboard_backspace</i>
         </CloseButton>
-        <img src={FormTitle[provider].icon} />
+        {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
         {FormTitle[provider].label}
       </FormHeader>
       <Breadcrumb 

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/FormFlow.tsx

@@ -106,8 +106,8 @@ const FormFlowWrapper: React.FC<Props> = ({
         <CloseButton onClick={() => alert("go back")}>
           <i className="material-icons">keyboard_backspace</i>
         </CloseButton>
-        <img src={FormTitle[provider].icon} />
-        {FormTitle[provider].label}
+        {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
+        {FormTitle[provider] && FormTitle[provider].label}
       </FormHeader>
       <Breadcrumb
         currentStep={currentStep}