diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx index 3e0ca1d314..84c48cc723 100644 --- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx +++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx @@ -2,6 +2,8 @@ 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 Button from "@mui/material/Button"; +import Chip from "@mui/material/Chip"; import Link from "@mui/material/Link"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; @@ -178,7 +180,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) { .join("&"); const planningDataMapURL = `https://www.planning.data.gov.uk/map/?${encodedMatchingDatasets}#${latitude},${longitude},17.5z`; - // If a user overrides every entity in a constraint category, then that whole category becomes inapplicable and we want to gray it out + // If a user overrides every entity in a constraint category, then that whole category becomes inapplicable and we want to add a chip const allEntitiesInaccurate = props.data?.length !== 0 && props.data?.length === @@ -198,14 +200,23 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) { expandIcon={} sx={{ pr: 1.5, background: `rgba(255, 255, 255, 0.8)` }} > - - {children} - + + + {children} + + {allEntitiesInaccurate && ( + + )} + - {isSourcedFromPlanningData ? ( - - - {formatEntityName(record, props.metadata)} - - - ) : ( - {record.name} - )} - {props.inaccurateConstraints?.[props.fn]?.[ - "entities" - ]?.includes(`${record.entity}`) && ( - - {` [Not applicable]`} - - )} + + {isSourcedFromPlanningData ? ( + + + {formatEntityName(record, props.metadata)} + + + ) : ( + {record.name} + )} + {props.inaccurateConstraints?.[props.fn]?.[ + "entities" + ]?.includes(`${record.entity}`) && ( + + )} + ))} @@ -302,15 +306,17 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) { props.value && Boolean(props.data?.length) && ( - { event.stopPropagation(); setShowModal(true); }} > I don't think this constraint applies to this property - + )}