refactor(phrases,console): refactor the application details form (#5168)

* feat(console,phrases): add new third-party applicaiton to the guide library add new third-party applicaiton to the guide library * refactor(phrases,console): refactor the application details form refactor the application details form, merge advance settings to settings * fix(console): fix the application details page tab style fix the application details page tab container style * fix(test): fix rebase issue fix rebase issue
2025-01-06 20:40:08 -05:00 · 2024-01-05 13:02:27 +08:00 · 2024-01-05 13:02:27 +08:00 · 94943cb3c3
commit 94943cb3c3
parent 1c3ada0123
23 changed files with 491 additions and 274 deletions
--- a/packages/console/src/consts/page-tabs.ts
+++ b/packages/console/src/consts/page-tabs.ts
@ -1,6 +1,5 @@
 export enum ApplicationDetailsTabs {
  Settings = 'settings',
-  AdvancedSettings = 'advanced-settings',
  Roles = 'roles',
  Logs = 'logs',
 }
--- a/packages/console/src/ds-components/TabWrapper/index.tsx
+++ b/packages/console/src/ds-components/TabWrapper/index.tsx
@ -10,7 +10,11 @@ type Props = {
 };

 function TabWrapper({ isActive, className, children }: Props) {
-  return <div className={classNames(!isActive && styles.hide, className)}>{children}</div>;
+  return (
+    <div className={classNames(!isActive && styles.hide, className)} data-active={isActive}>
+      {children}
+    </div>
+  );
 }

 export default TabWrapper;
--- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
@ -1,175 +0,0 @@
-import {
-  type Application,
-  ApplicationType,
-  customClientMetadataGuard,
-  DomainStatus,
-  type SnakeCaseOidcConfig,
-} from '@logto/schemas';
-import { appendPath } from '@silverhand/essentials';
-import { useContext } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { Trans, useTranslation } from 'react-i18next';
-
-import FormCard from '@/components/FormCard';
-import { openIdProviderConfigPath } from '@/consts/oidc';
-import { AppDataContext } from '@/contexts/AppDataProvider';
-import CopyToClipboard from '@/ds-components/CopyToClipboard';
-import DynamicT from '@/ds-components/DynamicT';
-import FormField from '@/ds-components/FormField';
-import Switch from '@/ds-components/Switch';
-import TextInput from '@/ds-components/TextInput';
-import TextLink from '@/ds-components/TextLink';
-import useCustomDomain from '@/hooks/use-custom-domain';
-
-import * as styles from '../index.module.scss';
-
-type Props = {
-  app: Application;
-  oidcConfig: SnakeCaseOidcConfig;
-};
-
-function AdvancedSettings({ app: { type }, oidcConfig }: Props) {
-  const { tenantEndpoint } = useContext(AppDataContext);
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<Application & { isAdmin?: boolean }>();
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { minValue, maxValue } =
-    customClientMetadataGuard.shape.refreshTokenTtlInDays._def.innerType;
-  const minTtl = minValue ?? Number.NEGATIVE_INFINITY;
-  const maxTtl = maxValue ?? Number.POSITIVE_INFINITY;
-  const ttlErrorMessage = t('errors.number_should_be_between_inclusive', {
-    min: minTtl,
-    max: maxTtl,
-  });
-  const { data: customDomain, applyDomain: applyCustomDomain } = useCustomDomain();
-
-  return (
-    <FormCard
-      title="application_details.advanced_settings"
-      description="application_details.advanced_settings_description"
-      learnMoreLink={{
-        href: 'https://openid.net/specs/openid-connect-core-1_0.html#TokenEndpoint',
-        targetBlank: true,
-      }}
-    >
-      {tenantEndpoint && (
-        <FormField title="application_details.config_endpoint">
-          <CopyToClipboard
-            isFullWidth
-            value={applyCustomDomain(appendPath(tenantEndpoint, openIdProviderConfigPath).href)}
-            variant="border"
-          />
-        </FormField>
-      )}
-      <FormField
-        title="application_details.authorization_endpoint"
-        tip={(closeTipHandler) => (
-          <Trans
-            components={{
-              a: (
-                <TextLink
-                  targetBlank
-                  href="https://openid.net/specs/openid-connect-core-1_0.html#Authentication"
-                  onClick={closeTipHandler}
-                />
-              ),
-            }}
-          >
-            {t('application_details.authorization_endpoint_tip')}
-          </Trans>
-        )}
-      >
-        <CopyToClipboard
-          isFullWidth
-          value={applyCustomDomain(oidcConfig.authorization_endpoint)}
-          variant="border"
-        />
-      </FormField>
-      <FormField title="application_details.token_endpoint">
-        <CopyToClipboard
-          isFullWidth
-          value={applyCustomDomain(oidcConfig.token_endpoint)}
-          variant="border"
-        />
-      </FormField>
-      <FormField title="application_details.user_info_endpoint">
-        <CopyToClipboard
-          isFullWidth
-          value={applyCustomDomain(oidcConfig.userinfo_endpoint)}
-          variant="border"
-        />
-      </FormField>
-      {customDomain?.status === DomainStatus.Active && tenantEndpoint && (
-        <div className={styles.customEndpointNotes}>
-          <DynamicT
-            forKey="domain.custom_endpoint_note"
-            interpolation={{
-              custom: customDomain.domain,
-              default: new URL(tenantEndpoint).host,
-            }}
-          />
-        </div>
-      )}
-      {[ApplicationType.Traditional, ApplicationType.SPA].includes(type) && (
-        <FormField title="application_details.always_issue_refresh_token">
-          <Switch
-            label={t('application_details.always_issue_refresh_token_label')}
-            {...register('customClientMetadata.alwaysIssueRefreshToken')}
-          />
-        </FormField>
-      )}
-      {type !== ApplicationType.MachineToMachine && (
-        <>
-          <FormField title="application_details.rotate_refresh_token">
-            <Switch
-              label={
-                <Trans
-                  components={{
-                    a: (
-                      <TextLink
-                        href="https://docs.logto.io/docs/references/applications/#rotate-refresh-token"
-                        targetBlank="noopener"
-                      />
-                    ),
-                  }}
-                >
-                  {t('application_details.rotate_refresh_token_label')}
-                </Trans>
-              }
-              {...register('customClientMetadata.rotateRefreshToken')}
-            />
-          </FormField>
-          <FormField
-            title="application_details.refresh_token_ttl"
-            tip={t('application_details.refresh_token_ttl_tip')}
-          >
-            <TextInput
-              {...register('customClientMetadata.refreshTokenTtlInDays', {
-                min: {
-                  value: minTtl,
-                  message: ttlErrorMessage,
-                },
-                max: {
-                  value: maxTtl,
-                  message: ttlErrorMessage,
-                },
-                valueAsNumber: true,
-                validate: (value) =>
-                  value === undefined ||
-                  Number.isInteger(value) ||
-                  t('errors.should_be_an_integer'),
-              })}
-              placeholder="14"
-              // Confirm if we need a customized message here
-              error={errors.customClientMetadata?.refreshTokenTtlInDays?.message}
-            />
-          </FormField>
-        </>
-      )}
-    </FormCard>
-  );
-}
-
-export default AdvancedSettings;
--- a/packages/console/src/pages/ApplicationDetails/components/EndpointsAndCredentials.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/EndpointsAndCredentials.tsx
@ -0,0 +1,150 @@
+import {
+  type Application,
+  ApplicationType,
+  DomainStatus,
+  type SnakeCaseOidcConfig,
+} from '@logto/schemas';
+import { appendPath } from '@silverhand/essentials';
+import { useCallback, useContext, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import CaretDown from '@/assets/icons/caret-down.svg';
+import CaretUp from '@/assets/icons/caret-up.svg';
+import FormCard from '@/components/FormCard';
+import { openIdProviderConfigPath } from '@/consts/oidc';
+import { AppDataContext } from '@/contexts/AppDataProvider';
+import Button from '@/ds-components/Button';
+import CopyToClipboard from '@/ds-components/CopyToClipboard';
+import DynamicT from '@/ds-components/DynamicT';
+import FormField from '@/ds-components/FormField';
+import TextLink from '@/ds-components/TextLink';
+import useCustomDomain from '@/hooks/use-custom-domain';
+
+import * as styles from '../index.module.scss';
+
+type Props = {
+  app: Application;
+  oidcConfig: SnakeCaseOidcConfig;
+};
+
+function EndpointsAndCredentials({ app: { type, secret, id }, oidcConfig }: Props) {
+  const { tenantEndpoint } = useContext(AppDataContext);
+  const [showMoreEndpoints, setShowMoreEndpoints] = useState(false);
+
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { data: customDomain, applyDomain: applyCustomDomain } = useCustomDomain();
+
+  const toggleShowMoreEndpoints = useCallback(() => {
+    setShowMoreEndpoints((previous) => !previous);
+  }, []);
+
+  const ToggleVisibleCaretIcon = showMoreEndpoints ? CaretUp : CaretDown;
+
+  return (
+    <FormCard
+      title="application_details.endpoints_and_credentials"
+      description="application_details.endpoints_and_credentials_description"
+      learnMoreLink={{
+        href: 'https://openid.net/specs/openid-connect-core-1_0.html#TokenEndpoint',
+        targetBlank: true,
+      }}
+    >
+      {tenantEndpoint && (
+        <FormField title="application_details.logto_endpoint">
+          <CopyToClipboard
+            isFullWidth
+            value={applyCustomDomain(tenantEndpoint.href)}
+            variant="border"
+          />
+        </FormField>
+      )}
+      {tenantEndpoint && (
+        <FormField title="application_details.config_endpoint">
+          <CopyToClipboard
+            isFullWidth
+            value={applyCustomDomain(appendPath(tenantEndpoint, openIdProviderConfigPath).href)}
+            variant="border"
+          />
+        </FormField>
+      )}
+      {showMoreEndpoints && (
+        <>
+          <FormField
+            title="application_details.authorization_endpoint"
+            tip={(closeTipHandler) => (
+              <Trans
+                components={{
+                  a: (
+                    <TextLink
+                      targetBlank
+                      href="https://openid.net/specs/openid-connect-core-1_0.html#Authentication"
+                      onClick={closeTipHandler}
+                    />
+                  ),
+                }}
+              >
+                {t('application_details.authorization_endpoint_tip')}
+              </Trans>
+            )}
+          >
+            <CopyToClipboard
+              isFullWidth
+              value={applyCustomDomain(oidcConfig.authorization_endpoint)}
+              variant="border"
+            />
+          </FormField>
+          <FormField title="application_details.token_endpoint">
+            <CopyToClipboard
+              isFullWidth
+              value={applyCustomDomain(oidcConfig.token_endpoint)}
+              variant="border"
+            />
+          </FormField>
+          <FormField title="application_details.user_info_endpoint">
+            <CopyToClipboard
+              isFullWidth
+              value={applyCustomDomain(oidcConfig.userinfo_endpoint)}
+              variant="border"
+            />
+          </FormField>
+        </>
+      )}
+      <div className={styles.fieldButton}>
+        <Button
+          size="small"
+          type="text"
+          title={
+            showMoreEndpoints
+              ? 'application_details.hide_endpoint_details'
+              : 'application_details.show_endpoint_details'
+          }
+          trailingIcon={<ToggleVisibleCaretIcon className={styles.trailingIcon} />}
+          onClick={toggleShowMoreEndpoints}
+        />
+      </div>
+
+      {customDomain?.status === DomainStatus.Active && tenantEndpoint && (
+        <div className={styles.customEndpointNotes}>
+          <DynamicT
+            forKey="domain.custom_endpoint_note"
+            interpolation={{
+              custom: customDomain.domain,
+              default: new URL(tenantEndpoint).host,
+            }}
+          />
+        </div>
+      )}
+      <FormField title="application_details.application_id">
+        <CopyToClipboard isFullWidth value={id} variant="border" />
+      </FormField>
+      {[ApplicationType.Traditional, ApplicationType.MachineToMachine].includes(type) && (
+        <FormField title="application_details.application_secret">
+          <CopyToClipboard hasVisibilityToggle isFullWidth value={secret} variant="border" />
+        </FormField>
+      )}
+    </FormCard>
+  );
+}
+
+export default EndpointsAndCredentials;
--- a/packages/console/src/pages/ApplicationDetails/components/RefreshTokenSettings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/RefreshTokenSettings.tsx
@ -0,0 +1,92 @@
+import { type Application, ApplicationType, customClientMetadataGuard } from '@logto/schemas';
+import { useFormContext } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import FormCard from '@/components/FormCard';
+import FormField from '@/ds-components/FormField';
+import Switch from '@/ds-components/Switch';
+import TextInput from '@/ds-components/TextInput';
+import TextLink from '@/ds-components/TextLink';
+
+type Props = {
+  data: Application;
+};
+
+function RefreshTokenSettings({ data: { type } }: Props) {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<Application & { isAdmin?: boolean }>();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const { minValue, maxValue } =
+    customClientMetadataGuard.shape.refreshTokenTtlInDays._def.innerType;
+
+  const minTtl = minValue ?? Number.NEGATIVE_INFINITY;
+  const maxTtl = maxValue ?? Number.POSITIVE_INFINITY;
+
+  const ttlErrorMessage = t('errors.number_should_be_between_inclusive', {
+    min: minTtl,
+    max: maxTtl,
+  });
+
+  return (
+    <FormCard
+      title="application_details.refresh_token_settings"
+      description="application_details.refresh_token_settings_description"
+    >
+      {[ApplicationType.Traditional, ApplicationType.SPA].includes(type) && (
+        <FormField title="application_details.always_issue_refresh_token">
+          <Switch
+            label={t('application_details.always_issue_refresh_token_label')}
+            {...register('customClientMetadata.alwaysIssueRefreshToken')}
+          />
+        </FormField>
+      )}
+      <FormField title="application_details.rotate_refresh_token">
+        <Switch
+          label={
+            <Trans
+              components={{
+                a: (
+                  <TextLink
+                    href="https://docs.logto.io/docs/references/applications/#rotate-refresh-token"
+                    targetBlank="noopener"
+                  />
+                ),
+              }}
+            >
+              {t('application_details.rotate_refresh_token_label')}
+            </Trans>
+          }
+          {...register('customClientMetadata.rotateRefreshToken')}
+        />
+      </FormField>
+      <FormField
+        title="application_details.refresh_token_ttl"
+        tip={t('application_details.refresh_token_ttl_tip')}
+      >
+        <TextInput
+          {...register('customClientMetadata.refreshTokenTtlInDays', {
+            min: {
+              value: minTtl,
+              message: ttlErrorMessage,
+            },
+            max: {
+              value: maxTtl,
+              message: ttlErrorMessage,
+            },
+            valueAsNumber: true,
+            validate: (value) =>
+              value === undefined || Number.isInteger(value) || t('errors.should_be_an_integer'),
+          })}
+          placeholder="14"
+          // Confirm if we need a customized message here
+          error={errors.customClientMetadata?.refreshTokenTtlInDays?.message}
+        />
+      </FormField>
+    </FormCard>
+  );
+}
+
+export default RefreshTokenSettings;
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@ -1,14 +1,11 @@
 import { validateRedirectUrl } from '@logto/core-kit';
 import type { Application } from '@logto/schemas';
 import { ApplicationType } from '@logto/schemas';
-import { useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';

 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';
 import {
@ -17,7 +14,6 @@ import {
 } from '@/ds-components/MultiTextInput/utils';
 import TextInput from '@/ds-components/TextInput';
 import TextLink from '@/ds-components/TextLink';
-import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';

 type Props = {
@ -25,9 +21,6 @@ type Props = {
 };

 function Settings({ data }: Props) {
-  const { tenantEndpoint } = useContext(AppDataContext);
-  const { applyDomain: applyCustomDomain } = useCustomDomain();
-
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const { getDocumentationUrl } = useDocumentationUrl();
  const {
@ -36,7 +29,7 @@ function Settings({ data }: Props) {
    formState: { errors },
  } = useFormContext<Application>();

-  const { secret, type: applicationType } = data;
+  const { type: applicationType } = data;

  const isNativeApp = applicationType === ApplicationType.Native;
  const uriPatternRules: MultiTextInputRule = {
@ -62,28 +55,12 @@ function Settings({ data }: Props) {
          placeholder={t('application_details.application_name_placeholder')}
        />
      </FormField>
-      {tenantEndpoint && (
-        <FormField title="application_details.logto_endpoint">
-          <CopyToClipboard
-            isFullWidth
-            value={applyCustomDomain(tenantEndpoint.href)}
-            variant="border"
-          />
-        </FormField>
-      )}
      <FormField title="application_details.description">
        <TextInput
          {...register('description')}
          placeholder={t('application_details.description_placeholder')}
        />
      </FormField>
-      {[ApplicationType.Traditional, ApplicationType.MachineToMachine].includes(
-        applicationType
-      ) && (
-        <FormField title="application_details.application_secret">
-          <CopyToClipboard hasVisibilityToggle isFullWidth value={secret} variant="border" />
-        </FormField>
-      )}
      {applicationType !== ApplicationType.MachineToMachine && (
        <Controller
          name="oidcClientMetadata.redirectUris"
--- a/packages/console/src/pages/ApplicationDetails/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/index.module.scss
@ -19,3 +19,22 @@
  font: var(--font-body-2);
  color: var(--color-text-secondary);
 }
+
+.fieldButton {
+  margin-top: _.unit(2);
+}
+
+.trailingIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.tabContainer {
+  flex-direction: column;
+  flex-grow: 1;
+
+  &[data-active='true'] {
+    display: flex;
+  }
+}
+
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@ -33,11 +33,12 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { trySubmitSafe } from '@/utils/form';

-import AdvancedSettings from './components/AdvancedSettings';
+import EndpointsAndCredentials from './components/EndpointsAndCredentials';
 import GuideDrawer from './components/GuideDrawer';
 import GuideModal from './components/GuideModal';
 import MachineLogs from './components/MachineLogs';
 import MachineToMachineApplicationRoles from './components/MachineToMachineApplicationRoles';
+import RefreshTokenSettings from './components/RefreshTokenSettings';
 import Settings from './components/Settings';
 import * as styles from './index.module.scss';

@ -216,11 +217,6 @@ function ApplicationDetails() {
            <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Settings}`}>
              {t('application_details.settings')}
            </TabNavItem>
-            <TabNavItem
-              href={`/applications/${data.id}/${ApplicationDetailsTabs.AdvancedSettings}`}
-            >
-              {t('application_details.advanced_settings')}
-            </TabNavItem>
            {data.type === ApplicationType.MachineToMachine && (
              <>
                <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Roles}`}>
@ -232,31 +228,42 @@ function ApplicationDetails() {
              </>
            )}
          </TabNav>
-          <FormProvider {...formMethods}>
-            <DetailsForm
-              isDirty={isDirty}
-              isSubmitting={isSubmitting}
-              onDiscard={reset}
-              onSubmit={onSubmit}
-            >
-              <TabWrapper isActive={tab === ApplicationDetailsTabs.Settings}>
+          <TabWrapper
+            isActive={tab === ApplicationDetailsTabs.Settings}
+            className={styles.tabContainer}
+          >
+            <FormProvider {...formMethods}>
+              <DetailsForm
+                isDirty={isDirty}
+                isSubmitting={isSubmitting}
+                onDiscard={reset}
+                onSubmit={onSubmit}
+              >
                <Settings data={data} />
+                <EndpointsAndCredentials app={data} oidcConfig={oidcConfig} />
+                {data.type !== ApplicationType.MachineToMachine && (
+                  <RefreshTokenSettings data={data} />
+                )}
+              </DetailsForm>
+            </FormProvider>
+          </TabWrapper>
+
+          {data.type === ApplicationType.MachineToMachine && (
+            <>
+              <TabWrapper
+                isActive={tab === ApplicationDetailsTabs.Roles}
+                className={styles.tabContainer}
+              >
+                <MachineToMachineApplicationRoles application={data} />
              </TabWrapper>
-              <TabWrapper isActive={tab === ApplicationDetailsTabs.AdvancedSettings}>
-                <AdvancedSettings app={data} oidcConfig={oidcConfig} />
+              <TabWrapper
+                isActive={tab === ApplicationDetailsTabs.Logs}
+                className={styles.tabContainer}
+              >
+                <MachineLogs applicationId={data.id} />
              </TabWrapper>
-              {data.type === ApplicationType.MachineToMachine && (
-                <>
-                  <TabWrapper isActive={tab === ApplicationDetailsTabs.Roles}>
-                    <MachineToMachineApplicationRoles application={data} />
-                  </TabWrapper>
-                  <TabWrapper isActive={tab === ApplicationDetailsTabs.Logs}>
-                    <MachineLogs applicationId={data.id} />
-                  </TabWrapper>
-                </>
-              )}
-            </DetailsForm>
-          </FormProvider>
+            </>
+          )}
        </>
      )}
      <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} onConfirm={reset} />
--- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Einstellungen',
  settings_description:
    'Anwendungen werden verwendet, um Ihre Anwendungen in Logto für OIDC, Anmeldeerfahrung, Audit-Logs usw. zu identifizieren.',
-  advanced_settings: 'Erweiterte Einstellungen',
-  advanced_settings_description:
-    'Erweiterte Einstellungen beinhalten OIDC-bezogene Begriffe. Sie können den Token-Endpunkt für weitere Informationen überprüfen.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Rollen',
  machine_logs: 'Maschinenprotokolle',
  application_name: 'Anwendungsname',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: 'Autorisierungs-Endpoint',
  authorization_endpoint_tip:
    'Der Endpoint, der für die Authentifizierung und <a>Authorisierung</a> via OpenID Connect verwendet wird.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto-Endpunkt',
  application_id: 'App-ID',
  application_id_tip:
--- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
@ -5,9 +5,11 @@ const application_details = {
  settings: 'Settings',
  settings_description:
    'Applications are used to identify your applications in Logto for OIDC, sign-in experience, audit logs, etc.',
-  advanced_settings: 'Advanced settings',
-  advanced_settings_description:
-    'Advanced settings include OIDC related terms. You can check out the Token Endpoint for more information.',
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  refresh_token_settings: 'Refresh token',
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Roles',
  machine_logs: 'Machine logs',
  application_name: 'Application name',
@ -18,6 +20,8 @@ const application_details = {
  authorization_endpoint: 'Authorization Endpoint',
  authorization_endpoint_tip:
    "The endpoint to perform authentication and authorization. It's used for OpenID Connect <a>Authentication</a>.",
+  show_endpoint_details: 'Show endpoint details',
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: 'App ID',
  application_id_tip:
--- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Configuraciones',
  settings_description:
    'Las aplicaciones se utilizan para identificar tus aplicaciones en Logto para OIDC, experiencia de inicio de sesión, registros de auditoría, etc.',
-  advanced_settings: 'Configuraciones avanzadas',
-  advanced_settings_description:
-    'Las configuraciones avanzadas incluyen términos relacionados con OIDC. Puedes revisar el Endpoint del Token para obtener más información.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Roles de Aplicación',
  machine_logs: 'Registros de Máquina',
  application_name: 'Nombre de Aplicación',
@ -18,6 +24,10 @@ 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 <a>Autenticación</a>.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Endpoint de Logto',
  application_id: 'ID de Aplicación',
  application_id_tip:
--- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Paramètres',
  settings_description:
    "Les applications sont utilisées pour identifier vos applications dans Logto pour OIDC, l'expérience de connexion, les journaux d'audit, etc.",
-  advanced_settings: 'Paramètres avancés',
-  advanced_settings_description:
-    "Les paramètres avancés comprennent des termes liés à OIDC. Vous pouvez consulter le point de terminaison de jeton pour plus d'informations.",
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Rôles',
  machine_logs: 'Journaux de machine',
  application_name: "Nom de l'application",
@ -18,6 +24,10 @@ 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 <a>l'authentification</a> OpenID Connect.",
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Endpoint Logto',
  application_id: "ID de l'application",
  application_id_tip:
--- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Impostazioni',
  settings_description:
    'Le applicazioni vengono utilizzate per identificare le tue applicazioni in Logto per OIDC, esperienza di accesso, registri di controllo, ecc.',
-  advanced_settings: 'Impostazioni avanzate',
-  advanced_settings_description:
-    "Le impostazioni avanzate includono termini correlati all'OIDC. Puoi consultare il Endpoint Token per ulteriori informazioni.",
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Ruoli',
  machine_logs: 'Log delle macchine',
  application_name: "Nome dell'applicazione",
@ -18,6 +24,10 @@ 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 <a>autenticazione</a>.",
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Endpoint Logto',
  application_id: 'ID App',
  application_id_tip:
--- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: '設定',
  settings_description:
    'アプリケーションは、Logto for OIDC、サインインエクスペリエンス、監査ログなどでアプリケーションを識別するために使用されます。',
-  advanced_settings: '高度な設定',
-  advanced_settings_description:
-    '高度な設定にはOIDC関連用語が含まれます。詳細については、トークンエンドポイントを確認してください。',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: '役割',
  machine_logs: 'マシンログ',
  application_name: 'アプリケーション名',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: '認可エンドポイント',
  authorization_endpoint_tip:
    '認証と認可を実行するエンドポイントです。OpenID Connectの<a>認証</a>に使用されます。',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto エンドポイント',
  application_id: 'アプリID',
  application_id_tip:
--- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: '설정',
  settings_description:
    '애플리케이션은 Logto for OIDC, 로그인 환경, 감사 로그 등에서 애플리케이션을 식별하는 데 사용돼요.',
-  advanced_settings: '고급 설정',
-  advanced_settings_description:
-    '고급 설정에는 OIDC 관련 용어가 포함돼요. 자세한 내용은 토큰 엔드포인트에서 확인할 수 있어요.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: '역할',
  machine_logs: '기계 로그',
  application_name: '어플리케이션 이름',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: '인증 Endpoint',
  authorization_endpoint_tip:
    '인증 및 권한 부여를 진행할 End-Point예요. OpenID Connect <a>인증</a>에서 사용되던 값이에요.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: '앱 ID',
  application_id_tip:
--- 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
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Ustawienia',
  settings_description:
    'Aplikacje są używane do identyfikowania Twoich aplikacji w Logto dla OIDC, doświadczenia logowania, dzienników audytowych itp.',
-  advanced_settings: 'Zaawansowane ustawienia',
-  advanced_settings_description:
-    'Zaawansowane ustawienia obejmują związane z OIDC terminy. Możesz sprawdzić punkt końcowy Token dla bardziej szczegółowych informacji.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Role',
  machine_logs: 'Dzienniki maszynowe',
  application_name: 'Nazwa aplikacji',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: 'Endpoint autoryzacji',
  authorization_endpoint_tip:
    'Endpoint wykorzystywany do autentykacji i autoryzacji. Używany jest dla OpenID Connect <a>Autentykacji</a>.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: 'ID aplikacji',
  application_id_tip:
--- 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
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Configurações',
  settings_description:
    'Os aplicativos são usados para identificar seus aplicativos no Logto para OIDC, experiência de login, logs de auditoria, etc.',
-  advanced_settings: 'Configurações avançadas',
-  advanced_settings_description:
-    'As configurações avançadas incluem termos relacionados ao OIDC. Você pode conferir o Token Endpoint para obter mais informações.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Funções do aplicativo',
  machine_logs: 'Logs da máquina',
  application_name: 'Nome do aplicativo',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: 'Endpoint de autorização',
  authorization_endpoint_tip:
    'O endpoint para executar autenticação e autorização. É usado para <a>autenticação</a> OpenID Connect.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Endpoint do Logto',
  application_id: 'ID do aplicativo',
  application_id_tip:
--- 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
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Definições',
  settings_description:
    'As aplicações são utilizadas para identificar as suas aplicações no Logto para OIDC, experiência de início de sessão, registos de auditoria, etc.',
-  advanced_settings: 'Definições avançadas',
-  advanced_settings_description:
-    'As configurações avançadas incluem termos relacionados com OIDC. Pode consultar o Endpoint do Token para obter mais informações.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Funções da aplicação',
  machine_logs: 'Registos da máquina',
  application_name: 'Nome da aplicação',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: 'Endpoint de autorização',
  authorization_endpoint_tip:
    'O endpoint para realizar a autenticação e autorização. É usado para <a>autenticação</a> OpenID Connect.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Endpoint Logto',
  application_id: 'ID da aplicação',
  application_id_tip:
--- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Настройки',
  settings_description:
    'Приложения используются для идентификации ваших приложений в Logto для OIDC, опыта входа, аудита и т. Д.',
-  advanced_settings: 'Расширенные настройки',
-  advanced_settings_description:
-    'Расширенные настройки включают связанные с OIDC термины. Вы можете проверить конечную точку токена для получения дополнительной информации.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Роли',
  machine_logs: 'Машинные журналы',
  application_name: 'Название приложения',
@ -18,6 +24,10 @@ const application_details = {
  authorization_endpoint: 'Конечная точка авторизации',
  authorization_endpoint_tip:
    'Конечная точка для аутентификации и авторизации. Он используется для аутентификации <a>OpenID Connect</a>.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: 'ID приложения',
  application_id_tip:
--- 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
@ -5,9 +5,15 @@ const application_details = {
  settings: 'Ayarlar',
  settings_description:
    'Uygulamalar, Logto için OIDC, oturum açma deneyimi, denetim kayıtları vb. alanlarda uygulamalarınızı tanımlamak için kullanılır.',
-  advanced_settings: 'Gelişmiş ayarlar',
-  advanced_settings_description:
-    'Gelişmiş ayarlar, OIDC ile ilgili terimleri içerir. Daha fazla bilgi için Token Bitiş Noktasına bakabilirsiniz.',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: 'Roller',
  machine_logs: 'Makine günlükleri',
  application_name: 'Uygulama Adı',
@ -18,6 +24,10 @@ 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 <a>Authentication</a> için kullanılır.',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto bitiş noktası',
  application_id: 'Uygulama IDsi',
  application_id_tip:
--- 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
@ -4,9 +4,15 @@ const application_details = {
  check_guide: '查看指南',
  settings: '设置',
  settings_description: '应用程序用于在 Logto OIDC、登录体验、审计日志等方面识别你的应用程序。',
-  advanced_settings: '高级设置',
-  advanced_settings_description:
-    '高级设置包括 OIDC 相关术语。你可以查看 Token Endpoint 以获取更多信息。',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: '角色',
  machine_logs: '机器日志',
  application_name: '应用名称',
@ -16,6 +22,10 @@ const application_details = {
  config_endpoint: 'OpenID Provider 配置端点',
  authorization_endpoint: '授权端点',
  authorization_endpoint_tip: '进行鉴权与授权的端点。用于 OpenID Connect 中的 <a>鉴权</a> 流程。',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto 端点',
  application_id: '应用 ID',
  application_id_tip:
--- 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
@ -4,9 +4,15 @@ const application_details = {
  check_guide: '查看指南',
  settings: '設定',
  settings_description: '應用程式用於在 Logto OIDC、登入體驗、審計日誌等方面識別你的應用程式。',
-  advanced_settings: '高級設定',
-  advanced_settings_description:
-    '高級設定包括 OIDC 相關術語。你可以查看 Token Endpoint 以獲取更多資訊。',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: '角色',
  machine_logs: '機器日誌',
  application_name: '應用程式名稱',
@ -16,6 +22,10 @@ const application_details = {
  config_endpoint: 'OpenID Provider 配置端點',
  authorization_endpoint: '授權端點',
  authorization_endpoint_tip: '進行驗證和授權的端點。用於 OpenID Connect 中的<a>驗證</a> 流程。',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: '應用程式 ID',
  application_id_tip:
--- 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
@ -4,9 +4,15 @@ const application_details = {
  check_guide: '查看指南',
  settings: '設置',
  settings_description: '應用程式用於在 Logto OIDC、登錄體驗、審計日誌等方面識別你的應用程式。',
-  advanced_settings: '高級設置',
-  advanced_settings_description:
-    '高級設置包括 OIDC 相關術語。你可以查看 Token Endpoint 以獲取更多信息。',
+  /** UNTRANSLATED */
+  endpoints_and_credentials: 'Endpoints & Credentials',
+  /** UNTRANSLATED */
+  endpoints_and_credentials_description:
+    'Use the following endpoints and credentials to set up the OIDC connection in your application.',
+  /** UNTRANSLATED */
+  refresh_token_settings: 'Refresh token',
+  /** UNTRANSLATED */
+  refresh_token_settings_description: 'Manage the refresh token rules for this application.',
  application_roles: '角色',
  machine_logs: '機器日誌',
  application_name: '應用程式姓名',
@ -16,6 +22,10 @@ const application_details = {
  config_endpoint: 'OpenID Provider 配置端點',
  authorization_endpoint: '授權端點',
  authorization_endpoint_tip: '進行驗證與授權的端點。用於 OpenID Connect 中的 <a>驗證</a> 流程。',
+  /** UNTRANSLATED */
+  show_endpoint_details: 'Show endpoint details',
+  /** UNTRANSLATED */
+  hide_endpoint_details: 'Hide endpoint details',
  logto_endpoint: 'Logto endpoint',
  application_id: '應用程式 ID',
  application_id_tip: