feat(console): roles page (#2820)

2025-02-17 22:04:19 -05:00 · 2023-01-05 16:22:45 +08:00 · 2023-01-05 16:22:45 +08:00 · 5786d8156f
commit 5786d8156f
parent cb03d64e12
36 changed files with 215 additions and 6 deletions
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@ -25,6 +25,7 @@ import Connectors from '@/pages/Connectors';
 import Dashboard from '@/pages/Dashboard';
 import GetStarted from '@/pages/GetStarted';
 import NotFound from '@/pages/NotFound';
+import Roles from '@/pages/Roles';
 import Settings from '@/pages/Settings';
 import SignInExperience from '@/pages/SignInExperience';
 import UserDetails from '@/pages/UserDetails';
@ -50,6 +51,7 @@ const Main = () => {
            <Route element={<AppContent />}>
              <Route path="*" element={<NotFound />} />
              <Route path="get-started" element={<GetStarted />} />
+              <Route path="dashboard" element={<Dashboard />} />
              <Route path="applications">
                <Route index element={<Applications />} />
                <Route path="create" element={<Applications />} />
@ -60,6 +62,10 @@ const Main = () => {
                <Route path="create" element={<ApiResources />} />
                <Route path=":id" element={<ApiResourceDetails />} />
              </Route>
+              <Route path="sign-in-experience">
+                <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
+                <Route path=":tab" element={<SignInExperience />} />
+              </Route>
              <Route path="connectors">
                <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
                <Route path=":tab" element={<Connectors />} />
@ -73,16 +79,14 @@ const Main = () => {
                <Route path=":userId/logs" element={<UserDetails />} />
                <Route path=":userId/logs/:logId" element={<AuditLogDetails />} />
              </Route>
-              <Route path="sign-in-experience">
-                <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
-                <Route path=":tab" element={<SignInExperience />} />
-              </Route>
-              <Route path="settings" element={<Settings />} />
              <Route path="audit-logs">
                <Route index element={<AuditLogs />} />
                <Route path=":logId" element={<AuditLogDetails />} />
              </Route>
-              <Route path="dashboard" element={<Dashboard />} />
+              <Route path="roles">
+                <Route index element={<Roles />} />
+              </Route>
+              <Route path="settings" element={<Settings />} />
            </Route>
          </Routes>
        </AppBoundary>
--- a/packages/console/src/assets/images/role.svg
+++ b/packages/console/src/assets/images/role.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.3417 10.2334C12.8692 9.66689 13.1664 8.924 13.1751 8.15002C13.1751 7.31459 12.8432 6.51337 12.2525 5.92263C11.6617 5.33189 10.8605 5.00002 10.0251 5.00002C9.18965 5.00002 8.38844 5.33189 7.7977 5.92263C7.20696 6.51337 6.87508 7.31459 6.87508 8.15002C6.88378 8.924 7.18093 9.66689 7.70842 10.2334C6.97396 10.5991 6.34193 11.1416 5.86918 11.8122C5.39642 12.4828 5.09777 13.2604 5.00008 14.075C4.97577 14.296 5.04025 14.5177 5.17934 14.6911C5.31843 14.8646 5.52073 14.9757 5.74175 15C5.96276 15.0243 6.18438 14.9599 6.35785 14.8208C6.53132 14.6817 6.64244 14.4794 6.66675 14.2584C6.76619 13.451 7.15745 12.7078 7.76682 12.1689C8.37619 11.63 9.1616 11.3325 9.97508 11.3325C10.7886 11.3325 11.574 11.63 12.1833 12.1689C12.7927 12.7078 13.184 13.451 13.2834 14.2584C13.3066 14.472 13.4114 14.6685 13.576 14.8067C13.7406 14.9449 13.9523 15.0142 14.1667 15H14.2584C14.4769 14.9749 14.6765 14.8644 14.8139 14.6927C14.9512 14.521 15.0152 14.302 14.9917 14.0834C14.9013 13.273 14.6121 12.4975 14.1498 11.8259C13.6875 11.1542 13.0664 10.6072 12.3417 10.2334ZM10.0001 9.63335C9.70671 9.63335 9.41992 9.54636 9.17599 9.38337C8.93205 9.22038 8.74193 8.98871 8.62966 8.71767C8.51739 8.44662 8.48802 8.14838 8.54525 7.86064C8.60248 7.5729 8.74376 7.30859 8.95121 7.10115C9.15865 6.8937 9.42296 6.75242 9.7107 6.69519C9.99844 6.63795 10.2967 6.66733 10.5677 6.7796C10.8388 6.89187 11.0704 7.08199 11.2334 7.32592C11.3964 7.56986 11.4834 7.85664 11.4834 8.15002C11.4834 8.54343 11.3271 8.92072 11.049 9.1989C10.7708 9.47708 10.3935 9.63335 10.0001 9.63335ZM15.8334 1.66669H4.16675C3.50371 1.66669 2.86782 1.93008 2.39898 2.39892C1.93014 2.86776 1.66675 3.50365 1.66675 4.16669V15.8334C1.66675 16.4964 1.93014 17.1323 2.39898 17.6011C2.86782 18.07 3.50371 18.3334 4.16675 18.3334H15.8334C16.4965 18.3334 17.1323 18.07 17.6012 17.6011C18.07 17.1323 18.3334 16.4964 18.3334 15.8334V4.16669C18.3334 3.50365 18.07 2.86776 17.6012 2.39892C17.1323 1.93008 16.4965 1.66669 15.8334 1.66669ZM16.6667 15.8334C16.6667 16.0544 16.579 16.2663 16.4227 16.4226C16.2664 16.5789 16.0544 16.6667 15.8334 16.6667H4.16675C3.94573 16.6667 3.73377 16.5789 3.57749 16.4226C3.42121 16.2663 3.33341 16.0544 3.33341 15.8334V4.16669C3.33341 3.94567 3.42121 3.73371 3.57749 3.57743C3.73377 3.42115 3.94573 3.33335 4.16675 3.33335H15.8334C16.0544 3.33335 16.2664 3.42115 16.4227 3.57743C16.579 3.73371 16.6667 3.94567 16.6667 4.16669V15.8334Z"
+    fill="currentColor" />
+</svg>
--- a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/hook.tsx
@ -2,6 +2,7 @@ import type { Optional } from '@silverhand/essentials';
 import type { FC, ReactNode } from 'react';
 import type { TFuncKey } from 'react-i18next';

+import Role from '@/assets/images/role.svg';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useUserPreferences from '@/hooks/use-user-preferences';

@ -98,6 +99,15 @@ export const useSidebarMenuItems = (): {
        },
      ],
    },
+    {
+      title: 'access_control',
+      items: [
+        {
+          Icon: Role,
+          title: 'roles',
+        },
+      ],
+    },
    {
      title: 'help_and_support',
      items: [
--- a/packages/console/src/pages/Roles/index.tsx
+++ b/packages/console/src/pages/Roles/index.tsx
@ -0,0 +1,78 @@
+import type { Role } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Plus from '@/assets/images/plus.svg';
+import Button from '@/components/Button';
+import CardTitle from '@/components/CardTitle';
+import ItemPreview from '@/components/ItemPreview';
+import Table from '@/components/Table';
+import type { RequestError } from '@/hooks/use-api';
+import * as pageStyles from '@/scss/resources.module.scss';
+
+const rolesPathname = '/roles';
+const createRolePathname = `${rolesPathname}/create`;
+const buildDetailsPathname = (id: string) => `${rolesPathname}/${id}`;
+
+const Roles = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const navigate = useNavigate();
+  const { data: roles, error, mutate } = useSWR<Role[], RequestError>(`/api/roles`);
+  const isLoading = !roles && !error;
+
+  return (
+    <div className={pageStyles.container}>
+      <div className={pageStyles.headline}>
+        <CardTitle title="roles.title" subtitle="roles.subtitle" />
+        <Button
+          icon={<Plus />}
+          title="roles.create"
+          type="primary"
+          size="large"
+          onClick={() => {
+            navigate(createRolePathname);
+          }}
+        />
+      </div>
+      <Table
+        className={pageStyles.table}
+        rowGroups={[{ key: 'roles', data: roles }]}
+        rowIndexKey="id"
+        isLoading={isLoading}
+        errorMessage={error?.body?.message ?? error?.message}
+        columns={[
+          {
+            title: t('roles.role_name'),
+            dataIndex: 'name',
+            colSpan: 6,
+            render: ({ id, name }) => <ItemPreview title={name} to={buildDetailsPathname(id)} />,
+          },
+          {
+            title: t('roles.role_description'),
+            dataIndex: 'description',
+            colSpan: 10,
+            render: ({ description }) => description,
+          },
+        ]}
+        rowClickHandler={({ id }) => {
+          navigate(buildDetailsPathname(id));
+        }}
+        placeholder={{
+          content: (
+            <Button
+              title="roles.create"
+              type="outline"
+              onClick={() => {
+                navigate(createRolePathname);
+              }}
+            />
+          ),
+        }}
+        onRetry={async () => mutate(undefined, true)}
+      />
+    </div>
+  );
+};
+
+export default Roles;
--- a/packages/phrases/src/locales/de/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/de/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: 'Übersicht',
  resource_management: 'Ressourcenverwaltung',
  user_management: 'Benutzerverwaltung',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: 'Hilfe und Support',
 };

--- a/packages/phrases/src/locales/de/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Connectoren',
  users: 'Benutzerverwaltung',
  audit_logs: 'Audit Logs',
+  roles: 'Roles', // UNTRANSLATED
  docs: 'Dokumentation',
  contact_us: 'Kontakt',
  settings: 'Einstellungen',
--- a/packages/phrases/src/locales/en/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/en/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles',
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.',
+  create: 'Add Roles',
+  role_name: 'Role',
+  role_description: 'Description',
+};
+
+export default roles;
--- a/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: 'Overview',
  resource_management: 'Resource Management',
  user_management: 'User Management',
+  access_control: 'Access Control',
  help_and_support: 'Help and Support',
 };

