basic onboarding check modal

dashboard/src/main/home/Home.tsx

@@ -223,7 +223,9 @@ class Home extends Component<PropsType, StateType> {
       const res = await api.getOnboardingState("<token>", {}, { project_id });
 
       if (res?.data && res?.data.current_step !== "clean_up") {
-        // this.redirectToOnboarding();
+        if (!window.location.pathname.includes("/onboarding")) {
+          this.context.setCurrentModal("RedirectToOnboardingModal");
+        }
         this.context.setHasFinishedOnboarding(false);
       } else {
         this.context.setHasFinishedOnboarding(true);

dashboard/src/main/home/ModalHandler.tsx

@@ -10,6 +10,7 @@ import NamespaceModal from "./modals/NamespaceModal";
 import DeleteNamespaceModal from "./modals/DeleteNamespaceModal";
 import EditInviteOrCollaboratorModal from "./modals/EditInviteOrCollaboratorModal";
 import AccountSettingsModal from "./modals/AccountSettingsModal";
+import RedirectToOnboardingModal from "./modals/RedirectToOnboardingModal";
 
 import UsageWarningModal from "./modals/UsageWarningModal";
 
@@ -31,8 +32,14 @@ const ModalHandler: React.FC<{
 
   return (
     <>
-      {currentModal === "RedirectToOnboarding" && (
-        <a href="/onboarding/new-project"></a>
+      {currentModal === "RedirectToOnboardingModal" && (
+        <Modal
+          width="600px"
+          height="180px"
+          title="You're almost ready..."
+        >
+          <RedirectToOnboardingModal />
+        </Modal>
       )}
 
       {currentModal === "ClusterInstructionsModal" && (

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

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import styled from "styled-components";
 
 type PropsType = {
-  onRequestClose: () => void;
+  onRequestClose?: () => void;
   width?: string;
   height?: string;
   title?: string;
@@ -26,6 +26,7 @@ export default class Modal extends Component<PropsType, StateType> {
 
   handleClickOutside = (event: any) => {
     if (
+      this.props.onRequestClose &&
       this.wrapperRef &&
       this.wrapperRef.current &&
       !this.wrapperRef.current.contains(event.target)
@@ -39,9 +40,13 @@ export default class Modal extends Component<PropsType, StateType> {
     return (
       <Overlay>
         <StyledModal ref={this.wrapperRef} width={width} height={height}>
-          <CloseButton onClick={this.props.onRequestClose}>
-            <i className="material-icons">close</i>
-          </CloseButton>
+          {
+            this.props.onRequestClose && (
+              <CloseButton onClick={this.props.onRequestClose}>
+                <i className="material-icons">close</i>
+              </CloseButton>
+            )
+          }
           {this.props.title && <ModalTitle>{this.props.title}</ModalTitle>}
           {this.props.children}
         </StyledModal>

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

@@ -0,0 +1,62 @@
+import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+
+import api from "../../../shared/api";
+import Loading from "../../../components/Loading";
+import Heading from "components/form-components/Heading";
+import Helper from "components/form-components/Helper";
+
+const RedirectToOnboardingModal = () => {
+  return (
+    <>
+      <Helper>You need to complete the onboarding process in order to use Porter.</Helper>
+      <ContinueButton href="/onboarding">
+        <i className="material-icons">east</i>
+        Continue Setup
+      </ContinueButton>
+    </>
+  );
+};
+
+export default RedirectToOnboardingModal;
+
+const ContinueButton = styled.a`
+  height: 35px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: "Work Sans", sans-serif;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 15px 7px 15px;
+  text-align: left;
+  border: 0;
+  margin-top: 25px;
+  width: 160px;
+  border-radius: 5px;
+  background: #616FEEcc;
+  box-shadow: 0 2px 5px 0 #00000030;
+  cursor: pointer;
+  user-select: none;
+  :focus {
+    outline: 0;
+  }
+  :hover {
+    filter: brightness(120%);
+  }
+
+  > i {
+    color: white;
+    width: 18px;
+    height: 18px;
+    font-weight: 600;
+    font-size: 14px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    margin-right: 7px;
+    margin-left: -5px;
+    justify-content: center;
+  }
+`;