Merge branch '4205-redesign-add-agent-page' into 5518-inputs-logic-se…

…rver-address-name-password-and-group

public/components/common/form/hooks.test.tsx

@@ -1,9 +1,8 @@
 import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { renderHook, act } from '@testing-library/react-hooks';
-import React, { useState } from 'react';
-import { FormConfiguration, useForm } from './hooks';
-import { IInputForm } from './types';
+import { useForm } from './hooks';
+import { FormConfiguration, IInputForm } from './types';
 
 describe('[hook] useForm', () => {
   it(`[hook] useForm. Verify the initial state`, async () => {
@@ -177,39 +176,16 @@ describe('[hook] useForm', () => {
   });
 
   it('[hook] useForm. Verify the hook behavior when receives a custom field type', async () => {
-    const CustomComponent = (props: any) => {
-      const { onChange, field, initialValue } = props;
-      const [value, setValue] = useState(initialValue || '');
-
-      const handleOnChange = (e: any) => {
-        setValue(e.target.value);
-        onChange(e);
-      };
-
-          return (
-            <>
-              {field}
-              <input type='text' value={value} onChange={handleOnChange} />
-            </>
-          );
-      };
-
       const formFields: FormConfiguration = {
         customField: {
           type: 'custom',
           initialValue: 'default value',
-          component: props => CustomComponent(props),
+          component: (props:IInputForm) => (<>any component</>),
         },
       };
 
     const { result } = renderHook(() => useForm(formFields));
-    const { container, getByRole } = render(<CustomComponent {...result.current.fields.customField} />)
-
-    expect(container).toBeInTheDocument();
-    const input = getByRole('textbox');
-    expect(input).toHaveValue('default value');
-    fireEvent.change(input, { target: { value: 'new value' } });
     expect(result.current.fields.customField.component).toBeInstanceOf(Function);
-    expect(result.current.fields.customField.value).toBe('new value');
+    expect(result.current.fields.customField.type).toBe('custom');
   });
 });

public/components/common/form/hooks.tsx

@@ -9,25 +9,33 @@ import {
   UseFormReturn,
 } from './types';
 
-function getValueFromEvent(
-  event: any,
-  type: SettingTypes | CustomSettingType,
-): any {
-  return (getValueFromEventType[type] || getValueFromEventType.default)(event);
+interface IgetValueFromEventType {
+  [key: string]: (event: any) => any;
 }
 
-const getValueFromEventType = {
+const getValueFromEventType: IgetValueFromEventType = {
   [EpluginSettingType.switch]: (event: any) => event.target.checked,
   [EpluginSettingType.editor]: (value: any) => value,
-  [EpluginSettingType.filepicker]: (value: any) => value,
-  [EpluginSettingType.select]: (event: any) => event.target.value,
-  [EpluginSettingType.text]: (event: any) => event.target.value,
-  [EpluginSettingType.textarea]: (event: any) => event.target.value,
-  [EpluginSettingType.number]: (event: any) => event.target.value,
-  custom: (event: any) => event.target.value,
+  custom: (event:any) => event.target,
   default: (event: any) => event.target.value,
 };
 
+/**
+ * Returns the value of the event according to the type of field
+ * When the type is not found, it returns the value defined in the default key
+ * 
+ * @param event 
+ * @param type 
+ * @returns event value
+ */
+function getValueFromEvent(
+  event: any,
+  type: SettingTypes | CustomSettingType | string,
+): any {
+
+  return getValueFromEventType.hasOwnProperty(type) ? getValueFromEventType[type](event) : getValueFromEventType.default(event)
+}
+
 export const useForm = (fields: FormConfiguration): UseFormReturn => {
   const [formFields, setFormFields] = useState<{
     [key: string]: { currentValue: any; initialValue: any };
@@ -91,7 +99,7 @@ export const useForm = (fields: FormConfiguration): UseFormReturn => {
     Object.entries(enhanceFields as EnhancedFields)
       .filter(([, { error }]) => error)
       .map(([fieldKey, { error }]) => [fieldKey, error]),
-  );
+  ) as { [key: string]: string };
 
   function undoChanges() {
     setFormFields(state =>

public/components/common/form/index.tsx

@@ -7,6 +7,23 @@ import { InputFormSwitch } from './input_switch';
 import { InputFormFilePicker } from './input_filepicker';
 import { InputFormTextArea } from './input_text_area';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import { SettingTypes } from './types';
+
+interface InputFormProps {
+  type: SettingTypes;
+  value: any;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+  label?: string;
+  header?: React.ReactNode | ((props: { value: any; error?: string }) => React.ReactNode);
+  footer?: React.ReactNode | ((props: { value: any; error?: string }) => React.ReactNode);
+  preInput?: React.ReactNode | ((props: { value: any; error?: string }) => React.ReactNode);
+  postInput?: React.ReactNode | ((props: { value: any; error?: string }) => React.ReactNode);
+}
+
+interface InputFormComponentProps extends InputFormProps {
+  rest: any;
+}
 
 export interface InputFormProps {
   type: string;

public/components/common/form/types.ts

@@ -19,7 +19,6 @@ export interface IInputForm {
 }
 
 /// use form hook types
-
 export type SettingTypes =
   | 'text'
   | 'textarea'
@@ -55,7 +54,7 @@ interface EnhancedField {
   initialValue: any;
   value: any;
   changed: boolean;
-  error: string;
+  error: string | null;
   setInputRef: (reference: any) => void;
   inputRef: any;
   onChange: (event: any) => void;