refactor(console): extract the FormField from KeyValueInput

extract the FormField from KeyValueInput
logto-io · Mar 6, 2024 · 305a220 · 305a220
1 parent b47bc46
commit 305a220
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/packages/console/src/ds-components/KeyValueInputField/index.tsx b/packages/console/src/ds-components/KeyValueInputField/index.tsx
@@ -1,12 +1,9 @@
-import { type AdminConsoleKey } from '@logto/phrases';
-import { type ReactElement, useCallback } from 'react';
+import { useCallback } from 'react';
 import { type FieldError } from 'react-hook-form';
 
 import CirclePlus from '@/assets/icons/circle-plus.svg';
 import Minus from '@/assets/icons/minus.svg';
 import Button from '@/ds-components/Button';
-import type DangerousRaw from '@/ds-components/DangerousRaw';
-import FormField from '@/ds-components/FormField';
 import IconButton from '@/ds-components/IconButton';
 import TextInput, { type Props as TextInputProps } from '@/ds-components/TextInput';
 
@@ -27,8 +24,7 @@ type InputFieldPropsGetter = {
 };
 
 type Props = {
-  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
-  tip?: string;
+  className?: string;
   fields: Array<FieldType & { id: string }>; // Id is required to uniquely identify each field
   errors?: Array<ErrorType | undefined>;
   getInputFieldProps: InputFieldPropsGetter;
@@ -42,18 +38,16 @@ type Props = {
  * This component is used to add multiple key-value pairs.
  * For most of the cases, it is designed to be used along with react-hook-form.
  * All the input properties are registered with react-hook-form.
- *
- * @param {string} title - The title of the field.
- * @param {string} [tip] - The tip for the field.
- * @param {FieldType} fields - The array of key-value pairs. @see {@link https://react-hook-form.com/docs/usefieldarray}
- * @param {ErrorType[]} [errors] - The array of errors for each field. Accepts both string and FieldError from RHF.
- * @param {Function} onRemove - The function to remove a field. @see {@link https://react-hook-form.com/docs/usefieldarray}
- * @param {Function} onAppend - The function to append a new field. @see {@link https://react-hook-form.com/docs/usefieldarray}
+ * @param {Props} props - The props for the component.
+ * @param {string} [props.className] - The class name for the container.
+ * @param {FieldType} props.fields - The array of key-value pairs. @see {@link https://react-hook-form.com/docs/usefieldarray}
+ * @param {ErrorType[]} [props.errors] - The array of errors for each field. Accepts both string and FieldError from RHF.
+ * @param {Function} props.onRemove - The function to remove a field. @see {@link https://react-hook-form.com/docs/usefieldarray}
+ * @param {Function} props.onAppend - The function to append a new field. @see {@link https://react-hook-form.com/docs/usefieldarray}
  * @param {InputFieldPropsGetter} getInputFieldProps - The function bundle to get the input field props for each field. e.g. Use React Hook Form's register method to register the input field.
  */
 function KeyValueInputField({
-  title,
-  tip,
+  className,
   fields,
   errors,
   getInputFieldProps,
@@ -78,7 +72,7 @@ function KeyValueInputField({
   );
 
   return (
-    <FormField title={title} tip={tip}>
+    <div className={className}>
       {fields.map((field, index) => {
         return (
           // Use id as the element key if it exists (generated by react-hook-form useFieldArray method), otherwise use the key
@@ -120,7 +114,7 @@ function KeyValueInputField({
           onAppend({ key: '', value: '' });
         }}
       />
-    </FormField>
+    </div>
   );
 }
 

diff --git a/packages/console/src/pages/WebhookDetails/WebhookSettings/CustomHeaderField/index.tsx b/packages/console/src/pages/WebhookDetails/WebhookSettings/CustomHeaderField/index.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import FormField from '@/ds-components/FormField';
 import KeyValueInputField from '@/ds-components/KeyValueInputField';
 import { type WebhookDetailsFormType } from '@/pages/WebhookDetails/types';
 
@@ -96,16 +97,19 @@ function CustomHeaderField() {
   );
 
   return (
-    <KeyValueInputField
+    <FormField
       title="webhook_details.settings.custom_headers"
       tip={t('webhook_details.settings.custom_headers_tip')}
-      fields={fields}
-      // Force headerErrors to be an array, otherwise return undefined
-      errors={headerErrors?.map?.((error) => error)}
-      getInputFieldProps={getInputFieldProps}
-      onAppend={append}
-      onRemove={remove}
-    />
+    >
+      <KeyValueInputField
+        fields={fields}
+        // Force headerErrors to be an array, otherwise return undefined
+        errors={headerErrors?.map?.((error) => error)}
+        getInputFieldProps={getInputFieldProps}
+        onAppend={append}
+        onRemove={remove}
+      />
+    </FormField>
   );
 }