From 46465d01cc8368ba630c17cb145f9455909f1d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Tue, 8 Oct 2024 13:07:34 +0100 Subject: [PATCH] feat: Add toggle to view tags --- .../components/Flow/components/Tag.tsx | 48 ++++++++--------- .../FlowEditor/ToggleTagsButton.tsx | 51 +++++++++++++++++++ .../src/pages/FlowEditor/index.tsx | 2 + .../src/pages/FlowEditor/lib/store/editor.ts | 15 ++++-- 4 files changed, 90 insertions(+), 26 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx 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 }) => ( - -); +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 {