feat(console, phrases): implement the copy, clear and reset button (#5490)

* refactor(console): replace copy button with CopyToClipboard component

replace copy button with CopyToClipboard component

* feat(console): implement the clear and reset button

implement the clear and reset button

* refactor(console): bind RHF controller to the code editor

bind RHF controller to the code editor

* chore(console): add some comments

add some comments

packages/console/src/pages/JwtClaims/MonacoCodeEditor/ActionButton/CodeClearButton.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+
+import ClearIcon from '@/assets/icons/clear.svg';
+
+import ActionButton from './index';
+
+type Props = {
+  onClick: () => void;
+};
+
+function CodeClearButton({ onClick }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <ActionButton
+      actionTip={t('jwt_claims.clear')}
+      actionSuccessTip={t('jwt_claims.cleared')}
+      icon={<ClearIcon />}
+      onClick={onClick}
+    />
+  );
+}
+
+export default CodeClearButton;

packages/console/src/pages/JwtClaims/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+
+import RedoIcon from '@/assets/icons/redo.svg';
+
+import ActionButton from './index';
+
+type Props = {
+  onClick: () => void;
+};
+
+function CodeRestoreButton({ onClick }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <ActionButton
+      actionTip={t('jwt_claims.restore')}
+      actionSuccessTip={t('jwt_claims.restored')}
+      icon={<RedoIcon />}
+      onClick={onClick}
+    />
+  );
+}
+
+export default CodeRestoreButton;

packages/console/src/pages/JwtClaims/MonacoCodeEditor/ActionButton/index.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useRef, useState, type MouseEventHandler, useEffect } from 'react';
+
+import IconButton from '@/ds-components/IconButton';
+import { Tooltip } from '@/ds-components/Tip';
+
+type Props = {
+  actionTip: string;
+  actionSuccessTip: string;
+  actionLoadingTip?: string;
+  className?: string;
+  icon: React.ReactNode;
+  onClick: () => Promise<void> | void;
+};
+
+function ActionButton({
+  actionTip,
+  actionSuccessTip,
+  actionLoadingTip,
+  className,
+  icon,
+  onClick,
+}: Props) {
+  const [tipContent, setTipContent] = useState(actionTip);
+  const iconButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const mouseLeaveHandler = () => {
+      setTipContent(actionTip);
+    };
+
+    iconButtonRef.current?.addEventListener('mouseleave', mouseLeaveHandler);
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- iconButtonRef.current is not a dependency
+      iconButtonRef.current?.removeEventListener('mouseleave', mouseLeaveHandler);
+    };
+  });
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(async () => {
+    iconButtonRef.current?.blur();
+
+    if (actionLoadingTip) {
+      setTipContent(actionLoadingTip);
+    }
+
+    await onClick();
+    setTipContent(actionSuccessTip);
+  }, [actionLoadingTip, actionSuccessTip, onClick]);
+
+  return (
+    <div className={className}>
+      <Tooltip content={tipContent} isSuccessful={tipContent === actionSuccessTip}>
+        <IconButton ref={iconButtonRef} size="small" onClick={handleClick}>
+          {icon}
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}
+
+export default ActionButton;

packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.module.scss

@@ -44,7 +44,7 @@
       }
     }
 
