wip

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBoundaryLevelsConfiguration.tsx

@@ -8,21 +8,23 @@ import FormProvider from '@common/components/form/FormProvider';
 import { MapDataSetConfig } from '@common/modules/charts/types/chart';
 import { FullTableMeta } from '@common/modules/table-tool/types/fullTable';
 import parseNumber from '@common/utils/number/parseNumber';
+import Yup from '@common/validation/yup';
 import merge from 'lodash/merge';
-import React, { ReactNode, useCallback } from 'react';
+import { ObjectSchema } from 'yup';
+import React, { ReactNode, useCallback, useMemo } from 'react';
 import ChartBoundaryLevelsDataSetConfiguration from './ChartBoundaryLevelsDataSetConfiguration';
 
 const formId = 'chartBoundaryLevelsConfigurationForm';
 
 export interface ChartBoundaryLevelsFormValues {
   boundaryLevel: number;
-  dataSetConfigs: MapDataSetConfig[];
+  dataSetConfigs: Omit<MapDataSetConfig, 'dataGrouping'>[];
 }
 
 interface Props {
   buttons?: ReactNode;
   meta: FullTableMeta;
-  dataSetConfigs: MapDataSetConfig[];
+  dataSetConfigs: Omit<MapDataSetConfig, 'dataGrouping'>[];
   boundaryLevel: ChartOptions['boundaryLevel'];
   onChange: (values: ChartBoundaryLevelsFormValues) => void;
   onSubmit: (values: ChartBoundaryLevelsFormValues) => void;
@@ -42,12 +44,11 @@ export default function ChartBoundaryLevelsConfiguration({
     (values: ChartBoundaryLevelsFormValues): ChartBoundaryLevelsFormValues => {
       // Use `merge` as we want to avoid potential undefined
       // values from overwriting existing values
-      const returnValue = merge({}, boundaryLevel, values, {
+      return merge({}, boundaryLevel, values, {
         boundaryLevel: values.boundaryLevel
           ? parseNumber(values.boundaryLevel)
           : undefined,
       });
-      return returnValue;
     },
     [boundaryLevel],
   );
@@ -59,21 +60,36 @@ export default function ChartBoundaryLevelsConfiguration({
     [normalizeValues, onChange],
   );
 
+  const validationSchema = useMemo<
+    ObjectSchema<ChartBoundaryLevelsFormValues>
+  >(() => {
+    return Yup.object({
+      boundaryLevel: Yup.number()
+        .transform(value => (Number.isNaN(value) ? undefined : value))
+        .nullable()
+        .oneOf(meta.boundaryLevels.map(level => level.id))
+        .required('Choose a boundary level'),
+      dataSetConfigs: Yup.array()
+        .of(
+          Yup.object({
+            boundaryLevel: Yup.number(),
+            dataSet: Yup.object({
+              filters: Yup.array().required(),
+            }).required(),
+          }),
+        )
+        .required(),
+    });
+  }, []);
+
   return (
     <FormProvider<ChartBoundaryLevelsFormValues>
       enableReinitialize
       initialValues={{
         boundaryLevel,
         dataSetConfigs,
       }}
-      /* validationSchema={Yup.object({
-        boundaryLevel: Yup.number()
-          .transform(value => (Number.isNaN(value) ? undefined : value))
-          .nullable()
-          .oneOf(meta.boundaryLevels.map(level => level.id))
-          .required('Choose a boundary level'),
-        // dataSetConfigs: Yup.array(), //TODO
-      })} */
+      validationSchema={validationSchema}
     >
       {({ formState, watch, control }) => {
         const values = watch();
@@ -87,7 +103,6 @@ export default function ChartBoundaryLevelsConfiguration({
           >
             <Effect value={values} onChange={handleChange} />
             <Effect
-              // update watcher of all forms for sibling validation
               value={{
                 formKey: 'boundaryLevels',
                 isValid: formState.isValid,

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBoundaryLevelsDataSetConfiguration.tsx

@@ -1,15 +1,12 @@
-import Button from '@common/components/Button';
-import ButtonGroup from '@common/components/ButtonGroup';
 import ButtonText from '@common/components/ButtonText';
-import FormFieldSelect from '@common/components/form/FormFieldSelect';
-import Modal from '@common/components/Modal';
 import expandDataSet from '@common/modules/charts/util/expandDataSet';
 import generateDataSetKey from '@common/modules/charts/util/generateDataSetKey';
 import { FullTableMeta } from '@common/modules/table-tool/types/fullTable';
 import React, { useCallback, useState } from 'react';
 import { useFieldArray, UseFormReturn } from 'react-hook-form';
 import type { ChartBoundaryLevelsFormValues } from './ChartBoundaryLevelsConfiguration';
 import generateDataSetLabel from './utils/generateDataSetLabel';
+import ChartBoundaryLevelModalForm from './ChartBoundaryLevelsModalForm';
 
 interface Props {
   control: UseFormReturn<ChartBoundaryLevelsFormValues>['control'];
@@ -46,8 +43,6 @@ export default function ChartBoundaryLevelsDataSetConfiguration({
   return (
     <>
       <h4>Set boundary levels per data set</h4>
-      {/* {error && <ErrorMessage id={`${id}-error`}>{error}</ErrorMessage>} */}
-
       {!!dataSetConfigs && dataSetConfigs.length > 1 && (
         <table data-testid="chart-boundary-level-selections">
           <thead>
@@ -94,49 +89,29 @@ export default function ChartBoundaryLevelsDataSetConfiguration({
       )}
 
       {updateIndex !== undefined && (
-        <Modal open title="Edit boundary" onExit={closeFormModal}>
-          <FormFieldSelect
-            label="Boundary level"
-            hint="Select a version of geographical data to use for this dataset"
-            name="dataSetBoundaryLevel"
-            order={[]}
-            options={[
-              {
-                label: 'Default',
-                value: '',
-              },
-              ...meta.boundaryLevels.map(({ id, label }) => ({
-                value: id,
-                label,
-              })),
-            ]}
-            onChange={({ target }) => {
-              // works but dodgy type?
-              const { value } = target;
-              setSelectValue(
-                Number.isNaN(Number(value)) ? undefined : Number(value),
-              );
-            }}
-          />
-          <ButtonGroup>
-            <Button
-              onClick={() => {
-                const { dataSet, dataGrouping } = dataSetConfigs[updateIndex];
-                update(updateIndex, {
-                  dataSet,
-                  dataGrouping,
-                  boundaryLevel: selectValue,
-                });
-                closeFormModal();
-              }}
-            >
-              Done
-            </Button>
-            <Button onClick={closeFormModal} variant="secondary">
-              Cancel
-            </Button>
-          </ButtonGroup>
-        </Modal>
+        <ChartBoundaryLevelModalForm
+          initialValue={dataSetConfigs[updateIndex].boundaryLevel}
+          options={[
+            {
+              label: 'Default',
+              value: '',
+            },
+            ...meta.boundaryLevels.map(({ id, label }) => ({
+              value: id,
+              label,
+            })),
+          ]}
+          onSubmit={() => {
+            console.log('onSubmit called');
+            // const { dataSet } = dataSetConfigs[updateIndex];
+            // update(updateIndex, {
+            //   dataSet,
+            //   boundaryLevel: selectValue,
+            // });
+            closeFormModal();
+          }}
+          onClose={closeFormModal}
+        />
       )}
     </>
   );

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBoundaryLevelsModalForm.tsx

@@ -0,0 +1,57 @@
+import Button from '@common/components/Button';
+import ButtonGroup from '@common/components/ButtonGroup';
+import FormFieldSelect from '@common/components/form/FormFieldSelect';
+import Modal from '@common/components/Modal';
+import React from 'react';
+import FormProvider from '@common/components/form/FormProvider';
+import { Form } from '@common/components/form';
+import { SelectOption } from '@common/components/form/FormSelect';
+
+const formId = 'boundaryLevelPerDataSetForm';
+
+interface FormValues {
+  dataSetBoundaryLevel?: number;
+}
+
+interface Props {
+  initialValue: FormValues['dataSetBoundaryLevel'];
+  options: SelectOption[];
+  onClose: () => void;
+  onSubmit: (values: FormValues) => void;
+}
+
+export default function ChartBoundaryLevelModalForm({
+  initialValue,
+  options,
+  onClose,
+  onSubmit,
+}: Props) {
+  return (
+    <Modal open title="Edit boundary" onExit={onClose}>
+      <FormProvider
+        enableReinitialize
+        initialValues={{
+          dataSetBoundaryLevel: initialValue,
+        }}
+      >
+        {() => (
+          <Form id={formId} onSubmit={values => onSubmit(values)}>
+            <FormFieldSelect
+              label="Boundary level"
+              hint="Select a version of geographical data to use for this dataset"
+              name="dataSetBoundaryLevel"
+              order={[]}
+              options={options}
+            />
+            <ButtonGroup>
+              <Button type="submit">Done</Button>
+              <Button onClick={onClose} variant="secondary">
+                Cancel
+              </Button>
+            </ButtonGroup>
+          </Form>
+        )}
+      </FormProvider>
+    </Modal>
+  );
+}

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilder.tsx

@@ -372,7 +372,13 @@ const ChartBuilder = ({
                     <ChartBoundaryLevelsConfiguration
                       boundaryLevel={options.boundaryLevel}
                       buttons={deleteButton}
-                      dataSetConfigs={chartProps?.map?.dataSetConfigs ?? []}
+                      dataSetConfigs={
+                        chartProps?.map?.dataSetConfigs.map(
+                          ({ boundaryLevel, dataSet }) => {
+                            return { boundaryLevel, dataSet };
+                          },
+                        ) ?? []
+                      }
                       meta={meta}
                       onChange={handleDefaultBoundaryLevelChange}
                       onSubmit={actions.updateChartBoundaryLevels}

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/reducers/chartBuilderReducer.ts

@@ -18,6 +18,7 @@ import { isEqual } from 'lodash';
 import mapValues from 'lodash/mapValues';
 import { useCallback, useMemo } from 'react';
 import { Reducer } from 'use-immer';
+import { ChartBoundaryLevelsFormValues } from '../ChartBoundaryLevelsConfiguration';
 
 export interface ChartOptions extends ChartDefinitionOptions {
   file?: File;
@@ -52,10 +53,7 @@ export type ChartBuilderActions =
     }
   | {
       type: 'UPDATE_CHART_MAP_BOUNDARY_LEVELS';
-      payload: {
-        boundaryLevel: ChartOptions['boundaryLevel'];
-        dataSetConfigs: MapDataSetConfig[];
-      };
+      payload: ChartBoundaryLevelsFormValues;
     }
   | {
       type: 'UPDATE_CHART_MAP_CONFIGURATION';
@@ -358,10 +356,7 @@ export function useChartBuilderReducer(
   );
 
   const updateChartBoundaryLevels = useCallback(
-    (payload: {
-      boundaryLevel: ChartOptions['boundaryLevel'];
-      dataSetConfigs: MapDataSetConfig[];
-    }) => {
+    (payload: ChartBoundaryLevelsFormValues) => {
       dispatch({
         type: 'UPDATE_CHART_MAP_BOUNDARY_LEVELS',
         payload,