feat: Setup additional node tags

theopensystemslab · Oct 8, 2024 · b112dcc · b112dcc
1 parent 6b36398
commit b112dcc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#5781880",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c19c3be",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
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
@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import { visuallyHidden } from "@mui/utils";
 import { NodeTag } from "@opensystemslab/planx-core/types";
 import React from "react";
+import { getContrastTextColor } from "styleUtils";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 export const TAG_DISPLAY_VALUES: Record<
@@ -12,6 +13,22 @@ export const TAG_DISPLAY_VALUES: Record<
     color: "#FAE1B7",
     displayName: "Placeholder",
   },
+  "to review": {
+    color: "#E9EDC9",
+    displayName: "To review",
+  },
+  "sensitive data": {
+    color: "#F4978E",
+    displayName: "Sensitive data",
+  },
+  analytics: {
+    color: "#D7C6E6",
+    displayName: "Analytics",
+  },
+  automation: {
+    color: "#B7D1DE",
+    displayName: "Automation",
+  },
 } as const;
 
 export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => (
@@ -28,6 +45,7 @@ export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => (
       p: 0.5,
       textAlign: "center",
       fontWeight: FONT_WEIGHT_SEMI_BOLD,
+      color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
     })}
   >
     {TAG_DISPLAY_VALUES[tag].displayName}

diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx
@@ -1,9 +1,11 @@
 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 { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag";
 import React from "react";
+import { getContrastTextColor } from "styleUtils";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import InputRow from "ui/shared/InputRow";
@@ -12,7 +14,7 @@ import { CustomCheckbox, SelectMultiple } from "ui/shared/SelectMultiple";
 interface Props {
   value?: NodeTag[];
   onChange: (values: NodeTag[]) => void;
-};
+}
 
 const renderOption: AutocompleteProps<
   NodeTag,
@@ -23,10 +25,29 @@ const renderOption: AutocompleteProps<
 >["renderOption"] = (props, tag, { selected }) => (
   <ListItem {...props}>
     <CustomCheckbox aria-hidden="true" className={selected ? "selected" : ""} />
-    { TAG_DISPLAY_VALUES[tag].displayName }
+    {TAG_DISPLAY_VALUES[tag].displayName}
   </ListItem>
 );
 
+const renderTags: AutocompleteProps<
+  NodeTag,
+  true,
+  true,
+  false,
+  "div"
+>["renderTags"] = (value, getTagProps) =>
+  value.map((tag, index) => (
+    <Chip
+      {...getTagProps({ index })}
+      key={tag}
+      label={TAG_DISPLAY_VALUES[tag].displayName}
+      sx={{
+        backgroundColor: TAG_DISPLAY_VALUES[tag].color,
+        color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
+      }}
+    />
+  ));
+
 export const ComponentTagSelect: React.FC<Props> = ({ value, onChange }) => {
   return (
     <ModalSection>
@@ -39,9 +60,10 @@ export const ComponentTagSelect: React.FC<Props> = ({ value, onChange }) => {
             onChange={(_e, value) => onChange(value)}
             value={value}
             renderOption={renderOption}
+            renderTags={renderTags}
           />
         </InputRow>
       </ModalSectionContent>
     </ModalSection>
-  )
-}
+  );
+};