refactor(console): update organization guide and tenant member routers

packages/console/src/hooks/use-console-routes/index.tsx

@@ -1,13 +1,18 @@
 import { condArray } from '@silverhand/essentials';
 import { useMemo } from 'react';
-import { type RouteObject } from 'react-router-dom';
+import { Navigate, type RouteObject } from 'react-router-dom';
 
 import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import Dashboard from '@/pages/Dashboard';
 import GetStarted from '@/pages/GetStarted';
 import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
 import OrganizationGuide from '@/pages/Organizations/Guide';
+import Introduction from '@/pages/Organizations/Guide/Introduction';
+import OrganizationInfo from '@/pages/Organizations/Guide/OrganizationInfo';
+import OrganizationPermissions from '@/pages/Organizations/Guide/OrganizationPermissions';
+import OrganizationRoles from '@/pages/Organizations/Guide/OrganizationRoles';
+import { steps } from '@/pages/Organizations/Guide/const';
 import SigningKeys from '@/pages/SigningKeys';
 
 import { apiResources } from './routes/api-resources';
@@ -46,7 +51,17 @@ export const useConsoleRoutes = () => {
  roles,
  isDevFeaturesEnabled && organizationTemplate,
  organizations,
- !isDevFeaturesEnabled && { path: 'organization-guide/*', element: <OrganizationGuide /> },
+ !isDevFeaturesEnabled && {
+ path: 'organization-guide/*',
+ element: <OrganizationGuide />,
+ children: [
+ { index: true, element: <Navigate replace to={steps.introduction} /> },
+ { path: steps.introduction, element: <Introduction /> },
+ { path: steps.permissions, element: <OrganizationPermissions /> },
+ { path: steps.roles, element: <OrganizationRoles /> },
+ { path: steps.organizationInfo, element: <OrganizationInfo /> },
+ ],
+ },
  profile,
  { path: 'signing-keys', element: <SigningKeys /> },
  isCloud && tenantSettings,

packages/console/src/hooks/use-console-routes/routes/tenant-settings.tsx

@@ -5,17 +5,20 @@ import { Navigate, type RouteObject } from 'react-router-dom';
 import { TenantSettingsTabs } from '@/consts';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import NotFound from '@/pages/NotFound';
 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 Invitations from '@/pages/TenantSettings/TenantMembers/Invitations';
+import Members from '@/pages/TenantSettings/TenantMembers/Members';
 
 export const useTenantSettings = () => {
  const { isDevTenant } = useContext(TenantsContext);
  const {
- access: { canManageTenant },
+ access: { canInviteMember, canManageTenant },
  } = useCurrentTenantScopes();
 
  const tenantSettings: RouteObject = useMemo(
@@ -33,7 +36,15 @@ export const useTenantSettings = () => {
  ),
  },
  { path: TenantSettingsTabs.Settings, element: <TenantBasicSettings /> },
- { path: `${TenantSettingsTabs.Members}/*`, element: <TenantMembers /> },
+ {
+ path: `${TenantSettingsTabs.Members}/*`,
+ element: <TenantMembers />,
+ children: [
+ { path: '*', element: <NotFound /> },
+ { index: true, element: <Members /> },
+ ...condArray(canInviteMember && [{ path: 'invitations', element: <Invitations /> }]),
+ ],
+ },
  { path: TenantSettingsTabs.Domains, element: <TenantDomainSettings /> },
  !isDevTenant &&
  canManageTenant && [
@@ -42,7 +53,7 @@ export const useTenantSettings = () => {
  ]
  ),
  }),
- [canManageTenant, isDevTenant]
+ [canInviteMember, canManageTenant, isDevTenant]
  );
 
  return tenantSettings;

packages/console/src/pages/Organizations/Guide/index.tsx

@@ -1,18 +1,11 @@
 import { useCallback } from 'react';
 import Modal from 'react-modal';
-// FIXME: @charles
-// eslint-disable-next-line no-restricted-imports
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import DsModalHeader from '@/ds-components/ModalHeader';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import * as modalStyles from '@/scss/modal.module.scss';
 
-import Introduction from './Introduction';
-import OrganizationInfo from './OrganizationInfo';
-import OrganizationPermissions from './OrganizationPermissions';
-import OrganizationRoles from './OrganizationRoles';
-import { steps } from './const';
 import * as styles from './index.module.scss';
 
 function Guide() {
@@ -30,13 +23,7 @@ function Guide() {
  subtitle="organizations.guide.subtitle"
  onClose={onClose}
  />
- <Routes>
- <Route index element={<Navigate replace to={steps.introduction} />} />
- <Route path={steps.introduction} element={<Introduction />} />
- <Route path={steps.permissions} element={<OrganizationPermissions />} />
- <Route path={steps.roles} element={<OrganizationRoles />} />
- <Route path={steps.organizationInfo} element={<OrganizationInfo />} />
- </Routes>
+ <Outlet />
  </div>
  </Modal>
  );

packages/console/src/pages/TenantSettings/TenantMembers/index.tsx

@@ -1,8 +1,6 @@
 import classNames from 'classnames';
 import { useContext, useState } from 'react';
-// FIXME: @charles
-// eslint-disable-next-line no-restricted-imports
-import { Route, Routes } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import useSWRMutation from 'swr/mutation';
 
 import InvitationIcon from '@/assets/icons/invitation.svg';
@@ -16,16 +14,11 @@ import Button from '@/ds-components/Button';
 import Spacer from '@/ds-components/Spacer';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
-import NotFound from '@/pages/NotFound';
 
-import Invitations from './Invitations';
 import InviteMemberModal from './InviteMemberModal';
-import Members from './Members';
 import useTenantMembersUsage from './hooks';
 import * as styles from './index.module.scss';
 
-const invitationsRoute = 'invitations';
-
 function TenantMembers() {
  const { hasTenantMembersSurpassedLimit } = useTenantMembersUsage();
  const { navigate, match } = useTenantPathname();
@@ -34,9 +27,7 @@ function TenantMembers() {
  access: { canInviteMember },
  } = useCurrentTenantScopes();
 
- const isInvitationTab = match(
- `/tenant-settings/${TenantSettingsTabs.Members}/${invitationsRoute}`
- );
+ const isInvitationTab = match(`/tenant-settings/${TenantSettingsTabs.Members}/invitations`);
 
  const { currentTenantId } = useContext(TenantsContext);
  const cloudApi = useAuthedCloudApi();
@@ -84,11 +75,7 @@ function TenantMembers() {
  />
  </div>
  )}
- <Routes>
- <Route path="*" element={<NotFound />} />
- <Route index element={<Members />} />
- {canInviteMember && <Route path={invitationsRoute} element={<Invitations />} />}
- </Routes>
+ <Outlet />
  {canInviteMember && (
  <InviteMemberModal
  isOpen={showInviteModal}