From dc5a7e9e9f4d35aa4baeddb728f29eaceb4b186d Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 19 Jul 2024 13:56:03 +0200
Subject: [PATCH] final tweaks

---
 .../components/PlanningConstraints/List.tsx   | 26 +++++++++++++++++--
 .../components/PlanningConstraints/Modal.tsx  | 10 +++++--
 .../components/PlanningConstraints/Public.tsx |  2 +-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
index ef97b32e53..d276737311 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -2,6 +2,7 @@ import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import Box, { BoxProps } from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
 import Link from "@mui/material/Link";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
@@ -218,13 +219,27 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                       key={`entity-${record.entity}-li`}
                       dense
                       disableGutters
-                      sx={{ display: "list-item" }}
+                      sx={{
+                        display: "list-item",
+                        color: props.inaccurateConstraints?.[props.fn]?.[
+                          "entities"
+                        ]?.includes(`${record.entity}`)
+                          ? "GrayText"
+                          : "inherit",
+                      }}
                     >
                       {isSourcedFromPlanningData ? (
-                        <Typography variant="body2">
+                        <Typography variant="body2" component="span">
                           <Link
                             href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
                             target="_blank"
+                            sx={{
+                              color: props.inaccurateConstraints?.[props.fn]?.[
+                                "entities"
+                              ]?.includes(`${record.entity}`)
+                                ? "GrayText"
+                                : "inherit",
+                            }}
                           >
                             {formatEntityName(record, props.metadata)}
                           </Link>
@@ -232,6 +247,13 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                       ) : (
                         <Typography variant="body2">{record.name}</Typography>
                       )}
+                      {props.inaccurateConstraints?.[props.fn]?.[
+                        "entities"
+                      ]?.includes(`${record.entity}`) && (
+                        <Typography variant="body2" component="span">
+                          {` [Not applicable]`}
+                        </Typography>
+                      )}
                     </ListItem>
                   ))}
               </List>
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Modal.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Modal.tsx
index e8a5537cc8..07ddd9710b 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Modal.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Modal.tsx
@@ -8,6 +8,7 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import visuallyHidden from "@mui/utils/visuallyHidden";
 import { Constraint, Metadata } from "@opensystemslab/planx-core/types";
+import omit from "lodash/omit";
 import React, { useState } from "react";
 import InputLabel from "ui/public/InputLabel";
 import ChecklistItem from "ui/shared/ChecklistItem";
@@ -60,9 +61,14 @@ export const OverrideEntitiesModal = ({
     if (reason && reason == "backdropClick") {
       return;
     }
-    // Clear any non-submitted inputs
+
+    // Clear any non-submitted inputs on cancel & sync parent state
     setCheckedOptions(undefined);
     setTextInput(undefined);
+    const newInaccurateConstraints = omit(inaccurateConstraints, fn);
+    setInaccurateConstraints(newInaccurateConstraints);
+
+    // Close modal
     setShowModal(false);
   };
 
@@ -103,7 +109,7 @@ export const OverrideEntitiesModal = ({
     } else if (invalidInput) {
       setShowInputError(true);
     } else {
-      // Update inaccurateConstraints in parent component state on valid Modal submit
+      // Update inaccurateConstraints in parent component state on valid submit
       const newInaccurateConstraints = {
         ...inaccurateConstraints,
         ...{ [fn]: { entities: checkedOptions, reason: textInput } },
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
index b9afe15021..fa8a6482f1 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
@@ -36,7 +36,7 @@ interface InaccurateConstraint {
 }
 
 export type InaccurateConstraints =
-  | Record<Constraint["fn"], InaccurateConstraint>
+  | Record<string, InaccurateConstraint>
   | undefined;
 
 export default Component;