From 66c75cb0afe71a8302e49d9e3807ae63e64e7ab9 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Thu, 17 Aug 2023 00:46:32 -0500 Subject: [PATCH] refactor(console): settings tabs in application details page (#4357) --- packages/console/src/consts/page-tabs.ts | 5 +++ .../src/containers/ConsoleContent/index.tsx | 12 +++++- .../components/AdvancedSettings.tsx | 14 +++---- .../components/Settings.tsx | 40 ++++++++----------- .../src/pages/ApplicationDetails/index.tsx | 27 +++++++++---- .../src/pages/ApplicationDetails/types.ts | 6 +++ .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + .../admin-console/application-details.ts | 1 + 21 files changed, 79 insertions(+), 40 deletions(-) create mode 100644 packages/console/src/pages/ApplicationDetails/types.ts diff --git a/packages/console/src/consts/page-tabs.ts b/packages/console/src/consts/page-tabs.ts index a056addb4..65ce50a0b 100644 --- a/packages/console/src/consts/page-tabs.ts +++ b/packages/console/src/consts/page-tabs.ts @@ -1,3 +1,8 @@ +export enum ApplicationDetailsTabs { + Settings = 'settings', + AdvancedSettings = 'advanced-settings', +} + export enum ApiResourceDetailsTabs { Settings = 'settings', Permissions = 'permissions', diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index 9bf603381..af8760924 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -8,6 +8,7 @@ import { RoleDetailsTabs, WebhookDetailsTabs, TenantSettingsTabs, + ApplicationDetailsTabs, } from '@/consts'; import { isCloud } from '@/consts/env'; import OverlayScrollbar from '@/ds-components/OverlayScrollbar'; @@ -16,6 +17,8 @@ import ApiResourcePermissions from '@/pages/ApiResourceDetails/ApiResourcePermis import ApiResourceSettings from '@/pages/ApiResourceDetails/ApiResourceSettings'; import ApiResources from '@/pages/ApiResources'; import ApplicationDetails from '@/pages/ApplicationDetails'; +import AdvancedSettings from '@/pages/ApplicationDetails/components/AdvancedSettings'; +import Settings from '@/pages/ApplicationDetails/components/Settings'; import Applications from '@/pages/Applications'; import AuditLogDetails from '@/pages/AuditLogDetails'; import AuditLogs from '@/pages/AuditLogs'; @@ -71,7 +74,14 @@ function ConsoleContent() { } /> } /> } /> - } /> + }> + } /> + } /> + } + /> + } /> diff --git a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx index 521fe1af8..a96c6e2a3 100644 --- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx @@ -1,6 +1,5 @@ import { type Application, - type SnakeCaseOidcConfig, ApplicationType, customClientMetadataGuard, DomainStatus, @@ -9,6 +8,7 @@ import { appendPath } from '@silverhand/essentials'; import { useContext } from 'react'; import { useFormContext } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; +import { useOutletContext } from 'react-router-dom'; import FormCard from '@/components/FormCard'; import { openIdProviderConfigPath } from '@/consts/oidc'; @@ -23,13 +23,13 @@ import useCustomDomain from '@/hooks/use-custom-domain'; import { applyDomain } from '@/utils/domain'; import * as styles from '../index.module.scss'; +import { type ApplicationDetailsOutletContext } from '../types'; -type Props = { - applicationType: ApplicationType; - oidcConfig: SnakeCaseOidcConfig; -}; - -function AdvancedSettings({ applicationType, oidcConfig }: Props) { +function AdvancedSettings() { + const { + app: { type: applicationType }, + oidcConfig, + } = useOutletContext(); const { tenantEndpoint } = useContext(AppDataContext); const { register, diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx index 26fdaf694..5567ae64e 100644 --- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx @@ -1,10 +1,13 @@ import type { Application } from '@logto/schemas'; import { ApplicationType, validateRedirectUrl } from '@logto/schemas'; +import { useContext } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; +import { useOutletContext } from 'react-router-dom'; import FormCard from '@/components/FormCard'; import MultiTextInputField from '@/components/MultiTextInputField'; +import { AppDataContext } from '@/contexts/AppDataProvider'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import FormField from '@/ds-components/FormField'; import type { MultiTextInputRule } from '@/ds-components/MultiTextInput/types'; @@ -17,12 +20,12 @@ import TextLink from '@/ds-components/TextLink'; import useDocumentationUrl from '@/hooks/use-documentation-url'; import * as styles from '../index.module.scss'; +import { type ApplicationDetailsOutletContext } from '../types'; -type Props = { - data: Application; -}; +function Settings() { + const { tenantEndpoint } = useContext(AppDataContext); + const { app: data } = useOutletContext(); -function Settings({ data }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { getDocumentationUrl } = useDocumentationUrl(); const { @@ -54,32 +57,21 @@ function Settings({ data }: Props) { placeholder={t('application_details.application_name_placeholder')} /> + {tenantEndpoint && ( + + + + )} - ( - - ), - }} - > - {t('application_details.application_id_tip')} - - )} - > - - {[ApplicationType.Traditional, ApplicationType.MachineToMachine].includes( applicationType ) && ( diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx index fa374a5ff..bb7f9573b 100644 --- a/packages/console/src/pages/ApplicationDetails/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/index.tsx @@ -9,7 +9,7 @@ import { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; -import { useParams } from 'react-router-dom'; +import { Outlet, useParams } from 'react-router-dom'; import useSWR from 'swr'; import Delete from '@/assets/icons/delete.svg'; @@ -20,6 +20,7 @@ import DetailsPage from '@/components/DetailsPage'; import Drawer from '@/components/Drawer'; import PageMeta from '@/components/PageMeta'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; +import { ApplicationDetailsTabs } from '@/consts'; import { openIdProviderConfigPath } from '@/consts/oidc'; import ActionMenu, { ActionMenuItem } from '@/ds-components/ActionMenu'; import Button from '@/ds-components/Button'; @@ -30,17 +31,15 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav'; import Tag from '@/ds-components/Tag'; import type { RequestError } from '@/hooks/use-api'; import useApi from '@/hooks/use-api'; -import useDocumentationUrl from '@/hooks/use-documentation-url'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import { applicationTypeI18nKey } from '@/types/applications'; import { trySubmitSafe } from '@/utils/form'; import GuideModal from '../Applications/components/Guide/GuideModal'; -import AdvancedSettings from './components/AdvancedSettings'; import GuideDrawer from './components/GuideDrawer'; -import Settings from './components/Settings'; import * as styles from './index.module.scss'; +import { type ApplicationDetailsOutletContext } from './types'; const mapToUriFormatArrays = (value?: string[]) => value?.filter(Boolean).map((uri) => decodeURIComponent(uri)); @@ -72,7 +71,6 @@ function ApplicationDetails() { const formMethods = useForm({ defaultValues: { customClientMetadata: customClientMetadataDefault }, }); - const { getDocumentationUrl } = useDocumentationUrl(); const { handleSubmit, @@ -215,7 +213,14 @@ function ApplicationDetails() { - {t('general.settings_nav')} + + {t('application_details.settings')} + + + {t('application_details.advanced_settings')} + - - + diff --git a/packages/console/src/pages/ApplicationDetails/types.ts b/packages/console/src/pages/ApplicationDetails/types.ts new file mode 100644 index 000000000..67601ddfa --- /dev/null +++ b/packages/console/src/pages/ApplicationDetails/types.ts @@ -0,0 +1,6 @@ +import { type SnakeCaseOidcConfig, type Application } from '@logto/schemas'; + +export type ApplicationDetailsOutletContext = { + app: Application; + oidcConfig: SnakeCaseOidcConfig; +}; diff --git a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts index 225f9e881..0d48308dc 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Autorisierungs-Endpoint', authorization_endpoint_tip: 'Der Endpoint, der für die Authentifizierung und Authorisierung via OpenID Connect verwendet wird.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'App ID', application_id_tip: 'Die eindeutige Anwendungs-ID, die normalerweise von Logto generiert wird. Es steht auch für "client_id" in OpenID Connect.', diff --git a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts index 8d28981f9..e996d3226 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Authorization Endpoint', authorization_endpoint_tip: "The endpoint to perform authentication and authorization. It's used for OpenID Connect Authentication.", + logto_endpoint: 'Logto endpoint', application_id: 'App ID', application_id_tip: 'The unique application identifier normally generated by Logto. It also stands for “client_id” in OpenID Connect.', diff --git a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts index cef980325..424a0e8b6 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Endpoint de Autorización', authorization_endpoint_tip: 'El endpoint para la autenticación y autorización. Se utiliza para OpenID Connect Autenticación.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'ID de Aplicación', application_id_tip: 'El identificador de aplicación único normalmente generado por Logto. También se conoce como “client_id” en OpenID Connect.', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts index c508e0c4d..0734970e2 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: "Point de terminaison d'autorisation", authorization_endpoint_tip: "Le point de terminaison pour effectuer l'authentification et l'autorisation. Il est utilisé pour l'authentification OpenID Connect.", + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: "ID de l'application", application_id_tip: "L'identifiant d'application unique généralement généré par Logto. Il signifie également client_id dans OpenID Connect.", diff --git a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts index c63a94c89..1365543ac 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Endpoint di autorizzazione', authorization_endpoint_tip: "L'endpoint per effettuare l'autenticazione e l'autorizzazione. Viene utilizzato per la connessione OpenID autenticazione.", + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'App ID', application_id_tip: 'L\'identificatore univoco dell\'applicazione generato normalmente da Logto. Sta anche per "client_id" in OpenID Connect.', diff --git a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts index 0f6622c5c..d99d02953 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: '認可エンドポイント', authorization_endpoint_tip: '認証と認可を実行するエンドポイントです。OpenID Connectの認証に使用されます。', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'アプリID', application_id_tip: '通常Logtoによって生成される一意のアプリケーション識別子です。OpenID Connectでは「client_id」とも呼ばれます。', diff --git a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts index b71e087c3..0c96e69a1 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: '인증 Endpoint', authorization_endpoint_tip: '인증 및 권한 부여를 진행할 End-Point예요. OpenID Connect 인증에서 사용되던 값이에요.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: '앱 ID', application_id_tip: '일반적으로 Logto에서 생성되는 고유한 응용 프로그램 식별자예요. OpenID Connect에서 "client_id"의 약자이기도 해요.', diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts index 7a1d1f575..16edabb1c 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Endpoint autoryzacji', authorization_endpoint_tip: 'Endpoint wykorzystywany do autentykacji i autoryzacji. Używany jest dla OpenID Connect Autentykacji.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'ID aplikacji', application_id_tip: 'Unikalny identyfikator aplikacji, który jest zwykle generowany przez Logto. Oznacza również „client_id” w OpenID Connect.', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts index 08b2a24e4..037bfaaba 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Endpoint de autorização', authorization_endpoint_tip: 'O endpoint para executar autenticação e autorização. É usado para autenticação OpenID Connect.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'ID do aplicativo', application_id_tip: 'O identificador exclusivo do aplicativo normalmente gerado pela Logto. Também é conhecido como “client_id” em OpenID Connect.', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts index 514da134b..077096c87 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Endpoint de autorização', authorization_endpoint_tip: 'O endpoint para realizar a autenticação e autorização. É usado para autenticação OpenID Connect.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'ID da aplicação', application_id_tip: 'O identificador exclusivo da aplicação normalmente gerado pelo Logto. Também representa “client_id” no OpenID Connect.', diff --git a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts index ce5babc31..5636dc370 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Конечная точка авторизации', authorization_endpoint_tip: 'Конечная точка для аутентификации и авторизации. Он используется для аутентификации OpenID Connect .', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'ID приложения', application_id_tip: 'Уникальный идентификатор приложения, обычно генерируемый Logto. Он также означает « client_id » в OpenID Connect.', diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts index 0173db9c8..ed5dd5745 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts @@ -16,6 +16,7 @@ const application_details = { authorization_endpoint: 'Yetkilendirme bitiş noktası', authorization_endpoint_tip: 'Kimlik doğrulama ve yetkilendirme gerçekleştirmek için bitiş noktası. OpenID Connect Authentication için kullanılır.', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: 'Uygulama IDsi', application_id_tip: 'Logto tarafından normalde oluşturulan benzersiz uygulama tanımlayıcısıdır. Ayrıca OpenID Connect "client_id" anlamına gelir.', diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts index 7108d5d15..a661ef3e4 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts @@ -14,6 +14,7 @@ const application_details = { config_endpoint: 'OpenID Provider 配置端点', authorization_endpoint: '授权端点', authorization_endpoint_tip: '进行鉴权与授权的端点。用于 OpenID Connect 中的 鉴权 流程。', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: '应用 ID', application_id_tip: '应用的唯一标识，通常由 Logto 生成。等价于 OpenID Connect 中的 client_id。', diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts index 692864e9c..fd22ab273 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts @@ -14,6 +14,7 @@ const application_details = { config_endpoint: 'OpenID Provider 配置端點', authorization_endpoint: '授權端點', authorization_endpoint_tip: '進行驗證和授權的端點。用於 OpenID Connect 中的 驗證 流程。', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: '應用程式 ID', application_id_tip: '應用程式的唯一標識，通常由 Logto 生成。等價於 OpenID Connect 中的 client_id 。', diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts index 56efe6ea1..145d9b85f 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts @@ -14,6 +14,7 @@ const application_details = { config_endpoint: 'OpenID Provider 配置端點', authorization_endpoint: '授權端點', authorization_endpoint_tip: '進行驗證與授權的端點。用於 OpenID Connect 中的 驗證 流程。', + logto_endpoint: 'Logto endpoint', // UNTRANSLATED application_id: '應用程式 ID', application_id_tip: '應用程式的唯一標識，通常由 Logto 生成。相當於 OpenID Connect 中的 client_id。',