From f7dd75dca1e524df5241ad66c2943c07640c6c1b Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 5 Apr 2022 12:04:15 +0200
Subject: [PATCH] (ui) refactor form components to use props inheritance

---
 .../authentication-provider/provider-form.tsx |  2 +-
 .../components/base/fab-multi-select.tsx      | 17 ++++++----
 .../javascript/components/base/fab-select.tsx | 17 ++++++----
 .../javascript/components/base/rhf-input.tsx  | 32 ++++---------------
 .../src/javascript/models/form-component.ts   | 24 ++++++++++++++
 5 files changed, 51 insertions(+), 41 deletions(-)
 create mode 100644 app/frontend/src/javascript/models/form-component.ts

diff --git a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
index cfd6c9d9f..f628f7a92 100644
--- a/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
+++ b/app/frontend/src/javascript/components/authentication-provider/provider-form.tsx
@@ -47,7 +47,7 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ action, provider, on
   return (
     <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
       <RHFInput id="name" register={register} readOnly={action === 'update'} rules={{ required: true }} label={t('app.shared.authentication.name')} />
-      <FabSelect id="providable_type" control={control} options={buildProvidableTypeOptions()} valueDefault={'DatabaseProvider'} />
+      <FabSelect id="providable_type" control={control} options={buildProvidableTypeOptions()} label={t('app.shared.authentication.authentication_type')} rules={{ required: true }} />
       <input type={'submit'} />
     </form>
   );
diff --git a/app/frontend/src/javascript/components/base/fab-multi-select.tsx b/app/frontend/src/javascript/components/base/fab-multi-select.tsx
index 077b69b39..f17997a95 100644
--- a/app/frontend/src/javascript/components/base/fab-multi-select.tsx
+++ b/app/frontend/src/javascript/components/base/fab-multi-select.tsx
@@ -1,17 +1,14 @@
 import React, { SelectHTMLAttributes } from 'react';
 import Select from 'react-select';
 import { Controller, Path } from 'react-hook-form';
-import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
+import { FormControlledComponent } from '../../models/form-component';
 
-interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement> {
+interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
-  className?: string,
-  control: Control<TFieldValues, TContext>,
-  placeholder?: string,
   options: Array<selectOption<TOptionValue>>,
   valuesDefault?: Array<TOptionValue>,
 }
@@ -26,9 +23,15 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
  * This component is a wrapper around react-select to use with react-hook-form.
  * It is a multi-select component.
  */
