-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Setup additional node tags (#3775)
Co-authored-by: Ian Jones <[email protected]>
- Loading branch information
1 parent
b912929
commit 854de63
Showing
10 changed files
with
177 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 47 additions & 22 deletions
69
editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
61 changes: 61 additions & 0 deletions
61
editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleTagsButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters