chore(console): put description under email domain field (#5005)

packages/console/src/pages/EnterpriseSsoDetails/Experience/MultiInput/index.module.scss

@@ -70,10 +70,18 @@
     border-color: var(--color-primary);
     outline-color: var(--color-focused-variant);
   }
+
+  &.error {
+    border-color: var(--color-error);
+
+    &:focus-within {
+      outline-color: var(--color-danger-focused);
+    }
+  }
 }
 
-.error {
-  border-color: var(--color-error);
+.errorMessage {
   font: var(--font-body-2);
+  color: var(--color-error);
   margin-top: _.unit(1);
 }

packages/console/src/pages/EnterpriseSsoDetails/Experience/MultiInput/index.tsx

@@ -64,92 +64,97 @@ function MultiInput({ className, values, onChange, error, placeholder }: Props)
   };
 
   return (
-    <div
-      className={classNames(
-        styles.input,
-        styles.multiple,
-        Boolean(error) && styles.error,
-        className
-      )}
-      role="button"
-      tabIndex={0}
-      onKeyDown={onKeyDownHandler(() => {
-        inputRef.current?.focus();
-      })}
-      onClick={() => {
-        inputRef.current?.focus();
-      }}
-    >
-      {values.map((option) => {
-        return (
-          <Tag
-            key={option.id}
-            variant="cell"
-            className={classNames(
-              styles.tag,
-              option.status && styles[option.status],
-              option.id === focusedValueId && styles.focused
-            )}
-            onClick={() => {
-              inputRef.current?.focus();
-            }}
-          >
-            {option.value}
-            <IconButton
-              className={styles.delete}
-              size="small"
-              onClick={() => {
-                handleDelete(option);
-              }}
-              onKeyDown={onKeyDownHandler(() => {
-                handleDelete(option);
-              })}
-            >
-              <Close className={styles.close} />
-            </IconButton>
-          </Tag>
-        );
-      })}
-      <input
-        ref={inputRef}
-        // Need to use t() to complete the translation with prefix, use String() to convert the result to string.
-        // Should not show placeholder when there are values.
-        placeholder={conditional(values.length === 0 && placeholder && String(t(placeholder)))}
-        value={currentValue}
-        onKeyDown={(event) => {
-          if (event.key === 'Backspace' && currentValue === '') {
-            if (focusedValueId) {
-              onChange(values.filter(({ id }) => id !== focusedValueId));
-              setFocusedValueId(null);
-            } else {
-              setFocusedValueId(values.at(-1)?.id ?? null);
-            }
-            inputRef.current?.focus();
-          }
-          if (event.key === ' ' || event.code === 'Space' || event.key === 'Enter') {
-            // Focusing on input
-            if (currentValue !== '' && document.activeElement === inputRef.current) {
-              handleAdd(currentValue);
-            }
-            // Do not react to "Enter"
-            event.preventDefault();
-          }
-        }}
-        onChange={({ currentTarget: { value } }) => {
-          setCurrentValue(value);
-          setFocusedValueId(null);
-        }}
-        onFocus={() => {
+    <>
+      <div
+        className={classNames(
+          styles.input,
+          styles.multiple,
+          Boolean(error) && styles.error,
+          className
+        )}
+        role="button"
+        tabIndex={0}
+        onKeyDown={onKeyDownHandler(() => {
+          inputRef.current?.focus();
+        })}
+        onClick={() => {
           inputRef.current?.focus();
         }}
-        onBlur={() => {
-          if (currentValue !== '') {
-            handleAdd(currentValue);
-          }
-          setFocusedValueId(null);
-        }}
-      />
-    </div>
+      >
+        {values.map((option) => {
+          return (
+            <Tag
+              key={option.id}
+              variant="cell"
+              className={classNames(
+                styles.tag,
+                option.status && styles[option.status],
+                option.id === focusedValueId && styles.focused
+              )}
+              onClick={() => {
+                inputRef.current?.focus();
+              }}
+            >
+              {option.value}
+              <IconButton
+                className={styles.delete}
+                size="small"
+                onClick={() => {
+                  handleDelete(option);
+                }}
+                onKeyDown={onKeyDownHandler(() => {
+                  handleDelete(option);
+                })}
+              >
+                <Close className={styles.close} />
+              </IconButton>
+            </Tag>
+          );
+        })}
+        <input
+          ref={inputRef}
+          // Need to use t() to complete the translation with prefix, use String() to convert the result to string.
+          // Should not show placeholder when there are values.
+          placeholder={conditional(values.length === 0 && placeholder && String(t(placeholder)))}
+          value={currentValue}
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace' && currentValue === '') {
+              if (focusedValueId) {
+                onChange(values.filter(({ id }) => id !== focusedValueId));
+                setFocusedValueId(null);
+              } else {
+                setFocusedValueId(values.at(-1)?.id ?? null);
+              }
+              inputRef.current?.focus();
+            }
+            if (event.key === ' ' || event.code === 'Space' || event.key === 'Enter') {
+              // Focusing on input
+              if (currentValue !== '' && document.activeElement === inputRef.current) {
+                handleAdd(currentValue);
+              }
+              // Do not react to "Enter"
+              event.preventDefault();
+            }
+          }}
+          onChange={({ currentTarget: { value } }) => {
+            setCurrentValue(value);
+            setFocusedValueId(null);
+          }}
+          onFocus={() => {
+            inputRef.current?.focus();
+          }}
+          onBlur={() => {
+            if (currentValue !== '') {
+              handleAdd(currentValue);
+            }
+            setFocusedValueId(null);
+          }}
+        />
+      </div>
+      {Boolean(error) && typeof error === 'string' && (
+        <div className={styles.errorMessage}>{error}</div>
+      )}
+    </>
   );
 }
 

packages/console/src/pages/EnterpriseSsoDetails/Experience/index.module.scss

@@ -3,12 +3,6 @@
 .description {
   color: var(--color-text-secondary);
   font: var(--font-body-2);
-  margin-bottom: _.unit(1);
-}
-
-.errorMessage {
-  font: var(--font-body-2);
-  color: var(--color-error);
   margin-top: _.unit(1);
 }
 

packages/console/src/pages/EnterpriseSsoDetails/Experience/index.tsx

@@ -179,9 +179,6 @@ function Experience({ data, isDeleted, onUpdated }: Props) {
             </InlineNotification>
           )}
           <FormField isRequired title="enterprise_sso_details.email_domain_field_name">
-            <div className={styles.description}>
-              {t('enterprise_sso_details.email_domain_field_description')}
-            </div>
             <Controller
               name="domains"
               control={control}
@@ -256,7 +253,9 @@ function Experience({ data, isDeleted, onUpdated }: Props) {
                 />
               )}
             />
-            {errors.domains && <div className={styles.errorMessage}>{errors.domains.message}</div>}
+            <div className={styles.description}>
+              {t('enterprise_sso_details.email_domain_field_description')}
+            </div>
           </FormField>
           <FormField title="enterprise_sso_details.sync_profile_field_name">
             <Controller