Merge pull request #4810 from dfe-analytical-services/EES-5048

EES-5048 RHF chart builder, data catalogue and prototype forms
dfe-analytical-services · May 7, 2024 · 3c530ba · 3c530ba
2 parents d2c2d9a + 38ae03d
commit 3c530ba
Show file tree

Hide file tree

Showing 61 changed files with 5,200 additions and 5,557 deletions.
diff --git a/...statistics-admin/src/pages/release/datablocks/components/chart/ChartAxisConfiguration.tsx b/...statistics-admin/src/pages/release/datablocks/components/chart/ChartAxisConfiguration.tsx
diff --git a/...-admin/src/pages/release/datablocks/components/chart/ChartBoundaryLevelsConfiguration.tsx b/...-admin/src/pages/release/datablocks/components/chart/ChartBoundaryLevelsConfiguration.tsx
@@ -2,11 +2,12 @@ import ChartBuilderSaveActions from '@admin/pages/release/datablocks/components/
 import { useChartBuilderFormsContext } from '@admin/pages/release/datablocks/components/chart/contexts/ChartBuilderFormsContext';
 import { ChartOptions } from '@admin/pages/release/datablocks/components/chart/reducers/chartBuilderReducer';
 import Effect from '@common/components/Effect';
-import { Form, FormFieldSelect } from '@common/components/form';
+import FormProvider from '@common/components/form/rhf/FormProvider';
+import RHFForm from '@common/components/form/rhf/RHFForm';
+import RHFFormFieldSelect from '@common/components/form/rhf/RHFFormFieldSelect';
 import { FullTableMeta } from '@common/modules/table-tool/types/fullTable';
 import parseNumber from '@common/utils/number/parseNumber';
 import Yup from '@common/validation/yup';
-import { Formik } from 'formik';
 import merge from 'lodash/merge';
 import React, { ReactNode, useCallback } from 'react';
 
@@ -20,7 +21,6 @@ interface Props {
   buttons?: ReactNode;
   meta: FullTableMeta;
   options: ChartOptions;
-  onBoundaryLevelChange?: (boundaryLevel: string) => void;
   onChange: (values: ChartOptions) => void;
   onSubmit: (chartOptions: ChartOptions) => void;
 }
@@ -29,7 +29,6 @@ export default function ChartBoundaryLevelsConfiguration({
   buttons,
   meta,
   options,
-  onBoundaryLevelChange,
   onChange,
   onSubmit,
 }: Props) {
@@ -56,61 +55,64 @@ export default function ChartBoundaryLevelsConfiguration({
   );
 
   return (
-    <Formik<FormValues>
+    <FormProvider
       enableReinitialize
       initialValues={{ boundaryLevel: options.boundaryLevel }}
-      validateOnMount
       validationSchema={Yup.object<FormValues>({
         boundaryLevel: Yup.number()
+          .transform(value => (Number.isNaN(value) ? undefined : value))
+          .nullable()
           .oneOf(meta.boundaryLevels.map(level => level.id))
           .required('Choose a boundary level'),
       })}
-      onSubmit={async values => {
-        onSubmit(normalizeValues(values));
-        await submitForms();
-      }}
     >
-      {form => (
-        <Form id={formId}>
-          <Effect value={form.values} onChange={handleChange} />
-          <Effect
-            value={{
-              formKey: 'boundaryLevels',
-              isValid: form.isValid,
-              submitCount: form.submitCount,
-            }}
-            onChange={updateForm}
-            onMount={updateForm}
-          />
-          <FormFieldSelect<FormValues>
-            label="Boundary level"
-            hint="Select a version of geographical data to use"
-            name="boundaryLevel"
-            order={[]}
-            options={[
-              {
-                label: 'Please select',
-                value: '',
-              },
-              ...meta.boundaryLevels.map(({ id, label }) => ({
-                value: id,
-                label,
-              })),
-            ]}
-            onChange={e => {
-              onBoundaryLevelChange?.(e.target.value);
+      {({ formState, watch }) => {
+        const values = watch();
+        return (
+          <RHFForm
+            id={formId}
+            onSubmit={async () => {
+              onSubmit(normalizeValues(values));
+              await submitForms();
             }}
-          />
-
-          <ChartBuilderSaveActions
-            formId={formId}
-            formKey="boundaryLevels"
-            disabled={form.isSubmitting}
           >
-            {buttons}
-          </ChartBuilderSaveActions>
-        </Form>
-      )}
-    </Formik>
+            <Effect value={values} onChange={handleChange} />
+            <Effect
+              value={{
+                formKey: 'boundaryLevels',
+                isValid: formState.isValid,
+                submitCount: formState.submitCount,
+              }}
+              onChange={updateForm}
+              onMount={updateForm}
+            />
+            <RHFFormFieldSelect<FormValues>
+              label="Boundary level"
+              hint="Select a version of geographical data to use"
+              name="boundaryLevel"
+              order={[]}
+              options={[
+                {
+                  label: 'Please select',
+                  value: '',
+                },
+                ...meta.boundaryLevels.map(({ id, label }) => ({
+                  value: id,
+                  label,
+                })),
+              ]}
+            />
+
+            <ChartBuilderSaveActions
+              formId={formId}
+              formKey="boundaryLevels"
+              disabled={formState.isSubmitting}
+            >
+              {buttons}
+            </ChartBuilderSaveActions>
+          </RHFForm>
+        );
+      }}
+    </FormProvider>
   );
 }
diff --git a/...education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx b/...education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx
@@ -8,7 +8,10 @@ import ChartLegendConfiguration from '@admin/pages/release/datablocks/components
 import ChartBoundaryLevelsConfiguration from '@admin/pages/release/datablocks/components/chart/ChartBoundaryLevelsConfiguration';
 import ChartDataGroupingsConfiguration from '@admin/pages/release/datablocks/components/chart/ChartDataGroupingsConfiguration';
 import { ChartBuilderFormsContextProvider } from '@admin/pages/release/datablocks/components/chart/contexts/ChartBuilderFormsContext';
-import { useChartBuilderReducer } from '@admin/pages/release/datablocks/components/chart/reducers/chartBuilderReducer';
+import {
+  ChartOptions,
+  useChartBuilderReducer,
+} from '@admin/pages/release/datablocks/components/chart/reducers/chartBuilderReducer';
 import Button from '@common/components/Button';
 import ModalConfirm from '@common/components/ModalConfirm';
 import Tabs from '@common/components/Tabs';
@@ -282,16 +285,18 @@ const ChartBuilder = ({
   );
 
   const handleBoundaryLevelChange = useCallback(
-    async (nextBoundaryLevel: string) => {
+    async (values: ChartOptions) => {
+      actions.updateChartOptions(values);
+
       setDataLoading(true);
 
       await onTableQueryUpdate({
-        boundaryLevel: parseNumber(nextBoundaryLevel),
+        boundaryLevel: parseNumber(values.boundaryLevel),
       });
 
       setDataLoading(false);
     },
-    [onTableQueryUpdate],
+    [actions, onTableQueryUpdate],
   );
 
   const deleteButton = useMemo(
@@ -374,8 +379,7 @@ const ChartBuilder = ({
                       buttons={deleteButton}
                       meta={meta}
                       options={options}
-                      onBoundaryLevelChange={handleBoundaryLevelChange}
-                      onChange={handleChartConfigurationChange}
+                      onChange={handleBoundaryLevelChange}
                       onSubmit={actions.updateChartOptions}
                     />
                   </TabsSection>