diff --git a/editor.planx.uk/src/components/EditorNavMenu.tsx b/editor.planx.uk/src/components/EditorNavMenu.tsx new file mode 100644 index 0000000000..6c110307f7 --- /dev/null +++ b/editor.planx.uk/src/components/EditorNavMenu.tsx @@ -0,0 +1,196 @@ +import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings"; +import FactCheckIcon from "@mui/icons-material/FactCheck"; +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; +import GroupIcon from "@mui/icons-material/Group"; +import PaletteIcon from "@mui/icons-material/Palette"; +import RateReviewIcon from "@mui/icons-material/RateReview"; +import TuneIcon from "@mui/icons-material/Tune"; +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 Typography from "@mui/material/Typography"; +import React from "react"; +import { useCurrentRoute, useNavigation } from "react-navi"; +import { rootFlowPath } from "routes/utils"; +import { FONT_WEIGHT_SEMI_BOLD } from "theme"; +import EditorIcon from "ui/icons/Editor"; + +interface Route { + title: string; + Icon: React.ElementType; + route: string; +} + +interface EditorNavMenuProps { + routes: Route[]; + compact?: boolean; +} + +const globalLayoutRoutes: Route[] = [ + { + title: "Select a team", + Icon: FormatListBulletedIcon, + route: "/", + }, + { + title: "Admin panel", + Icon: AdminPanelSettingsIcon, + route: "admin-panel", + }, + { + title: "Global settings", + Icon: TuneIcon, + route: "global-settings", + }, +]; + +const teamLayoutRoutes: Route[] = [ + { + title: "Services", + Icon: FormatListBulletedIcon, + route: "/", + }, + { + title: "Team members", + Icon: GroupIcon, + route: "/members", + }, + { + title: "Design", + Icon: PaletteIcon, + route: "/settings/design", + }, +]; + +const flowLayoutRoutes: Route[] = [ + { + title: "Editor", + Icon: EditorIcon, + route: "", + }, + { + title: "Service settings", + Icon: TuneIcon, + route: "/service", + }, + { + title: "Submissions log", + Icon: FactCheckIcon, + route: "/submissions-log", + }, + { + title: "Feedback", + Icon: RateReviewIcon, + route: "/feedback", + }, +]; + +const MENU_WIDTH_COMPACT = "52px"; +const MENU_WIDTH_FULL = "184px"; + +const Root = styled(Box)<{ compact?: boolean }>(({ theme, compact }) => ({ + width: compact ? MENU_WIDTH_COMPACT : MENU_WIDTH_FULL, + flexShrink: 0, + background: theme.palette.background.paper, + borderRight: `1px solid ${theme.palette.border.light}`, +})); + +const MenuWrap = styled("ul")(({ theme }) => ({ + listStyle: "none", + margin: 0, + padding: theme.spacing(2.5, 0.4, 0, 0.4), + position: "sticky", + top: 0, +})); + +const MenuItem = styled("li")(({ theme }) => ({ + margin: theme.spacing(0.75, 0), + padding: 0, +})); + +const MenuTitle = styled(Typography)(({ theme }) => ({ + fontWeight: FONT_WEIGHT_SEMI_BOLD, + paddingLeft: theme.spacing(0.5), + textAlign: "left", +})) as typeof Typography; + +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, + }, +})); + +const MenuButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== "isActive", +})<{ isActive: boolean }>(({ theme, isActive }) => ({ + color: theme.palette.text.primary, + width: "100%", + border: "1px solid transparent", + justifyContent: "flex-start", + borderRadius: "3px", + "&:hover": { + background: "white", + borderColor: theme.palette.border.light, + }, + ...(isActive && { + background: theme.palette.common.white, + color: theme.palette.text.primary, + border: `1px solid ${theme.palette.border.main}`, + }), + "& > svg": { + opacity: 0.8, + }, +})); + +function EditorNavMenu({ routes, compact }: EditorNavMenuProps) { + const { navigate } = useNavigation(); + const { url } = useCurrentRoute(); + const rootPath = rootFlowPath(); + + const isActive = (route: string) => { + const currentPath = url.pathname.replace(rootPath, ""); + return currentPath === route; + }; + + const handleClick = (route: string) => { + if (!isActive(route)) { + navigate(rootPath + route); + } + }; + + return ( + + + {routes.map(({ title, Icon, route }) => ( + handleClick(route)} key={title}> + {compact ? ( + + + + + + ) : ( + + + {title} + + )} + + ))} + + + ); +} + +export { flowLayoutRoutes, globalLayoutRoutes, teamLayoutRoutes }; +export default EditorNavMenu; diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 467af46ad1..9a355dbf25 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -62,7 +62,7 @@ const BreadcrumbsRoot = styled(Box)(() => ({ const BreadcrumbsLink = styled(Link)(({ theme }) => ({ color: theme.palette.common.white, textDecoration: "none", - borderBottom: "1px solid currentColor", + borderBottom: "1px solid rgba(255, 255, 255, 0.75)", })) as typeof Link; const StyledToolbar = styled(MuiToolbar)(() => ({ @@ -487,7 +487,7 @@ const EditorToolbar: React.FC<{ {user.lastName[0]} - Menu + Account diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx deleted file mode 100644 index e99fb24bd9..0000000000 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import FactCheckIcon from "@mui/icons-material/FactCheck"; -import RateReviewIcon from "@mui/icons-material/RateReview"; -import TuneIcon from "@mui/icons-material/Tune"; -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 React from "react"; -import { useCurrentRoute, useNavigation } from "react-navi"; -import { rootFlowPath } from "routes/utils"; -import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -import EditorIcon from "ui/icons/Editor"; - -const MENU_WIDTH = "46px"; - -const Root = styled(Box)(({ theme }) => ({ - width: MENU_WIDTH, - flexShrink: 0, - background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, -})); - -const MenuWrap = styled("ul")(({ theme }) => ({ - listStyle: "none", - margin: 0, - padding: theme.spacing(4, 0, 0, 0), -})); - -const MenuItem = styled("li")(({ theme }) => ({ - margin: theme.spacing(0.75, 0), - padding: 0, -})); - -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, - }, -})); - -const MenuButton = styled(IconButton, { - shouldForwardProp: (prop) => prop !== "isActive", -})<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, - height: MENU_WIDTH, - border: "1px solid transparent", - borderRightColor: theme.palette.border.main, - "&:hover": { - background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, - }, - ...(isActive && { - background: theme.palette.common.white, - color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", - }), -})); - -function EditorMenu() { - const { navigate } = useNavigation(); - const { url } = useCurrentRoute(); - const rootPath = rootFlowPath(); - - const isActive = (route: string) => url.pathname.endsWith(route); - const handleClick = (route: string) => - !isActive(route) && navigate(rootPath + route); - - const routes = [ - { - title: "Editor", - Icon: EditorIcon, - route: "/", - }, - { - title: "Service settings", - Icon: TuneIcon, - route: "/service", - }, - { - title: "Submissions log", - Icon: FactCheckIcon, - route: "/submissions-log", - }, - { - title: "Feedback", - Icon: RateReviewIcon, - route: "/feedback", - }, - ]; - - return ( - - - {routes.map(({ title, Icon, route }) => ( - handleClick(route)} key={title}> - - - - - - - ))} - - - ); -} - -export default EditorMenu; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx index a5071ba261..9215f9b95b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx @@ -1,5 +1,6 @@ import Alert from "@mui/material/Alert"; import Box from "@mui/material/Box"; +import Container from "@mui/material/Container"; import Snackbar from "@mui/material/Snackbar"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; @@ -75,7 +76,7 @@ const DesignSettings: React.FC = () => { const onSuccess = () => setOpen(true); return ( - + Design @@ -97,7 +98,7 @@ const DesignSettings: React.FC = () => { Theme updated successfully - + ); }; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx index 9d590cfbcf..b54f0a76ee 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/TeamSettings.tsx @@ -1,4 +1,4 @@ -import Box from "@mui/material/Box"; +import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; import React from "react"; import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder"; @@ -6,7 +6,7 @@ import SettingsSection from "ui/editor/SettingsSection"; const Team: React.FC = () => { return ( - + Team @@ -30,7 +30,7 @@ const Team: React.FC = () => { - + ); }; export default Team; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx index fe05eeb961..05465e7244 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx @@ -1,15 +1,16 @@ import Close from "@mui/icons-material/Close"; import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; -import Container from "@mui/material/Container"; import Grid from "@mui/material/Grid"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; import Tab from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; +import EditorNavMenu, { teamLayoutRoutes } from "components/EditorNavMenu"; import { HEADER_HEIGHT } from "components/Header"; import React from "react"; import { Link, useNavigation } from "react-navi"; +import Dashboard from "ui/editor/Dashboard"; export interface SettingsTab { route: string; @@ -40,9 +41,10 @@ function TabPanel(props: TabPanelProps) { {...other} > {value === index && ( - - {children} - + + + {children} + )} ); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx index 445a094839..6bf89a6445 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -1,5 +1,4 @@ import Avatar from "@mui/material/Avatar"; -import Box from "@mui/material/Box"; import Chip from "@mui/material/Chip"; import Container from "@mui/material/Container"; import { styled } from "@mui/material/styles"; @@ -11,9 +10,11 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Typography from "@mui/material/Typography"; import { Role, User } from "@opensystemslab/planx-core/types"; +import EditorNavMenu, { teamLayoutRoutes } from "components/EditorNavMenu"; import React from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import SettingsSection from "ui/editor/SettingsSection"; +import Dashboard from "ui/editor/Dashboard"; const StyledAvatar = styled(Avatar)(({ theme }) => ({ background: theme.palette.background.dark, @@ -127,8 +128,9 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { ); return ( - - + + + Team editors @@ -159,7 +161,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { )} - - + + ); }; diff --git a/editor.planx.uk/src/pages/GlobalSettings.tsx b/editor.planx.uk/src/pages/GlobalSettings.tsx index 5b44b151b9..9149ceae57 100644 --- a/editor.planx.uk/src/pages/GlobalSettings.tsx +++ b/editor.planx.uk/src/pages/GlobalSettings.tsx @@ -4,6 +4,7 @@ import Button from "@mui/material/Button"; import Container from "@mui/material/Container"; import Snackbar from "@mui/material/Snackbar"; import Typography from "@mui/material/Typography"; +import EditorNavMenu, { globalLayoutRoutes } from "components/EditorNavMenu"; import { useFormik } from "formik"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { useState } from "react"; @@ -67,6 +68,7 @@ function Component() { return ( +
diff --git a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx index 540fc44abe..7afb408063 100644 --- a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx +++ b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx @@ -4,14 +4,17 @@ import Accordion from "@mui/material/Accordion"; import AccordionDetails from "@mui/material/AccordionDetails"; import AccordionSummary from "@mui/material/AccordionSummary"; import Box from "@mui/material/Box"; +import Container from "@mui/material/Container"; import Grid from "@mui/material/Grid"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList"; +import EditorNavMenu, { globalLayoutRoutes } from "components/EditorNavMenu"; import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import useSWR from "swr"; import { AdminPanelData } from "types"; +import Dashboard from "ui/editor/Dashboard"; import Caret from "ui/icons/Caret"; const StyledTeamAccordion = styled(Accordion, { @@ -34,15 +37,22 @@ function Component() { const adminPanelData = useStore((state) => state.adminPanelData); return ( - - Platform Admin Panel - - {`This is an overview of each team's integrations and settings for the `} - {process.env.REACT_APP_ENV} - {` environment`} - - {adminPanelData?.map((team) => )} - + + + + + Platform Admin Panel + + {`This is an overview of each team's integrations and settings for the `} + {process.env.REACT_APP_ENV} + {` environment`} + + {adminPanelData?.map((team) => ( + + ))} + + + ); } diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index fc6ee62a4c..b776f7f5a3 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -13,6 +13,7 @@ import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; +import EditorNavMenu, { teamLayoutRoutes } from "components/EditorNavMenu"; import React, { useCallback, useEffect, useState } from "react"; import { Link, useNavigation } from "react-navi"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; @@ -25,14 +26,6 @@ import SimpleMenu from "../ui/editor/SimpleMenu"; import { useStore } from "./FlowEditor/lib/store"; import { formatLastEditMessage } from "./FlowEditor/utils"; -const Root = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - width: "100%", - display: "flex", - alignItems: "flex-start", - flexGrow: 1, -})); - const DashboardList = styled("ul")(({ theme }) => ({ padding: theme.spacing(0, 0, 3), borderBottom: "1px solid #fff", @@ -302,71 +295,70 @@ const Team: React.FC = () => { }, [fetchFlows]); return ( - - - + + + + - - - Services - - {useStore.getState().canUserEditTeam(slug) ? ( - - ) : ( - - )} - - {useStore.getState().canUserEditTeam(slug) && ( - { - const newFlowName = prompt("Service name"); - if (newFlowName) { - const newFlowSlug = slugify(newFlowName); - useStore - .getState() - .createFlow(teamId, newFlowSlug, newFlowName) - .then((newId: string) => { - navigation.navigate(`/${slug}/${newId}`); - }); - } - }} - > - Add a new service - + + Services + + {useStore.getState().canUserEditTeam(slug) ? ( + + ) : ( + )} - {flows && ( - - {flows.map((flow: any) => ( - { - fetchFlows(); - }} - /> - ))} - + {useStore.getState().canUserEditTeam(slug) && ( + { + const newFlowName = prompt("Service name"); + if (newFlowName) { + const newFlowSlug = slugify(newFlowName); + useStore + .getState() + .createFlow(teamId, newFlowSlug, newFlowName) + .then((newId: string) => { + navigation.navigate(`/${slug}/${newId}`); + }); + } + }} + > + Add a new service + )} - - - + + {flows && ( + + {flows.map((flow: any) => ( + { + fetchFlows(); + }} + /> + ))} + + )} + + ); }; diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx index f8208dd2c9..0b6197fd6a 100644 --- a/editor.planx.uk/src/pages/Teams.tsx +++ b/editor.planx.uk/src/pages/Teams.tsx @@ -4,6 +4,7 @@ import Container from "@mui/material/Container"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { Team } from "@opensystemslab/planx-core/types"; +import EditorNavMenu, { globalLayoutRoutes } from "components/EditorNavMenu"; import React from "react"; import { Link } from "react-navi"; import { borderedFocusStyle } from "theme"; @@ -21,14 +22,6 @@ interface Props { teamTheme: Array; } -export const Root = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.default, - width: "100%", - display: "flex", - alignItems: "flex-start", - flexGrow: 1, -})); - const StyledLink = styled(Link)(() => ({ textDecoration: "none", "&:focus-within > div": { @@ -80,32 +73,31 @@ const Teams: React.FC = ({ teams, teamTheme }) => { ); }); return ( - - - - - Select a team - - {editableTeams.length > 0 && ( - <> - - My teams - - {renderTeams(editableTeams)} - - )} + + + + + Select a team + + {editableTeams.length > 0 && ( + <> + + My teams + + {renderTeams(editableTeams)} + + )} - {viewOnlyTeams.length > 0 && ( - <> - - Other teams (view only) - - {renderTeams(viewOnlyTeams)} - - )} - - - + {viewOnlyTeams.length > 0 && ( + <> + + Other teams (view only) + + {renderTeams(viewOnlyTeams)} + + )} + + ); }; diff --git a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx index 1c95b66633..72813dbbd9 100644 --- a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx +++ b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx @@ -1,8 +1,7 @@ import Box from "@mui/material/Box"; import { styled } from "@mui/material/styles"; +import EditorNavMenu, { flowLayoutRoutes } from "components/EditorNavMenu"; import ErrorFallback from "components/ErrorFallback"; -import { hasFeatureFlag } from "lib/featureFlags"; -import EditorMenu from "pages/FlowEditor/components/EditorMenu"; import React, { PropsWithChildren } from "react"; import { ErrorBoundary } from "react-error-boundary"; @@ -15,7 +14,7 @@ const Root = styled(Box)(() => ({ const FlowEditorLayout: React.FC = ({ children }) => ( - {hasFeatureFlag("EDITOR_NAVIGATION") && } + {children} ); diff --git a/editor.planx.uk/src/ui/editor/Dashboard.tsx b/editor.planx.uk/src/ui/editor/Dashboard.tsx index a18472da46..e5b42dbf0b 100644 --- a/editor.planx.uk/src/ui/editor/Dashboard.tsx +++ b/editor.planx.uk/src/ui/editor/Dashboard.tsx @@ -4,7 +4,15 @@ import { styled } from "@mui/material/styles"; import { HEADER_HEIGHT } from "components/Header"; import React, { PropsWithChildren } from "react"; -const Root = styled(Box)(({ theme }) => ({ +const DashboardWrap = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.default, + width: "100%", + display: "flex", + alignItems: "flex-start", + flexGrow: 1, +})); + +const DashboardContainer = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, display: "flex", @@ -12,11 +20,15 @@ const Root = styled(Box)(({ theme }) => ({ width: "100%", minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, [`& > .${containerClasses.root}`]: { - paddingTop: theme.spacing(6), - paddingBottom: theme.spacing(6), + paddingTop: theme.spacing(5), + paddingBottom: theme.spacing(5), }, })); export default function Dashboard(props: PropsWithChildren) { - return {props.children}; + return ( + + {props.children} + + ); }