From 7d0bf7b471c77cfc583caa97e595a27241f8b971 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Wed, 13 Mar 2024 17:59:40 +0800
Subject: [PATCH] fix(console): fix code edtior set undefined value bug

fix the code editor set undefined value bug
---
 .../console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx   | 3 ++-
 packages/console/src/pages/JwtClaims/ScriptSection.tsx       | 5 +++--
 packages/console/src/pages/JwtClaims/utils.ts                | 5 +++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx b/packages/console/src/pages/JwtClaims/MonacoCodeEditor/index.tsx
index fb091f7b755..1d69d9141e0 100644
--- 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
index eb361a468c5..3ff18718118 100644
--- 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
index 58ef054edea..1adccd8cd73 100644
--- 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