Added clear state on unmount and back button in case is not the first project

dashboard/src/main/Main.tsx

@@ -182,7 +182,6 @@ export default class Main extends Component<PropsType, StateType> {
           path={`/:baseRoute/:cluster?/:namespace?`}
           render={(routeProps) => {
             const baseRoute = routeProps.match.params.baseRoute;
-            console.log(PorterUrls.includes(baseRoute), baseRoute);
             if (
               this.state.isLoggedIn &&
               this.state.initialized &&

dashboard/src/main/home/Home.tsx

@@ -331,7 +331,6 @@ class Home extends Component<PropsType, StateType> {
 
   renderContents = () => {
     let currentView = this.props.currentRoute;
-    console.log({ currentView });
 
     if (this.context.currentProject && currentView !== "onboarding") {
       if (

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

@@ -14,6 +14,8 @@ import { Context } from "shared/Context";
 import api from "shared/api";
 import SaveButton from "components/SaveButton";
 
+import backArrow from "assets/back_arrow.png";
+
 type ValidationError = {
   hasError: boolean;
   description?: string;
@@ -100,6 +102,15 @@ export const NewProjectFC = () => {
 
   return (
     <>
+      {!snap.isFirstProject && (
+        <BackButton
+          onClick={() => {
+            pushFiltered("/dashboard", []);
+          }}
+        >
+          <BackButtonImg src={backArrow} />
+        </BackButton>
+      )}
       <TitleSection>New Project</TitleSection>
       <Helper>
         Project name
@@ -196,3 +207,28 @@ const Warning = styled.span`
   margin-left: ${(props: { highlight: boolean; makeFlush?: boolean }) =>
     props.makeFlush ? "" : "5px"};
 `;
+
+const BackButton = styled.div`
+  margin-bottom: 24px;
+  display: flex;
+  width: 36px;
+  cursor: pointer;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ffffff55;
+  border-radius: 100px;
+  background: #ffffff11;
+
+  :hover {
+    background: #ffffff22;
+    > img {
+      opacity: 1;
+    }
+  }
+`;
+
+const BackButtonImg = styled.img`
+  width: 16px;
+  opacity: 0.75;
+`;

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

@@ -11,6 +11,11 @@ const Onboarding = () => {
     actions.initFromGlobalContext(context);
   }, [context]);
 
+  useEffect(() => {
+    return () => {
+      actions.clearState();
+    };
+  }, []);
   return (
     <StyledOnboarding>
       <Routes />

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

@@ -4,17 +4,23 @@ import { proxy } from "valtio";
 import { derive, devtools } from "valtio/utils";
 
 export type OnboardingStateType = {
+  [key: string]: unknown;
   projectName: string;
   // Null when is not setted yet.
   isProvisionerEnabled: boolean | null;
   userId: number | null;
+  // Check if it's the first project that will be created
+  isFirstProject: boolean | null;
 };
 
-export const OnboardingState = proxy<OnboardingStateType>({
+const initialState: OnboardingStateType = {
   projectName: "",
   isProvisionerEnabled: null,
   userId: null,
-});
+  isFirstProject: null,
+};
+
+export const OnboardingState = proxy<OnboardingStateType>(initialState);
 
 devtools(OnboardingState, "Onboarding state");
 
@@ -28,6 +34,9 @@ export const actions = {
   setUserId: (userId: number) => {
     OnboardingState.userId = userId;
   },
+  setIsFirstProject: (isFirstProject: boolean) => {
+    OnboardingState.isFirstProject = isFirstProject;
+  },
   initFromGlobalContext: (context: Partial<ContextProps>) => {
     const provisionerStatus = context?.capabilities?.provisioner;
 
@@ -43,5 +52,17 @@ export const actions = {
     } else {
       actions.setUserId(null);
     }
+    if (context?.projects?.length >= 1) {
+      actions.setIsFirstProject(false);
+    } else {
+      actions.setIsFirstProject(true);
+    }
+  },
+  clearState: () => {
+    Object.keys(OnboardingState).forEach((key) => {
+      if (key in initialState) {
+        OnboardingState[key] = initialState[key];
+      }
+    });
   },
 };