feat: Members table outside scope of TeamMembers

theopensystemslab · May 17, 2024 · 4be516c · 4be516c
1 parent 56ec6d7
commit 4be516c
Showing 1 changed file with 67 additions and 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
@@ -43,6 +43,73 @@ interface Props {
   teamMembersByRole: Record<string, TeamMember[]>;
 }
 
+const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => {
+  const getRoleLabel = (role: string) => {
+    return roleLabels[role] || role;
+  };
+
+  if (members.length === 0) {
+    return (
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <strong>No members found</strong>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    );
+  }
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <TableCell sx={{ width: 300 }}>
+              <strong>User</strong>
+            </TableCell>
+            <TableCell sx={{ width: 200 }}>
+              <strong>Role</strong>
+            </TableCell>
+            <TableCell>
+              <strong>Email</strong>
+            </TableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {members.map((member) => (
+            <StyledTableRow key={member.id}>
+              <TableCell
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                <StyledAvatar>
+                  {member.firstName[0]}
+                  {member.lastName[0]}
+                </StyledAvatar>
+                {member.firstName} {member.lastName}
+              </TableCell>
+              <TableCell>
+                <Chip
+                  label={getRoleLabel(member.role)}
+                  size="small"
+                  sx={{ background: "#ddd" }}
+                />
+              </TableCell>
+              <TableCell>{member.email}</TableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
 export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
   const platformAdmins = (teamMembersByRole.platformAdmin || []).filter(
     (member) => member.email,
@@ -57,72 +124,6 @@ export const TeamMembers: React.FC<Props> = ({ 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 (
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>
-                <strong>No members found</strong>
-              </TableCell>
-            </TableRow>
-          </TableHead>
-        </Table>
-      );
-    }
-    return (
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <StyledTableRow>
-              <TableCell sx={{ width: 300 }}>
-                <strong>User</strong>
-              </TableCell>
-              <TableCell sx={{ width: 200 }}>
-                <strong>Role</strong>
-              </TableCell>
-              <TableCell>
-                <strong>Email</strong>
-              </TableCell>
-            </StyledTableRow>
-          </TableHead>
-          <TableBody>
-            {members.map((member) => (
-              <StyledTableRow key={member.id}>
-                <TableCell
-                  sx={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                  }}
-                >
-                  <StyledAvatar>
-                    {member.firstName[0]}
-                    {member.lastName[0]}
-                  </StyledAvatar>
-                  {member.firstName} {member.lastName}
-                </TableCell>
-                <TableCell>
-                  <Chip
-                    label={getRoleLabel(member.role)}
-                    size="small"
-                    sx={{ background: "#ddd" }}
-                  />
-                </TableCell>
-                <TableCell>{member.email}</TableCell>
-              </StyledTableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    );
-  };
-
   return (
     <Container maxWidth="contentWrap">
       <Box py={7}>