--- a/packages/phrases/src/locales/en/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Connectors',
  users: 'User Management',
  audit_logs: 'Audit Logs',
+  roles: 'Roles',
  docs: 'Docs',
  contact_us: 'Contact Us',
  settings: 'Settings',
--- a/packages/phrases/src/locales/fr/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: "Vue d'ensemble",
  resource_management: 'Gestion des ressources',
  user_management: 'Gestion des utilisateurs',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: 'Aide et support',
 };

--- a/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Connecteurs',
  users: 'Gestion des utilisateurs',
  audit_logs: "Journaux d'audit",
+  roles: 'Roles', // UNTRANSLATED
  docs: 'Documentation',
  contact_us: 'Contactez nous',
  settings: 'Paramètres',
--- a/packages/phrases/src/locales/ko/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: '살펴보기',
  resource_management: '리소스 관리',
  user_management: '사용자 관리',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: '고객센터',
 };

--- a/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: '연동',
  users: '사용자 관리',
  audit_logs: 'Audit 기록',
+  roles: 'Roles', // UNTRANSLATED
  docs: '문서',
  contact_us: '연락처',
  settings: '설정',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: 'Visão geral',
  resource_management: 'Recursos',
  user_management: 'Usuários',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: 'Ajuda e suporte',
 };

