feat(console): add tenant settings page (#3975)

2024-12-16 20:26:19 -05:00 · 2023-06-06 16:39:15 +08:00 · 2023-06-06 16:39:15 +08:00 · df8dc69f69
commit df8dc69f69
parent 92f6f9f371
9 changed files with 117 additions and 2 deletions
--- a/packages/console/src/assets/images/gear.svg
+++ b/packages/console/src/assets/images/gear.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7668 7.9583L16.1918 7.4333L16.9334 5.94996C17.0086 5.7947 17.0337 5.61993 17.0054 5.44977C16.977 5.27961 16.8966 5.12245 16.7751 4.99996L15.0001 3.22496C14.8769 3.1017 14.7183 3.02013 14.5464 2.99173C14.3745 2.96333 14.198 2.98953 14.0418 3.06663L12.5584 3.8083L12.0334 2.2333C11.978 2.06912 11.8727 1.92632 11.7323 1.82475C11.5919 1.72319 11.4234 1.66792 11.2501 1.66663H8.75008C8.57538 1.66618 8.40495 1.72064 8.26289 1.82233C8.12083 1.92402 8.01432 2.06778 7.95842 2.2333L7.43342 3.8083L5.95008 3.06663C5.79482 2.99145 5.62005 2.9663 5.44989 2.99466C5.27973 3.02302 5.12257 3.10349 5.00008 3.22496L3.22508 4.99996C3.10182 5.1231 3.02026 5.28177 2.99186 5.45368C2.96345 5.62558 2.98965 5.80205 3.06675 5.9583L3.80842 7.44163L2.23342 7.96663C2.06924 8.02208 1.92644 8.12732 1.82487 8.26772C1.72331 8.40812 1.66804 8.57668 1.66675 8.74996V11.25C1.6663 11.4247 1.72077 11.5951 1.82245 11.7372C1.92414 11.8792 2.0679 11.9857 2.23342 12.0416L3.80842 12.5666L3.06675 14.05C2.99157 14.2052 2.96642 14.38 2.99478 14.5502C3.02314 14.7203 3.10361 14.8775 3.22508 15L5.00008 16.775C5.12322 16.8982 5.2819 16.9798 5.4538 17.0082C5.6257 17.0366 5.80218 17.0104 5.95842 16.9333L7.44175 16.1916L7.96675 17.7666C8.02266 17.9321 8.12917 18.0759 8.27123 18.1776C8.41329 18.2793 8.58371 18.3337 8.75842 18.3333H11.2584C11.4331 18.3337 11.6035 18.2793 11.7456 18.1776C11.8877 18.0759 11.9942 17.9321 12.0501 17.7666L12.5751 16.1916L14.0584 16.9333C14.2127 17.0066 14.3857 17.0307 14.5542 17.0024C14.7226 16.9741 14.8783 16.8947 15.0001 16.775L16.7751 15C16.8983 14.8768 16.9799 14.7182 17.0083 14.5463C17.0367 14.3743 17.0105 14.1979 16.9334 14.0416L16.1918 12.5583L17.7668 12.0333C17.9309 11.9778 18.0737 11.8726 18.1753 11.7322C18.2769 11.5918 18.3321 11.4232 18.3334 11.25V8.74996C18.3339 8.57526 18.2794 8.40483 18.1777 8.26277C18.076 8.12071 17.9323 8.0142 17.7668 7.9583ZM16.6668 10.65L15.6668 10.9833C15.4368 11.0579 15.2258 11.1816 15.0485 11.3459C14.8711 11.5102 14.7316 11.711 14.6396 11.9346C14.5477 12.1582 14.5054 12.3991 14.5159 12.6406C14.5263 12.8821 14.5892 13.1185 14.7001 13.3333L15.1751 14.2833L14.2584 15.2L13.3334 14.7C13.1197 14.5935 12.8856 14.5342 12.647 14.526C12.4084 14.5179 12.1708 14.5611 11.9503 14.6528C11.7299 14.7445 11.5317 14.8824 11.3692 15.0573C11.2067 15.2322 11.0836 15.44 11.0084 15.6666L10.6751 16.6666H9.35008L9.01675 15.6666C8.94216 15.4367 8.81844 15.2257 8.65417 15.0483C8.48989 14.871 8.28901 14.7315 8.06543 14.6395C7.84186 14.5475 7.60096 14.5053 7.35944 14.5158C7.11792 14.5262 6.88156 14.5891 6.66675 14.7L5.71675 15.175L4.80008 14.2583L5.30008 13.3333C5.411 13.1185 5.47385 12.8821 5.48429 12.6406C5.49473 12.3991 5.4525 12.1582 5.36053 11.9346C5.26857 11.711 5.12907 11.5102 4.95171 11.3459C4.77434 11.1816 4.56337 11.0579 4.33342 10.9833L3.33342 10.65V9.34996L4.33342 9.01663C4.56337 8.94204 4.77434 8.81832 4.95171 8.65404C5.12907 8.48977 5.26857 8.28888 5.36053 8.06531C5.4525 7.84174 5.49473 7.60084 5.48429 7.35932C5.47385 7.11779 5.411 6.88143 5.30008 6.66663L4.82508 5.74163L5.74175 4.82496L6.66675 5.29996C6.88156 5.41087 7.11792 5.47373 7.35944 5.48417C7.60096 5.49461 7.84186 5.45238 8.06543 5.36041C8.28901 5.26845 8.48989 5.12894 8.65417 4.95158C8.81844 4.77422 8.94216 4.56325 9.01675 4.3333L9.35008 3.3333H10.6501L10.9834 4.3333C11.058 4.56325 11.1817 4.77422 11.346 4.95158C11.5103 5.12894 11.7112 5.26845 11.9347 5.36041C12.1583 5.45238 12.3992 5.49461 12.6407 5.48417C12.8823 5.47373 13.1186 5.41087 13.3334 5.29996L14.2834 4.82496L15.2001 5.74163L14.7001 6.66663C14.5936 6.88033 14.5343 7.11442 14.5262 7.35304C14.518 7.59165 14.5613 7.82924 14.6529 8.0497C14.7446 8.27016 14.8825 8.46835 15.0574 8.63086C15.2324 8.79337 15.4402 8.9164 15.6668 8.99163L16.6668 9.32496V10.65ZM10.0001 6.66663C9.34081 6.66663 8.69635 6.86213 8.14818 7.2284C7.60002 7.59467 7.17278 8.11526 6.92049 8.72435C6.66819 9.33344 6.60218 10.0037 6.7308 10.6503C6.85942 11.2969 7.17689 11.8908 7.64306 12.357C8.10924 12.8232 8.70318 13.1406 9.34978 13.2692C9.99639 13.3979 10.6666 13.3319 11.2757 13.0796C11.8848 12.8273 12.4054 12.4 12.7716 11.8519C13.1379 11.3037 13.3334 10.6592 13.3334 9.99996C13.3334 9.11591 12.9822 8.26806 12.3571 7.64294C11.732 7.01782 10.8841 6.66663 10.0001 6.66663ZM10.0001 11.6666C9.67045 11.6666 9.34822 11.5689 9.07413 11.3857C8.80005 11.2026 8.58643 10.9423 8.46028 10.6378C8.33414 10.3332 8.30113 9.99811 8.36544 9.67481C8.42975 9.35151 8.58849 9.05454 8.82157 8.82145C9.05466 8.58836 9.35163 8.42963 9.67493 8.36532C9.99824 8.30101 10.3333 8.33402 10.6379 8.46016C10.9424 8.58631 11.2027 8.79993 11.3859 9.07401C11.569 9.34809 11.6668 9.67033 11.6668 9.99996C11.6668 10.442 11.4912 10.8659 11.1786 11.1785C10.866 11.491 10.4421 11.6666 10.0001 11.6666Z" fill="currentColor"/>
+</svg>
--- a/packages/console/src/consts/page-tabs.ts
+++ b/packages/console/src/consts/page-tabs.ts
@ -30,3 +30,8 @@ export enum RoleDetailsTabs {
  Permissions = 'permissions',
  Users = 'users',
 }
+
+export enum TenantSettingsTabs {
+  Settings = 'settings',
+  Domains = 'domains',
+}
--- a/packages/console/src/consts/tenant-settings.ts
+++ b/packages/console/src/consts/tenant-settings.ts
@ -0,0 +1,12 @@
+import { getEnv } from '@silverhand/essentials';
+
+import { isCloud } from './cloud';
+
+const isProduction = getEnv('NODE_ENV') === 'production';
+
+export const isTenantBasicSettingsReady = !isProduction;
+
+export const isTenantDomainSettingsReady = !isProduction;
+
+export const isTenantSettingsSectionEnabled =
+  isCloud && (isTenantBasicSettingsReady || isTenantDomainSettingsReady);
--- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
@ -6,12 +6,14 @@ import BarGraph from '@/assets/images/bar-graph.svg';
 import Bolt from '@/assets/images/bolt.svg';
 import Box from '@/assets/images/box.svg';
 import Connection from '@/assets/images/connection.svg';
+import Gear from '@/assets/images/gear.svg';
 import Hook from '@/assets/images/hook.svg';
 import List from '@/assets/images/list.svg';
 import UserProfile from '@/assets/images/profile.svg';
 import ResourceIcon from '@/assets/images/resource.svg';
 import Role from '@/assets/images/role.svg';
 import Web from '@/assets/images/web.svg';
+import { isTenantSettingsSectionEnabled } from '@/consts/tenant-settings';
 import useUserPreferences from '@/hooks/use-user-preferences';

 type SidebarItem = {
@ -24,6 +26,7 @@ type SidebarItem = {

 type SidebarSection = {
  title: TFuncKey<'translation', 'admin_console.tab_sections'>;
+  isHidden?: boolean;
  items: SidebarItem[];
 };

@ -45,7 +48,7 @@ export const useSidebarMenuItems = (): {
    data: { getStartedHidden },
  } = useUserPreferences();

-  const sections: SidebarSection[] = [
+  const allSections: SidebarSection[] = [
    {
      title: 'overview',
      items: [
@ -107,7 +110,19 @@ export const useSidebarMenuItems = (): {
        },
      ],
    },
+    {
+      title: 'tenant',
+      isHidden: !isTenantSettingsSectionEnabled,
+      items: [
+        {
+          Icon: Gear,
+          title: 'tenant_settings',
+        },
+      ],
+    },
  ];

-  return { sections, firstItem: findFirstItem(sections) };
+  const enabledSections = allSections.filter((section) => !section.isHidden);
+
+  return { sections: enabledSections, firstItem: findFirstItem(enabledSections) };
 };
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@ -8,7 +8,13 @@ import {
  UserDetailsTabs,
  RoleDetailsTabs,
  WebhookDetailsTabs,
+  TenantSettingsTabs,
 } from '@/consts';
+import {
+  isTenantBasicSettingsReady,
+  isTenantDomainSettingsReady,
+  isTenantSettingsSectionEnabled,
+} from '@/consts/tenant-settings';
 import ApiResourceDetails from '@/pages/ApiResourceDetails';
 import ApiResourcePermissions from '@/pages/ApiResourceDetails/ApiResourcePermissions';
 import ApiResourceSettings from '@/pages/ApiResourceDetails/ApiResourceSettings';
@ -33,6 +39,9 @@ import RoleSettings from '@/pages/RoleDetails/RoleSettings';
 import RoleUsers from '@/pages/RoleDetails/RoleUsers';
 import Roles from '@/pages/Roles';
 import SignInExperience from '@/pages/SignInExperience';
+import TenantSettings from '@/pages/TenantSettings';
+import TenantBasicSettings from '@/pages/TenantSettings/tabs/TenantBasicSettings';
+import TenantDomainSettings from '@/pages/TenantSettings/tabs/TenantDomainSettings';
 import UserDetails from '@/pages/UserDetails';
 import UserLogs from '@/pages/UserDetails/UserLogs';
 import UserRoles from '@/pages/UserDetails/UserRoles';
@ -137,6 +146,24 @@ function ConsoleContent() {
              <Route path="link-email" element={<LinkEmailModal />} />
              <Route path="verification-code" element={<VerificationCodeModal />} />
            </Route>
+            {isTenantSettingsSectionEnabled && (
+              <Route path="tenant-settings" element={<TenantSettings />}>
+                {isTenantBasicSettingsReady && (
+                  <>
+                    <Route index element={<Navigate replace to={TenantSettingsTabs.Settings} />} />
+                    <Route path={TenantSettingsTabs.Settings} element={<TenantBasicSettings />} />
+                  </>
+                )}
+                {isTenantDomainSettingsReady && (
+                  <>
+                    {!isTenantBasicSettingsReady && (
+                      <Route index element={<Navigate replace to={TenantSettingsTabs.Domains} />} />
+                    )}
+                    <Route path={TenantSettingsTabs.Domains} element={<TenantDomainSettings />} />
+                  </>
+                )}
+              </Route>
+            )}
          </Routes>
        </div>
      </OverlayScrollbar>
--- a/packages/console/src/pages/TenantSettings/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/index.module.scss
@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  overflow-y: auto;
+
+  > *:not(:first-child) {
+    margin-top: _.unit(4);
+  }
+}
--- a/packages/console/src/pages/TenantSettings/index.tsx
+++ b/packages/console/src/pages/TenantSettings/index.tsx
@ -0,0 +1,32 @@
+import { Outlet } from 'react-router-dom';
+
+import CardTitle from '@/components/CardTitle';
+import DynamicT from '@/components/DynamicT';
+import TabNav, { TabNavItem } from '@/components/TabNav';
+import { TenantSettingsTabs } from '@/consts';
+import { isTenantBasicSettingsReady, isTenantDomainSettingsReady } from '@/consts/tenant-settings';
+
+import * as styles from './index.module.scss';
+
+function TenantSettings() {
+  return (
+    <div className={styles.container}>
+      <CardTitle title="tenant_settings.title" subtitle="tenant_settings.description" />
+      <TabNav>
+        {isTenantBasicSettingsReady && (
+          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
+            <DynamicT forKey="tenant_settings.tabs.settings" />
+          </TabNavItem>
+        )}
+        {isTenantDomainSettingsReady && (
+          <TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
+            <DynamicT forKey="tenant_settings.tabs.domains" />
+          </TabNavItem>
+        )}
+      </TabNav>
+      <Outlet />
+    </div>
+  );
+}
+
+export default TenantSettings;
--- a/packages/console/src/pages/TenantSettings/tabs/TenantBasicSettings/index.tsx
+++ b/packages/console/src/pages/TenantSettings/tabs/TenantBasicSettings/index.tsx
@ -0,0 +1,6 @@
+function TenantBasicSettings() {
+  // TODO @darcyYe implement this page
+  return <div>BasicSettings (WIP)</div>;
+}
+
+export default TenantBasicSettings;
--- a/packages/console/src/pages/TenantSettings/tabs/TenantDomainSettings/index.tsx
+++ b/packages/console/src/pages/TenantSettings/tabs/TenantDomainSettings/index.tsx
@ -0,0 +1,6 @@
+function TenantDomainSettings() {
+  // TODO @xiaoyijun implement this page
+  return <div>TenantDomainSettings (WIP)</div>;
+}
+
+export default TenantDomainSettings;