fix(console): remove react warning from connector config form (#3720)

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ChangeEvent, KeyboardEvent } from 'react';
-import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark as a11yDarkTheme } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -17,8 +17,7 @@ type Props = {
   value?: string;
   onChange?: (value: string) => void;
   tabSize?: number;
-  hasError?: boolean;
-  errorMessage?: string;
+  error?: string | boolean;
   placeholder?: string;
 };
 
@@ -29,8 +28,7 @@ function CodeEditor({
   value,
   onChange,
   tabSize = 2,
-  hasError,
-  errorMessage,
+  error,
   placeholder,
 }: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -79,13 +77,7 @@ function 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]);
+  const finalErrorMessage = typeof error === 'string' && !!error ? error : t('general.required');
 
   const maxLineNumberDigits = ((value ?? '').split('\n').length + 1).toString().length;
   const isShowingPlaceholder = !value;
@@ -141,7 +133,7 @@ function CodeEditor({
           </SyntaxHighlighter>
         </div>
       </div>
-      {hasError && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
+      {finalErrorMessage && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
     </>
   );
 }

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

@@ -23,7 +23,7 @@ type Props<T> = {
   options: Array<Option<T>>;
   onChange?: (value?: T) => void;
   isReadOnly?: boolean;
-  hasError?: boolean;
+  error?: string | boolean;
   placeholder?: ReactNode;
   isClearable?: boolean;
   size?: 'small' | 'medium' | 'large';
@@ -35,7 +35,7 @@ function Select<T extends string>({
   options,
   onChange,
   isReadOnly,
-  hasError,
+  error,
   placeholder,
   isClearable,
   size = 'large',
@@ -64,7 +64,7 @@ function Select<T extends string>({
           styles[size],
           isOpen && styles.open,
           isReadOnly && styles.readOnly,
-          hasError && styles.error,
+          Boolean(error) && styles.error,
           isClearable && value && styles.clearable,
           className
         )}

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

@@ -84,7 +84,7 @@ function TextInput(
       <div
         className={classNames(
           styles.container,
-          error && styles.error,
+          Boolean(error) && styles.error,
           isConfidential && isContentHidden && type === 'text' && styles.hideTextContainerContent,
           icon && styles.withIcon,
           disabled && styles.disabled,

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

@@ -6,15 +6,15 @@ import * as styles from './index.module.scss';
 
 type Props = HTMLProps<HTMLTextAreaElement> & {
   className?: string;
-  hasError?: boolean;
+  error?: string | boolean;
 };
 
 function Textarea(
-  { className, hasError, ...rest }: Props,
+  { className, error, ...rest }: Props,
   reference: ForwardedRef<HTMLTextAreaElement>
 ) {
   return (
-    <div className={classNames(styles.container, hasError && styles.error, className)}>
+    <div className={classNames(styles.container, Boolean(error) && styles.error, className)}>
       <textarea {...rest} ref={reference} />
     </div>
   );

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

@@ -47,8 +47,7 @@ function ConfigForm({ formItems }: Props) {
   }, [formItems, values]);
 
   const renderFormItem = (item: ConnectorConfigFormItem) => {
-    const hasError = Boolean(errors[item.key]);
-    const errorMessage = errors[item.key]?.message;
+    const error = errors[item.key]?.message ?? Boolean(errors[item.key]);
 
     const buildCommonProperties = () => ({
       ...register(item.key, {
@@ -56,7 +55,7 @@ function ConfigForm({ formItems }: Props) {
         valueAsNumber: item.type === ConnectorConfigFormItemType.Number,
       }),
       placeholder: item.placeholder,
-      hasError,
+      error,
     });
 
     if (item.type === ConnectorConfigFormItemType.Text) {
@@ -109,7 +108,7 @@ function ConfigForm({ formItems }: Props) {
               <Select
                 options={item.selectItems}
                 value={typeof value === 'string' ? value : undefined}
-                hasError={hasError}
+                error={error}
                 onChange={onChange}
               />
             );
@@ -119,8 +118,7 @@ function ConfigForm({ formItems }: Props) {
             return (
               <CodeEditor
                 language="json"
-                hasError={hasError}
-                errorMessage={errorMessage}
+                error={error}
                 value={typeof value === 'string' ? value : '{}'}
                 onChange={onChange}
               />
@@ -131,7 +129,7 @@ function ConfigForm({ formItems }: Props) {
           // This will happen when connector's version is ahead of AC
           return (
             <TextInput
-              error={hasError}
+              error={error}
               value={typeof value === 'string' ? value : ''}
               onChange={onChange}
             />

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

@@ -54,8 +54,7 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props)
             }}
             render={({ field: { onChange, value } }) => (
               <CodeEditor
-                hasError={Boolean(errors.config)}
-                errorMessage={errors.config?.message}
+                error={errors.config?.message ?? Boolean(errors.config)}
                 language="json"
                 value={value}
                 onChange={onChange}

packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx

@@ -131,7 +131,7 @@ function SignUpForm() {
           render={({ field: { value, onChange } }) => (
             <Select
               value={value}
-              hasError={Boolean(errors.signUp?.identifier)}
+              error={Boolean(errors.signUp?.identifier)}
               options={signUpIdentifiers.map((identifier) => ({
                 value: identifier,
                 title: (