-export const FabMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valuesDefault }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FabMultiSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valuesDefault, error, rules, disabled }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+  const classNames = `
+    fab-multi-select ${className || ''}
+    ${error && error[id] ? 'is-incorrect' : ''}
+    ${rules && rules.required ? 'is-required' : ''}
+    ${disabled ? 'is-disabled' : ''}`;
+
   return (
-    <label className={`fab-multi-select ${className || ''}`}>
+    <label className={classNames}>
       {label && <div className="fab-multi-select-header">
         <p>{label}</p>
       </div>}
diff --git a/app/frontend/src/javascript/components/base/fab-select.tsx b/app/frontend/src/javascript/components/base/fab-select.tsx
index 08f6828d2..b4f4ffa32 100644
--- a/app/frontend/src/javascript/components/base/fab-select.tsx
+++ b/app/frontend/src/javascript/components/base/fab-select.tsx
@@ -1,17 +1,14 @@
 import React, { SelectHTMLAttributes } from 'react';
 import Select from 'react-select';
 import { Controller, Path } from 'react-hook-form';
-import { Control } from 'react-hook-form/dist/types/form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
 import { FieldPathValue, UnpackNestedValue } from 'react-hook-form/dist/types';
+import { FormControlledComponent } from '../../models/form-component';
 
-interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement> {
+interface FabSelectProps<TFieldValues, TContext extends object, TOptionValue> extends SelectHTMLAttributes<HTMLSelectElement>, FormControlledComponent<TFieldValues, TContext> {
   id: string,
   label?: string,
-  className?: string,
-  control: Control<TFieldValues, TContext>,
-  placeholder?: string,
   options: Array<selectOption<TOptionValue>>,
   valueDefault?: TOptionValue,
 }
@@ -25,9 +22,15 @@ type selectOption<TOptionValue> = { value: TOptionValue, label: string };
 /**
  * This component is a wrapper for react-select to use with react-hook-form
  */
-export const FabSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+export const FabSelect = <TFieldValues extends FieldValues, TContext extends object, TOptionValue>({ id, label, className, control, placeholder, options, valueDefault, error, rules, disabled }: FabSelectProps<TFieldValues, TContext, TOptionValue>) => {
+  const classNames = `
+    fab-select ${className || ''}
+    ${error && error[id] ? 'is-incorrect' : ''}
+    ${rules && rules.required ? 'is-required' : ''}
+    ${disabled ? 'is-disabled' : ''}`;
+
   return (
-    <label className={`fab-select ${className || ''}`}>
+    <label className={classNames}>
       {label && <div className="fab-select-header">
         <p>{label}</p>
       </div>}
diff --git a/app/frontend/src/javascript/components/base/rhf-input.tsx b/app/frontend/src/javascript/components/base/rhf-input.tsx
index ffb6f4807..cb2acb672 100644
--- a/app/frontend/src/javascript/components/base/rhf-input.tsx
+++ b/app/frontend/src/javascript/components/base/rhf-input.tsx
@@ -1,45 +1,25 @@
-import React, { ReactNode } from 'react';
-import { FieldErrors, FieldPathValue, UseFormRegister, Validate } from 'react-hook-form';
+import React, { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
+import { FormComponent } from '../../models/form-component';
 
-type inputType = string|number|readonly string [];
-type ruleTypes<TFieldValues> = {
-  required?: boolean | string,
-  pattern?: RegExp | {value: RegExp, message: string},
-  minLength?: number,
-  maxLength?: number,
-  min?: number,
-  max?: number,
-  validate?: Validate<TFieldValues>;
-};
-
-interface RHFInputProps<TFieldValues> {
+interface RHFInputProps<TFieldValues> extends InputHTMLAttributes<HTMLInputElement>, FormComponent<TFieldValues>{
   id: string,
-  register: UseFormRegister<TFieldValues>,
   label?: string,
   tooltip?: string,
-  defaultValue?: inputType,
   icon?: ReactNode,
   addOn?: ReactNode,
   addOnClassName?: string,
-  classes?: string,
-  rules?: ruleTypes<TFieldValues>,
-  readOnly?: boolean,
-  disabled?: boolean,
-  placeholder?: string,
-  error?: FieldErrors,
-  type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week',
-  step?: number | 'any'
 }
 
 /**
  * This component is a template for an input component to use within React Hook Form
  */
-export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, classes, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: RHFInputProps<TFieldValues>) => {
+export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, className, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: RHFInputProps<TFieldValues>) => {
   // Compose classnames from props
   const classNames = `
-    rhf-input ${classes || ''}
+    rhf-input ${className || ''}
     ${error && error[id] ? 'is-incorrect' : ''}
     ${rules && rules.required ? 'is-required' : ''}
     ${readOnly ? 'is-readOnly' : ''}
diff --git a/app/frontend/src/javascript/models/form-component.ts b/app/frontend/src/javascript/models/form-component.ts
new file mode 100644
index 000000000..a3588d55f
--- /dev/null
+++ b/app/frontend/src/javascript/models/form-component.ts
@@ -0,0 +1,24 @@
+import { FieldErrors, UseFormRegister, Validate } from 'react-hook-form';
+import { Control } from 'react-hook-form/dist/types/form';
+
+export type ruleTypes<TFieldValues> = {
+  required?: boolean | string,
+  pattern?: RegExp | {value: RegExp, message: string},
+  minLength?: number,
+  maxLength?: number,
+  min?: number,
+  max?: number,
+  validate?: Validate<TFieldValues>;
+};
+
+export interface FormComponent<TFieldValues> {
+  register: UseFormRegister<TFieldValues>,
+  error?: FieldErrors,
+  rules?: ruleTypes<TFieldValues>,
+}
+
+export interface FormControlledComponent<TFieldValues, TContext extends object> {
+  control: Control<TFieldValues, TContext>,
+  error?: FieldErrors,
+  rules?: ruleTypes<TFieldValues>,
+}