feat: editors can select which planning constraints to check

api.planx.uk/modules/gis/service/digitalLand.ts

@@ -71,15 +71,30 @@
   geom: string,
   extras: Record<string, string>,
 ): Promise<GISResponse> {
-  // generate list of digital land datasets we should query based on 'active' planx schema variables
+  // generate list of digital land datasets we should query and their associated passport values
   const activeDatasets: string[] = [];
-  Object.keys(baseSchema).forEach((key) => {
-    if (baseSchema[key]["active"]) {
-      baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
-        activeDatasets.push(dataset);
-      });
-    }
-  });
+  let activeDataValues: string[] = [];
+  if (extras?.vals) {
+    // if the editor selected constraints, prioritise their selection
+    activeDataValues = extras.vals.split(",");
+    Object.keys(baseSchema).forEach((key) => {
+      if (activeDataValues.includes(key)) {
+        baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
+          activeDatasets.push(dataset);
+        });
+      }
+    });
+  } else {
+    // else default to the internally maintained list of all "active" datasets
+    Object.keys(baseSchema).forEach((key) => {
+      if (baseSchema[key]["active"]) {
+        activeDataValues.push(key);
+        baseSchema[key]["digital-land-datasets"]?.forEach((dataset: string) => {
+          activeDatasets.push(dataset);
+        });
+      }
+    });
+  }
 
   // set up request query params per https://www.planning.data.gov.uk/docs
   const options = {
@@ -97,8 +112,8 @@
     options,
   )}${datasets}`;
   const res = await fetch(url)
     .then((response: { json: () => any }) => response.json())
     .catch((error: any) => console.log(error));
 
   // if analytics are "on", store an audit record of the raw response
   if (extras?.analytics !== "false") {
@@ -132,7 +147,7 @@
   // check for & add any 'positive' constraints to the formattedResult
   let formattedResult: Record<string, Constraint> = {};
   if (res && res.count > 0 && res.entities) {
     res.entities.forEach((entity: { dataset: any }) => {
       // get the planx variable that corresponds to this entity's 'dataset', should never be null because our initial request is filtered on 'dataset'
       const key = Object.keys(baseSchema).find((key) =>
         baseSchema[key]["digital-land-datasets"]?.includes(entity.dataset),
@@ -159,7 +174,8 @@
   // TODO followup with digital land about how to return 'nots' via API (currently assumes any "active" metadata was successfully queried)
   const nots = Object.keys(baseSchema).filter(
     (key) =>
-      baseSchema[key]["active"] && !Object.keys(formattedResult).includes(key),
+      activeDataValues.includes(key) &&
+      !Object.keys(formattedResult).includes(key),
   );
   nots.forEach((not) => {
     formattedResult[not] = {
@@ -180,7 +196,7 @@
     formattedResult["designated.nationalPark"] &&
     formattedResult["designated.nationalPark"].value
   ) {
     formattedResult["designated.nationalPark"]?.data?.forEach((entity: any) => {
       if (
         baseSchema[broads]["digital-land-entities"]?.includes(entity.entity)
       ) {
@@ -237,7 +253,7 @@
 
     // loop through any intersecting a4 data entities and set granular planx values based on this local authority's schema
     if (a4s && formattedResult["article4"].value) {
       formattedResult["article4"]?.data?.forEach((entity: any) => {
         Object.keys(a4s)?.forEach((key) => {
           if (
             // these are various ways we link source data to granular planx values (see local_authorities/metadata for specifics)

editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx

@@ -9,14 +9,15 @@ import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
-import { useFormik } from "formik";
-import React from "react";
+import { FormikErrors, useFormik } from "formik";
+import React, { ChangeEvent } from "react";
 import { FONT_WEIGHT_BOLD } from "theme";
 import InputGroup from "ui/editor/InputGroup";
 import { ModalFooter } from "ui/editor/ModalFooter";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
@@ -36,8 +37,41 @@ function PlanningConstraintsComponent(props: Props) {
         data: newValues,
       });
     },
+    validate: (values) => {
+      const errors: FormikErrors<PlanningConstraints> = {};
+      if (!values.dataValues || values.dataValues?.length < 1) {
+        errors.dataValues = "Select at least one constraint";
+      }
+      return errors;
+    },
   });
 
+  const changeSelectAll =
+    (vals: string[] | undefined) =>
+    (_event: ChangeEvent<HTMLInputElement>, _checked: boolean) => {
+      let newCheckedVals: string[];
+      if (vals?.length !== availableDatasets.length) {
+        newCheckedVals = availableDatasets.map((d) => d.val);
+      } else {
+        newCheckedVals = [];
+      }
+      formik.setFieldValue("dataValues", newCheckedVals);
+    };
+
+  const changeDataset =
+    (val: string) =>
+    (_event: ChangeEvent<HTMLInputElement>, _checked: boolean) => {
+      let newCheckedVals;
+      if (formik.values.dataValues?.includes(val)) {
+        newCheckedVals = formik.values.dataValues.filter((dv) => dv !== val);
+      } else {
+        newCheckedVals = formik.values.dataValues
+          ? [...formik.values.dataValues, val]
+          : [val];
+      }
+      formik.setFieldValue("dataValues", newCheckedVals);
+    };
+
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
       <ModalSection>
@@ -84,77 +118,84 @@ function PlanningConstraintsComponent(props: Props) {
             </InputRow>
           </InputGroup>
           <InputGroup label="Which constraints do you want to check?">
-            <TableContainer>
-              <Table size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>
-                      <Checkbox
-                        color="primary"
-                        checked={true}
-                        disabled={true}
-                        inputProps={{
-                          "aria-label": "select all constraints",
-                        }}
-                      />
-                    </TableCell>
-                    <TableCell sx={{ fontWeight: FONT_WEIGHT_BOLD }}>
-                      Constraints
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {availableDatasets
-                    .sort((a, b) => a.val.localeCompare(b.val))
-                    .map((dataset, i: number) => (
-                      <TableRow key={i}>
-                        <TableCell sx={{ verticalAlign: "top" }}>
-                          <Checkbox
-                            color="primary"
-                            checked={true}
-                            disabled={true}
-                          />
-                        </TableCell>
-                        <TableCell>
-                          <InputGroup>
-                            <InputRow>
-                              <Input
-                                format="large"
-                                name="text"
-                                value={dataset.text}
-                                disabled
-                              />
-                            </InputRow>
-                            <InputRow>
-                              <Input
-                                format="data"
-                                name="val"
-                                value={dataset.val}
-                                disabled
-                              />
-                            </InputRow>
-                          </InputGroup>
-                          <Box>
-                            <Typography
-                              variant="body2"
-                              color="GrayText"
-                              sx={{ fontSize: ".8em", pb: 1 }}
-                            >
-                              {`via ${dataset.source}: ${dataset.datasets
-                                .filter(Boolean)
-                                .join(", ")} ${
-                                dataset?.entity
-                                  ? `(entity ${dataset.entity})`
-                                  : ``
-                              }`}
-                            </Typography>
-                          </Box>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
+            <ErrorWrapper error={formik.errors.dataValues}>
+              <TableContainer>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>
+                        <Checkbox
+                          color="primary"
+                          checked={
+                            availableDatasets.length ===
+                            formik.values.dataValues?.length
+                          }
+                          onChange={changeSelectAll(formik.values.dataValues)}
+                          inputProps={{
+                            "aria-label": "select all constraints",
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell sx={{ fontWeight: FONT_WEIGHT_BOLD }}>
+                        Constraints
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {availableDatasets
+                      .sort((a, b) => a.val.localeCompare(b.val))
+                      .map((dataset, i: number) => (
+                        <TableRow key={i}>
+                          <TableCell sx={{ verticalAlign: "top" }}>
+                            <Checkbox
+                              color="primary"
+                              checked={formik.values.dataValues?.includes(
+                                dataset.val,
+                              )}
+                              onChange={changeDataset(dataset.val)}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <InputGroup>
+                              <InputRow>
+                                <Input
+                                  format="large"
+                                  name="text"
+                                  value={dataset.text}
+                                  disabled
+                                />
+                              </InputRow>
+                              <InputRow>
+                                <Input
+                                  format="data"
+                                  name="val"
+                                  value={dataset.val}
+                                  disabled
+                                />
+                              </InputRow>
+                            </InputGroup>
+                            <Box>
+                              <Typography
+                                variant="body2"
+                                color="GrayText"
+                                sx={{ fontSize: ".8em", pb: 1 }}
+                              >
+                                {`via ${dataset.source}: ${dataset.datasets
+                                  .filter(Boolean)
+                                  .join(", ")} ${
+                                  dataset?.entity
+                                    ? `(entity ${dataset.entity})`
+                                    : ``
+                                }`}
+                              </Typography>
+                            </Box>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </ErrorWrapper>
           </InputGroup>
           <InputGroup label="Planning conditions disclaimer">
             <InputRow>

editor.planx.uk/src/@planx/components/PlanningConstraints/Public.test.tsx

@@ -16,6 +16,7 @@ import {
   simpleBreadcrumbs,
   simpleFlow,
 } from "./mocks/simpleFlow";
+import { availableDatasets } from "./model";
 import PlanningConstraints from "./Public";
 
 const { setState } = useStore;
@@ -259,6 +260,86 @@ describe("following a FindProperty component", () => {
   });
 });
 
+describe("selectable datasets in editor", () => {
+  beforeEach(() => {
+    act(() =>
+      setState({
+        breadcrumbs: simpleBreadcrumbs,
+        flow: simpleFlow,
+        teamIntegrations: {
+          hasPlanningData: true,
+        },
+      }),
+    );
+  });
+
+  it("does not initiate `/roads` request when `road.classified` is not selected by an editor", async () => {
+    setup(
+      <PlanningConstraints
+        title="Planning constraints"
+        description="Things that might affect your project"
+        fn="property.constraints.planning"
+        disclaimer="This page does not include information about historic planning conditions that may apply to this property."
+        handleSubmit={vi.fn()}
+        dataValues={availableDatasets
+          .filter((d) => d.val !== "road.classified")
+          .map((d) => d.val)}
+      />,
+    );
+
+    expect(swr).toHaveBeenCalled();
+
+    // Planning constraints API still called
+    const planingConstraintsURL = (
+      vi.mocked(useSWR).mock.calls[0][0] as () => {}
+    )();
+    const planingConstraintsResponse = vi.mocked(useSWR).mock.results[0].value;
+
+    expect(planingConstraintsURL).toContain("/gis");
+    expect(planingConstraintsResponse).toEqual({
+      data: digitalLandResponseMock,
+    });
+
+    // Roads API not called due to missing `road.classified` data value
+    const roadsURL = (vi.mocked(useSWR).mock.calls[1][0] as () => {})();
+    const roadsResponse = vi.mocked(useSWR).mock.results[1].value;
+
+    expect(roadsURL).toBeNull();
+    expect(roadsResponse).toEqual({ data: null });
+  });
+
+  it("does not initiate `/gis/:localAuthority` request when only `road.classified` is selected by an editor", async () => {
+    setup(
+      <PlanningConstraints
+        title="Planning constraints"
+        description="Things that might affect your project"
+        fn="property.constraints.planning"
+        disclaimer="This page does not include information about historic planning conditions that may apply to this property."
+        handleSubmit={vi.fn()}
+        dataValues={["road.classified"]}
+      />,
+    );
+
+    expect(swr).toHaveBeenCalled();
+
+    // Roads API is called
+    const roadsURL = (vi.mocked(useSWR).mock.calls[1][0] as () => {})();
+    const roadsResponse = vi.mocked(useSWR).mock.results[1].value;
+
+    expect(roadsURL).toContain("/roads");
+    expect(roadsResponse).toEqual({ data: classifiedRoadsResponseMock });
+
+    // Planning constraints API not called due to missing data values
+    const planingConstraintsURL = (
+      vi.mocked(useSWR).mock.calls[0][0] as () => {}
+    )();
+    const planningConstraintsResponse = vi.mocked(useSWR).mock.results[0].value;
+
+    expect(planingConstraintsURL).toBeNull();
+    expect(planningConstraintsResponse).toEqual({ data: null });
+  });
+});
+
 describe("demo state", () => {
   beforeEach(() => {
     act(() =>