feat: Add toggle to view tags

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

@@ -1,6 +1,6 @@
 import Box from "@mui/material/Box";
-import { visuallyHidden } from "@mui/utils";
 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";
@@ -22,32 +22,34 @@ export const TAG_DISPLAY_VALUES: Record<
     displayName: "Sensitive data",
   },
   analytics: {
-    color: "#D7C6E6",
+    color: "#E9EDC9",
     displayName: "Analytics",
   },
   automation: {
-    color: "#B7D1DE",
+    color: "#E9EDC9",
     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,
-      color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
-    })}
-  >
-    {TAG_DISPLAY_VALUES[tag].displayName}
-  </Box>
-);
+export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => {
+  const showTags = useStore((state) => state.showTags);
+  if (!showTags) return null;
+
+  return (
+    <Box
+      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,
+        color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
+      })}
+    >
+      {TAG_DISPLAY_VALUES[tag].displayName}
+    </Box>
+  );
+};

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

@@ -0,0 +1,51 @@
+import LabelIcon from "@mui/icons-material/Label";
+import LabelOffIcon from "@mui/icons-material/LabelOff";
+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 (
+    <TooltipWrap title="Toggle tags">
+      <IconButton
+        title="Toggle tags"
+        aria-label="Toggle tags"
+        onClick={toggleShowTags}
+        size="large"
+        sx={(theme) => ({
+          color: showTags
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          position: "absolute",
+          bottom: theme.spacing(1),
+          left: theme.spacing(2),
+        })}
+      >
+        {showTags ? <LabelIcon /> : <LabelOffIcon />}
+      </IconButton>
+    </TooltipWrap>
+  );
+};

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 {