From 05f24b6446a63bec08c3c8ee3cf1976761447e1f Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 23 May 2024 18:32:43 +0100
Subject: [PATCH] wip: Menu settings

---
 .../FlowEditor/components/GlobalMenu.tsx      |  4 +-
 .../components/Team/TeamMembers.tsx           | 76 ++++++++++---------
 .../src/pages/PlatformAdminPanel.tsx          | 40 +++++++---
 editor.planx.uk/src/pages/Team.tsx            |  5 --
 editor.planx.uk/src/pages/Teams.tsx           | 13 ++--
 5 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx
index a0c1fc781c..d5ee8f1188 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx
@@ -77,12 +77,12 @@ function GlobalMenu() {
     {
       title: "Admin panel",
       Icon: AdminPanelSettingsIcon,
-      route: "/admin-panel",
+      route: "admin-panel",
     },
     {
       title: "Global settings",
       Icon: TuneIcon,
-      route: "/global-settings",
+      route: "global-settings",
     },
   ];
 
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 f1fe300a82..dc02490d2a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
@@ -11,10 +11,13 @@ 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 { Dashboard, DashboardWrap } from "pages/Teams";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import EditorRow from "ui/editor/EditorRow";
 
+import TeamMenu from "../TeamMenu";
+
 const StyledAvatar = styled(Avatar)(({ theme }) => ({
   background: theme.palette.background.dark,
   color: theme.palette.common.white,
@@ -127,39 +130,44 @@ export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
   );
 
   return (
-    <Container maxWidth="contentWrap">
-      <Box py={7}>
-        <EditorRow>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Team editors
-          </Typography>
-          <Typography variant="body1">
-            Editors have access to edit your services.
-          </Typography>
-          <MembersTable members={activeMembers} />
-        </EditorRow>
-        <EditorRow>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Admins
-          </Typography>
-          <Typography variant="body1">
-            Admins have editor access across all teams.
-          </Typography>
-          <MembersTable members={platformAdmins} />
-        </EditorRow>
-        {archivedMembers.length > 0 && (
-          <EditorRow>
-            <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} />
-          </EditorRow>
-        )}
-      </Box>
-    </Container>
+    <DashboardWrap>
+      <Dashboard>
+        <TeamMenu />
+        <Container maxWidth="contentWrap">
+          <Box py={3}>
+            <EditorRow>
+              <Typography variant="h2" component="h3" gutterBottom>
+                Team editors
+              </Typography>
+              <Typography variant="body1">
+                Editors have access to edit your services.
+              </Typography>
+              <MembersTable members={activeMembers} />
+            </EditorRow>
+            <EditorRow>
+              <Typography variant="h2" component="h3" gutterBottom>
+                Admins
+              </Typography>
+              <Typography variant="body1">
+                Admins have editor access across all teams.
+              </Typography>
+              <MembersTable members={platformAdmins} />
+            </EditorRow>
+            {archivedMembers.length > 0 && (
+              <EditorRow>
+                <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} />
+              </EditorRow>
+            )}
+          </Box>
+        </Container>
+      </Dashboard>
+    </DashboardWrap>
   );
 };
diff --git a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx
index 30fcd5456b..a95f78d172 100644
--- a/editor.planx.uk/src/pages/PlatformAdminPanel.tsx
+++ b/editor.planx.uk/src/pages/PlatformAdminPanel.tsx
@@ -4,11 +4,14 @@ 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 GlobalMenu from "pages/FlowEditor/components/GlobalMenu";
 import { useStore } from "pages/FlowEditor/lib/store";
+import { Dashboard, DashboardWrap } from "pages/Teams";
 import React from "react";
 import useSWR from "swr";
 import { AdminPanelData } from "types";
@@ -34,15 +37,24 @@ function Component() {
   const adminPanelData = useStore((state) => state.adminPanelData);
 
   return (
-    <Box p={3}>
-      <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>
+    <DashboardWrap>
+      <Dashboard>
+        <GlobalMenu />
+        <Container maxWidth={false}>
+          <Box py={3}>
+            <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>
+    </DashboardWrap>
   );
 }
 
@@ -58,7 +70,7 @@ const TeamData: React.FC<TeamData> = ({ data }) => {
   const a4Endpoint = `${process.env.REACT_APP_API_URL}/gis/${data.slug}/article4-schema`;
   const fetcher = (url: string) => fetch(url).then((r) => r.json());
   const { data: a4Check, isValidating } = useSWR(
-    () => data.slug ? a4Endpoint : null,
+    () => (data.slug ? a4Endpoint : null),
     fetcher,
   );
 
@@ -123,7 +135,13 @@ const TeamData: React.FC<TeamData> = ({ data }) => {
               </>
               <>
                 <Box component="dt">{"Article 4s (API)"}</Box>
-                <Box component="dd">{!isValidating && a4Check?.status ? <Configured /> : <NotConfigured />}</Box>
+                <Box component="dd">
+                  {!isValidating && a4Check?.status ? (
+                    <Configured />
+                  ) : (
+                    <NotConfigured />
+                  )}
+                </Box>
               </>
               <>
                 <Box component="dt">{"Reference code"}</Box>
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
index 96c37e6f8e..0228e63575 100644
--- a/editor.planx.uk/src/pages/Team.tsx
+++ b/editor.planx.uk/src/pages/Team.tsx
@@ -25,11 +25,6 @@ import SimpleMenu from "../ui/editor/SimpleMenu";
 import TeamMenu from "./FlowEditor/components/TeamMenu";
 import { useStore } from "./FlowEditor/lib/store";
 
-interface TeamTheme {
-  slug: string;
-  primaryColour: string;
-}
-
 const Root = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   width: "100%",
diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx
index 77d54ca3f2..f435910eaa 100644
--- a/editor.planx.uk/src/pages/Teams.tsx
+++ b/editor.planx.uk/src/pages/Teams.tsx
@@ -22,15 +22,16 @@ interface Props {
   teamTheme: Array<TeamTheme>;
 }
 
-const Root = styled(Box)(({ theme }) => ({
+export const DashboardWrap = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   width: "100%",
-  flex: 1,
+  display: "flex",
   justifyContent: "flex-start",
-  alignItems: "center",
+  alignItems: "flex-start",
 }));
 
-const Dashboard = styled(Box)(() => ({
+export const Dashboard = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
   width: "100%",
   display: "flex",
   flexDirection: "row",
@@ -94,7 +95,7 @@ const Teams: React.FC<Props> = ({ teams, teamTheme }) => {
     });
 
   return (
-    <Root>
+    <DashboardWrap>
       <Dashboard>
         <GlobalMenu />
         <Container maxWidth="formWrap">
@@ -122,7 +123,7 @@ const Teams: React.FC<Props> = ({ teams, teamTheme }) => {
           </Box>
         </Container>
       </Dashboard>
-    </Root>
+    </DashboardWrap>
   );
 };