From b2e57183c9cbd5c78f7784abda2ff64c28527fb0 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 14 Nov 2024 15:03:22 +0000 Subject: [PATCH 01/11] add validation to render tags and render options --- .../src/ui/editor/ComponentTagSelect.tsx | 91 ++++++++++++------- 1 file changed, 57 insertions(+), 34 deletions(-) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index d055481444..78dd5a6550 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -4,6 +4,7 @@ import Chip from "@mui/material/Chip"; import ListItem from "@mui/material/ListItem"; import { NODE_TAGS, NodeTag } from "@opensystemslab/planx-core/types"; import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { getContrastTextColor } from "styleUtils"; import ModalSection from "ui/editor/ModalSection"; @@ -16,42 +17,64 @@ interface Props { onChange: (values: NodeTag[]) => void; } -const renderOption: AutocompleteProps< - NodeTag, - true, - true, - false, - "div" ->["renderOption"] = (props, tag, { selected }) => ( - - -); +export const ComponentTagSelect: React.FC = ({ value, onChange }) => { + const isPlatformAdmin = useStore().user?.isPlatformAdmin; -const renderTags: AutocompleteProps< - NodeTag, - true, - true, - false, - "div" ->["renderTags"] = (value, getTagProps) => - value.map((tag, index) => ( - ({ - backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], - color: getContrastTextColor( - theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], - "#FFF", - ), - })} - /> - )); + const renderOption: AutocompleteProps< + NodeTag, + true, + true, + false, + "div" + >["renderOption"] = (props, tag, { selected }) => { + const tagName = TAG_DISPLAY_VALUES[tag].displayName; + + if (tagName === "Placeholder" && !isPlatformAdmin) { + return null; + } + + return ( + + + ); + }; + + const renderTags: AutocompleteProps< + NodeTag, + true, + true, + false, + "div" + >["renderTags"] = (value, getTagProps) => + value.map((tag, index) => { + const tagName = TAG_DISPLAY_VALUES[tag].displayName; + const isChipDisabled = tagName === "Placeholder" && !isPlatformAdmin; + + return ( + ({ + backgroundColor: + theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + color: getContrastTextColor( + theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + "#FFF", + ), + })} + onDelete={ + isChipDisabled ? undefined : getTagProps({ index }).onDelete + } + /> + ); + }); -export const ComponentTagSelect: React.FC = ({ value, onChange }) => { return ( From 668b917332ab0d11035258c8ba89d9a017a71e2c Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 15 Nov 2024 14:45:08 +0000 Subject: [PATCH 02/11] refine variable use in code --- .../src/ui/editor/ComponentTagSelect.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index 78dd5a6550..654b69b2a2 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -20,6 +20,9 @@ interface Props { export const ComponentTagSelect: React.FC = ({ value, onChange }) => { const isPlatformAdmin = useStore().user?.isPlatformAdmin; + const showPlaceholderTag = (tagName: string) => + tagName.toLowerCase() === "placeholder" && !isPlatformAdmin ? true : false; + const renderOption: AutocompleteProps< NodeTag, true, @@ -29,9 +32,7 @@ export const ComponentTagSelect: React.FC = ({ value, onChange }) => { >["renderOption"] = (props, tag, { selected }) => { const tagName = TAG_DISPLAY_VALUES[tag].displayName; - if (tagName === "Placeholder" && !isPlatformAdmin) { - return null; - } + if (showPlaceholderTag(tagName)) return; return ( @@ -39,7 +40,7 @@ export const ComponentTagSelect: React.FC = ({ value, onChange }) => { aria-hidden="true" className={selected ? "selected" : ""} /> - {TAG_DISPLAY_VALUES[tag].displayName} + {tagName} ); }; @@ -53,13 +54,13 @@ export const ComponentTagSelect: React.FC = ({ value, onChange }) => { >["renderTags"] = (value, getTagProps) => value.map((tag, index) => { const tagName = TAG_DISPLAY_VALUES[tag].displayName; - const isChipDisabled = tagName === "Placeholder" && !isPlatformAdmin; + const isChipDisabled = showPlaceholderTag(tagName); return ( ({ backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], From ca17ae81c50071164f8b591ad04444c5f1d1e63c Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Fri, 15 Nov 2024 16:55:56 +0000 Subject: [PATCH 03/11] add changes requested add changes requested add changes requested --- .../components/Flow/components/Tag.tsx | 3 +- .../src/ui/editor/ComponentTagSelect.tsx | 101 ++++++++---------- 2 files changed, 47 insertions(+), 57 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index c411ce2852..c56607bf92 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -8,11 +8,12 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< NodeTag, - { color: keyof Palette["nodeTag"]; displayName: string } + { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: boolean } > = { placeholder: { color: "blocking", displayName: "Placeholder", + isEditable: useStore.getState().user?.isPlatformAdmin, }, toReview: { color: "nonBlocking", diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index 654b69b2a2..ed4ea5c6b0 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -4,7 +4,6 @@ import Chip from "@mui/material/Chip"; import ListItem from "@mui/material/ListItem"; import { NODE_TAGS, NodeTag } from "@opensystemslab/planx-core/types"; import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag"; -import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { getContrastTextColor } from "styleUtils"; import ModalSection from "ui/editor/ModalSection"; @@ -17,65 +16,55 @@ interface Props { onChange: (values: NodeTag[]) => void; } -export const ComponentTagSelect: React.FC = ({ value, onChange }) => { - const isPlatformAdmin = useStore().user?.isPlatformAdmin; - - const showPlaceholderTag = (tagName: string) => - tagName.toLowerCase() === "placeholder" && !isPlatformAdmin ? true : false; - - const renderOption: AutocompleteProps< - NodeTag, - true, - true, - false, - "div" - >["renderOption"] = (props, tag, { selected }) => { - const tagName = TAG_DISPLAY_VALUES[tag].displayName; - - if (showPlaceholderTag(tagName)) return; +const renderOption: AutocompleteProps< + NodeTag, + true, + true, + false, + "div" +>["renderOption"] = (props, tag, { selected }) => { + if (TAG_DISPLAY_VALUES[tag].isEditable) return null; + return ( + + + ); +}; +const renderTags: AutocompleteProps< + NodeTag, + true, + true, + false, + "div" +>["renderTags"] = (value, getTagProps) => + value.map((tag, index) => { return ( - - + ({ + backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + color: getContrastTextColor( + theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], + "#FFF", + ), + })} + onDelete={ + TAG_DISPLAY_VALUES[tag].isEditable + ? undefined + : getTagProps({ index }).onDelete + } + /> ); - }; - - const renderTags: AutocompleteProps< - NodeTag, - true, - true, - false, - "div" - >["renderTags"] = (value, getTagProps) => - value.map((tag, index) => { - const tagName = TAG_DISPLAY_VALUES[tag].displayName; - const isChipDisabled = showPlaceholderTag(tagName); - - return ( - ({ - backgroundColor: - theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], - color: getContrastTextColor( - theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color], - "#FFF", - ), - })} - onDelete={ - isChipDisabled ? undefined : getTagProps({ index }).onDelete - } - /> - ); - }); + }); +export const ComponentTagSelect: React.FC = ({ value, onChange }) => { return ( From b7600eed99a8b08f8ba6bd04cb3137f02902c4a5 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 15:07:18 +0000 Subject: [PATCH 04/11] add test coverage and alter platformAdmin checker --- .../@planx/components/Checklist/Editor.tsx | 35 +++--- .../components/Flow/components/Tag.tsx | 6 +- .../src/ui/editor/ComponentTagSelect.test.tsx | 114 ++++++++++++++++++ .../src/ui/editor/ComponentTagSelect.tsx | 27 ++++- 4 files changed, 155 insertions(+), 27 deletions(-) create mode 100644 editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx index f3bf25a6d5..0afc79ade7 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx @@ -1,7 +1,6 @@ import Delete from "@mui/icons-material/Delete"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; -import FormControlLabel from "@mui/material/FormControlLabel"; import IconButton from "@mui/material/IconButton"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { FormikErrors, FormikValues, useFormik } from "formik"; @@ -378,19 +377,19 @@ export const ChecklistComponent: React.FC = (props) => { /> - - formik.setValues({ - ...formik.values, - ...toggleExpandableChecklist({ - options: formik.values.options, - groupedOptions: formik.values.groupedOptions, - }), - }) - } - label="Expandable" - /> + + formik.setValues({ + ...formik.values, + ...toggleExpandableChecklist({ + options: formik.values.options, + groupedOptions: formik.values.groupedOptions, + }), + }) + } + label="Expandable" + /> = (props) => { !formik.values.allRequired, ) } - label="All required" - /> + label="All required" + /> + onChange={() => formik.setFieldValue( "neverAutoAnswer", - !formik.values.neverAutoAnswer + !formik.values.neverAutoAnswer, ) } label="Always put to user (forgo automation)" diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index c56607bf92..0238c792c0 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -1,6 +1,6 @@ import Box from "@mui/material/Box"; import { Palette, useTheme } from "@mui/material/styles"; -import { NodeTag } from "@opensystemslab/planx-core/types"; +import { NodeTag, Role } from "@opensystemslab/planx-core/types"; import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { getContrastTextColor } from "styleUtils"; @@ -8,12 +8,12 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< NodeTag, - { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: boolean } + { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: Role } > = { placeholder: { color: "blocking", displayName: "Placeholder", - isEditable: useStore.getState().user?.isPlatformAdmin, + isEditable: "platformAdmin", // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx }, toReview: { color: "nonBlocking", diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx new file mode 100644 index 0000000000..f03652e974 --- /dev/null +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx @@ -0,0 +1,114 @@ +import ChecklistComponent from "@planx/components/Checklist/Editor"; +import { within } from "@testing-library/react"; +import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag"; +import { useStore } from "pages/FlowEditor/lib/store"; +import React from "react"; +import { DndProvider } from "react-dnd"; +import { HTML5Backend } from "react-dnd-html5-backend"; +import { act } from "react-dom/test-utils"; +import { setup } from "testUtils"; +import { it } from "vitest"; + +const { setState } = useStore; + +const mockUser = { + id: 200, + firstName: "Testy", + lastName: "McTester", + email: "test@email.com", + teams: [], +}; + +describe("Checklist Component for a Platform Admin", () => { + beforeEach(() => + act(() => + setState({ + user: { + ...mockUser, + isPlatformAdmin: true, + }, + }), + ), + ); + it("renders all tags with none selected", async () => { + const { getByRole, user } = setup( + + + , + ); + const tagSelect = getByRole("combobox", { name: /tag this component/i }); + + await user.click(tagSelect); + + const optionsList = getByRole("listbox", { name: /tag this component/i }); + const options = within(optionsList).getAllByRole("option"); + + const tagDisplayNames = Object.values(TAG_DISPLAY_VALUES).map( + (tag) => tag.displayName, + ); + const optionTexts = options.map((option) => option.textContent); + + expect(optionTexts).toEqual(expect.arrayContaining(tagDisplayNames)); + }); + it.only("renders all tags with Placeholder selected as a button", async () => { + const { queryByTestId, queryByRole } = setup( + + + , + ); + + const placeholderChip = queryByTestId("placeholder-chip"); + const placeholderButton = queryByRole("button", { name: /placeholder/i }); + + expect(placeholderChip).toBeInTheDocument(); + expect(placeholderButton).toBeInTheDocument(); + }); +}); + +describe("Checklist Component for a non Platform Admin", () => { + beforeEach(() => + act(() => + setState({ + user: { + ...mockUser, + isPlatformAdmin: false, + }, + }), + ), + ); + it("renders all tags except Placeholder with none selected", async () => { + const { getByRole, user } = setup( + + + , + ); + const tagSelect = getByRole("combobox", { name: /tag this component/i }); + + await user.click(tagSelect); + + const optionsList = getByRole("listbox", { name: /tag this component/i }); + const options = within(optionsList).getAllByRole("option"); + const optionTexts = options.map((option) => option.textContent); + + expect(optionTexts).not.toContain(/placeholder/i); + }); + it("renders all tags with static Placeholder selected", async () => { + const { getByTestId, queryByRole } = setup( + + + , + ); + + const placeholderChip = getByTestId("placeholder-chip"); + const placeholderButton = queryByRole("button", { name: /placeholder/i }); + + expect(placeholderChip).toBeInTheDocument(); + expect(placeholderButton).not.toBeInTheDocument(); + }); +}); diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index ed4ea5c6b0..bf4d946ad3 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -2,8 +2,9 @@ import BookmarksIcon from "@mui/icons-material/Bookmarks"; import { AutocompleteProps } from "@mui/material/Autocomplete"; import Chip from "@mui/material/Chip"; import ListItem from "@mui/material/ListItem"; -import { NODE_TAGS, NodeTag } from "@opensystemslab/planx-core/types"; +import { NODE_TAGS, NodeTag, Role } from "@opensystemslab/planx-core/types"; import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { getContrastTextColor } from "styleUtils"; import ModalSection from "ui/editor/ModalSection"; @@ -16,6 +17,17 @@ interface Props { onChange: (values: NodeTag[]) => void; } +const canEdit = (role?: Role) => { + switch (role) { + case "platformAdmin": + return useStore.getState().user?.isPlatformAdmin; + case undefined: + return true; + default: + return true; + } +}; + const renderOption: AutocompleteProps< NodeTag, true, @@ -23,14 +35,14 @@ const renderOption: AutocompleteProps< false, "div" >["renderOption"] = (props, tag, { selected }) => { - if (TAG_DISPLAY_VALUES[tag].isEditable) return null; + if (!canEdit(TAG_DISPLAY_VALUES[tag].isEditable)) return null; return ( ); }; @@ -46,6 +58,9 @@ const renderTags: AutocompleteProps< return ( ({ @@ -56,9 +71,9 @@ const renderTags: AutocompleteProps< ), })} onDelete={ - TAG_DISPLAY_VALUES[tag].isEditable - ? undefined - : getTagProps({ index }).onDelete + canEdit(TAG_DISPLAY_VALUES[tag].isEditable) + ? getTagProps({ index }).onDelete + : undefined } /> ); From 53972c422aa375d502977415a2ece2a536dab06f Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 18 Nov 2024 15:56:21 +0000 Subject: [PATCH 05/11] remove it.only --- editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx index f03652e974..2923848a47 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx @@ -50,7 +50,7 @@ describe("Checklist Component for a Platform Admin", () => { expect(optionTexts).toEqual(expect.arrayContaining(tagDisplayNames)); }); - it.only("renders all tags with Placeholder selected as a button", async () => { + it("renders all tags with Placeholder selected as a button", async () => { const { queryByTestId, queryByRole } = setup( Date: Mon, 18 Nov 2024 17:37:10 +0000 Subject: [PATCH 06/11] improve test readability --- editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx index 2923848a47..2377eba20d 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx @@ -30,6 +30,7 @@ describe("Checklist Component for a Platform Admin", () => { }), ), ); + it("renders all tags with none selected", async () => { const { getByRole, user } = setup( @@ -50,6 +51,7 @@ describe("Checklist Component for a Platform Admin", () => { expect(optionTexts).toEqual(expect.arrayContaining(tagDisplayNames)); }); + it("renders all tags with Placeholder selected as a button", async () => { const { queryByTestId, queryByRole } = setup( @@ -79,6 +81,7 @@ describe("Checklist Component for a non Platform Admin", () => { }), ), ); + it("renders all tags except Placeholder with none selected", async () => { const { getByRole, user } = setup( @@ -95,6 +98,7 @@ describe("Checklist Component for a non Platform Admin", () => { expect(optionTexts).not.toContain(/placeholder/i); }); + it("renders all tags with static Placeholder selected", async () => { const { getByTestId, queryByRole } = setup( From 09fc069e4f287e661cb71ea913f0a445f0dd1f2c Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 19 Nov 2024 15:42:43 +0000 Subject: [PATCH 07/11] add changes --- .../FlowEditor/components/Flow/components/Tag.tsx | 4 ++-- .../src/ui/editor/ComponentTagSelect.tsx | 13 ++++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index 0238c792c0..176ab703f2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -8,12 +8,12 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< NodeTag, - { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: Role } + { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: Role[] } > = { placeholder: { color: "blocking", displayName: "Placeholder", - isEditable: "platformAdmin", // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx + isEditable: ["platformAdmin"], // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx }, toReview: { color: "nonBlocking", diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index bf4d946ad3..8e8bf8c147 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -18,11 +18,10 @@ interface Props { } const canEdit = (role?: Role) => { + // depending on the role, a different form of validation will happen switch (role) { case "platformAdmin": - return useStore.getState().user?.isPlatformAdmin; - case undefined: - return true; + return !useStore.getState().user?.isPlatformAdmin; default: return true; } @@ -35,7 +34,7 @@ const renderOption: AutocompleteProps< false, "div" >["renderOption"] = (props, tag, { selected }) => { - if (!canEdit(TAG_DISPLAY_VALUES[tag].isEditable)) return null; + if (TAG_DISPLAY_VALUES[tag].isEditable?.some(canEdit)) return null; return ( ); From 518c33fe5c5d5e4a596e33c410b716bcc40e415b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 19 Nov 2024 17:08:09 +0000 Subject: [PATCH 08/11] alter key name to editableBy --- .../src/pages/FlowEditor/components/Flow/components/Tag.tsx | 4 ++-- editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index 176ab703f2..562e2f3449 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -8,12 +8,12 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; export const TAG_DISPLAY_VALUES: Record< NodeTag, - { color: keyof Palette["nodeTag"]; displayName: string; isEditable?: Role[] } + { color: keyof Palette["nodeTag"]; displayName: string; editableBy?: Role[] } > = { placeholder: { color: "blocking", displayName: "Placeholder", - isEditable: ["platformAdmin"], // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx + editableBy: ["platformAdmin"], // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx }, toReview: { color: "nonBlocking", diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index 8e8bf8c147..479e66f88d 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -34,7 +34,7 @@ const renderOption: AutocompleteProps< false, "div" >["renderOption"] = (props, tag, { selected }) => { - if (TAG_DISPLAY_VALUES[tag].isEditable?.some(canEdit)) return null; + if (TAG_DISPLAY_VALUES[tag].editableBy?.some(canEdit)) return null; return ( Date: Wed, 20 Nov 2024 11:54:43 +0000 Subject: [PATCH 09/11] alter fn name and use state role for validation --- .../src/ui/editor/ComponentTagSelect.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx index 479e66f88d..11ffc1579f 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx @@ -17,14 +17,9 @@ interface Props { onChange: (values: NodeTag[]) => void; } -const canEdit = (role?: Role) => { - // depending on the role, a different form of validation will happen - switch (role) { - case "platformAdmin": - return !useStore.getState().user?.isPlatformAdmin; - default: - return true; - } +const skipTag = (role?: Role) => { + const userRole = useStore.getState().getUserRoleForCurrentTeam(); + return role === userRole ? false : true; }; const renderOption: AutocompleteProps< @@ -34,7 +29,7 @@ const renderOption: AutocompleteProps< false, "div" >["renderOption"] = (props, tag, { selected }) => { - if (TAG_DISPLAY_VALUES[tag].editableBy?.some(canEdit)) return null; + if (TAG_DISPLAY_VALUES[tag].editableBy?.some(skipTag)) return null; return ( Date: Wed, 20 Nov 2024 11:55:37 +0000 Subject: [PATCH 10/11] remove comment --- .../src/pages/FlowEditor/components/Flow/components/Tag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx index 562e2f3449..f1a64e42e2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx @@ -13,7 +13,7 @@ export const TAG_DISPLAY_VALUES: Record< placeholder: { color: "blocking", displayName: "Placeholder", - editableBy: ["platformAdmin"], // if new roles are added, we should update the canEdit() in ComponentTagSelect.tsx + editableBy: ["platformAdmin"], }, toReview: { color: "nonBlocking", From 43a8a4c7da3dbb1e77226a1650a8c7341fbaf0ab Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 20 Nov 2024 12:11:33 +0000 Subject: [PATCH 11/11] fix state call --- editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx index 2377eba20d..54efa0cc6d 100644 --- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx +++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx @@ -27,6 +27,7 @@ describe("Checklist Component for a Platform Admin", () => { ...mockUser, isPlatformAdmin: true, }, + teamSlug: "team", }), ), );