From b23bfc61bc9ab81783f1135900eed4a80494c2bd Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 24 Feb 2023 00:27:51 +0800
Subject: [PATCH] refactor(console): refactor cloud router

---
 packages/console/src/App.tsx                  | 12 +++++++----
 packages/console/src/cloud/App.module.scss    |  4 ++++
 packages/console/src/cloud/App.tsx            | 21 +++++++++++++++++++
 .../src/cloud/pages/Cloud/index.module.scss   |  4 ----
 .../console/src/cloud/pages/Main/index.tsx    |  5 +++++
 .../src/cloud/pages/Onboard/index.module.scss |  4 ++++
 .../cloud/pages/{Cloud => Onboard}/index.tsx  |  6 +++---
 packages/console/src/cloud/types.ts           |  4 ++++
 packages/console/src/consts/tenants.ts        | 11 +++++++++-
 9 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 packages/console/src/cloud/App.module.scss
 create mode 100644 packages/console/src/cloud/App.tsx
 delete mode 100644 packages/console/src/cloud/pages/Cloud/index.module.scss
 create mode 100644 packages/console/src/cloud/pages/Main/index.tsx
 create mode 100644 packages/console/src/cloud/pages/Onboard/index.module.scss
 rename packages/console/src/cloud/pages/{Cloud => Onboard}/index.tsx (93%)

diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index 601db2e73..2c0dc1ab6 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -11,6 +11,7 @@ import './scss/overlayscrollbars.scss';
 
 // eslint-disable-next-line import/no-unassigned-import
 import '@fontsource/roboto-mono';
+import CloudApp from '@/cloud/App';
 import AppLoading from '@/components/AppLoading';
 import Toast from '@/components/Toast';
 import { getManagementApi, meApi } from '@/consts/management-api';
@@ -39,7 +40,6 @@ import UserDetails from '@/pages/UserDetails';
 import Users from '@/pages/Users';
 import Welcome from '@/pages/Welcome';
 
