feat: Setup additional node tags

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#0ade7fa",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/@planx/components/FileUploadAndLabel/schema.ts

@@ -33,7 +33,7 @@ const moreInformationSchema: SchemaOf<MoreInformation> = object({
 });
 
 const baseNodeDataSchema: SchemaOf<BaseNodeData> = object({
-  tags: array(mixed().oneOf(NODE_TAGS)),
+  tags: array(mixed().oneOf([...NODE_TAGS])),
 }).concat(moreInformationSchema);
 
 const valFnSchema = mixed().when("condition", {

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx

@@ -1,35 +1,60 @@
 import Box from "@mui/material/Box";
-import { visuallyHidden } from "@mui/utils";
+import { Palette, useTheme } from "@mui/material/styles";
 import { NodeTag } from "@opensystemslab/planx-core/types";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
+import { getContrastTextColor } from "styleUtils";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 export const TAG_DISPLAY_VALUES: Record<
   NodeTag,
-  { color: string; displayName: string }
+  { color: keyof Palette["nodeTag"]; displayName: string }
 > = {
   placeholder: {
-    color: "#FAE1B7",
+    color: "blocking",
     displayName: "Placeholder",
   },
+  toReview: {
+    color: "nonBlocking",
+    displayName: "To review",
+  },
+  sensitiveData: {
+    color: "information",
+    displayName: "Sensitive data",
+  },
+  analytics: {
+    color: "information",
+    displayName: "Analytics",
+  },
+  automation: {
+    color: "information",
+    displayName: "Automation",
+  },
 } as const;
 
-export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => (
-  <Box
-    // Temporarily hidden until we decide how this should appear in the graph
-    // Please see https://github.com/theopensystemslab/planx-new/pull/3762
-    style={visuallyHidden}
-    sx={(theme) => ({
-      bgcolor: TAG_DISPLAY_VALUES[tag].color,
-      borderColor: theme.palette.common.black,
-      borderWidth: "0 1px 1px 1px",
-      borderStyle: "solid",
-      width: "100%",
-      p: 0.5,
-      textAlign: "center",
-      fontWeight: FONT_WEIGHT_SEMI_BOLD,
-    })}
-  >
-    {TAG_DISPLAY_VALUES[tag].displayName}
-  </Box>
-);
+export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => {
+  const theme = useTheme();
+
+  const showTags = useStore((state) => state.showTags);
+  if (!showTags) return null;
+
+  const tagBgColor = theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color];
+
+  return (
+    <Box
+      sx={(theme) => ({
+        bgcolor: tagBgColor,
+        borderColor: theme.palette.common.black,
+        borderWidth: "0 1px 1px 1px",
+        borderStyle: "solid",
+        width: "100%",
+        p: 0.5,
+        textAlign: "center",
+        fontWeight: FONT_WEIGHT_SEMI_BOLD,
+        color: getContrastTextColor(tagBgColor, "#FFF"),
+      })}
+    >
+      {TAG_DISPLAY_VALUES[tag].displayName}
+    </Box>
+  );
+};

editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx

@@ -0,0 +1,61 @@
+import LabelIcon from "@mui/icons-material/Label";
+import LabelOffIcon from "@mui/icons-material/LabelOff";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+
+const TooltipWrap = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} arrow placement="right" classes={{ popper: className }} />
+))(() => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: "#2c2c2c",
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "#2c2c2c",
+    left: "-5px",
+    fontSize: "0.8em",
+    borderRadius: 0,
+    fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  },
+}));
+
+export const ToggleTagsButton: React.FC = () => {
+  const [showTags, toggleShowTags] = useStore((state) => [
+    state.showTags,
+    state.toggleShowTags,
+  ]);
+
+  return (
+    <Box
+      sx={(theme) => ({
+        position: "fixed",
+        bottom: theme.spacing(2),
+        left: theme.spacing(7),
+        zIndex: theme.zIndex.appBar,
+        border: `1px solid ${theme.palette.border.main}`,
+        borderRadius: "3px",
+        background: theme.palette.background.paper,
+      })}
+    >
+      <TooltipWrap title="Toggle tags">
+        <IconButton
+          aria-label="Toggle tags"
+          onClick={toggleShowTags}
+          size="large"
+          sx={(theme) => ({
+            padding: theme.spacing(1),
+            color: showTags
+              ? theme.palette.text.primary
+              : theme.palette.text.disabled,
+          })}
+        >
+          {showTags ? <LabelIcon /> : <LabelOffIcon />}
+        </IconButton>
+      </TooltipWrap>
+    </Box>
+  );
+};