-    .actions {
+    .actionButtons {
       display: flex;
       gap: _.unit(2);
       align-items: center;

packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx

@@ -1,51 +1,69 @@
 import { Editor, type BeforeMount, type OnMount, useMonaco } from '@monaco-editor/react';
 import { type Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { toast } from 'react-hot-toast';
-import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import Copy from '@/assets/icons/copy.svg';
-import IconButton from '@/ds-components/IconButton';
+import CopyToClipboard from '@/ds-components/CopyToClipboard';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import CodeClearButton from './ActionButton/CodeClearButton.js';
+import CodeRestoreButton from './ActionButton/CodeRestoreButton.js';
 import { logtoDarkTheme, defaultOptions } from './config.js';
 import * as styles from './index.module.scss';
-import type { IStandaloneCodeEditor, Model } from './type.js';
+import type { IStandaloneCodeEditor, ModelSettings } from './type.js';
 import useEditorHeight from './use-editor-height.js';
 
-export type { Model } from './type.js';
+export type { ModelSettings, ModelControl } from './type.js';
+
+type ActionButtonType = 'clear' | 'restore' | 'copy';
 
 type Props = {
   className?: string;
-  actions?: React.ReactNode;
-  models: Model[];
+  enabledActions?: ActionButtonType[];
+  models: ModelSettings[];
+  activeModelName?: string;
+  setActiveModel?: (name: string) => void;
+  value?: string;
+  onChange?: (value: string | undefined) => void;
 };
-
-function MonacoCodeEditor({ className, actions, models }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+/**
+ * Monaco code editor component.
+ * @param {Props} prop
+ * @param {string} [prop.className] - The class name of the component.
+ * @param {ActionButtonType[]} prop.enabledActions - The enabled action buttons, available values are 'clear', 'restore', 'copy'.
+ * @param {ModelSettings[]} prop.models - The static model settings (all tabs) for the code editor.
+ * @param {string} prop.activeModelName - The active model name.
+ * @param {(name: string) => void} prop.setActiveModel - The callback function to set the active model. Used to switch between tabs.
+ * @param {string} prop.value - The value of the code editor for the current active model.
+ * @param {(value: string | undefined) => void} prop.onChange - The callback function to handle the value change of the code editor.
+ *
+ * @returns
+ */
+function MonacoCodeEditor({
+  className,
+  enabledActions = ['copy'],
+  models,
+  activeModelName,
+  value,
+  setActiveModel,
+  onChange,
+}: Props) {
   const monaco = useMonaco();
   const editorRef = useRef<Nullable<IStandaloneCodeEditor>>(null);
-
-  const [activeModelName, setActiveModelName] = useState<string>();
+  console.log('code', value);
 
   const activeModel = useMemo(
-    () => models.find((model) => model.name === activeModelName),
+    () => activeModelName && models.find((model) => model.name === activeModelName),
     [activeModelName, models]
   );
 
   const isMultiModals = useMemo(() => models.length > 1, [models]);
 
+  // Get the container ref and the editor height
   const { containerRef, editorHeight } = useEditorHeight();
 
-  // Set the first model as the active model
   useEffect(() => {
-    setActiveModelName(models[0]?.name);
-  }, [models]);
-
-  useEffect(() => {
-    // Add global declarations
-    // monaco will be ready after the editor is mounted, useEffect will be called after the monaco is ready
+    // Monaco will be ready after the editor is mounted, useEffect will be called after the monaco is ready
     if (!monaco || !activeModel) {
       return;
     }
@@ -62,16 +80,6 @@ function MonacoCodeEditor({ className, actions, models }: Props) {
     }
   }, [activeModel, monaco]);
 
-  const handleCodeCopy = useCallback(async () => {
-    const editor = editorRef.current;
-
-    if (editor) {
-      const code = editor.getValue();
-      await navigator.clipboard.writeText(code);
-      toast.success(t('general.copied'));
-    }
-  }, [t]);
-
   const handleEditorWillMount = useCallback<BeforeMount>((monaco) => {
     // Register the new logto theme
     monaco.editor.defineTheme('logto-dark', logtoDarkTheme);
@@ -98,10 +106,10 @@ function MonacoCodeEditor({ className, actions, models }: Props) {
                 role: 'button',
                 tabIndex: 0,
                 onClick: () => {
-                  setActiveModelName(name);
+                  setActiveModel?.(name);
                 },
                 onKeyDown: onKeyDownHandler(() => {
-                  setActiveModelName(name);
+                  setActiveModel?.(name);
                 }),
               })}
             >
@@ -110,25 +118,44 @@ function MonacoCodeEditor({ className, actions, models }: Props) {
             </div>
           ))}
         </div>
-        <div className={styles.actions}>
-          {actions}
-          <IconButton size="small" onClick={handleCodeCopy}>
-            <Copy />
-          </IconButton>
+        <div className={styles.actionButtons}>
+          {enabledActions.includes('clear') && (
+            <CodeClearButton
+              onClick={() => {
+                if (activeModel) {
+                  onChange?.(undefined);
+                }
+              }}
+            />
+          )}
+          {enabledActions.includes('restore') && (
+            <CodeRestoreButton
+              onClick={() => {
+                if (activeModel) {
+                  onChange?.(activeModel.defaultValue);
+                }
+              }}
+            />
+          )}
+          {enabledActions.includes('copy') && (
+            <CopyToClipboard variant="icon" value={editorRef.current?.getValue() ?? ''} />
+          )}
         </div>
       </header>
       <div ref={containerRef} className={styles.editorContainer}>
-        <Editor
-          height={editorHeight}
-          language={activeModel?.language ?? 'typescript'}
-          // TODO: need to check on the usage of value and defaultValue
-          defaultValue={activeModel?.defaultValue}
-          path={activeModel?.name}
-          theme="logto-dark"
-          options={defaultOptions}
-          beforeMount={handleEditorWillMount}
-          onMount={handleEditorDidMount}
-        />
+        {activeModel && (
+          <Editor
+            height={editorHeight}
+            language={activeModel.language}
+            path={activeModel.name}
+            theme="logto-dark"
+            options={defaultOptions}
+            value={value ?? activeModel.defaultValue}
+            beforeMount={handleEditorWillMount}
+            onMount={handleEditorDidMount}
+            onChange={onChange}
+          />
+        )}
       </div>
     </div>
   );

packages/console/src/pages/JwtClaims/MonacoCodeEditor/type.ts

@@ -4,14 +4,25 @@ export type IStandaloneThemeData = Parameters<Monaco['editor']['defineTheme']>[1
 
 export type IStandaloneCodeEditor = Parameters<OnMount>[0];
 
-export type Model = {
+export type ModelSettings = {
   /** Used as the unique key for the monaco editor model @see {@link https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#multi-model-editor} */
   name: string;
   /** The icon of the model, will be displayed on the tab */
   icon?: React.ReactNode;
   /** The title of the model */
   title: string;
-  defaultValue: string;
+  /** The default value of the file */
+  defaultValue?: string;
+  value?: string;
   language: string;
+  /** ExtraLibs can be loaded to the code editor
+   * @see {@link https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.typescript.LanguageServiceDefaults.html#setExtraLibs}
+   * We use this to load the global type declarations for the active model
+   */
   globalDeclarations?: string;
 };
+
+export type ModelControl = {
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+};

packages/console/src/pages/JwtClaims/ScriptSection.tsx

@@ -1,11 +1,11 @@
 /* Code Editor for the custom JWT claims script. */
 import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Card from '@/ds-components/Card';
 
-import MonacoCodeEditor, { type Model } from './MonacoCodeEditor';
+import MonacoCodeEditor, { type ModelSettings } from './MonacoCodeEditor';
 import { userJwtFile, machineToMachineJwtFile, JwtTokenType } from './config';
 import * as styles from './index.module.scss';
 import { type JwtClaimsFormType } from './type';
@@ -18,14 +18,13 @@ const titlePhrases = Object.freeze({
 function ScriptSection() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
-  const { watch } = useFormContext<JwtClaimsFormType>();
+  const { watch, control } = useFormContext<JwtClaimsFormType>();
   const tokenType = watch('tokenType');
 
-  // TODO: API integration, read/write the custom claims code value
-  const activeModel = useMemo<Model>(() => {
-    return tokenType === JwtTokenType.UserAccessToken ? userJwtFile : machineToMachineJwtFile;
-  }, [tokenType]);
-
+  const activeModel = useMemo<ModelSettings>(
+    () => (tokenType === JwtTokenType.UserAccessToken ? userJwtFile : machineToMachineJwtFile),
+    [tokenType]
+  );
   return (
     <Card className={styles.codePanel}>
       <div className={styles.cardTitle}>
@@ -33,7 +32,26 @@ function ScriptSection() {
           token: t(`jwt_claims.${titlePhrases[tokenType]}`),
         })}
       </div>
-      <MonacoCodeEditor className={styles.flexGrow} models={[activeModel]} />
+      <Controller
+        // Force rerender the controller when the token type changes
+        // Otherwise the input field will not be updated
+        key={tokenType}
+        shouldUnregister
+        control={control}
+        name="script"
+        render={({ field: { onChange, value } }) => (
+          <MonacoCodeEditor
+            className={styles.flexGrow}
+            enabledActions={['clear', 'copy']}
+            models={[activeModel]}
+            activeModelName={activeModel.name}
+            value={value}
+            onChange={(newValue) => {
+              onChange(newValue);
+            }}
+          />
+        )}
+      />
     </Card>
   );
 }

packages/console/src/pages/JwtClaims/SettingsSection/TestTab.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import { useCallback, useMemo, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFormContext, Controller, type ControllerRenderProps } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 
-import MonacoCodeEditor from '../MonacoCodeEditor/index.js';
+import MonacoCodeEditor, { type ModelControl } from '../MonacoCodeEditor/index.js';
 import {
   userTokenPayloadTestModel,
   machineToMachineTokenPayloadTestModel,
@@ -22,25 +22,62 @@ type Props = {
   isActive: boolean;
 };
 
+const userTokenModelSettings = [userTokenPayloadTestModel, userTokenContextTestModel];
+const machineToMachineTokenModelSettings = [machineToMachineTokenPayloadTestModel];
+
 function TestTab({ isActive }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
   const [testResult, setTestResult] = useState<TestResultData>();
+  const [activeModelName, setActiveModelName] = useState<string>();
 
-  const { watch } = useFormContext<JwtClaimsFormType>();
+  const { watch, control } = useFormContext<JwtClaimsFormType>();
   const tokenType = watch('tokenType');
 
   const editorModels = useMemo(
     () =>
       tokenType === JwtTokenType.UserAccessToken
-        ? [userTokenPayloadTestModel, userTokenContextTestModel]
-        : [machineToMachineTokenPayloadTestModel],
+        ? userTokenModelSettings
+        : machineToMachineTokenModelSettings,
     [tokenType]
   );
 
+  useEffect(() => {
+    setActiveModelName(editorModels[0]?.name);
+  }, [editorModels, tokenType]);
+
   const onTestHandler = useCallback(() => {
     // TODO: API integration, read form data and send the request to the server
   }, []);
 
+  const getModelControllerProps = useCallback(
+    ({ value, onChange }: ControllerRenderProps<JwtClaimsFormType, 'testSample'>): ModelControl => {
+      // User access token context test model (user data)
+      if (activeModelName === userTokenContextTestModel.name) {
+        return {
+          value: value?.contextSample,
+          onChange: (newValue: string | undefined) => {
+            onChange({
+              ...value,
+              contextSample: newValue,
+            });
+          },
+        };
+      }
+
+      // Token payload test model (user and machine to machine)
+      return {
+        value: value?.tokenSample,
+        onChange: (newValue: string | undefined) => {
+          onChange({
+            ...value,
+            tokenSample: newValue,
+          });
+        },
+      };
+    },
+    [activeModelName]
+  );
+
   return (
     <div className={classNames(styles.tabContent, isActive && styles.active)}>
       <Card className={classNames(styles.card, styles.flexGrow, styles.flexColumn)}>
@@ -52,7 +89,26 @@ function TestTab({ isActive }: Props) {
           <Button title="jwt_claims.tester.run_button" type="primary" onClick={onTestHandler} />
         </div>
         <div className={classNames(styles.cardContent, styles.flexColumn, styles.flexGrow)}>
-          <MonacoCodeEditor models={editorModels} className={styles.flexGrow} />
+          <Controller
+            // Force rerender the controller when the token type changes
+            // Otherwise the input field will not be updated
+            key={tokenType}
+            shouldUnregister
+            control={control}
+            name="testSample"
+            render={({ field }) => (
+              <MonacoCodeEditor
+                className={styles.flexGrow}
+                enabledActions={['restore', 'copy']}
+                models={editorModels}
+                activeModelName={activeModelName}
+                setActiveModel={setActiveModelName}
+                // Pass the value and onChange handler based on the active model
+                {...getModelControllerProps(field)}
+              />
+            )}
+          />
+
           {testResult && (
             <TestResult
               testResult={testResult}

packages/console/src/pages/JwtClaims/config.tsx

@@ -3,7 +3,7 @@ import { type EditorProps } from '@monaco-editor/react';
 import TokenFileIcon from '@/assets/icons/token-file-icon.svg';
 import UserFileIcon from '@/assets/icons/user-file-icon.svg';
 
-import type { Model } from './MonacoCodeEditor/type.js';
+import type { ModelSettings } from './MonacoCodeEditor/type.js';
 
 /**
  * JWT token types
@@ -112,7 +112,7 @@ exports.getCustomJwtClaims = async (token) => {
   return {};
 }`;
 
-export const userJwtFile: Model = {
+export const userJwtFile: ModelSettings = {
   name: 'user-jwt.ts',
   title: 'TypeScript',
   language: 'typescript',
@@ -120,7 +120,7 @@ export const userJwtFile: Model = {
   globalDeclarations: userJwtGlobalDeclarations,
 };
 
-export const machineToMachineJwtFile: Model = {
+export const machineToMachineJwtFile: ModelSettings = {
   name: 'machine-to-machine-jwt.ts',
   title: 'TypeScript',
   language: 'typescript',
@@ -266,7 +266,7 @@ const defaultUserTokenContextData = {
   },
 };
 
-export const userTokenPayloadTestModel: Model = {
+export const userTokenPayloadTestModel: ModelSettings = {
   language: 'json',
   icon: <TokenFileIcon />,
   name: 'user-token-payload.json',
@@ -274,7 +274,7 @@ export const userTokenPayloadTestModel: Model = {
   defaultValue: JSON.stringify(defaultUserTokenPayloadData, null, '\t'),
 };
 
-export const machineToMachineTokenPayloadTestModel: Model = {
+export const machineToMachineTokenPayloadTestModel: ModelSettings = {
   language: 'json',
   icon: <TokenFileIcon />,
   name: 'machine-to-machine-token-payload.json',
@@ -282,7 +282,7 @@ export const machineToMachineTokenPayloadTestModel: Model = {
   defaultValue: JSON.stringify(defaultMachineToMachineTokenPayloadData, null, '\t'),
 };
 
-export const userTokenContextTestModel: Model = {
+export const userTokenContextTestModel: ModelSettings = {
   language: 'json',
   icon: <UserFileIcon />,
   name: 'user-token-context.json',

packages/console/src/pages/JwtClaims/index.tsx

@@ -25,6 +25,7 @@ type Props = {
   tab: JwtTokenType;
 };
 
+// TODO: API integration
 function JwtClaims({ tab }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 

packages/console/src/pages/JwtClaims/type.ts

@@ -4,6 +4,8 @@ export type JwtClaimsFormType = {
   tokenType: JwtTokenType;
   script?: string;
   environmentVariables?: Array<{ key: string; value: string }>;
-  contextSample?: string;
-  tokenSample?: string;
+  testSample?: {
+    contextSample?: string;
+    tokenSample?: string;
+  };
 };

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -7,6 +7,10 @@ const jwt_claims = {
   user_jwt: 'user JWT',
   machine_to_machine_jwt: 'machine-to-machine JWT',
   code_editor_title: 'Customize the {{token}} claims',
+  clear: 'Clear',
+  cleared: 'Cleared',
+  restore: 'Restore defaults',
+  restored: 'Restored',
   data_source_tab: 'Data source',
   test_tab: 'Test claim',
   jwt_claims_description:

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',

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

@@ -15,6 +15,14 @@ const jwt_claims = {
   /** UNTRANSLATED */
   code_editor_title: 'Customize the {{token}} claims',
   /** UNTRANSLATED */
+  clear: 'Clear',
+  /** UNTRANSLATED */
+  cleared: 'Cleared',
+  /** UNTRANSLATED */
+  restore: 'Restore defaults',
+  /** UNTRANSLATED */
+  restored: 'Restored',
+  /** UNTRANSLATED */
   data_source_tab: 'Data source',
   /** UNTRANSLATED */
   test_tab: 'Test claim',