fix(console): fix code edtior set undefined value bug

fix the code editor set undefined value bug
logto-io · Mar 14, 2024 · 7d0bf7b · 7d0bf7b
1 parent abb2c9f
commit 7d0bf7b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx b/packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx
@@ -155,7 +155,8 @@ function MonacoCodeEditor({
             path={activeModel.name}
             theme="logto-dark"
             options={defaultOptions}
-            value={value ?? activeModel.defaultValue}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
+            value={value || activeModel.defaultValue}
             beforeMount={handleEditorWillMount}
             onMount={handleEditorDidMount}
             onChange={onChange}

diff --git a/packages/console/src/pages/JwtClaims/ScriptSection.tsx b/packages/console/src/pages/JwtClaims/ScriptSection.tsx
@@ -57,11 +57,12 @@ function ScriptSection() {
             onChange={(newValue) => {
               // If the value is the same as the default code and the original form script value is undefined, reset the value to undefined as well
               if (newValue === activeModel.defaultValue && !defaultValues?.script) {
-                onChange();
+                onChange('');
                 return;
               }
 
-              onChange(newValue);
+              // Input value should not be undefined for react-hook-form @see https://react-hook-form.com/docs/usecontroller/controller
+              onChange(newValue ?? '');
             }}
             onMountHandler={onMountHandler}
           />

diff --git a/packages/console/src/pages/JwtClaims/utils.ts b/packages/console/src/pages/JwtClaims/utils.ts
@@ -31,7 +31,7 @@ export const formatResponseDataToFormData = <T extends LogtoJwtTokenPath>(
     : ClientCredentialsJwtCustomizer
 ): JwtClaimsFormType => {
   return {
-    script: data?.script,
+    script: data?.script ?? '', // React-hook-form won't mutate the value if it's undefined
     tokenType,
     environmentVariables: formatEnvVariablesResponseToFormData(data?.envVars) ?? [
       { key: '', value: '' },
@@ -71,7 +71,8 @@ const formatSampleCodeStringToJson = (sampleCode?: string) => {
 
 export const formatFormDataToRequestData = (data: JwtClaimsFormType) => {
   return {
-    script: data.script,
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- parse empty string as undefined
+    script: data.script || undefined,
     envVars: formatEnvVariablesFormData(data.environmentVariables),
     tokenSample: formatSampleCodeStringToJson(data.testSample?.tokenSample),
     // Technically, contextSample is always undefined for client credentials token type