From 58ac58eebaa3049c051625cacb9e3aae87f8463e Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Sun, 17 Sep 2023 16:44:07 +0800 Subject: [PATCH] refactor(console,phrases,schemas): add intro notice for management api resource --- .../console/src/hooks/use-user-preferences.ts | 1 + .../index.module.scss | 5 +++ .../ManagementApiIntroductionNotice/index.tsx | 43 +++++++++++++++++++ .../src/pages/ApiResourceDetails/index.tsx | 10 ++++- .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ .../admin-console/api-resource-details.ts | 5 +++ packages/schemas/src/seeds/management-api.ts | 9 ++++ 20 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.module.scss create mode 100644 packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.tsx diff --git a/packages/console/src/hooks/use-user-preferences.ts b/packages/console/src/hooks/use-user-preferences.ts index 3d8e24b14..654c32002 100644 --- a/packages/console/src/hooks/use-user-preferences.ts +++ b/packages/console/src/hooks/use-user-preferences.ts @@ -17,6 +17,7 @@ const userPreferencesGuard = z.object({ experienceNoticeConfirmed: z.boolean().optional(), getStartedHidden: z.boolean().optional(), connectorSieNoticeConfirmed: z.boolean().optional(), + managementApiIntroductionNoticeConfirmed: z.boolean().optional(), }); type UserPreferences = z.infer; diff --git a/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.module.scss b/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.module.scss new file mode 100644 index 000000000..8bf910fd9 --- /dev/null +++ b/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.module.scss @@ -0,0 +1,5 @@ +@use '@/scss/underscore' as _; + +.notice { + margin: _.unit(4) 0 0; +} diff --git a/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.tsx b/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.tsx new file mode 100644 index 000000000..edc00dd26 --- /dev/null +++ b/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.tsx @@ -0,0 +1,43 @@ +import { Trans, useTranslation } from 'react-i18next'; + +import InlineNotification from '@/ds-components/InlineNotification'; +import TextLink from '@/ds-components/TextLink'; +import useDocumentationUrl from '@/hooks/use-documentation-url'; +import useUserPreferences from '@/hooks/use-user-preferences'; + +import * as styles from './index.module.scss'; + +function ManagementApiIntroductionNotice() { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { getDocumentationUrl } = useDocumentationUrl(); + const { + data: { managementApiIntroductionNoticeConfirmed }, + update, + } = useUserPreferences(); + + if (managementApiIntroductionNoticeConfirmed) { + return null; + } + + return ( + { + void update({ managementApiIntroductionNoticeConfirmed: true }); + }} + > + , + }} + > + {t('api_resource_details.management_api_notice', { + link: t('api_resource_details.management_api_notice_link_text'), + })} + + + ); +} + +export default ManagementApiIntroductionNotice; diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx index 941b9a796..08682636b 100644 --- a/packages/console/src/pages/ApiResourceDetails/index.tsx +++ b/packages/console/src/pages/ApiResourceDetails/index.tsx @@ -1,8 +1,8 @@ import { withAppInsights } from '@logto/app-insights/react'; import type { Resource } from '@logto/schemas'; -import { isManagementApi, Theme } from '@logto/schemas'; +import { isManagementApi, Theme, isManagementApiIndicator } from '@logto/schemas'; import classNames from 'classnames'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; import { Outlet, useLocation, useParams } from 'react-router-dom'; @@ -16,6 +16,7 @@ import DetailsPage from '@/components/DetailsPage'; import Drawer from '@/components/Drawer'; import PageMeta from '@/components/PageMeta'; import { ApiResourceDetailsTabs } from '@/consts/page-tabs'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import ActionMenu, { ActionMenuItem } from '@/ds-components/ActionMenu'; import Button from '@/ds-components/Button'; import Card from '@/ds-components/Card'; @@ -30,6 +31,7 @@ import useTheme from '@/hooks/use-theme'; import GuideDrawer from './components/GuideDrawer'; import GuideModal from './components/GuideModal'; +import ManagementApiIntroductionNotice from './components/ManagementApiIntroductionNotice'; import * as styles from './index.module.scss'; import { type ApiResourceDetailsOutletContext } from './types'; @@ -37,6 +39,7 @@ function ApiResourceDetails() { const { pathname } = useLocation(); const { id, guideId } = useParams(); const { navigate, match } = useTenantPathname(); + const { currentTenantId } = useContext(TenantsContext); const isGuideView = !!id && !!guideId && match(`/api-resources/${id}/guide/${guideId}`); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -101,6 +104,9 @@ function ApiResourceDetails() { onRetry={mutate} > + {data?.indicator && isManagementApiIndicator(data.indicator, currentTenantId) && ( + + )} {data && ( <> diff --git a/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts index bae342630..8bbc79a7e 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API Ressourcendetails', back_to_api_resources: 'Zurück zu API Ressourcen', settings_tab: 'Einstellungen', diff --git a/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts index ade69064d..80745632d 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API Resource details', back_to_api_resources: 'Back to API resources', settings_tab: 'Settings', diff --git a/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts index a62a10014..38a8054d9 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/es/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Detalles del recurso API', back_to_api_resources: 'Volver a los recursos de API', settings_tab: 'Configuración', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts index 57ae10742..7e45e2e57 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Détails de la ressource API', back_to_api_resources: 'Retour aux ressources API', settings_tab: 'Paramètres', diff --git a/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts index c7e5970ed..5cc00a994 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/it/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Dettagli delle risorse API', back_to_api_resources: 'Torna alle risorse API', settings_tab: 'Impostazioni', diff --git a/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts index e736e419b..9e99893ea 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/ja/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API リソースの詳細 ', back_to_api_resources: 'APIリソースに戻る', settings_tab: '設定', diff --git a/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts index b73c02cdb..ef25f95a3 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API 리소스 세부 정보', back_to_api_resources: 'API 리소스로 돌아가기', settings_tab: '설정', diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts index cba38ac43..8576daa5d 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Szczegóły zasobów API', back_to_api_resources: 'Powróć do zasobów API', settings_tab: 'Ustawienia', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts index c7e701bc6..579799324 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Detalhes do Recurso da API', back_to_api_resources: 'Voltar para os recursos da API', settings_tab: 'Configurações', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts index b3003e37d..aede2f5e4 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Detalhes do recurso da API', back_to_api_resources: 'Voltar aos recursos da API', settings_tab: 'Configurações', diff --git a/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts index 3a5f9877b..c3def8e75 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/ru/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'Детали ресурса API', back_to_api_resources: 'Вернуться к Ресурсам API', settings_tab: 'Настройки', diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts index f124bd019..e67653219 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API Kaynak detayları', back_to_api_resources: 'API Kaynaklarına geri dön', settings_tab: 'Ayarlar', diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts index 406155fbd..402994ae3 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API 资源详情', back_to_api_resources: '返回 API 资源', settings_tab: '设置', diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts index 46f94f756..85c6d0d93 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API 資源詳情', back_to_api_resources: '返回 API 資源', settings_tab: '設置', diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts index 078d687eb..2bd591aab 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts +++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/api-resource-details.ts @@ -1,4 +1,9 @@ const api_resource_details = { + /** UNTRANSLATED */ + management_api_notice: + 'This API represents Logto entity and can not be modified or deleted. You can use management API for a wide range of identity-related tasks. {{link}}', + /** UNTRANSLATED */ + management_api_notice_link_text: 'Learn more', page_title: 'API 資源詳情', back_to_api_resources: '返回 API 資源', settings_tab: '設定', diff --git a/packages/schemas/src/seeds/management-api.ts b/packages/schemas/src/seeds/management-api.ts index e99e066d1..afac79b35 100644 --- a/packages/schemas/src/seeds/management-api.ts +++ b/packages/schemas/src/seeds/management-api.ts @@ -73,6 +73,15 @@ export function getManagementApiResourceIndicator(tenantId: string, path = 'api' return `https://${tenantId}.logto.app/${path}`; } +export const isManagementApiIndicator = (resourceIndicator: string, tenantId?: string) => { + const regex = new RegExp( + tenantId ? `https://${tenantId}.logto.app/.+` : 'https://\\w+.logto.app/.+', + 'g' + ); + + return regex.test(resourceIndicator); +}; + export const getManagementApiAdminName = (tenantId: TenantId) => `${tenantId}:${AdminTenantRole.Admin}` as const;