Skip to content

Commit

Permalink
feat: Setup additional node tags (#3775)
Browse files Browse the repository at this point in the history
Co-authored-by: Ian Jones <[email protected]>
  • Loading branch information
DafyddLlyr and ianjon3s authored Oct 8, 2024
1 parent b912929 commit 854de63
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 36 deletions.
2 changes: 1 addition & 1 deletion editor.planx.uk/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 6 additions & 5 deletions editor.planx.uk/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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>
);
};
2 changes: 2 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -49,6 +50,7 @@ const FlowEditor = () => {
>
<Box id="editor" ref={scrollContainerRef} sx={{ position: "relative" }}>
<Flow flow={flow} breadcrumbs={breadcrumbs} />
<ToggleTagsButton />
</Box>
</Box>
<Sidebar />
Expand Down
15 changes: 12 additions & 3 deletions editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -49,6 +49,8 @@ export interface EditorUIStore {
toggleSidebar: () => void;
isTestEnvBannerVisible: boolean;
hideTestEnvBanner: () => void;
showTags: boolean;
toggleShowTags: () => void;
}

export const editorUIStore: StateCreator<
Expand All @@ -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 {
Expand Down
6 changes: 6 additions & 0 deletions editor.planx.uk/src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

Expand Down
12 changes: 12 additions & 0 deletions editor.planx.uk/src/themeOverrides.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
33 changes: 29 additions & 4 deletions editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -12,7 +14,7 @@ import { CustomCheckbox, SelectMultiple } from "ui/shared/SelectMultiple";
interface Props {
value?: NodeTag[];
onChange: (values: NodeTag[]) => void;
};
}

const renderOption: AutocompleteProps<
NodeTag,
Expand All @@ -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>
Expand All @@ -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>
)
}
);
};

0 comments on commit 854de63

Please sign in to comment.