Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Updated editor teams and team selection pages #3303

Merged
merged 5 commits into from
Jun 21, 2024
Merged

feat: Updated editor teams and team selection pages #3303

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c533d9e
feat: Updated editor teams and team selection pages
ianjon3s Jun 20, 2024
c660c8e
fix: Header order
ianjon3s Jun 20, 2024
1f0d1a5
fix: Failing test
ianjon3s Jun 20, 2024
541bda3
fix: Failing test
ianjon3s Jun 20, 2024
87fe670
fix: Updates from QA
ianjon3s Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion e2e/tests/ui-driven/src/create-flow/helpers.ts
View file
Open in desktop
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
Open in desktop
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
189 changes: 105 additions & 84 deletions editor.planx.uk/src/pages/Team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
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 Dashboard from "ui/editor/Dashboard";
import { slugify } from "utils";

import { client } from "../lib/graphql";
Expand All @@ -24,21 +25,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 +41,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,20 +56,34 @@ 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%",
}));

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)(({ theme }) => ({
color: theme.palette.grey[400],
fontWeight: "normal",
paddingTop: "0.5em",
}));

const LinkSubText = styled(Box)(() => ({
color: "#aaa",
"& a": {
color: "#fff",
const HiddenText = styled(Box)(() => ({
color: "transparent",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0,
display: "flex",
"&::selection": {
background: "hotpink",
color: "black",
padding: "1em",
},
}));

Expand Down Expand Up @@ -113,13 +124,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 +141,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 +201,18 @@ 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>
<HiddenText aria-hidden="true">{flow.slug}</HiddenText>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not too sure how much this is really needed? I know it's helpful as a pseudo-search until we have this feature but we can still CTRL+F on flow names?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, I've pulled it out. I added as I was getting frustrated when using CTRL+F and typing in a slug, but it's just a case of waiting for new features to be in place.

<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 +316,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
Loading