From ad23f55b81e84abee5ba55e2016321ed9a0d81ad Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 14 May 2024 14:46:23 +0100 Subject: [PATCH 1/8] feat: Styled team viewer table --- .../components/Team/TeamMembers.tsx | 154 +++++++++++++++++- 1 file changed, 150 insertions(+), 4 deletions(-) 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 b3f09a6ccb..b2d3e22a2e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -1,19 +1,165 @@ +import Avatar from "@mui/material/Avatar"; import Box from "@mui/material/Box"; +import Chip from "@mui/material/Chip"; +import Container from "@mui/material/Container"; +import { styled } from "@mui/material/styles"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +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 React from "react"; +import EditorRow from "ui/editor/EditorRow"; + +const StyledAvatar = styled(Avatar)(({ theme }) => ({ + background: theme.palette.background.dark, + color: theme.palette.common.white, + fontSize: "1em", + fontWeight: "600", + marginRight: theme.spacing(1), +})); + +const StyledTableRow = styled(TableRow)(({ theme }) => ({ + "&:nth-child(even)": { + background: theme.palette.background.paper, + }, +})); export type TeamMember = Omit & { role: Role; }; interface Props { - teamMembersByRole: Record; + teamMembersByRole: Record; } export const TeamMembers: React.FC = ({ teamMembersByRole }) => { + const platformAdmins = teamMembersByRole.platformAdmin || []; + const otherRoles = Object.keys(teamMembersByRole) + .filter((role) => role !== "platformAdmin") + .reduce((acc: TeamMember[], role) => { + return acc.concat(teamMembersByRole[role]); + }, []); + return ( - - {JSON.stringify(teamMembersByRole, null, 4)} - + + + + + Team members + + + Team members have access to edit your flows and services. + + + + + + + User + + + Role + + + Email + + + + + {otherRoles.map((member) => ( + + + + {member.firstName[0]} + {member.lastName[0]} + + {member.firstName} {member.lastName} + + + + + {member.email} + + ))} + +
+ + + + + Platform admins + + + Admins have editor access across all teams. + + + + + + + User + + + Role + + + Email + + + + + {platformAdmins.map((member) => ( + + + + {member.firstName[0]} + {member.lastName[0]} + + {member.firstName} {member.lastName} + + + + + {member.email} + + ))} + +
+ + + + + Archived team members + + + Past members who no longer have access to your team. + + + + ); }; From a7d2589a6f20ad59a60db4419a799d1c968e50da Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 14 May 2024 16:38:33 +0100 Subject: [PATCH 2/8] feat: Single table markup, rename editor roles --- .../components/Team/TeamMembers.tsx | 179 +++++++++--------- 1 file changed, 86 insertions(+), 93 deletions(-) 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 b2d3e22a2e..c1d642d9c6 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -2,6 +2,7 @@ import Avatar from "@mui/material/Avatar"; import Box from "@mui/material/Box"; import Chip from "@mui/material/Chip"; import Container from "@mui/material/Container"; +import Divider from "@mui/material/Divider"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; @@ -32,6 +33,11 @@ export type TeamMember = Omit & { role: Role; }; +const roleLabels: Record = { + platformAdmin: "Admin", + teamEditor: "Editor", +}; + interface Props { teamMembersByRole: Record; } @@ -44,120 +50,107 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { return acc.concat(teamMembersByRole[role]); }, []); + const archivedMembers = otherRoles.filter( + (member) => member.role !== "platformAdmin" && !member.email, + ); + + const getRoleLabel = (role: string) => { + return roleLabels[role] || role; + }; + + const renderMemberTable = (members: TeamMember[]) => { + if (members.length === 0) { + return ( + <> + + + + + No members found + + + +
+ + ); + } + return ( + + + + + + User + + + Role + + + Email + + + + + {members.map((member) => ( + + + + {member.firstName[0]} + {member.lastName[0]} + + {member.firstName} {member.lastName} + + + + + {member.email} + + ))} + +
+ + ); + }; + return ( - Team members + Team editors - Team members have access to edit your flows and services. + Editors have access to edit your flows and services. - - - - - - User - - - Role - - - Email - - - - - {otherRoles.map((member) => ( - - - - {member.firstName[0]} - {member.lastName[0]} - - {member.firstName} {member.lastName} - - - - - {member.email} - - ))} - -
- + {renderMemberTable(otherRoles)} - Platform admins + Admins Admins have editor access across all teams. - - - - - - User - - - Role - - - Email - - - - - {platformAdmins.map((member) => ( - - - - {member.firstName[0]} - {member.lastName[0]} - - {member.firstName} {member.lastName} - - - - - {member.email} - - ))} - -
- + {renderMemberTable(platformAdmins)} - Archived team members + Archived team editors - Past members who no longer have access to your team. + Past members who no longer have access to edit your team. + {renderMemberTable(archivedMembers)} From d2df3563959d1708f1ac22850815e601720b6ae1 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 14 May 2024 16:39:30 +0100 Subject: [PATCH 3/8] fix: Remove redundant fragment --- .../components/Team/TeamMembers.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) 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 c1d642d9c6..0c15c846b4 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -61,17 +61,15 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { const renderMemberTable = (members: TeamMember[]) => { if (members.length === 0) { return ( - <> - - - - - No members found - - - -
- + + + + + No members found + + + +
); } return ( From 46c2b3dcc70b236bddbfbac3ca6e9512c662fdc6 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 15 May 2024 10:44:11 +0100 Subject: [PATCH 4/8] feat: Filter out admins without email set --- .../src/pages/FlowEditor/components/Team/TeamMembers.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 0c15c846b4..a7276d2076 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -43,7 +43,9 @@ interface Props { } export const TeamMembers: React.FC = ({ teamMembersByRole }) => { - const platformAdmins = teamMembersByRole.platformAdmin || []; + const platformAdmins = (teamMembersByRole.platformAdmin || []).filter( + (member) => member.email, + ); const otherRoles = Object.keys(teamMembersByRole) .filter((role) => role !== "platformAdmin") .reduce((acc: TeamMember[], role) => { From 0311d7ec8dd78e05bfae729a21dd7535fbf415af Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 15 May 2024 14:37:51 +0100 Subject: [PATCH 5/8] feat: Refinements based on feedback --- .../components/Team/TeamMembers.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) 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 a7276d2076..fc33faff38 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -36,6 +36,7 @@ export type TeamMember = Omit & { const roleLabels: Record = { platformAdmin: "Admin", teamEditor: "Editor", + teamViewer: "Viewer", }; interface Props { @@ -130,7 +131,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { Team editors - Editors have access to edit your flows and services. + Editors have access to edit your services. {renderMemberTable(otherRoles)} @@ -143,15 +144,18 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { {renderMemberTable(platformAdmins)} - - - Archived team editors - - - Past members who no longer have access to edit your team. - - {renderMemberTable(archivedMembers)} - + {archivedMembers.length > 0 && ( + + + Archived team editors + + + Past team members who no longer have access to the Editor, but may + be part of the edit history of your services. + + {renderMemberTable(archivedMembers)} + + )} ); From 4f8b336318171a71f0d346a00a31cf5a462d251e Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 15 May 2024 18:13:34 +0100 Subject: [PATCH 6/8] feat: Refinements based on feedback --- .../src/pages/FlowEditor/components/Team/TeamMembers.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 fc33faff38..27c8fcbc09 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -2,7 +2,6 @@ import Avatar from "@mui/material/Avatar"; import Box from "@mui/material/Box"; import Chip from "@mui/material/Chip"; import Container from "@mui/material/Container"; -import Divider from "@mui/material/Divider"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; @@ -13,18 +12,19 @@ import TableRow from "@mui/material/TableRow"; import Typography from "@mui/material/Typography"; import { Role, User } from "@opensystemslab/planx-core/types"; import React from "react"; +import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import EditorRow from "ui/editor/EditorRow"; const StyledAvatar = styled(Avatar)(({ theme }) => ({ background: theme.palette.background.dark, color: theme.palette.common.white, fontSize: "1em", - fontWeight: "600", + fontWeight: FONT_WEIGHT_SEMI_BOLD, marginRight: theme.spacing(1), })); const StyledTableRow = styled(TableRow)(({ theme }) => ({ - "&:nth-child(even)": { + "&:nth-of-type(even)": { background: theme.palette.background.paper, }, })); From 56ec6d726a17bcc7c2bed527265c4151fd8eb99e Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 16 May 2024 16:09:56 +0100 Subject: [PATCH 7/8] feat: Members table as component --- .../src/pages/FlowEditor/components/Team/TeamMembers.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 27c8fcbc09..94ad36b13b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -61,7 +61,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { return roleLabels[role] || role; }; - const renderMemberTable = (members: TeamMember[]) => { + const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => { if (members.length === 0) { return ( @@ -133,7 +133,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { Editors have access to edit your services. - {renderMemberTable(otherRoles)} + @@ -142,7 +142,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { Admins have editor access across all teams. - {renderMemberTable(platformAdmins)} + {archivedMembers.length > 0 && ( @@ -153,7 +153,7 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { Past team members who no longer have access to the Editor, but may be part of the edit history of your services. - {renderMemberTable(archivedMembers)} + )} From 4be516c5c35a2a6a26077ab52927431175f23ebb Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 17 May 2024 09:43:26 +0100 Subject: [PATCH 8/8] feat: Members table outside scope of TeamMembers --- .../components/Team/TeamMembers.tsx | 133 +++++++++--------- 1 file changed, 67 insertions(+), 66 deletions(-) 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 94ad36b13b..0892f9f63a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -43,6 +43,73 @@ interface Props { teamMembersByRole: Record; } +const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => { + const getRoleLabel = (role: string) => { + return roleLabels[role] || role; + }; + + if (members.length === 0) { + return ( +
+ + + + No members found + + + +
+ ); + } + + return ( + + + + + + User + + + Role + + + Email + + + + + {members.map((member) => ( + + + + {member.firstName[0]} + {member.lastName[0]} + + {member.firstName} {member.lastName} + + + + + {member.email} + + ))} + +
+ + ); +}; + export const TeamMembers: React.FC = ({ teamMembersByRole }) => { const platformAdmins = (teamMembersByRole.platformAdmin || []).filter( (member) => member.email, @@ -57,72 +124,6 @@ export const TeamMembers: React.FC = ({ teamMembersByRole }) => { (member) => member.role !== "platformAdmin" && !member.email, ); - const getRoleLabel = (role: string) => { - return roleLabels[role] || role; - }; - - const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => { - if (members.length === 0) { - return ( - - - - - No members found - - - -
- ); - } - return ( - - - - - - User - - - Role - - - Email - - - - - {members.map((member) => ( - - - - {member.firstName[0]} - {member.lastName[0]} - - {member.firstName} {member.lastName} - - - - - {member.email} - - ))} - -
- - ); - }; - return (