dev: instance setup workflow (#2935)

* chore: instance type updated

* chore: instance not ready screen added

* chore: instance layout added

* chore: instance magic sign in endpoint and type added

* chore: instance admin password endpoint added

* chore: instance setup page added

* chore: instance setup form added

* chore: instance layout updated

* fix: instance admin workflow setup

* fix: admin workflow setup

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/layouts/admin-layout/layout.tsx

@@ -4,6 +4,9 @@ import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
 // components
 import { InstanceAdminSidebar } from "./sidebar";
 import { InstanceAdminHeader } from "./header";
+import { InstanceSetupView } from "components/instance";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
 
 export interface IInstanceAdminLayout {
   children: ReactNode;
@@ -11,6 +14,18 @@ export interface IInstanceAdminLayout {
 
 export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
   const { children } = props;
+  // store
+  const {
+    instance: { instance },
+    user: { currentUser },
+  } = useMobxStore();
+  // fetch
+
+  console.log("instance", instance);
+
+  if (instance?.is_setup_done === false) {
+    return <InstanceSetupView />;
+  }
 
   return (
     <>

web/layouts/instance-layout/index.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactNode, useEffect } from "react";
+
+import useSWR from "swr";
+
+// route
+import { useRouter } from "next/router";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { Spinner } from "@plane/ui";
+import { InstanceNotReady } from "components/instance";
+
+type Props = {
+  children: ReactNode;
+};
+
+const InstanceLayout: FC<Props> = observer(({ children }) => {
+  // store
+  const {
+    instance: { fetchInstanceInfo, instance, createInstance },
+  } = useMobxStore();
+
+  const router = useRouter();
+  const isGodMode = router.pathname.includes("god-mode");
+
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+
+  useEffect(() => {
+    if (instance?.is_activated === false) {
+      createInstance();
+    }
+  }, [instance?.is_activated, createInstance]);
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      {instance ? (
+        !instance.is_setup_done && !isGodMode ? (
+          <InstanceNotReady />
+        ) : (
+          children
+        )
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default InstanceLayout;

web/layouts/settings-layout/profile/sidebar.tsx

@@ -102,21 +102,20 @@ export const ProfileLayoutSidebar = observer(() => {
       } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="h-full w-full flex flex-col gap-y-4">
-        <div
-          className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
-            sidebarCollapsed ? "justify-center" : ""
-          }`}
-        >
-          <Link href={`/${redirectWorkspaceSlug}`}>
-            <a className="flex-shrink-0 grid place-items-center h-5 w-5">
+        <Link href={`/${redirectWorkspaceSlug}`}>
+          <a
+            className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
+              sidebarCollapsed ? "justify-center" : ""
+            }`}
+          >
+            <span className="flex-shrink-0 grid place-items-center h-5 w-5">
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
-            </a>
-          </Link>
-
-          {!sidebarCollapsed && (
-            <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
-          )}
-        </div>
+            </span>
+            {!sidebarCollapsed && (
+              <h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
+            )}
+          </a>
+        </Link>
         <div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
           {!sidebarCollapsed && (
             <h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your account</h6>