Merge pull request #3191 from logto-io/gao-refactor-cloud-router

refactor(console): refactor cloud router

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()}>

packages/console/src/cloud/App.module.scss

@@ -0,0 +1,4 @@
+.app {
+  position: absolute;
+  inset: 0;
+}

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;

packages/console/src/cloud/pages/Cloud/index.module.scss

@@ -1,4 +0,0 @@
-.cloud {
-  flex-grow: 1;
-  overflow: hidden;
-}

packages/console/src/cloud/pages/Main/index.tsx

@@ -0,0 +1,5 @@
+const Main = () => {
+  return <div>Main</div>;
+};
+
+export default Main;

packages/console/src/cloud/pages/Onboard/index.module.scss

@@ -0,0 +1,4 @@
+.onBoard {
+  height: 100%;
+  overflow: hidden;
+}

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;

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',

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;