fix(console): skip validation for empty value in json editor (#3506)

packages/console/src/components/CodeEditor/index.tsx

@@ -1,7 +1,8 @@
 import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import type { ChangeEvent, KeyboardEvent } from 'react';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
@@ -32,6 +33,7 @@ const CodeEditor = ({
   placeholder,
 }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = event.currentTarget;
@@ -55,6 +57,15 @@ const CodeEditor = ({
     }
   };
 
+  // TODO @sijie temp solution for required error (the errorMessage is an empty string)
+  const finalErrorMessage = useMemo(() => {
+    if (errorMessage) {
+      return errorMessage;
+    }
+
+    return t('general.required');
+  }, [errorMessage, t]);
+
   return (
     <>
       <div className={classNames(styles.container, className)}>
@@ -101,7 +112,7 @@ const CodeEditor = ({
           </SyntaxHighlighter>
         </div>
       </div>
-      {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+      {hasError && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
     </>
   );
 };

packages/console/src/pages/Connectors/components/ConfigForm/index.tsx

@@ -71,15 +71,15 @@ const ConfigForm = ({ formItems }: Props) => {
       <Controller
         name={item.key}
         control={control}
-        rules={
-          item.type === ConnectorConfigFormItemType.Json
-            ? {
-                validate: (value) =>
+        rules={{
+          required: item.required,
+          validate:
+            item.type === ConnectorConfigFormItemType.Json
+              ? (value) =>
                   (typeof value === 'string' && jsonValidator(value)) ||
-                  t('errors.invalid_json_format'),
-              }
-            : undefined
-        }
+                  t('errors.invalid_json_format')
+              : undefined,
+        }}
         render={({ field: { onChange, value } }) => {
           if (item.type === ConnectorConfigFormItemType.Switch) {
             return (