feat: Updated editor teams and team selection pages

e2e/tests/ui-driven/src/create-flow/helpers.ts

@@ -29,6 +29,6 @@ export async function getTeamPage({
   teamName: string;
 }): Promise<Page> {
   const page = await getAdminPage({ browser, userId });
-  await page.locator("h2", { hasText: teamName }).click();
+  await page.locator("h3", { hasText: teamName }).click();
   return page;
 }

e2e/tests/ui-driven/src/login.spec.ts

@@ -37,7 +37,7 @@ test.describe("Login", () => {
       return response.url().includes("/graphql");
     });
 
-    const team = page.locator("h2", { hasText: context.team.name });
+    const team = page.locator("h3", { hasText: context.team.name });
     await expect(team).toBeVisible();
   });
 
@@ -50,7 +50,7 @@ test.describe("Login", () => {
     });
     await page.goto("/");
 
-    const teamLink = page.locator("h2").filter({ hasText: context.team.name });
+    const teamLink = page.locator("h3").filter({ hasText: context.team.name });
     await teamLink.waitFor(); // wait for this to be visible
 
     // drop graphql requests
@@ -67,7 +67,7 @@ test.describe("Login", () => {
       route.continue();
     });
     await expect(
-      page.locator("h1").filter({ hasText: "My services" }),
+      page.locator("h1").filter({ hasText: "Services" }),
     ).toBeVisible();
     await expect(page.getByText(toastText)).toBeHidden();
   });

editor.planx.uk/src/pages/Team.tsx

@@ -1,21 +1,23 @@
 import { gql } from "@apollo/client";
-import Add from "@mui/icons-material/Add";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import Edit from "@mui/icons-material/Edit";
 import Visibility from "@mui/icons-material/Visibility";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import ButtonBase from "@mui/material/ButtonBase";
+import Container from "@mui/material/Container";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 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 orderBy from "lodash/orderBy";
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import { borderedFocusStyle } from "theme";
+import Dashboard from "ui/editor/Dashboard";
 import { slugify } from "utils";
 
 import { client } from "../lib/graphql";
@@ -24,21 +26,11 @@ import { useStore } from "./FlowEditor/lib/store";
 import { formatLastEditMessage } from "./FlowEditor/utils";
 
 const Root = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
+  backgroundColor: theme.palette.background.default,
   width: "100%",