-import Cloud from './cloud/pages/Cloud';
 import {
   ApiResourceDetailsTabs,
   ConnectorsTabs,
@@ -50,7 +50,6 @@ import {
   getUserTenantId,
   getBasename,
 } from './consts';
-import { isCloud } from './consts/cloud';
 import AppContent from './containers/AppContent';
 import AppEndpointsProvider, { AppEndpointsContext } from './containers/AppEndpointsProvider';
 import ApiResourcePermissions from './pages/ApiResourceDetails/ApiResourcePermissions';
@@ -82,7 +81,6 @@ const Main = () => {
             <Route path="callback" element={<Callback />} />
             <Route path="welcome" element={<Welcome />} />
             <Route element={<AppLayout />}>
-              {isCloud && <Route path="cloud/*" element={<Cloud />} />}
               <Route element={<AppContent />}>
                 <Route path="*" element={<NotFound />} />
                 <Route path="get-started" element={<GetStarted />} />
@@ -163,7 +161,13 @@ const Main = () => {
 };
 
 const App = () => {
-  const managementApi = getManagementApi(getUserTenantId());
+  const tenantId = getUserTenantId();
+
+  if (!tenantId) {
+    return <CloudApp />;
+  }
+
+  const managementApi = getManagementApi(tenantId);
 
   return (
     <BrowserRouter basename={getBasename()}>
diff --git a/packages/console/src/cloud/App.module.scss b/packages/console/src/cloud/App.module.scss
new file mode 100644
index 000000000..373cb4d67
--- /dev/null
+++ b/packages/console/src/cloud/App.module.scss
@@ -0,0 +1,4 @@
+.app {
+  position: absolute;
+  inset: 0;
+}
diff --git a/packages/console/src/cloud/App.tsx b/packages/console/src/cloud/App.tsx
new file mode 100644
index 000000000..25005955e
--- /dev/null
+++ b/packages/console/src/cloud/App.tsx
@@ -0,0 +1,21 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import * as styles from './App.module.scss';
+import Main from './pages/Main';
+import Onboard from './pages/Onboard';
+import { CloudRoute } from './types';
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <div className={styles.app}>
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path={CloudRoute.Onboard + '/*'} element={<Onboard />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  );
+};
+
+export default App;
diff --git a/packages/console/src/cloud/pages/Cloud/index.module.scss b/packages/console/src/cloud/pages/Cloud/index.module.scss
deleted file mode 100644
index 88871eb0f..000000000
--- a/packages/console/src/cloud/pages/Cloud/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.cloud {
-  flex-grow: 1;
-  overflow: hidden;
-}
diff --git a/packages/console/src/cloud/pages/Main/index.tsx b/packages/console/src/cloud/pages/Main/index.tsx
new file mode 100644
index 000000000..0d344003b
--- /dev/null
+++ b/packages/console/src/cloud/pages/Main/index.tsx
@@ -0,0 +1,5 @@
+const Main = () => {
+  return <div>Main</div>;
+};
+
+export default Main;
diff --git a/packages/console/src/cloud/pages/Onboard/index.module.scss b/packages/console/src/cloud/pages/Onboard/index.module.scss
new file mode 100644
index 000000000..65aff9d7d
--- /dev/null
+++ b/packages/console/src/cloud/pages/Onboard/index.module.scss
@@ -0,0 +1,4 @@
+.onBoard {
+  height: 100%;
+  overflow: hidden;
+}
diff --git a/packages/console/src/cloud/pages/Cloud/index.tsx b/packages/console/src/cloud/pages/Onboard/index.tsx
similarity index 93%
rename from packages/console/src/cloud/pages/Cloud/index.tsx
rename to packages/console/src/cloud/pages/Onboard/index.tsx
index 9fce9b1a0..2b3b750b3 100644
--- a/packages/console/src/cloud/pages/Cloud/index.tsx
+++ b/packages/console/src/cloud/pages/Onboard/index.tsx
@@ -13,7 +13,7 @@ import * as styles from './index.module.scss';
 
 const welcomePathname = getCloudPagePathname(CloudPage.Welcome);
 
-const Cloud = () => {
+const Onboard = () => {
   const {
     data: { questionnaire },
     isLoaded,
@@ -24,7 +24,7 @@ const Cloud = () => {
   }
 
   return (
-    <div className={styles.cloud}>
+    <div className={styles.onBoard}>
       <Routes>
         <Route index element={<Navigate replace to={welcomePathname} />} />
         <Route path={CloudPage.Welcome} element={<Welcome />} />
@@ -46,4 +46,4 @@ const Cloud = () => {
   );
 };
 
-export default Cloud;
+export default Onboard;
diff --git a/packages/console/src/cloud/types.ts b/packages/console/src/cloud/types.ts
index 5eb33d24a..95c60d08f 100644
--- a/packages/console/src/cloud/types.ts
+++ b/packages/console/src/cloud/types.ts
@@ -1,5 +1,9 @@
 import { z } from 'zod';
 
+export enum CloudRoute {
+  Onboard = 'onboard',
+}
+
 export enum CloudPage {
   Welcome = 'welcome',
   AboutUser = 'about-user',
diff --git a/packages/console/src/consts/tenants.ts b/packages/console/src/consts/tenants.ts
index 156a585ac..935034f6c 100644
--- a/packages/console/src/consts/tenants.ts
+++ b/packages/console/src/consts/tenants.ts
@@ -1,5 +1,7 @@
 import { defaultTenantId, ossConsolePath } from '@logto/schemas';
 
+import { CloudRoute } from '@/cloud/types';
+
 import { isCloud } from './cloud';
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -10,7 +12,14 @@ export const adminTenantEndpoint =
 
 export const getUserTenantId = () => {
   if (isCloud) {
-    return window.location.pathname.split('/')[1] ?? '';
+    const segment = window.location.pathname.split('/')[1];
+
+    // eslint-disable-next-line no-restricted-syntax
+    if (Object.values(CloudRoute).includes(segment as CloudRoute)) {
+      return '';
+    }
+
+    return segment ?? '';
   }
 
   return defaultTenantId;