refactor(console,phrases,schemas): add intro notice for management api resource

2024-12-16 20:26:19 -05:00 · 2023-09-17 16:44:07 +08:00 · 2023-09-17 16:44:07 +08:00 · 58ac58eeba
commit 58ac58eeba
parent 8366af442a
20 changed files with 141 additions and 2 deletions
--- 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<typeof userPreferencesGuard>;
--- a/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.module.scss
+++ 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;
+}
--- a/packages/console/src/pages/ApiResourceDetails/components/ManagementApiIntroductionNotice/index.tsx
+++ 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 (
+    <InlineNotification
+      action="general.got_it"
+      className={styles.notice}
+      onClick={() => {
+        void update({ managementApiIntroductionNoticeConfirmed: true });
+      }}
+    >
+      <Trans
+        components={{
+          a: <TextLink to={getDocumentationUrl('/docs/recipes/interact-with-management-api')} />,
+        }}
+      >
+        {t('api_resource_details.management_api_notice', {
+          link: t('api_resource_details.management_api_notice_link_text'),
+        })}
+      </Trans>
+    </InlineNotification>
+  );
+}
+
+export default ManagementApiIntroductionNotice;
--- 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}
    >
      <PageMeta titleKey="api_resource_details.page_title" />
+      {data?.indicator && isManagementApiIndicator(data.indicator, currentTenantId) && (
+        <ManagementApiIntroductionNotice />
+      )}
      {data && (
        <>
          <Card className={styles.header}>
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API Ressourcendetails',
  back_to_api_resources: 'Zurück zu API Ressourcen',
  settings_tab: 'Einstellungen',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API Resource details',
  back_to_api_resources: 'Back to API resources',
  settings_tab: 'Settings',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API リソースの詳細 ',
  back_to_api_resources: 'APIリソースに戻る',
  settings_tab: '設定',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API 리소스 세부 정보',
  back_to_api_resources: 'API 리소스로 돌아가기',
  settings_tab: '설정',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'Детали ресурса API',
  back_to_api_resources: 'Вернуться к Ресурсам API',
  settings_tab: 'Настройки',
--- 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. <a>{{link}}</a>',
+  /** 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',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API 资源详情',
  back_to_api_resources: '返回 API 资源',
  settings_tab: '设置',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API 資源詳情',
  back_to_api_resources: '返回 API 資源',
  settings_tab: '設置',
--- 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. <a>{{link}}</a>',
+  /** UNTRANSLATED */
+  management_api_notice_link_text: 'Learn more',
  page_title: 'API 資源詳情',
  back_to_api_resources: '返回 API 資源',
  settings_tab: '設定',
--- 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 extends string>(tenantId: TenantId) =>
  `${tenantId}:${AdminTenantRole.Admin}` as const;