-  flex: 1,
-  justifyContent: "flex-start",
-  alignItems: "center",
-}));
-
-const Dashboard = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.dark,
-  color: "#fff",
-  width: "100%",
-  maxWidth: 600,
-  margin: "auto",
-  padding: theme.spacing(8, 0, 4, 0),
+  display: "flex",
+  alignItems: "flex-start",
+  flexGrow: 1,
 }));
 
 const DashboardList = styled("ul")(({ theme }) => ({
@@ -50,7 +42,13 @@ const DashboardList = styled("ul")(({ theme }) => ({
 const DashboardListItem = styled("li")(({ theme }) => ({
   listStyle: "none",
   position: "relative",
-  padding: theme.spacing(2.5, 2),
+  color: theme.palette.common.white,
+  margin: theme.spacing(1, 0),
+  background: theme.palette.text.primary,
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "stretch",
+  borderRadius: "2px",
 }));
 
 const DashboardLink = styled(Link)(({ theme }) => ({
@@ -59,21 +57,23 @@ const DashboardLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
   color: "currentColor",
   fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  marginBottom: theme.spacing(1.5),
-  marginTop: 0,
+  padding: theme.spacing(2),
+  margin: 0,
+  width: "100%",
+  "&:focus-within": {
+    ...borderedFocusStyle,
+  },
 }));
 
 const StyledSimpleMenu = styled(SimpleMenu)(({ theme }) => ({
-  position: "absolute",
-  top: theme.spacing(2),
-  right: theme.spacing(1),
+  display: "flex",
+  borderLeft: `1px solid ${theme.palette.border.main}`,
 }));
 
-const LinkSubText = styled(Box)(() => ({
-  color: "#aaa",
-  "& a": {
-    color: "#fff",
-  },
+const LinkSubText = styled(Box)(({ theme }) => ({
+  color: theme.palette.grey[400],
+  fontWeight: "normal",
+  paddingTop: "0.5em",
 }));
 
 const Confirm = ({
@@ -113,13 +113,12 @@ const Confirm = ({
 );
 
 const AddButtonRoot = styled(ButtonBase)(({ theme }) => ({
-  width: "100%",
-  padding: theme.spacing(4),
   fontSize: 20,
-  backgroundColor: "rgba(255,255,255,0.25)",
-  display: "block",
+  display: "flex",
+  alignItems: "center",
   textAlign: "left",
-  marginTop: theme.spacing(2),
+  color: theme.palette.primary.main,
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
 }));
 
 function AddButton({
@@ -131,7 +130,7 @@ function AddButton({
 }): FCReturn {
   return (
     <AddButtonRoot onClick={onClick}>
-      <Add sx={{ mr: 3, verticalAlign: "middle" }} /> {children}
+      <AddCircleOutlineIcon sx={{ mr: 1 }} /> {children}
     </AddButtonRoot>
   );
 }
@@ -191,17 +190,17 @@ const FlowItem: React.FC<FlowItemProps> = ({
         />
       )}
       <DashboardListItem>
-        <Box pr={4}>
-          <DashboardLink href={`./${flow.slug}`} prefetch={false}>
+        <DashboardLink href={`./${flow.slug}`} prefetch={false}>
+          <Typography variant="h4" component="h2">
             {flow.name}
-          </DashboardLink>
+          </Typography>
           <LinkSubText>
             {formatLastEditMessage(
               flow.operations[0].createdAt,
               flow.operations[0]?.actor,
             )}
           </LinkSubText>
-        </Box>
+        </DashboardLink>
         {useStore.getState().canUserEditTeam(teamSlug) && (
           <StyledSimpleMenu
             items={[
@@ -305,57 +304,67 @@ const Team: React.FC = () => {
   return (
     <Root>
       <Dashboard>
-        <Box
-          pl={2}
-          pb={2}
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-          }}
-        >
-          <Typography variant="h2" component="h1">
-            My services
-          </Typography>
-          {useStore.getState().canUserEditTeam(slug) ? (
-            <Edit />
-          ) : (
-            <Visibility />
-          )}
-        </Box>
-        {useStore.getState().canUserEditTeam(slug) && (
-          <AddButton
-            onClick={() => {
-              const newFlowName = prompt("Service name");
-              if (newFlowName) {
-                const newFlowSlug = slugify(newFlowName);
-                useStore
-                  .getState()
-                  .createFlow(teamId, newFlowSlug, newFlowName)
-                  .then((newId: string) => {
-                    navigation.navigate(`/${slug}/${newId}`);
-                  });
-              }
+        <Container maxWidth="formWrap">
+          <Box
+            pb={1}
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
             }}
           >
-            Add a new service
-          </AddButton>
-        )}
-        {flows && (
-          <DashboardList>
-            {flows.map((flow: any) => (
-              <FlowItem
-                flow={flow}
-                key={flow.slug}
-                teamId={teamId}
-                teamSlug={slug}
-                refreshFlows={() => {
-                  fetchFlows();
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography variant="h2" component="h1" pr={1}>
+                Services
+              </Typography>
+              {useStore.getState().canUserEditTeam(slug) ? (
+                <Edit />
+              ) : (
+                <Visibility />
+              )}
+            </Box>
+            {useStore.getState().canUserEditTeam(slug) && (
+              <AddButton
+                onClick={() => {
+                  const newFlowName = prompt("Service name");
+                  if (newFlowName) {
+                    const newFlowSlug = slugify(newFlowName);
+                    useStore
+                      .getState()
+                      .createFlow(teamId, newFlowSlug, newFlowName)
+                      .then((newId: string) => {
+                        navigation.navigate(`/${slug}/${newId}`);
+                      });
+                  }
                 }}
-              />
-            ))}
-          </DashboardList>
-        )}
+              >
+                Add a new service
+              </AddButton>
+            )}
+          </Box>
+          {flows && (
+            <DashboardList>
+              {flows.map((flow: any) => (
+                <FlowItem
+                  flow={flow}
+                  key={flow.slug}
+                  teamId={teamId}
+                  teamSlug={slug}
+                  refreshFlows={() => {
+                    fetchFlows();
+                  }}
+                />
+              ))}
+            </DashboardList>
+          )}
+        </Container>
       </Dashboard>
     </Root>
   );