Skip to content

Commit

Permalink
feat: Single EditorNavMenu instance with wired up routing (#3370)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DafyddLlyr
DafyddLlyr committed Jul 12, 2024
1 parent 470df49 commit 7c81c53
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 273 deletions.
164 changes: 88 additions & 76 deletions editor.planx.uk/src/components/EditorNavMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ 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 { useStore } from "pages/FlowEditor/lib/store";
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";

Expand All @@ -22,74 +22,12 @@ interface Route {
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 = "178px";

const Root = styled(Box)<{ compact?: boolean }>(({ theme, compact }) => ({
const Root = styled(Box, {
shouldForwardProp: (prop) => prop !== "compact",
})<{ compact?: boolean }>(({ theme, compact }) => ({
width: compact ? MENU_WIDTH_COMPACT : MENU_WIDTH_FULL,
flexShrink: 0,
background: theme.palette.background.paper,
Expand Down Expand Up @@ -152,22 +90,97 @@ const MenuButton = styled(IconButton, {
},
}));

function EditorNavMenu({ routes, compact }: EditorNavMenuProps) {
function EditorNavMenu() {
const { navigate } = useNavigation();
const { url } = useCurrentRoute();
const rootPath = rootFlowPath();
const [teamSlug, flowSlug] = useStore((state) => [
state.teamSlug,
state.flowSlug,
]);

const isActive = (route: string) => {
const currentPath = url.pathname.replace(rootPath, "");
return currentPath === route;
};
const isActive = (route: string) => url.href.endsWith(route);

const handleClick = (route: string) => {
if (!isActive(route)) {
navigate(rootPath + route);
}
if (isActive(route)) return;
navigate(route);
};

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: `/${teamSlug}`,
},
{
title: "Team members",
Icon: GroupIcon,
route: `/${teamSlug}/members`,
},
{
title: "Design",
Icon: PaletteIcon,
route: `/${teamSlug}/design`,
},
{
title: "Settings",
Icon: TuneIcon,
route: `/${teamSlug}/general-settings`,
},
];

const flowLayoutRoutes: Route[] = [
{
title: "Editor",
Icon: EditorIcon,
route: `/${teamSlug}/${flowSlug}`,
},
{
title: "Service settings",
Icon: TuneIcon,
route: `/${teamSlug}/${flowSlug}/service`,
},
{
title: "Submissions log",
Icon: FactCheckIcon,
route: `/${teamSlug}/${flowSlug}/submissions-log`,
},
{
title: "Feedback",
Icon: RateReviewIcon,
route: `/${teamSlug}/${flowSlug}/feedback`,
},
];

const getRoutesForUrl = (
url: string,
): { routes: Route[]; compact: boolean } => {
if (flowSlug && url.includes(flowSlug))
return { routes: flowLayoutRoutes, compact: true };
if (teamSlug && url.includes(teamSlug))
return { routes: teamLayoutRoutes, compact: false };
return { routes: globalLayoutRoutes, compact: false };
};

const { routes, compact } = getRoutesForUrl(url.href);

return (
<Root compact={compact}>
<MenuWrap>
Expand All @@ -192,5 +205,4 @@ function EditorNavMenu({ routes, compact }: EditorNavMenuProps) {
);
}

export { flowLayoutRoutes, globalLayoutRoutes, teamLayoutRoutes };
export default EditorNavMenu;
10 changes: 1 addition & 9 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,9 @@ 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;
name: string;
Expand Down Expand Up @@ -40,12 +37,7 @@ function TabPanel(props: TabPanelProps) {
aria-labelledby={`nav-tab-${index}`}
{...other}
>
{value === index && (
<Dashboard>
<EditorNavMenu routes={teamLayoutRoutes} />
{children}
</Dashboard>
)}
{value === index ? children : null}
</div>
);
}
Expand Down
57 changes: 26 additions & 31 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,9 @@ 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,
Expand Down Expand Up @@ -128,40 +126,37 @@ export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
);

return (
<Dashboard>
<EditorNavMenu routes={teamLayoutRoutes} />
<Container maxWidth="contentWrap">
<Container maxWidth="contentWrap">
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Team editors
</Typography>
<Typography variant="body1">
Editors have access to edit your services.
</Typography>
<MembersTable members={activeMembers} />
</SettingsSection>
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Admins
</Typography>
<Typography variant="body1">
Admins have editor access across all teams.
</Typography>
<MembersTable members={platformAdmins} />
</SettingsSection>
{archivedMembers.length > 0 && (
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Team editors
Archived team editors
</Typography>
<Typography variant="body1">
Editors have access to edit your services.
Past team members who no longer have access to the Editor, but may
be part of the edit history of your services.
</Typography>
<MembersTable members={activeMembers} />
<MembersTable members={archivedMembers} />
</SettingsSection>
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Admins
</Typography>
<Typography variant="body1">
Admins have editor access across all teams.
</Typography>
<MembersTable members={platformAdmins} />
</SettingsSection>
{archivedMembers.length > 0 && (
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Archived team editors
</Typography>
<Typography variant="body1">
Past team members who no longer have access to the Editor, but may
be part of the edit history of your services.
</Typography>
<MembersTable members={archivedMembers} />
</SettingsSection>
)}
</Container>
</Dashboard>
)}
</Container>
);
};
7 changes: 2 additions & 5 deletions editor.planx.uk/src/pages/GlobalSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ 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";
import type { TextContent } from "types";
import Dashboard from "ui/editor/Dashboard";
import InputGroup from "ui/editor/InputGroup";
import InputLegend from "ui/editor/InputLegend";
import ListManager from "ui/editor/ListManager";
Expand Down Expand Up @@ -67,8 +65,7 @@ function Component() {
};

return (
<Dashboard>
<EditorNavMenu routes={globalLayoutRoutes} />
<>
<Container maxWidth="contentWrap">
<form onSubmit={formik.handleSubmit}>
<SettingsSection>
Expand Down Expand Up @@ -118,7 +115,7 @@ function Component() {
Footer settings updated successfully
</Alert>
</Snackbar>
</Dashboard>
</>
);
}

Expand Down
29 changes: 11 additions & 18 deletions editor.planx.uk/src/pages/PlatformAdminPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ 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, {
Expand All @@ -37,22 +35,17 @@ function Component() {
const adminPanelData = useStore((state) => state.adminPanelData);

return (
<Dashboard>
<EditorNavMenu routes={globalLayoutRoutes} />
<Container maxWidth={false}>
<Box sx={{ overflow: "hidden" }}>
<Typography variant="h1">Platform Admin Panel</Typography>
<Typography variant="body1" mb={3}>
{`This is an overview of each team's integrations and settings for the `}
<strong>{process.env.REACT_APP_ENV}</strong>
{` environment`}
</Typography>
{adminPanelData?.map((team) => (
<TeamData key={team.id} data={team} />
))}
</Box>
</Container>
</Dashboard>
<Container maxWidth={false}>
<Box sx={{ overflow: "hidden" }}>
<Typography variant="h1">Platform Admin Panel</Typography>
<Typography variant="body1" mb={3}>
{`This is an overview of each team's integrations and settings for the `}
<strong>{process.env.REACT_APP_ENV}</strong>
{` environment`}
</Typography>
{adminPanelData?.map((team) => <TeamData key={team.id} data={team} />)}
</Box>
</Container>
);
}

Expand Down
Loading

0 comments on commit 7c81c53

Please sign in to comment.