Skip to content

Commit

Permalink
feat: Updated editor teams and team selection pages (#3303)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianjon3s
ianjon3s authored Jun 21, 2024
1 parent e8e5f92 commit ad816b9
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 130 deletions.
2 changes: 1 addition & 1 deletion e2e/tests/ui-driven/src/create-flow/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
6 changes: 3 additions & 3 deletions e2e/tests/ui-driven/src/login.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand All @@ -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
Expand All @@ -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();
});
Expand Down
179 changes: 94 additions & 85 deletions editor.planx.uk/src/pages/Team.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 }) => ({
Expand All @@ -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 }) => ({
Expand All @@ -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 = ({
Expand Down Expand Up @@ -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({
Expand All @@ -131,7 +130,7 @@ function AddButton({
}): FCReturn {
return (
<AddButtonRoot onClick={onClick}>
<Add sx={{ mr: 3, verticalAlign: "middle" }} /> {children}
<AddCircleOutlineIcon sx={{ mr: 1 }} /> {children}
</AddButtonRoot>
);
}
Expand Down Expand Up @@ -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={[
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit ad816b9

Please sign in to comment.