Merge pull request #5621 from logto-io/yemq-log-8592-prd-697-prd-699-p…

…rd-702-fix-console

chore(console,phrases): update content and fix console

packages/console/src/pages/CustomizeJwt/CreateButton/index.tsx

@@ -1,12 +1,9 @@
 import { type LogtoJwtTokenPath } from '@logto/schemas';
 
-import PlusIcon from '@/assets/icons/plus.svg';
 import Button from '@/ds-components/Button';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { getPagePath } from '@/pages/CustomizeJwt/utils/path';
 
-import * as styles from './index.module.scss';
-
 type Props = {
   tokenType: LogtoJwtTokenPath;
 };
@@ -17,7 +14,6 @@ function CreateButton({ tokenType }: Props) {
 
   return (
     <Button
-      icon={<PlusIcon className={styles.icon} />}
       type="primary"
       title="jwt_claims.custom_jwt_create_button"
       onClick={() => {

packages/console/src/pages/CustomizeJwt/CustomizerItem/index.module.scss

@@ -15,9 +15,14 @@
 
   .actions {
     display: flex;
-    gap: _.unit(2);
+    gap: _.unit(4);
     align-items: center;
 
+    .icon {
+      max-width: _.unit(4);
+      max-height: _.unit(4);
+    }
+
     .danger {
       color: var(--color-error);
 

packages/console/src/pages/CustomizeJwt/CustomizerItem/index.tsx

@@ -2,7 +2,7 @@ import { LogtoJwtTokenPath } from '@logto/schemas';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DeletIcon from '@/assets/icons/delete.svg';
+import DeleteIcon from '@/assets/icons/delete.svg';
 import EditIcon from '@/assets/icons/edit.svg';
 import Button from '@/ds-components/Button';
 import useApi from '@/hooks/use-api';
@@ -53,17 +53,19 @@ function CustomizerItem({ tokenType }: Props) {
       </div>
       <div className={styles.actions}>
         <Button
-          icon={<EditIcon />}
+          icon={<EditIcon className={styles.icon} />}
           type="text"
+          size="small"
           title="general.edit"
           onClick={() => {
             navigate(editLink);
           }}
         />
         <Button
           className={styles.danger}
-          icon={<DeletIcon />}
+          icon={<DeleteIcon className={styles.icon} />}
           type="text"
+          size="small"
           title="general.delete"
           onClick={onDelete}
         />

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx

@@ -38,25 +38,6 @@ function InstructionTab({ isActive }: Props) {
 
   return (
     <div className={classNames(tabContentStyles.tabContent, isActive && tabContentStyles.active)}>
-      <div className={tabContentStyles.description}>{t('jwt_claims.jwt_claims_description')}</div>
-      {tokenType === LogtoJwtTokenPath.AccessToken && (
-        <GuideCard
-          name={CardType.UserData}
-          isExpanded={expendCard === CardType.UserData}
-          setExpanded={(expand) => {
-            setExpendCard(expand ? CardType.UserData : undefined);
-          }}
-        >
-          <Editor
-            language="typescript"
-            className={styles.sampleCode}
-            value={jwtCustomizerUserContextTypeDefinition}
-            height="700px"
-            theme="logto-dark"
-            options={typeDefinitionCodeEditorOptions}
-          />
-        </GuideCard>
-      )}
       <GuideCard
         name={CardType.TokenData}
         isExpanded={expendCard === CardType.TokenData}
@@ -77,6 +58,24 @@ function InstructionTab({ isActive }: Props) {
           options={typeDefinitionCodeEditorOptions}
         />
       </GuideCard>
+      {tokenType === LogtoJwtTokenPath.AccessToken && (
+        <GuideCard
+          name={CardType.UserData}
+          isExpanded={expendCard === CardType.UserData}
+          setExpanded={(expand) => {
+            setExpendCard(expand ? CardType.UserData : undefined);
+          }}
+        >
+          <Editor
+            language="typescript"
+            className={styles.sampleCode}
+            value={jwtCustomizerUserContextTypeDefinition}
+            height="700px"
+            theme="logto-dark"
+            options={typeDefinitionCodeEditorOptions}
+          />
+        </GuideCard>
+      )}
       <GuideCard
         name={CardType.FetchExternalData}
         isExpanded={expendCard === CardType.FetchExternalData}
@@ -114,6 +113,7 @@ function InstructionTab({ isActive }: Props) {
           options={sampleCodeEditorOptions}
         />
       </GuideCard>
+      <div className={tabContentStyles.description}>{t('jwt_claims.jwt_claims_description')}</div>
     </div>
   );
 }

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss

@@ -48,6 +48,7 @@
   .description {
     font: var(--font-body-2);
     color: var(--color-text-secondary);
+    padding: 0 _.unit(1);
   }
 }
 

packages/console/src/pages/CustomizeJwtDetails/MainContent/index.tsx

@@ -56,11 +56,13 @@ function MainContent<T extends LogtoJwtTokenPath>({
       const { tokenType } = data;
       const payload = formatFormDataToRequestData(data);
 
-      await api.put(getApiPath(tokenType), { json: payload });
+      const updatedJwtCustomizer = await api
+        .put(getApiPath(tokenType), { json: payload })
+        .json<JwtCustomizer<T>>();
 
-      const result = await mutate();
+      await mutate(updatedJwtCustomizer);
 
-      reset(formatResponseDataToFormData(tokenType, result));
+      reset(formatResponseDataToFormData(tokenType, updatedJwtCustomizer));
 
       /**
        * Should `reset` (to set `isDirty` to false) before navigating back to the custom JWT listing page.

packages/console/src/pages/CustomizeJwtDetails/utils/config.tsx

@@ -82,7 +82,7 @@ export const defaultAccessTokenJwtCustomizerCode = `/**
 * @returns The custom claims.
 */
 
-exports.getCustomJwtClaims = async (token, data) => {
+exports.getCustomJwtClaims = async (token, data, envVariables) => {
   return {};
 }`;
 
@@ -95,7 +95,7 @@ export const defaultClientCredentialsJwtCustomizerCode = `/**
 * @returns The custom claims.
 */
 
-exports.getCustomJwtClaims = async (token) => {
+exports.getCustomJwtClaims = async (token, envVariables) => {
   return {};
 }`;
 

packages/phrases/src/locales/de/translation/admin-console/jwt-claims.ts

@@ -20,14 +20,14 @@ const jwt_claims = {
     /** UNTRANSLATED */
     card_field: 'Machine-to-machine token',
     /** UNTRANSLATED */
-    card_description: 'Add extra data fro machine-to-machine communication.',
+    card_description: 'Add extra data during machine-to-machine token issuance.',
     /** UNTRANSLATED */
     for: 'for M2M',
   },
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
-  custom_jwt_create_button: 'Create custom claims',
+  custom_jwt_create_button: 'Add custom claims',
   /** UNTRANSLATED */
   custom_jwt_item: 'Custom claims {{for}}',
   /** UNTRANSLATED */
@@ -47,27 +47,24 @@ const jwt_claims = {
   /** UNTRANSLATED */
   test_tab: 'Test claim',
   /** UNTRANSLATED */
-  jwt_claims_description:
-    'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
+  jwt_claims_description: 'Default claims are auto-included in the JWT and cannot be overridden.',
   user_data: {
     /** UNTRANSLATED */
     title: 'User data',
     /** UNTRANSLATED */
-    subtitle:
-      'Input parameter `data.user`, providing essential user information linked to the present access token.',
+    subtitle: 'Use `data.user` input parameter to provide vital user info.',
   },
   token_data: {
     /** UNTRANSLATED */
     title: 'Token data',
     /** UNTRANSLATED */
-    subtitle:
-      'Input parameter `token`, providing the payload of the current access token for contextual reference.',
+    subtitle: 'Use `token` input parameter for current access token payload. ',
   },
   fetch_external_data: {
     /** UNTRANSLATED */
     title: 'Fetch external data',
     /** UNTRANSLATED */
-    subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
+    subtitle: 'Incorporate data from your external APIs directly into claims.',
     /** UNTRANSLATED */
     description:
       'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
@@ -76,8 +73,7 @@ const jwt_claims = {
     /** UNTRANSLATED */
     title: 'Set environment variables',
     /** UNTRANSLATED */
-    subtitle:
-      'Use environment variables to store sensitive information and access them in your custom claims handler.',
+    subtitle: 'Use environment variables to store sensitive information.',
     /** UNTRANSLATED */
     input_field_title: 'Add environment variables',
     /** UNTRANSLATED */

packages/phrases/src/locales/en/translation/admin-console/jwt-claims.ts

@@ -11,11 +11,11 @@ const jwt_claims = {
   machine_to_machine_jwt: {
     card_title: 'For M2M',
     card_field: 'Machine-to-machine token',
-    card_description: 'Add extra data fro machine-to-machine communication.',
+    card_description: 'Add extra data during machine-to-machine token issuance.',
     for: 'for M2M',
   },
   code_editor_title: 'Customize the {{token}} claims',
-  custom_jwt_create_button: 'Create custom claims',
+  custom_jwt_create_button: 'Add custom claims',
   custom_jwt_item: 'Custom claims {{for}}',
   delete_modal_title: 'Delete custom claims',
   delete_modal_content: 'Are you sure you want to delete the custom claims?',
@@ -25,28 +25,24 @@ const jwt_claims = {
   restored: 'Restored',
   data_source_tab: 'Data source',
   test_tab: 'Test claim',
-  jwt_claims_description:
-    'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
+  jwt_claims_description: 'Default claims are auto-included in the JWT and cannot be overridden.',
   user_data: {
     title: 'User data',
-    subtitle:
-      'Input parameter `data.user`, providing essential user information linked to the present access token.',
+    subtitle: 'Use `data.user` input parameter to provide vital user info.',
   },
   token_data: {
     title: 'Token data',
-    subtitle:
-      'Input parameter `token`, providing the payload of the current access token for contextual reference.',
+    subtitle: 'Use `token` input parameter for current access token payload. ',
   },
   fetch_external_data: {
     title: 'Fetch external data',
-    subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
+    subtitle: 'Incorporate data from your external APIs directly into claims.',
     description:
       'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
   },
   environment_variables: {
     title: 'Set environment variables',
-    subtitle:
-      'Use environment variables to store sensitive information and access them in your custom claims handler.',
+    subtitle: 'Use environment variables to store sensitive information.',
     input_field_title: 'Add environment variables',
     sample_code: 'Accessing environment variables in your custom JWT claims handler. Example: ',
   },

packages/phrases/src/locales/es/translation/admin-console/jwt-claims.ts

@@ -20,14 +20,14 @@ const jwt_claims = {
     /** UNTRANSLATED */
     card_field: 'Machine-to-machine token',
     /** UNTRANSLATED */
-    card_description: 'Add extra data fro machine-to-machine communication.',
+    card_description: 'Add extra data during machine-to-machine token issuance.',
     /** UNTRANSLATED */
     for: 'for M2M',
   },
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
-  custom_jwt_create_button: 'Create custom claims',
+  custom_jwt_create_button: 'Add custom claims',
   /** UNTRANSLATED */
   custom_jwt_item: 'Custom claims {{for}}',
   /** UNTRANSLATED */
@@ -47,27 +47,24 @@ const jwt_claims = {
   /** UNTRANSLATED */
   test_tab: 'Test claim',
   /** UNTRANSLATED */
-  jwt_claims_description:
-    'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
+  jwt_claims_description: 'Default claims are auto-included in the JWT and cannot be overridden.',
   user_data: {
     /** UNTRANSLATED */
     title: 'User data',
     /** UNTRANSLATED */
-    subtitle:
-      'Input parameter `data.user`, providing essential user information linked to the present access token.',
+    subtitle: 'Use `data.user` input parameter to provide vital user info.',
   },
   token_data: {
     /** UNTRANSLATED */
     title: 'Token data',
     /** UNTRANSLATED */
-    subtitle:
-      'Input parameter `token`, providing the payload of the current access token for contextual reference.',
+    subtitle: 'Use `token` input parameter for current access token payload. ',
   },
   fetch_external_data: {
     /** UNTRANSLATED */
     title: 'Fetch external data',
     /** UNTRANSLATED */
-    subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
+    subtitle: 'Incorporate data from your external APIs directly into claims.',
     /** UNTRANSLATED */
     description:
       'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
@@ -76,8 +73,7 @@ const jwt_claims = {
     /** UNTRANSLATED */
     title: 'Set environment variables',
     /** UNTRANSLATED */
-    subtitle:
-      'Use environment variables to store sensitive information and access them in your custom claims handler.',
+    subtitle: 'Use environment variables to store sensitive information.',
     /** UNTRANSLATED */
     input_field_title: 'Add environment variables',
     /** UNTRANSLATED */