diff --git a/editor.planx.uk/src/ui/ListManager.tsx b/editor.planx.uk/src/ui/ListManager.tsx index 0b8a2b2ecc..97d0a3e74f 100644 --- a/editor.planx.uk/src/ui/ListManager.tsx +++ b/editor.planx.uk/src/ui/ListManager.tsx @@ -16,6 +16,7 @@ import { } from "react-beautiful-dnd"; import { removeAt, setAt } from "../utils"; +import { useStore } from "pages/FlowEditor/lib/store"; export interface EditorProps { index?: number; @@ -45,6 +46,10 @@ export default function ListManager( // Initialize a random ID when the component mounts const randomId = useRef(String(Math.random())); + // useStore.getState().getTeam().slug undefined here, use window instead + const teamSlug = window.location.pathname.split("/")[1]; + const isViewOnly = !useStore.getState().canUserEditTeam(teamSlug); + return props.disableDragAndDrop ? ( <> @@ -54,7 +59,7 @@ export default function ListManager( @@ -76,6 +81,7 @@ export default function ListManager( }} aria-label="Delete" size="large" + disabled={isViewOnly} > @@ -89,6 +95,7 @@ export default function ListManager( onClick={() => { props.onChange([...props.values, props.newValue()]); }} + disabled={isViewOnly} > {props.newValueLabel || "add new"} @@ -125,9 +132,10 @@ export default function ListManager( disableRipple {...(!props.disableDragAndDrop ? provided.dragHandleProps - : { disabled: true })} + : { disabled: true || isViewOnly })} aria-label="Drag" size="large" + disabled={isViewOnly} > @@ -147,6 +155,7 @@ export default function ListManager( }} aria-label="Delete" size="large" + disabled={isViewOnly} > @@ -165,6 +174,7 @@ export default function ListManager( onClick={() => { props.onChange([...props.values, props.newValue()]); }} + disabled={isViewOnly} > {props.newValueLabel || "add new"}