editor.planx.uk/src/pages/FlowEditor/index.tsx

@@ -7,6 +7,7 @@ import React, { useRef } from "react";
 import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
+import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
 import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition";
@@ -49,6 +50,7 @@ const FlowEditor = () => {
       >
         <Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
+          <ToggleTagsButton />
         </Box>
       </Box>
       <Sidebar />

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -26,7 +26,7 @@ import { customAlphabet } from "nanoid-good";
 import en from "nanoid-good/locale/en";
 import { type } from "ot-json0";
 import type { StateCreator } from "zustand";
-import { persist } from 'zustand/middleware'
+import { persist } from "zustand/middleware";
 
 import { FlowLayout } from "../../components/Flow";
 import { connectToDB, getConnection } from "./../sharedb";
@@ -49,6 +49,8 @@ export interface EditorUIStore {
   toggleSidebar: () => void;
   isTestEnvBannerVisible: boolean;
   hideTestEnvBanner: () => void;
+  showTags: boolean;
+  toggleShowTags: () => void;
 }
 
 export const editorUIStore: StateCreator<
@@ -69,11 +71,18 @@ export const editorUIStore: StateCreator<
     isTestEnvBannerVisible: !window.location.href.includes(".uk"),
 
     hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }),
+
+    showTags: false,
+
+    toggleShowTags: () => set({ showTags: !get().showTags }),
   }),
   {
     name: "editorUIStore",
-    partialize: (state) => ({ showSidebar: state.showSidebar }),
-  }
+    partialize: (state) => ({
+      showSidebar: state.showSidebar,
+      showTags: state.showTags,
+    }),
+  },
 );
 
 interface PublishFlowResponse {

editor.planx.uk/src/theme.ts

@@ -76,6 +76,12 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
     input: "#0B0C0C",
     light: "#E0E0E0",
   },
+  nodeTag: {
+    error: "#FFA8A1",
+    blocking: "#FAE1B7",
+    nonBlocking: "#FFFDB0",
+    information: "#B7FAD7",
+  },
   tonalOffset: DEFAULT_TONAL_OFFSET,
 };
 

editor.planx.uk/src/themeOverrides.d.ts

@@ -32,6 +32,12 @@ declare module "@mui/material/styles/createPalette" {
     border: { main: string; input: string; light: string };
     link: { main: string };
     prompt: { main: string; contrastText: string; light: string; dark: string };
+    nodeTag: {
+      error: string;
+      nonBlocking: string;
+      blocking: string;
+      information: string;
+    };
   }
 
   interface PaletteOptions {
@@ -43,6 +49,12 @@ declare module "@mui/material/styles/createPalette" {
       light: string;
       dark: string;
     };
+    nodeTag?: {
+      error: string;
+      nonBlocking: string;
+      blocking: string;
+      information: string;
+    };
   }
 
   interface TypeText {

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,32 @@ 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={(theme) => ({
+        backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color],
+        color: getContrastTextColor(
+          theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color],
+          "#FFF",
+        ),
+      })}
+    />
+  ));
+
 export const ComponentTagSelect: React.FC<Props> = ({ value, onChange }) => {
   return (
     <ModalSection>
@@ -39,9 +63,10 @@ export const ComponentTagSelect: React.FC<Props> = ({ value, onChange }) => {
             onChange={(_e, value) => onChange(value)}
             value={value}
             renderOption={renderOption}
+            renderTags={renderTags}
           />
         </InputRow>
       </ModalSectionContent>
     </ModalSection>
-  )
-}
+  );
+};