chore: add error feedback for editors if using List with "map" field …

…without FindProperty first (#3556)

editor.planx.uk/src/@planx/components/List/Public/index.tsx

@@ -8,8 +8,11 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import { SiteAddress } from "@planx/components/FindProperty/model";
+import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { PublicProps } from "@planx/components/ui";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useRef } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
@@ -40,8 +43,15 @@ const CardButton = styled(Button)(({ theme }) => ({
 const ActiveListCard: React.FC<{
   index: number;
 }> = ({ index: i }) => {
-  const { schema, saveItem, cancelEditItem, errors, isPageComponent, formik, activeIndex } =
-    useListContext();
+  const {
+    schema,
+    saveItem,
+    cancelEditItem,
+    errors,
+    isPageComponent,
+    formik,
+    activeIndex,
+  } = useListContext();
 
   const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -59,7 +69,11 @@ const ActiveListCard: React.FC<{
           {schema.type}
           {!isPageComponent && ` ${i + 1}`}
         </Typography>
-        <SchemaFields schema={schema} activeIndex={activeIndex} formik={formik}/>
+        <SchemaFields
+          schema={schema}
+          activeIndex={activeIndex}
+          formik={formik}
+        />
         <Box display="flex" gap={2}>
           <Button
             variant="contained"
@@ -130,7 +144,8 @@ const Root = () => {
     listProps,
   } = useListContext();
 
-  const { title, description, info, policyRef, howMeasured } = listProps;
+  const { title, description, info, policyRef, howMeasured, handleSubmit } =
+    listProps;
 
   const rootError: string =
     (errors.min && `You must provide at least ${schema.min} response(s)`) ||
@@ -141,6 +156,33 @@ const Root = () => {
   const shouldShowAddAnotherButton =
     schema.max !== 1 || formik.values.schemaData.length < 1;
 
+  // If the selected schema has a "map" field, ensure there's a FindProperty component preceding it (eg address data in state to position map view)
+  const hasMapField = schema.fields.some((field) => field.type === "map");
+  const { longitude, latitude } = useStore(
+    (state) =>
+      (state.computePassport()?.data?.["_address"] as SiteAddress) || {},
+  );
+
+  if (hasMapField && (!longitude || !latitude)) {
+    return (
+      <Card handleSubmit={handleSubmit} isValid>
+        <CardHeader title={title} description={description} />
+        <ErrorSummaryContainer
+          role="status"
+          data-testid="error-summary-invalid-graph"
+        >
+          <Typography variant="h4" component="h2" gutterBottom>
+            Invalid graph
+          </Typography>
+          <Typography variant="body2">
+            Edit this flow so that "List" is positioned after "FindProperty"; an
+            address is required for schemas that include a "map" field.
+          </Typography>
+        </ErrorSummaryContainer>
+      </Card>
+    );
+  }
+
   return (
     <Card handleSubmit={validateAndSubmitForm} isValid>
       <CardHeader