feat: Remove a User

editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx

@@ -41,7 +41,7 @@ export const TeamMembers = () => {
 
   return (
     <Container maxWidth="contentWrap">
-      <SettingsSection testId="team-editors">
+      <SettingsSection data-testid="team-editors">
         <Typography variant="h2" component="h3" gutterBottom>
           Team editors
         </Typography>
@@ -52,6 +52,7 @@ export const TeamMembers = () => {
           members={activeMembers}
           showAddMemberButton={isNotTemplatesTeam}
           showEditMemberButton={isNotTemplatesTeam}
+          showRemoveMemberButton={isNotTemplatesTeam}
         />
       </SettingsSection>
       <SettingsSection>
@@ -67,7 +68,7 @@ export const TeamMembers = () => {
         />
       </SettingsSection>
       {archivedMembers.length > 0 && (
-        <SettingsSection>
+        <SettingsSection data-testid="archived-members">
           <Typography variant="h2" component="h3" gutterBottom>
             Archived team editors
           </Typography>

editor.planx.uk/src/pages/FlowEditor/components/Team/components/EditorUpsertModal.tsx

@@ -1,6 +1,5 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import Typography from "@mui/material/Typography";
@@ -19,16 +18,17 @@ import {
 } from "../errors/addNewEditorErrors";
 import { upsertEditorSchema } from "../formSchema";
 import { createAndAddUserToTeam } from "../queries/createAndAddUserToTeam";
+import { updateTeamMember } from "../queries/updateUser";
+import { SettingsDialog } from "../styles";
 import { AddNewEditorFormValues, EditorModalProps } from "../types";
 import {
   optimisticallyAddNewMember,
   optimisticallyUpdateExistingMember,
 } from "./lib/optimisticallyUpdateMembersTable";
-import { updateTeamMember } from "../queries/updateUser";
 
 export const EditorUpsertModal = ({
-  showModal,
   setShowModal,
+  showModal,
   initialValues,
   actionType,
 }: EditorModalProps) => {
@@ -43,7 +43,7 @@ export const EditorUpsertModal = ({
 
   const handleSubmit = async (
     values: AddNewEditorFormValues,
-    { resetForm }: FormikHelpers<AddNewEditorFormValues>
+    { resetForm }: FormikHelpers<AddNewEditorFormValues>,
   ) => {
     switch (actionType) {
       case "add":
@@ -63,7 +63,7 @@ export const EditorUpsertModal = ({
       formik.values.firstName,
       formik.values.lastName,
       teamId,
-      teamSlug
+      teamSlug,
     ).catch((err) => {
       if (isUserAlreadyExistsError(err.message)) {
         setShowUserAlreadyExistsError(true);
@@ -88,7 +88,7 @@ export const EditorUpsertModal = ({
     }
     const response = await updateTeamMember(
       initialValues.id,
-      formik.values
+      formik.values,
     ).catch((err) => {
       if (isUserAlreadyExistsError(err.message)) {
         setShowUserAlreadyExistsError(true);
@@ -120,22 +120,10 @@ export const EditorUpsertModal = ({
   });
 
   return (
-    <Dialog
+    <SettingsDialog
       aria-labelledby="dialog-heading"
-      data-testid={
-        actionType === "add" ? "dialog-create-user" : "dialog-edit-user"
-      }
-      PaperProps={{
-        sx: (theme) => ({
-          width: "100%",
-          maxWidth: theme.breakpoints.values.md,
-          borderRadius: 0,
-          borderTop: `20px solid ${theme.palette.primary.main}`,
-          background: theme.palette.background.paper,
-          margin: theme.spacing(2),
-        }),
-      }}
-      open={showModal}
+      data-testid={`dialog-${actionType}-user`}
+      open={showModal || false}
       onClose={() => setShowModal(false)}
     >
       <form onSubmit={formik.handleSubmit}>
@@ -235,6 +223,6 @@ export const EditorUpsertModal = ({
           </ErrorWrapper>
         </DialogActions>
       </form>
-    </Dialog>
+    </SettingsDialog>
   );
 };

editor.planx.uk/src/pages/FlowEditor/components/Team/components/MembersTable.tsx

@@ -1,6 +1,7 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
+import Dialog from "@mui/material/Dialog";
 import { styled } from "@mui/material/styles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -13,27 +14,40 @@ import React, { useState } from "react";
 import Permission from "ui/editor/Permission";
 
 import { StyledAvatar, StyledTableRow } from "./../styles";
-import { MembersTableProps, TeamMember } from "./../types";
+import { ActionType, MembersTableProps, TeamMember } from "./../types";
 import { EditorUpsertModal } from "./EditorUpsertModal";
+import { RemoveUserModal } from "./RemoveUserModal";
 
-const EditUserButton = styled(Button)(({ theme }) => ({
-  color: theme.palette.primary.main,
+const TableRowButton = styled(Button)(({ theme }) => ({
   textDecoration: "underline",
   boxShadow: "none",
   "&:hover": {
     boxShadow: "none",
-    color: theme.palette.primary.main,
     textDecoration: "underline",
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
+const EditUserButton = styled(TableRowButton)(({ theme }) => ({
+  color: theme.palette.primary.light,
+  "&:hover": {
+    color: theme.palette.primary.dark,
+  },
+}));
+const RemoveUserButton = styled(TableRowButton)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  "&:hover": {
+    color: theme.palette.secondary.contrastText,
   },
 }));
 
 export const MembersTable = ({
   members,
   showAddMemberButton,
   showEditMemberButton,
+  showRemoveMemberButton,
 }: MembersTableProps) => {
-  const [showAddModal, setShowAddModal] = useState<boolean>(false);
-  const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [actionType, setActionType] = useState<ActionType>("add");
   const [initialValues, setInitialValues] = useState<TeamMember | undefined>();
 
   const roleLabels: Record<string, string> = {
@@ -42,6 +56,22 @@ export const MembersTable = ({
     teamViewer: "Viewer",
   };
 
+  const editUser = (member: TeamMember) => {
+    setActionType("edit");
+    setShowModal(true);
+    setInitialValues(member);
+  };
+  const removeUser = (member: TeamMember) => {
+    setActionType("remove");
+    setShowModal(true);
+    setInitialValues(member);
+  };
+  const addUser = () => {
+    setActionType("add");
+    setShowModal(true);
+    setInitialValues(undefined);
+  };
+
   const getRoleLabel = (role: string) => {
     return roleLabels[role] || role;
   };
@@ -62,8 +92,7 @@ export const MembersTable = ({
               <TableCell colSpan={3}>
                 <AddButton
                   onClick={() => {
-                    setInitialValues(undefined);
-                    setShowAddModal(true);
+                    addUser();
                   }}
                 >
                   Add a new editor
@@ -72,12 +101,12 @@ export const MembersTable = ({
             </TableRow>
           )}
         </Table>
-        {showAddModal && (
+        {showModal && (
           <EditorUpsertModal
-            showModal={showAddModal}
-            setShowModal={setShowAddModal}
+            showModal={showModal}
+            setShowModal={setShowModal}
             initialValues={initialValues}
-            actionType={"add"}
+            actionType={actionType}
           />
         )}
       </>
@@ -99,6 +128,10 @@ export const MembersTable = ({
               <TableCell>
                 <strong>Email</strong>
               </TableCell>{" "}
+              {
+                // empty table cells for styling across buttons
+              }
+              <TableCell></TableCell>
               <TableCell></TableCell>
             </StyledTableRow>
           </TableHead>
@@ -130,59 +163,68 @@ export const MembersTable = ({
                   />
                 </TableCell>
                 <TableCell>{member.email}</TableCell>
-                {showEditMemberButton && (
+                <TableCell>
                   <Permission.IsPlatformAdmin>
-                    <TableCell>
+                    {showEditMemberButton && (
                       <EditUserButton
                         onClick={() => {
-                          setShowUpdateModal(true);
-                          setInitialValues(member);
+                          editUser(member);
                         }}
-                        data-testId={`edit-button-${i}`}
+                        data-testid={`edit-button-${member.id}`}
                       >
                         Edit
                       </EditUserButton>
-                    </TableCell>
+                    )}
+                  </Permission.IsPlatformAdmin>
+                </TableCell>
+                <TableCell>
+                  <Permission.IsPlatformAdmin>
+                    {showRemoveMemberButton && (
+                      <RemoveUserButton
+                        onClick={() => {
+                          removeUser(member);
+                        }}
+                        data-testid={`remove-button-${member.id}`}
+                      >
+                        Remove
+                      </RemoveUserButton>
+                    )}
                   </Permission.IsPlatformAdmin>
-                )}
+                </TableCell>
               </StyledTableRow>
             ))}
             {showAddMemberButton && (
-              <Permission.IsPlatformAdmin>
-                <TableRow>
-                  <TableCell colSpan={3}>
-                    <AddButton
-                      onClick={() => {
-                        setInitialValues(undefined);
-                        setShowAddModal(true);
-                      }}
-                    >
-                      Add a new editor
-                    </AddButton>
-                  </TableCell>
-                </TableRow>
-              </Permission.IsPlatformAdmin>
+              <TableRow>
+                <TableCell colSpan={5}>
+                  <AddButton
+                    onClick={() => {
+                      addUser();
+                    }}
+                  >
+                    Add a new editor
+                  </AddButton>
+                </TableCell>
+              </TableRow>
             )}
           </TableBody>
         </Table>
       </TableContainer>
-      {showAddModal && (
-        <EditorUpsertModal
-          showModal={showAddModal}
-          setShowModal={setShowAddModal}
-          initialValues={initialValues}
-          actionType={"add"}
-        />
-      )}
-      {showUpdateModal && (
-        <EditorUpsertModal
-          showModal={showUpdateModal}
-          setShowModal={setShowUpdateModal}
-          initialValues={initialValues}
-          userId={initialValues?.id || 1}
-          actionType={"edit"}
-        />
-      )}
+      {showModal &&
+        (actionType === "remove" ? (
+          <RemoveUserModal
+            setShowModal={setShowModal}
+            showModal={showModal}
+            initialValues={initialValues}
+            actionType={actionType}
+          />
+        ) : (
+          <EditorUpsertModal
+            setShowModal={setShowModal}
+            showModal={showModal}
+            initialValues={initialValues}
+            actionType={actionType}
+          />
+        ))}
     </>
   );
 };