diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx index 60e0c59c81..86998af6dc 100644 --- a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx +++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx @@ -14,12 +14,16 @@ import type { Metadata, } from "@opensystemslab/planx-core/types"; import groupBy from "lodash/groupBy"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { ReactNode } from "react"; import ReactHtmlParser from "react-html-parser"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import Caret from "ui/icons/Caret"; import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml"; +import { SiteAddress } from "../FindProperty/model"; +import { availableDatasets } from "./model"; + const CATEGORY_COLORS: Record = { "General policy": "#99C1DE", "Heritage and conservation": "#EDDCD2", @@ -70,7 +74,7 @@ export default function ConstraintsList({ data, metadata, }: ConstraintsListProps) { - const groupedConstraints = groupBy(data, (constraint: Constraint) => { + const groupedConstraints = groupBy(data, (constraint) => { return constraint.category; }); @@ -84,7 +88,7 @@ export default function ConstraintsList({ disableGutters disableSticky color="primary" - key={category} + key={`${category}-ls`} style={{ padding: 0, backgroundColor: CATEGORY_COLORS[category], @@ -105,10 +109,11 @@ export default function ConstraintsList({ {category} - - {groupedConstraints[category].map((con: any) => ( + + {groupedConstraints[category].map((con) => ( state.computePassport().data?._address, + ) as SiteAddress) || {}; const item = props.metadata?.name.replaceAll(" ", "-"); + const isSourcedFromPlanningData = + props.metadata?.plural !== "Classified roads"; + + // Some constraint categories search for entities amongst many PD datasets, but our `props.metadata.dataset` will only store reference to the last one + // Cross reference with `availableDatasets` in Editor to ensure map URL is filtered to include each possible dataset + const matchingDatasets = availableDatasets.find( + (d) => + props.metadata?.dataset && d.datasets.includes(props.metadata.dataset), + )?.datasets || [props?.metadata?.dataset]; + const encodedMatchingDatasets = matchingDatasets + ?.map((d) => `dataset=${d}`) + .join("&"); + const planningDataMapURL = `https://www.planning.data.gov.uk/map/?${encodedMatchingDatasets}#${latitude},${longitude},17.5z`; return ( - + theme.palette.background.default, }} > - <> + {`This property ${props?.content}`} @@ -169,42 +196,58 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) { sx={{ listStyleType: "disc", pl: 4, pt: 1 }} > {props.data && - props.data.map( - (record: any) => - record.name && ( - - - {record.name}{" "} - {record.name && record["documentation-url"] && ( - - ( - - source - - ) - - )} - - - ), - )} + props.data.map((record: any) => ( + + {isSourcedFromPlanningData ? ( + + + {record.name || + (record["flood-risk-level"] && + `${props.metadata?.name} - Level ${record["flood-risk-level"]}`) || + `Planning Data entity #${record.entity}`} + + + ) : ( + {record.name} + )} + + ))} )} - + + {isSourcedFromPlanningData ? ( + + {`View on the `} + + Planning Data map + + {` (opens in a new tab).`} + + ) : ( + + {`We searched Ordnance Survey MasterMap Highways using the Unique Street Reference Number of your property`} + {usrn && ` (${usrn})`} + + )} + {`How is it defined`}