fix(console): add json validator to connector config (#2774)

packages/console/src/components/CodeEditor/index.module.scss

@@ -57,3 +57,9 @@
     }
   }
 }
+
+.errorMessage {
+  font: var(--font-body-medium);
+  color: var(--color-error);
+  margin-top: _.unit(1);
+}

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

@@ -14,6 +14,8 @@ type Props = {
   value?: string;
   onChange?: (value: string) => void;
   tabSize?: number;
+  hasError?: boolean;
+  errorMessage?: string;
 };
 
 const CodeEditor = ({
@@ -23,6 +25,8 @@ const CodeEditor = ({
   value = '',
   onChange,
   tabSize = 2,
+  hasError,
+  errorMessage,
 }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -49,6 +53,7 @@ const CodeEditor = ({
   };
 
   return (
+    <>
       <div className={classNames(styles.container, className)}>
         <CopyToClipboard value={value} variant="icon" className={styles.copy} />
         <div className={styles.editor}>
@@ -92,6 +97,8 @@ const CodeEditor = ({
           </SyntaxHighlighter>
         </div>
       </div>
+      {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+    </>
   );
 };
 

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

@@ -12,7 +12,7 @@ import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import TextInput from '@/components/TextInput';
 import TextLink from '@/components/TextLink';
-import { uriValidator } from '@/utilities/validator';
+import { uriValidator, jsonValidator } from '@/utilities/validator';
 
 import type { ConnectorFormType } from '../../types';
 import { SyncProfileMode } from '../../types';
@@ -127,9 +127,17 @@ const ConnectorForm = ({ connector, isAllowEditTarget }: Props) => {
           name="config"
           control={control}
           defaultValue={configTemplate}
-          rules={{ required: true }}
+          rules={{
+            validate: (value) => jsonValidator(value) || t('errors.invalid_json_format'),
+          }}
           render={({ field: { onChange, value } }) => (
-            <CodeEditor language="json" value={value} onChange={onChange} />
+            <CodeEditor
+              hasError={Boolean(errors.config)}
+              errorMessage={errors.config?.message}
+              language="json"
+              value={value}
+              onChange={onChange}
+            />
           )}
         />
       </FormField>

packages/console/src/utilities/validator.ts

@@ -16,3 +16,13 @@ export const uriOriginValidator = (value: string) => {
     return false;
   }
 };
+
+export const jsonValidator = (value: string) => {
+  try {
+    JSON.parse(value);
+  } catch {
+    return false;
+  }
+
+  return true;
+};