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 dcdaa9d5fe..cf765d4514 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 { 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 }) => (
- ({
- 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}
-
-);
+export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => {
+ const showTags = useStore((state) => state.showTags);
+ if (!showTags) return null;
+
+ return (
+ ({
+ 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}
+
+ );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
new file mode 100644
index 0000000000..91502de8d4
--- /dev/null
+++ b/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) => (
+
+))(() => ({
+ [`& .${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 (
+
+ ({
+ color: showTags
+ ? theme.palette.text.primary
+ : theme.palette.text.disabled,
+ position: "absolute",
+ bottom: theme.spacing(1),
+ left: theme.spacing(2),
+ })}
+ >
+ {showTags ? : }
+
+
+ );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index b5130f0f24..167b517006 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/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 = () => {
>
+
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index d46f351c3c..e44a33e504 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/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 {