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。',