From d3d0f5133bfc6bff86a689a880fc0f1b043af6af Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Tue, 19 Mar 2024 13:04:08 +0800
Subject: [PATCH] refactor(console): replace the field table with type
 definition code (#5519)

* refactor(console): replace the field table with type definition code

replace the field table with type definition code

* refactor(console): rebase and pickup the generated type definitions

rebase and pickup the generated type definitions
---
 .../SettingsSection/InstructionTab.tsx        | 69 ++++++----------
 .../src/pages/JwtClaims/utils/config.tsx      | 82 ++-----------------
 .../pages/JwtClaims/utils/type-definitions.ts |  7 +-
 3 files changed, 40 insertions(+), 118 deletions(-)

diff --git a/packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx b/packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx
index 33bf332bd..8a1f5b925 100644
--- a/packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx
+++ b/packages/console/src/pages/JwtClaims/SettingsSection/InstructionTab.tsx
@@ -1,19 +1,20 @@
 import { LogtoJwtTokenPath } from '@logto/schemas';
 import { Editor } from '@monaco-editor/react';
 import classNames from 'classnames';
-import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import Table from '@/ds-components/Table';
-
 import { type JwtClaimsFormType } from '../type';
 import {
-  userDataDescription,
-  tokenDataDescription,
-  fetchExternalDataEditorOptions,
+  sampleCodeEditorOptions,
+  typeDefinitionCodeEditorOptions,
   fetchExternalDataCodeExample,
 } from '../utils/config';
+import {
+  accessTokenPayloadTypeDefinition,
+  clientCredentialsPayloadTypeDefinition,
+  jwtCustomizerUserContextTypeDefinition,
+} from '../utils/type-definitions';
 
 import EnvironmentVariablesField from './EnvironmentVariablesField';
 import GuideCard, { CardType } from './GuideCard';
@@ -30,51 +31,33 @@ function InstructionTab({ isActive }: Props) {
   const { watch } = useFormContext<JwtClaimsFormType>();
   const tokenType = watch('tokenType');
 
-  const getDataColumns = useCallback(
-    (valueColSpan = 10) => [
-      {
-        title: t('domain.custom.dns_table.value_field'),
-        dataIndex: 'value',
-        colSpan: valueColSpan,
-        render: ({ value }: (typeof userDataDescription)[0]) => (
-          <span className={styles.value}>{value}</span>
-        ),
-      },
-      {
-        title: t('general.description'),
-        dataIndex: 'description',
-        colSpan: 24 - valueColSpan,
-        render: ({ description }: (typeof userDataDescription)[0]) => (
-          <span className={styles.description}>{description}</span>
-        ),
-      },
-    ],
-    [t]
-  );
-
   return (
     <div className={classNames(styles.tabContent, isActive && styles.active)}>
       <div className={styles.description}>{t('jwt_claims.jwt_claims_description')}</div>
       {tokenType === LogtoJwtTokenPath.AccessToken && (
         <GuideCard name={CardType.UserData}>
-          <Table
-            hasBorder
-            isRowHoverEffectDisabled
-            className={styles.table}
-            rowIndexKey="value"
-            columns={getDataColumns()}
-            rowGroups={[{ key: 'user_data', data: userDataDescription }]}
+          <Editor
+            language="typescript"
+            className={styles.sampleCode}
+            value={jwtCustomizerUserContextTypeDefinition}
+            height="700px"
+            theme="logto-dark"
+            options={typeDefinitionCodeEditorOptions}
           />
         </GuideCard>
       )}
       <GuideCard name={CardType.TokenData}>
-        <Table
-          hasBorder
-          isRowHoverEffectDisabled
-          className={styles.table}
-          rowIndexKey="value"
-          columns={getDataColumns(6)}
-          rowGroups={[{ key: 'token_data', data: tokenDataDescription }]}
+        <Editor
+          language="typescript"
+          className={styles.sampleCode}
+          value={
+            tokenType === LogtoJwtTokenPath.AccessToken
+              ? accessTokenPayloadTypeDefinition
+              : clientCredentialsPayloadTypeDefinition
+          }
+          height="350px"
+          theme="logto-dark"
+          options={typeDefinitionCodeEditorOptions}
         />
       </GuideCard>
       <GuideCard name={CardType.FetchExternalData}>
@@ -85,7 +68,7 @@ function InstructionTab({ isActive }: Props) {
           value={fetchExternalDataCodeExample}
           height="300px"
           theme="logto-dark"
-          options={fetchExternalDataEditorOptions}
+          options={sampleCodeEditorOptions}
         />
       </GuideCard>
       <GuideCard name={CardType.EnvironmentVariables}>
diff --git a/packages/console/src/pages/JwtClaims/utils/config.tsx b/packages/console/src/pages/JwtClaims/utils/config.tsx
index a4b89ba4a..9aea5bbf4 100644
--- a/packages/console/src/pages/JwtClaims/utils/config.tsx
+++ b/packages/console/src/pages/JwtClaims/utils/config.tsx
@@ -131,81 +131,8 @@ export const clientCredentialsModel: ModelSettings = {
 /**
  * JWT claims guide card configs
  */
-// TODO: align user properties and then i18n the descriptions
-type GuideTableData = {
-  value: string;
-  description: string;
-};
 
-export const userDataDescription: GuideTableData[] = [
-  {
-    value: 'user.id',
-    description: 'Unique identifier of the user.',
-  },
-  {
-    value: 'user.username',
-    description: 'Username for sign-in',
-  },
-  {
-    value: 'user.primary_email',
-    description: 'Primary email address of the user.',
-  },
-  {
-    value: 'user.primary_phone',
-    description: 'Primary phone number of the user.',
-  },
-  {
-    value: 'user.name',
-    description: 'Full name of the user.',
-  },
-  {
-    value: 'user.avatar',
-    description: "URL pointing to user's avatar image	",
-  },
-  {
-    value: 'user.identities',
-    description: 'User info retrieved from social sign-in',
-  },
-  {
-    value: 'user.custom_data',
-    description: 'Additional info in customizable properties	',
-  },
-];
-
-export const tokenDataDescription: GuideTableData[] = [
-  {
-    value: 'jti',
-    description:
-      '(JWT ID) Unique identifier for the JWT. Useful for tracking and preventing reuse of the token.',
-  },
-  {
-    value: 'iat',
-    description: '(issued at) Time at which the JWT was issued.',
-  },
-  {
-    value: 'exp',
-    description: '(expiration) Time after which the JWT expires.',
-  },
-  {
-    value: 'client_id',
-    description: 'Client ID of the application that requested the JWT.',
-  },
-  {
-    value: 'kind',
-    description:
-      'Type of the token. `AccessToken` for user access tokens and `ClientCredentials` for machine-to-machine access tokens.',
-  },
-  {
-    value: 'scope',
-    description: 'Scopes requested by the client joint by space.',
-  },
-  {
-    value: 'aud',
-    description: '(audience) Audience for which the JWT is intended.',
-  },
-];
-
-export const fetchExternalDataEditorOptions: EditorProps['options'] = {
+export const sampleCodeEditorOptions: EditorProps['options'] = {
   readOnly: true,
   wordWrap: 'on',
   minimap: { enabled: false },
@@ -217,6 +144,13 @@ export const fetchExternalDataEditorOptions: EditorProps['options'] = {
   lineNumbers: 'off',
   scrollbar: { vertical: 'hidden', horizontal: 'hidden', handleMouseWheel: false },
   folding: false,
+  tabSize: 2,
+};
+
+export const typeDefinitionCodeEditorOptions: EditorProps['options'] = {
+  ...sampleCodeEditorOptions,
+  scrollbar: { vertical: 'auto', horizontal: 'auto' },
+  folding: true,
 };
 
 export const fetchExternalDataCodeExample = `const response = await fetch('https://api.example.com/data', {
diff --git a/packages/console/src/pages/JwtClaims/utils/type-definitions.ts b/packages/console/src/pages/JwtClaims/utils/type-definitions.ts
index d998f3afd..630468315 100644
--- a/packages/console/src/pages/JwtClaims/utils/type-definitions.ts
+++ b/packages/console/src/pages/JwtClaims/utils/type-definitions.ts
@@ -7,7 +7,12 @@ import {
 
 import { type JwtClaimsFormType } from '../type';
 
-export { JwtCustomizerTypeDefinitionKey } from '@/consts/jwt-customizer-type-definition';
+export {
+  JwtCustomizerTypeDefinitionKey,
+  accessTokenPayloadTypeDefinition,
+  clientCredentialsPayloadTypeDefinition,
+  jwtCustomizerUserContextTypeDefinition,
+} from '@/consts/jwt-customizer-type-definition';
 
 export const buildAccessTokenJwtCustomizerContextTsDefinition = () => {
   return `declare ${jwtCustomizerUserContextTypeDefinition}