From 922a9eaaf7785d9eaf579764bbffec1c26220fc5 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 12 Apr 2024 18:38:19 +0800
Subject: [PATCH] refactor(console): use route objects

---
 .../src/containers/ConsoleContent/index.tsx   | 239 +-------------
 .../src/hooks/use-console-routes/index.tsx    | 292 ++++++++++++++++++
 2 files changed, 296 insertions(+), 235 deletions(-)
 create mode 100644 packages/console/src/hooks/use-console-routes/index.tsx

diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index d53c8403278..47bf53847df 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,73 +1,7 @@
-import { useContext } from 'react';
-import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router-dom';
 
-import {
-  ApplicationDetailsTabs,
-  ConnectorsTabs,
-  EnterpriseSsoDetailsTabs,
-  OrganizationTemplateTabs,
-  RoleDetailsTabs,
-  TenantSettingsTabs,
-  UserDetailsTabs,
-  WebhookDetailsTabs,
-} from '@/consts';
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
-import { TenantsContext } from '@/contexts/TenantsProvider';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
-import ApiResourceDetails from '@/pages/ApiResourceDetails';
-import ApiResources from '@/pages/ApiResources';
-import ApplicationDetails from '@/pages/ApplicationDetails';
-import Applications from '@/pages/Applications';
-import AuditLogDetails from '@/pages/AuditLogDetails';
-import AuditLogs from '@/pages/AuditLogs';
-import ConnectorDetails from '@/pages/ConnectorDetails';
-import Connectors from '@/pages/Connectors';
-import CustomizeJwt from '@/pages/CustomizeJwt';
-import CustomizeJwtDetails from '@/pages/CustomizeJwtDetails';
-import Dashboard from '@/pages/Dashboard';
-import EnterpriseSsoConnectors from '@/pages/EnterpriseSso';
-import EnterpriseSsoConnectorDetails from '@/pages/EnterpriseSsoDetails';
-import GetStarted from '@/pages/GetStarted';
-import Mfa from '@/pages/Mfa';
-import NotFound from '@/pages/NotFound';
-import OrganizationDetails from '@/pages/OrganizationDetails';
-import OrganizationRoleDetails from '@/pages/OrganizationRoleDetails';
-import OrganizationTemplate from '@/pages/OrganizationTemplate';
-import OrganizationPermissions from '@/pages/OrganizationTemplate/OrganizationPermissions';
-import OrganizationRoles from '@/pages/OrganizationTemplate/OrganizationRoles';
-import Organizations from '@/pages/Organizations';
-import OrganizationGuide from '@/pages/Organizations/Guide';
-import Profile from '@/pages/Profile';
-import ChangePasswordModal from '@/pages/Profile/containers/ChangePasswordModal';
-import LinkEmailModal from '@/pages/Profile/containers/LinkEmailModal';
-import VerificationCodeModal from '@/pages/Profile/containers/VerificationCodeModal';
-import VerifyPasswordModal from '@/pages/Profile/containers/VerifyPasswordModal';
-import RoleDetails from '@/pages/RoleDetails';
-import RoleApplications from '@/pages/RoleDetails/RoleApplications';
-import RolePermissions from '@/pages/RoleDetails/RolePermissions';
-import RoleSettings from '@/pages/RoleDetails/RoleSettings';
-import RoleUsers from '@/pages/RoleDetails/RoleUsers';
-import Roles from '@/pages/Roles';
-import SignInExperience from '@/pages/SignInExperience';
-import { SignInExperienceTab } from '@/pages/SignInExperience/types';
-import SigningKeys from '@/pages/SigningKeys';
-import TenantSettings from '@/pages/TenantSettings';
-import BillingHistory from '@/pages/TenantSettings/BillingHistory';
-import Subscription from '@/pages/TenantSettings/Subscription';
-import TenantBasicSettings from '@/pages/TenantSettings/TenantBasicSettings';
-import TenantDomainSettings from '@/pages/TenantSettings/TenantDomainSettings';
-import TenantMembers from '@/pages/TenantSettings/TenantMembers';
-import UserDetails from '@/pages/UserDetails';
-import UserLogs from '@/pages/UserDetails/UserLogs';
-import UserOrganizations from '@/pages/UserDetails/UserOrganizations';
-import UserRoles from '@/pages/UserDetails/UserRoles';
-import UserSettings from '@/pages/UserDetails/UserSettings';
-import Users from '@/pages/Users';
-import WebhookDetails from '@/pages/WebhookDetails';
-import WebhookLogs from '@/pages/WebhookDetails/WebhookLogs';
-import WebhookSettings from '@/pages/WebhookDetails/WebhookSettings';
-import Webhooks from '@/pages/Webhooks';
+import { useConsoleRoutes } from '@/hooks/use-console-routes';
 
 import type { AppContentOutletContext } from '../AppContent/types';
 
@@ -76,179 +10,14 @@ import * as styles from './index.module.scss';
 
 function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
-  const { isDevTenant } = useContext(TenantsContext);
-  const { canManageTenant } = useCurrentTenantScopes();
+  const routes = useConsoleRoutes();
 
   return (
     <div className={styles.content}>
       <Sidebar />
       <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
         <div ref={scrollableContent} className={styles.main}>
-          <Routes>
-            <Route path="*" element={<NotFound />} />
-            <Route path="get-started" element={<GetStarted />} />
-            <Route path="dashboard" element={<Dashboard />} />
-            <Route path="applications">
-              <Route index element={<Applications />} />
-              <Route
-                path="third-party-applications"
-                element={<Applications tab="thirdPartyApplications" />}
-              />
-              <Route path="create" element={<Applications />} />
-              <Route path=":id/guide/:guideId" element={<ApplicationDetails />} />
-              <Route path=":id">
-                <Route index element={<Navigate replace to={ApplicationDetailsTabs.Settings} />} />
-                <Route path=":tab" element={<ApplicationDetails />} />
-              </Route>
-              <Route
-                path={`:appId/${ApplicationDetailsTabs.Logs}/:logId`}
-                element={<AuditLogDetails />}
-              />
-            </Route>
-            <Route path="api-resources">
-              <Route index element={<ApiResources />} />
-              <Route path="create" element={<ApiResources />} />
-              <Route path=":id/guide/:guideId" element={<ApiResourceDetails />} />
-              <Route path=":id/*" element={<ApiResourceDetails />} />
-            </Route>
-            <Route path="sign-in-experience">
-              <Route index element={<Navigate replace to={SignInExperienceTab.Branding} />} />
-              <Route path=":tab" element={<SignInExperience />} />
-            </Route>
-            <Route path="mfa" element={<Mfa />} />
-            <Route path="connectors">
-              <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
-              <Route path=":tab" element={<Connectors />} />
-              <Route path=":tab/create/:createType" element={<Connectors />} />
-              <Route path=":tab/guide/:factoryId" element={<Connectors />} />
-              <Route path=":tab/:connectorId" element={<ConnectorDetails />} />
-            </Route>
-            <Route path="enterprise-sso">
-              <Route index element={<EnterpriseSsoConnectors />} />
-              <Route path="create" element={<EnterpriseSsoConnectors />} />
-              <Route path=":ssoConnectorId">
-                <Route
-                  index
-                  element={<Navigate replace to={EnterpriseSsoDetailsTabs.Connection} />}
-                />
-                <Route path=":tab" element={<EnterpriseSsoConnectorDetails />} />
-              </Route>
-            </Route>
-            <Route path="webhooks">
-              <Route index element={<Webhooks />} />
-              <Route path="create" element={<Webhooks />} />
-              <Route path=":id" element={<WebhookDetails />}>
-                <Route index element={<Navigate replace to={WebhookDetailsTabs.Settings} />} />
-                <Route path={WebhookDetailsTabs.Settings} element={<WebhookSettings />} />
-                <Route path={WebhookDetailsTabs.RecentRequests} element={<WebhookLogs />} />
-              </Route>
-              <Route
-                path={`:hookId/${WebhookDetailsTabs.RecentRequests}/:logId`}
-                element={<AuditLogDetails />}
-              />
-            </Route>
-            <Route path="users">
-              <Route index element={<Users />} />
-              <Route path="create" element={<Users />} />
-              <Route path=":id" element={<UserDetails />}>
-                <Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
-                <Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
-                <Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
-                <Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
-                <Route path={UserDetailsTabs.Organizations} element={<UserOrganizations />} />
-              </Route>
-              <Route
-                path={`:userId/${UserDetailsTabs.Logs}/:logId`}
-                element={<AuditLogDetails />}
-              />
-            </Route>
-            <Route path="audit-logs">
-              <Route index element={<AuditLogs />} />
-              <Route path=":logId" element={<AuditLogDetails />} />
-            </Route>
-            <Route path="roles">
-              <Route index element={<Roles />} />
-              <Route path="create" element={<Roles />} />
-              <Route path=":id" element={<RoleDetails />}>
-                <Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
-                <Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
-                <Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
-                <Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
-                <Route path={RoleDetailsTabs.M2mApps} element={<RoleApplications />} />
-              </Route>
-            </Route>
-            {isDevFeaturesEnabled && (
-              <>
-                <Route path="organization-template" element={<OrganizationTemplate />}>
-                  <Route
-                    index
-                    element={<Navigate replace to={OrganizationTemplateTabs.OrganizationRoles} />}
-                  />
-                  <Route
-                    path={OrganizationTemplateTabs.OrganizationRoles}
-                    element={<OrganizationRoles />}
-                  />
-                  <Route
-                    path={OrganizationTemplateTabs.OrganizationPermissions}
-                    element={<OrganizationPermissions />}
-                  />
-                </Route>
-                <Route
-                  path={`organization-template/${OrganizationTemplateTabs.OrganizationRoles}/:id/*`}
-                  element={<OrganizationRoleDetails />}
-                />
-              </>
-            )}
-            <Route path="organizations">
-              <Route index element={<Organizations />} />
-              <Route path="create" element={<Organizations />} />
-              {!isDevFeaturesEnabled && (
-                <Route path="template" element={<Organizations tab="template" />} />
-              )}
-              <Route path=":id/*" element={<OrganizationDetails />} />
-            </Route>
-            {!isDevFeaturesEnabled && (
-              <Route path="organization-guide/*" element={<OrganizationGuide />} />
-            )}
-            <Route path="profile">
-              <Route index element={<Profile />} />
-              <Route path="verify-password" element={<VerifyPasswordModal />} />
-              <Route path="change-password" element={<ChangePasswordModal />} />
-              <Route path="link-email" element={<LinkEmailModal />} />
-              <Route path="verification-code" element={<VerificationCodeModal />} />
-            </Route>
-            <Route path="signing-keys" element={<SigningKeys />} />
-            {isCloud && (
-              <Route path="tenant-settings" element={<TenantSettings />}>
-                <Route
-                  index
-                  element={
-                    <Navigate
-                      replace
-                      to={
-                        canManageTenant ? TenantSettingsTabs.Settings : TenantSettingsTabs.Members
-                      }
-                    />
-                  }
-                />
-                <Route path={TenantSettingsTabs.Settings} element={<TenantBasicSettings />} />
-                <Route path={`${TenantSettingsTabs.Members}/*`} element={<TenantMembers />} />
-                <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
-                {!isDevTenant && canManageTenant && (
-                  <>
-                    <Route path={TenantSettingsTabs.Subscription} element={<Subscription />} />
-                    <Route path={TenantSettingsTabs.BillingHistory} element={<BillingHistory />} />
-                  </>
-                )}
-              </Route>
-            )}
-            {isCloud && isDevFeaturesEnabled && (
-              <Route path="customize-jwt">
-                <Route index element={<CustomizeJwt />} />
-                <Route path=":tokenType/:action" element={<CustomizeJwtDetails />} />
-              </Route>
-            )}
-          </Routes>
+          {routes}
         </div>
       </OverlayScrollbar>
     </div>
diff --git a/packages/console/src/hooks/use-console-routes/index.tsx b/packages/console/src/hooks/use-console-routes/index.tsx
new file mode 100644
index 00000000000..3acac0eabfe
--- /dev/null
+++ b/packages/console/src/hooks/use-console-routes/index.tsx
@@ -0,0 +1,292 @@
+import { condArray } from '@silverhand/essentials';
+import { useContext, useMemo } from 'react';
+import { Navigate, type RouteObject, useRoutes } from 'react-router-dom';
+
+import {
+  ApplicationDetailsTabs,
+  ConnectorsTabs,
+  EnterpriseSsoDetailsTabs,
+  OrganizationTemplateTabs,
+  RoleDetailsTabs,
+  TenantSettingsTabs,
+  UserDetailsTabs,
+  WebhookDetailsTabs,
+} from '@/consts';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import ApiResourceDetails from '@/pages/ApiResourceDetails';
+import ApiResources from '@/pages/ApiResources';
+import ApplicationDetails from '@/pages/ApplicationDetails';
+import Applications from '@/pages/Applications';
+import AuditLogDetails from '@/pages/AuditLogDetails';
+import AuditLogs from '@/pages/AuditLogs';
+import ConnectorDetails from '@/pages/ConnectorDetails';
+import Connectors from '@/pages/Connectors';
+import CustomizeJwt from '@/pages/CustomizeJwt';
+import CustomizeJwtDetails from '@/pages/CustomizeJwtDetails';
+import Dashboard from '@/pages/Dashboard';
+import EnterpriseSsoConnectors from '@/pages/EnterpriseSso';
+import EnterpriseSsoConnectorDetails from '@/pages/EnterpriseSsoDetails';
+import GetStarted from '@/pages/GetStarted';
+import Mfa from '@/pages/Mfa';
+import NotFound from '@/pages/NotFound';
+import OrganizationDetails from '@/pages/OrganizationDetails';
+import OrganizationRoleDetails from '@/pages/OrganizationRoleDetails';
+import OrganizationTemplate from '@/pages/OrganizationTemplate';
+import OrganizationPermissions from '@/pages/OrganizationTemplate/OrganizationPermissions';
+import OrganizationRoles from '@/pages/OrganizationTemplate/OrganizationRoles';
+import Organizations from '@/pages/Organizations';
+import OrganizationGuide from '@/pages/Organizations/Guide';
+import Profile from '@/pages/Profile';
+import ChangePasswordModal from '@/pages/Profile/containers/ChangePasswordModal';
+import LinkEmailModal from '@/pages/Profile/containers/LinkEmailModal';
+import VerificationCodeModal from '@/pages/Profile/containers/VerificationCodeModal';
+import VerifyPasswordModal from '@/pages/Profile/containers/VerifyPasswordModal';
+import RoleDetails from '@/pages/RoleDetails';
+import RoleApplications from '@/pages/RoleDetails/RoleApplications';
+import RolePermissions from '@/pages/RoleDetails/RolePermissions';
+import RoleSettings from '@/pages/RoleDetails/RoleSettings';
+import RoleUsers from '@/pages/RoleDetails/RoleUsers';
+import Roles from '@/pages/Roles';
+import SignInExperience from '@/pages/SignInExperience';
+import { SignInExperienceTab } from '@/pages/SignInExperience/types';
+import SigningKeys from '@/pages/SigningKeys';
+import TenantSettings from '@/pages/TenantSettings';
+import BillingHistory from '@/pages/TenantSettings/BillingHistory';
+import Subscription from '@/pages/TenantSettings/Subscription';
+import TenantBasicSettings from '@/pages/TenantSettings/TenantBasicSettings';
+import TenantDomainSettings from '@/pages/TenantSettings/TenantDomainSettings';
+import TenantMembers from '@/pages/TenantSettings/TenantMembers';
+import UserDetails from '@/pages/UserDetails';
+import UserLogs from '@/pages/UserDetails/UserLogs';
+import UserOrganizations from '@/pages/UserDetails/UserOrganizations';
+import UserRoles from '@/pages/UserDetails/UserRoles';
+import UserSettings from '@/pages/UserDetails/UserSettings';
+import Users from '@/pages/Users';
+import WebhookDetails from '@/pages/WebhookDetails';
+import WebhookLogs from '@/pages/WebhookDetails/WebhookLogs';
+import WebhookSettings from '@/pages/WebhookDetails/WebhookSettings';
+import Webhooks from '@/pages/Webhooks';
+
+export const useConsoleRoutes = () => {
+  const { isDevTenant } = useContext(TenantsContext);
+  const { canManageTenant } = useCurrentTenantScopes();
+
+  const routeObjects: RouteObject[] = useMemo(
+    () =>
+      condArray(
+        { path: '*', element: <NotFound /> },
+        { path: 'get-started', element: <GetStarted /> },
+        { path: 'dashboard', element: <Dashboard /> },
+        {
+          path: 'applications',
+          children: [
+            { index: true, element: <Applications /> },
+            {
+              path: 'third-party-applications',
+              element: <Applications tab="thirdPartyApplications" />,
+            },
+            { path: 'create', element: <Applications /> },
+            { path: ':id/guide/:guideId', element: <ApplicationDetails /> },
+            {
+              path: ':id',
+              children: [
+                { index: true, element: <Navigate replace to={ApplicationDetailsTabs.Settings} /> },
+                { path: ':tab', element: <ApplicationDetails /> },
+              ],
+            },
+            { path: `:appId/${ApplicationDetailsTabs.Logs}/:logId`, element: <AuditLogDetails /> },
+          ],
+        },
+        {
+          path: 'api-resources',
+          children: [
+            { index: true, element: <ApiResources /> },
+            { path: 'create', element: <ApiResources /> },
+            { path: ':id/guide/:guideId', element: <ApiResourceDetails /> },
+            { path: ':id/*', element: <ApiResourceDetails /> },
+          ],
+        },
+        {
+          path: 'sign-in-experience',
+          children: [
+            { index: true, element: <Navigate replace to={SignInExperienceTab.Branding} /> },
+            { path: ':tab', element: <SignInExperience /> },
+          ],
+        },
+        { path: 'mfa', element: <Mfa /> },
+        {
+          path: 'connectors',
+          children: [
+            { index: true, element: <Navigate replace to={ConnectorsTabs.Passwordless} /> },
+            { path: ':tab', element: <Connectors /> },
+            { path: ':tab/create/:createType', element: <Connectors /> },
+            { path: ':tab/guide/:factoryId', element: <Connectors /> },
+            { path: ':tab/:connectorId', element: <ConnectorDetails /> },
+          ],
+        },
+        {
+          path: 'enterprise-sso',
+          children: [
+            { index: true, element: <EnterpriseSsoConnectors /> },
+            { path: 'create', element: <EnterpriseSsoConnectors /> },
+            {
+              path: ':ssoConnectorId',
+              children: [
+                {
+                  index: true,
+                  element: <Navigate replace to={EnterpriseSsoDetailsTabs.Connection} />,
+                },
+                { path: ':tab', element: <EnterpriseSsoConnectorDetails /> },
+              ],
+            },
+          ],
+        },
+        {
+          path: 'webhooks',
+          children: [
+            { index: true, element: <Webhooks /> },
+            { path: 'create', element: <Webhooks /> },
+            {
+              path: ':id',
+              element: <WebhookDetails />,
+              children: [
+                { index: true, element: <Navigate replace to={WebhookDetailsTabs.Settings} /> },
+                { path: WebhookDetailsTabs.Settings, element: <WebhookSettings /> },
+                { path: WebhookDetailsTabs.RecentRequests, element: <WebhookLogs /> },
+              ],
+            },
+            {
+              path: `:hookId/${WebhookDetailsTabs.RecentRequests}/:logId`,
+              element: <AuditLogDetails />,
+            },
+          ],
+        },
+        {
+          path: 'users',
+          children: [
+            { index: true, element: <Users /> },
+            { path: 'create', element: <Users /> },
+            {
+              path: ':id',
+              element: <UserDetails />,
+              children: [
+                { index: true, element: <Navigate replace to={UserDetailsTabs.Settings} /> },
+                { path: UserDetailsTabs.Settings, element: <UserSettings /> },
+                { path: UserDetailsTabs.Roles, element: <UserRoles /> },
+                { path: UserDetailsTabs.Logs, element: <UserLogs /> },
+                { path: UserDetailsTabs.Organizations, element: <UserOrganizations /> },
+              ],
+            },
+            { path: `:userId/${UserDetailsTabs.Logs}/:logId`, element: <AuditLogDetails /> },
+          ],
+        },
+        {
+          path: 'audit-logs',
+          children: [
+            { index: true, element: <AuditLogs /> },
+            { path: ':logId', element: <AuditLogDetails /> },
+          ],
+        },
+        {
+          path: 'roles',
+          children: [
+            { index: true, element: <Roles /> },
+            { path: 'create', element: <Roles /> },
+            {
+              path: ':id',
+              element: <RoleDetails />,
+              children: [
+                { index: true, element: <Navigate replace to={RoleDetailsTabs.Settings} /> },
+                { path: RoleDetailsTabs.Settings, element: <RoleSettings /> },
+                { path: RoleDetailsTabs.Permissions, element: <RolePermissions /> },
+                { path: RoleDetailsTabs.Users, element: <RoleUsers /> },
+                { path: RoleDetailsTabs.M2mApps, element: <RoleApplications /> },
+              ],
+            },
+          ],
+        },
+        isDevFeaturesEnabled && [
+          {
+            path: 'organization-template',
+            element: <OrganizationTemplate />,
+            children: [
+              {
+                index: true,
+                element: <Navigate replace to={OrganizationTemplateTabs.OrganizationRoles} />,
+              },
+              { path: OrganizationTemplateTabs.OrganizationRoles, element: <OrganizationRoles /> },
+              {
+                path: OrganizationTemplateTabs.OrganizationPermissions,
+                element: <OrganizationPermissions />,
+              },
+            ],
+          },
+          {
+            path: `organization-template/${OrganizationTemplateTabs.OrganizationRoles}/:id/*`,
+            element: <OrganizationRoleDetails />,
+          },
+        ],
+        {
+          path: 'organizations',
+          children: condArray(
+            { index: true, element: <Organizations /> },
+            { path: 'create', element: <Organizations /> },
+            !isDevFeaturesEnabled && {
+              path: 'template',
+              element: <Organizations tab="template" />,
+            },
+            { path: ':id/*', element: <OrganizationDetails /> }
+          ),
+        },
+        !isDevFeaturesEnabled && { path: 'organization-guide/*', element: <OrganizationGuide /> },
+        {
+          path: 'profile',
+          children: [
+            { index: true, element: <Profile /> },
+            { path: 'verify-password', element: <VerifyPasswordModal /> },
+            { path: 'change-password', element: <ChangePasswordModal /> },
+            { path: 'link-email', element: <LinkEmailModal /> },
+            { path: 'verification-code', element: <VerificationCodeModal /> },
+          ],
+        },
+        { path: 'signing-keys', element: <SigningKeys /> },
+        isCloud && {
+          path: 'tenant-settings',
+          element: <TenantSettings />,
+          children: condArray(
+            {
+              index: true,
+              element: (
+                <Navigate
+                  replace
+                  to={canManageTenant ? TenantSettingsTabs.Settings : TenantSettingsTabs.Members}
+                />
+              ),
+            },
+            { path: TenantSettingsTabs.Settings, element: <TenantBasicSettings /> },
+            { path: `${TenantSettingsTabs.Members}/*`, element: <TenantMembers /> },
+            { path: TenantSettingsTabs.Domains, element: <TenantDomainSettings /> },
+            !isDevTenant &&
+              canManageTenant && [
+                { path: TenantSettingsTabs.Subscription, element: <Subscription /> },
+                { path: TenantSettingsTabs.BillingHistory, element: <BillingHistory /> },
+              ]
+          ),
+        },
+        isCloud &&
+          isDevFeaturesEnabled && {
+            path: 'customize-jwt',
+            children: [
+              { index: true, element: <CustomizeJwt /> },
+              { path: ':tokenType/:action', element: <CustomizeJwtDetails /> },
+            ],
+          }
+      ),
+    [canManageTenant, isDevTenant]
+  );
+  const routes = useRoutes(routeObjects);
+
+  return routes;
+};