--- a/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Conectores',
  users: 'Usuários',
  audit_logs: 'Logs',
+  roles: 'Roles', // UNTRANSLATED
  docs: 'Documentação',
  contact_us: 'Contate-nos',
  settings: 'Configurações',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: 'Vista geral',
  resource_management: 'Gestão de recursos',
  user_management: 'Gestão de utilizadores',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: 'Ajuda e suporte',
 };

--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Conectores',
  users: 'Gestão de utilizadores',
  audit_logs: 'Registos de auditoria',
+  roles: 'Roles', // UNTRANSLATED
  docs: 'Documentação',
  contact_us: 'Contate-nos',
  settings: 'Definições',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: 'Genel Bakış',
  resource_management: 'Kaynak Yönetimi',
  user_management: 'Kullanıcı Yönetimi',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: 'Yardım ve Destek',
 };

--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: 'Connectors',
  users: 'Kullanıcı Yönetimi',
  audit_logs: 'Denetim Kayıtları',
+  roles: 'Roles', // UNTRANSLATED
  docs: 'Dökümanlar',
  contact_us: 'Bize Ulaşın',
  settings: 'Ayarlar',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts
@ -11,6 +11,7 @@ import general from './general.js';
 import get_started from './get-started.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
+import roles from './roles.js';
 import session_expired from './session-expired.js';
 import settings from './settings.js';
 import sign_in_exp from './sign-in-exp.js';
@ -47,6 +48,7 @@ const admin_console = {
  log_details,
  session_expired,
  welcome,
+  roles,
 };

 export default admin_console;
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts
@ -0,0 +1,10 @@
+const roles = {
+  title: 'Roles', // UNTRANSLATED
+  subtitle:
+    'Manage user identities including creating users, editing user information, viewing user logs, password resets and deleting users.', // UNTRANSLATED
+  create: 'Add Roles', // UNTRANSLATED
+  role_name: 'Role', // UNTRANSLATED
+  role_description: 'Description', // UNTRANSLATED
+};
+
+export default roles;
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/tab-sections.ts
@ -2,6 +2,7 @@ const tab_sections = {
  overview: '概览',
  resource_management: '资源管理',
  user_management: '用户管理',
+  access_control: 'Access Control', // UNTRANSLATED
  help_and_support: '帮助与支持',
 };

--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/tabs.ts
@ -7,6 +7,7 @@ const tabs = {
  connectors: '连接器',
  users: '用户管理',
  audit_logs: '审计日志',
+  roles: 'Roles', // UNTRANSLATED
  docs: '文档',
  contact_us: '联系我们',
  settings: '设置',