From 6230775a4b7838551bb279f6762082d2fa9ee461 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 5 Jan 2023 16:34:01 +0800 Subject: [PATCH] feat(console): role details settings page (#2821) --- packages/console/src/App.tsx | 2 + .../pages/RoleDetails/RoleSettings/index.tsx | 64 ++++++++++++++++ .../src/pages/RoleDetails/index.module.scss | 38 ++++++++++ .../console/src/pages/RoleDetails/index.tsx | 75 +++++++++++++++++++ .../de/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../en/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../fr/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../ko/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../pt-br/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../pt-pt/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../tr-tr/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ .../zh-cn/translation/admin-console/index.ts | 2 + .../translation/admin-console/role-details.ts | 14 ++++ 20 files changed, 307 insertions(+) create mode 100644 packages/console/src/pages/RoleDetails/RoleSettings/index.tsx create mode 100644 packages/console/src/pages/RoleDetails/index.module.scss create mode 100644 packages/console/src/pages/RoleDetails/index.tsx create mode 100644 packages/phrases/src/locales/de/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/en/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/fr/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/ko/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts create mode 100644 packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index 225cd5e40..e0a25003b 100644 --- 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 RoleDetails from '@/pages/RoleDetails'; import Roles from '@/pages/Roles'; import Settings from '@/pages/Settings'; import SignInExperience from '@/pages/SignInExperience'; @@ -85,6 +86,7 @@ const Main = () => { } /> + } /> } /> diff --git a/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx new file mode 100644 index 000000000..c5402885d --- /dev/null +++ b/packages/console/src/pages/RoleDetails/RoleSettings/index.tsx @@ -0,0 +1,64 @@ +import type { Role } from '@logto/schemas'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import { useTranslation } from 'react-i18next'; + +import DetailsForm from '@/components/DetailsForm'; +import FormCard from '@/components/FormCard'; +import FormField from '@/components/FormField'; +import TextInput from '@/components/TextInput'; +import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; +import useApi from '@/hooks/use-api'; + +type Props = { + data: Role; + onRoleUpdated: (data: Role) => void; +}; + +const RoleSettings = ({ data, onRoleUpdated }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { + handleSubmit, + register, + reset, + formState: { isDirty, isSubmitting, errors }, + } = useForm({ + defaultValues: data, + }); + + const api = useApi(); + + const onSubmit = handleSubmit(async (formData) => { + if (isSubmitting) { + return; + } + + const updatedRole = await api.patch(`/api/roles/${data.id}`, { json: formData }).json(); + reset(updatedRole); + onRoleUpdated(updatedRole); + toast.success(t('general.saved')); + }); + + return ( + <> + + + + + + + + + + + + + ); +}; + +export default RoleSettings; diff --git a/packages/console/src/pages/RoleDetails/index.module.scss b/packages/console/src/pages/RoleDetails/index.module.scss new file mode 100644 index 000000000..6c0d00c26 --- /dev/null +++ b/packages/console/src/pages/RoleDetails/index.module.scss @@ -0,0 +1,38 @@ +@use '@/scss/underscore' as _; + +.container { + .backLink { + margin: _.unit(1) 0 0 _.unit(1); + user-select: none; + } + + .header { + display: flex; + justify-content: space-between; + align-items: center; + padding: _.unit(6) _.unit(8); + + .info { + .name { + font: var(--font-title-large); + color: var(--color-text); + } + + .meta { + display: flex; + align-items: center; + + .idText { + font: var(--font-label-large); + color: var(--color-text-secondary); + margin-right: _.unit(1); + } + } + } + + .moreIcon { + color: var(--color-text-secondary); + } + } +} + diff --git a/packages/console/src/pages/RoleDetails/index.tsx b/packages/console/src/pages/RoleDetails/index.tsx new file mode 100644 index 000000000..8eb7db30a --- /dev/null +++ b/packages/console/src/pages/RoleDetails/index.tsx @@ -0,0 +1,75 @@ +import type { Role } from '@logto/schemas'; +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; +import useSWR from 'swr'; + +import Back from '@/assets/images/back.svg'; +import Delete from '@/assets/images/delete.svg'; +import More from '@/assets/images/more.svg'; +import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu'; +import Card from '@/components/Card'; +import CopyToClipboard from '@/components/CopyToClipboard'; +import DetailsSkeleton from '@/components/DetailsSkeleton'; +import TabNav, { TabNavItem } from '@/components/TabNav'; +import TextLink from '@/components/TextLink'; +import type { RequestError } from '@/hooks/use-api'; +import * as detailsStyles from '@/scss/details.module.scss'; + +import RoleSettings from './RoleSettings'; +import * as styles from './index.module.scss'; + +const RoleDetails = () => { + const { id } = useParams(); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { data, error, mutate } = useSWR(id && `/api/roles/${id}`); + const isLoading = !data && !error; + + return ( +
+ } className={styles.backLink}> + {t('role_details.back_to_roles')} + + {isLoading && } + {!data && error &&
{`error occurred: ${error.body?.message ?? error.message}`}
} + {data && ( + <> + +
+
{data.name}
+
+
{t('role_details.identifier')}
+ +
+
+ , size: 'large' }} + title={t('general.more_options')} + > + } + type="danger" + onClick={() => { + // Todo:@xiaoyijun handle delete + }} + > + {t('general.delete')} + + +
+ + {t('role_details.settings_tab')} + + { + void mutate(data); + }} + /> + + )} +
+ ); +}; + +export default RoleDetails; diff --git a/packages/phrases/src/locales/de/translation/admin-console/index.ts b/packages/phrases/src/locales/de/translation/admin-console/index.ts index c4dc1ba62..f9a9ba927 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/de/translation/admin-console/role-details.ts b/packages/phrases/src/locales/de/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/de/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/en/translation/admin-console/index.ts b/packages/phrases/src/locales/en/translation/admin-console/index.ts index 09a18c0c5..3a7da49d0 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/en/translation/admin-console/role-details.ts b/packages/phrases/src/locales/en/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/en/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/index.ts b/packages/phrases/src/locales/fr/translation/admin-console/index.ts index 09a18c0c5..3a7da49d0 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/fr/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/index.ts b/packages/phrases/src/locales/ko/translation/admin-console/index.ts index e7efe2388..6ccf4f598 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/ko/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/index.ts index 783442e67..d394f02c2 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts index dc4df3b1f..119ff18a7 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts index 69b18a3a8..ef3819470 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts new file mode 100644 index 000000000..926070cf5 --- /dev/null +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', // UNTRANSLATED + identifier: 'Identifier', // UNTRANSLATED + settings_tab: 'Settings', // UNTRANSLATED + users_tab: 'Users', // UNTRANSLATED + permissions_tab: 'Permissions', // UNTRANSLATED + settings: 'Settings', // UNTRANSLATED + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', // UNTRANSLATED + field_description: 'Description', // UNTRANSLATED +}; + +export default role_details; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts index 00bad73aa..c91c6d24d 100644 --- 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 role_details from './role-details.js'; import roles from './roles.js'; import session_expired from './session-expired.js'; import settings from './settings.js'; @@ -49,6 +50,7 @@ const admin_console = { session_expired, welcome, roles, + role_details, }; export default admin_console; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts new file mode 100644 index 000000000..9ca835d19 --- /dev/null +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/role-details.ts @@ -0,0 +1,14 @@ +const role_details = { + back_to_roles: 'Back to Roles', + identifier: 'Identifier', + settings_tab: 'Settings', + users_tab: 'Users', + permissions_tab: 'Permissions', + settings: 'Settings', + settings_description: + 'It real sent your at. Amounted all shy set why followed declared. Repeated of endeavor mr position kindness offering ignorant so up. Simplicity are melancholy preference considered saw companions.', // UNTRANSLATED + field_name: 'Name', + field_description: 'Description', +}; + +export default role_details;