tidy: release add Team Editor feature

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

@@ -24,13 +24,15 @@ import { optimisticallyUpdateMembersTable } from "./lib/optimisticallyUpdateMemb
 export const AddNewEditorModal = ({
   showModal,
   setShowModal,
-  setShowToast,
+  setShowSuccessToast,
+  setShowErrorToast,
 }: AddNewEditorModalProps) => {
   const [showUserAlreadyExistsError, setShowUserAlreadyExistsError] =
     useState<boolean>(false);
 
   const clearErrors = () => {
     setShowUserAlreadyExistsError(false);
+    setShowErrorToast(false);
   };
 
   const handleSubmit = async (
@@ -39,7 +41,7 @@ export const AddNewEditorModal = ({
   ) => {
     const { teamId, teamSlug } = useStore.getState();
 
-    const newUserId = await createAndAddUserToTeam(
+    const createUserResult = await createAndAddUserToTeam(
       values.email,
       values.firstName,
       values.lastName,
@@ -49,16 +51,19 @@ export const AddNewEditorModal = ({
       if (isUserAlreadyExistsError(err.message)) {
         setShowUserAlreadyExistsError(true);
       }
+      if (err.message === "Unable to create user") {
+        setShowErrorToast(true);
+      }
       console.error(err);
     });
 
-    if (!newUserId) {
+    if (!createUserResult) {
       return;
     }
     clearErrors();
-    optimisticallyUpdateMembersTable(values, newUserId);
+    optimisticallyUpdateMembersTable(values, createUserResult.id);
     setShowModal(false);
-    setShowToast(true);
+    setShowSuccessToast(true);
     resetForm({ values });
   };
 

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

@@ -7,7 +7,6 @@ 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 { hasFeatureFlag } from "lib/featureFlags";
 import { AddButton } from "pages/Team";
 import React, { useState } from "react";
 
@@ -20,17 +19,29 @@ export const MembersTable = ({
   showAddMemberButton,
 }: MembersTableProps) => {
   const [showModal, setShowModal] = useState(false);
-  const [showToast, setShowToast] = useState(false);
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [showErrorToast, setShowErrorToast] = useState(false);
 
-  const handleCloseToast = (
+  const handleCloseSuccessToast = (
     _event?: React.SyntheticEvent | Event,
     reason?: string,
   ) => {
     if (reason === "clickaway") {
       return;
     }
 
-    setShowToast(false);
+    setShowSuccessToast(false);
+  };
+
+  const handleCloseErrorToast = (
+    _event?: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setShowErrorToast(false);
   };
 
   const roleLabels: Record<string, string> = {
@@ -102,7 +113,7 @@ export const MembersTable = ({
                 <TableCell>{member.email}</TableCell>
               </StyledTableRow>
             ))}
-            {showAddMemberButton && hasFeatureFlag("ADD_NEW_EDITOR") && (
+            {showAddMemberButton && (
               <TableRow>
                 <TableCell colSpan={3}>
                   <AddButton onClick={() => setShowModal(true)}>
@@ -115,23 +126,39 @@ export const MembersTable = ({
         </Table>
         {showAddMemberButton && (
           <Snackbar
-            open={showToast}
+            open={showSuccessToast}
             autoHideDuration={6000}
-            onClose={handleCloseToast}
+            onClose={handleCloseSuccessToast}
           >
             <Alert
-              onClose={handleCloseToast}
+              onClose={handleCloseSuccessToast}
               severity="success"
               sx={{ width: "100%" }}
             >
               Successfully added a user
             </Alert>
           </Snackbar>
         )}
+        {showAddMemberButton && (
+          <Snackbar
+            open={showErrorToast}
+            autoHideDuration={6000}
+            onClose={handleCloseErrorToast}
+          >
+            <Alert
+              onClose={handleCloseErrorToast}
+              severity="error"
+              sx={{ width: "100%" }}
+            >
+              Failed to add new user, please try again
+            </Alert>
+          </Snackbar>
+        )}
       </TableContainer>
       {showModal && (
         <AddNewEditorModal
-          setShowToast={setShowToast}
+          setShowSuccessToast={setShowSuccessToast}
+          setShowErrorToast={setShowErrorToast}
           showModal={showModal}
           setShowModal={setShowModal}
         />

editor.planx.uk/src/pages/FlowEditor/components/Team/queries/createAndAddUserToTeam.tsx

@@ -1,8 +1,12 @@
-import { gql } from "@apollo/client";
+import { FetchResult, gql } from "@apollo/client";
 import { GET_USERS_FOR_TEAM_QUERY } from "routes/teamMembers";
 
 import { client } from "../../../../../lib/graphql";
 
+type CreateAndAddUserResponse = FetchResult<{
+  insert_users_one: { id: number; __typename: "users" };
+}>;
+
 export const createAndAddUserToTeam = async (
   email: string,
   firstName: string,
@@ -11,7 +15,7 @@ export const createAndAddUserToTeam = async (
   teamSlug: string,
 ) => {
   // NB: the user is hard-coded with the 'teamEditor' role for now
-  const response = (await client.mutate({
+  const response: CreateAndAddUserResponse = await client.mutate({
     mutation: gql`
       mutation CreateAndAddUserToTeam(
         $email: String!
@@ -40,6 +44,9 @@ export const createAndAddUserToTeam = async (
     refetchQueries: [
       { query: GET_USERS_FOR_TEAM_QUERY, variables: { teamSlug } },
     ],
-  })) as any;
-  return response.data.insert_users_one;
+  });
+  if (response.data) {
+    return response.data.insert_users_one;
+  }
+  throw new Error("Unable to create user");
 };

editor.planx.uk/src/pages/FlowEditor/components/Team/tests/TeamMembers.addNewEditor.errors.serverSide.test.tsx

@@ -0,0 +1,36 @@
+import { screen } from "@testing-library/react";
+import { FullStore, useStore } from "pages/FlowEditor/lib/store";
+import { vi } from "vitest";
+
+import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
+import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
+import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
+import { alreadyExistingUser } from "./mocks/mockUsers";
+
+let initialState: FullStore;
+vi.mock(
+  "pages/FlowEditor/components/Team/queries/createAndAddUserToTeam.tsx",
+  () => ({
+    createAndAddUserToTeam: vi.fn().mockRejectedValue({
+      message: "Unable to create user",
+    }),
+  }),
+);
+
+describe("when a user fills in the 'add a new editor' form correctly but there is a server-side error", () => {
+  afterAll(() => useStore.setState(initialState));
+  beforeEach(async () => {
+    useStore.setState({
+      teamMembers: [...mockTeamMembersData, alreadyExistingUser],
+    });
+
+    const { user } = await setupTeamMembersScreen();
+    await userTriesToAddNewEditor(user);
+  });
+
+  it("shows an appropriate error message", async () => {
+    expect(
+      await screen.findByText(/Failed to add new user, please try again/),
+    ).toBeInTheDocument();
+  });
+});

editor.planx.uk/src/pages/FlowEditor/components/Team/tests/TeamMembers.addNewEditor.errors.test.tsx → editor.planx.uk/src/pages/FlowEditor/components/Team/tests/TeamMembers.addNewEditor.errors.userAlreadyExists.test.tsx

@@ -7,10 +7,6 @@ import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
 import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 import { alreadyExistingUser } from "./mocks/mockUsers";
 
-vi.mock("lib/featureFlags.ts", () => ({
-  hasFeatureFlag: vi.fn().mockReturnValue(true),
-}));
-
 vi.mock(
   "pages/FlowEditor/components/Team/queries/createAndAddUserToTeam.tsx",
   () => ({
@@ -20,7 +16,6 @@ vi.mock(
     }),
   }),
 );
-
 let initialState: FullStore;
 
 describe("when a user fills in the 'add a new editor' form correctly but the user already exists", () => {
@@ -30,7 +25,7 @@ describe("when a user fills in the 'add a new editor' form correctly but the use
       teamMembers: [...mockTeamMembersData, alreadyExistingUser],
     });
 
-    const user = await setupTeamMembersScreen();
+    const { user } = await setupTeamMembersScreen();
     await userTriesToAddNewEditor(user);
   });
 

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

@@ -1,15 +1,17 @@
 import { screen, waitFor, within } from "@testing-library/react";
 import { FullStore, useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { vi } from "vitest";
+import { axe } from "vitest-axe";
 
+import { setup } from "../../../../../testUtils";
+import { AddNewEditorModal } from "../components/AddNewEditorModal";
 import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
 import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
 import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 
-vi.mock("lib/featureFlags.ts", () => ({
-  hasFeatureFlag: vi.fn().mockReturnValue(true),
-}));
-
 vi.mock(
   "pages/FlowEditor/components/Team/queries/createAndAddUserToTeam.tsx",
   () => ({
@@ -22,10 +24,10 @@ vi.mock(
 
 let initialState: FullStore;
 
-describe("when a user with the ADD_NEW_EDITOR feature flag enabled presses 'add a new editor'", () => {
+describe("when a user presses 'add a new editor'", () => {
   beforeEach(async () => {
     useStore.setState({ teamMembers: mockTeamMembersData });
-    const user = await setupTeamMembersScreen();
+    const { user } = await setupTeamMembersScreen();
 
     const teamEditorsTable = screen.getByTestId("team-editors");
     const addEditorButton = await within(teamEditorsTable).findByText(
@@ -44,7 +46,7 @@ describe("when a user fills in the 'add a new editor' form correctly", () => {
   afterAll(() => useStore.setState(initialState));
   beforeEach(async () => {
     useStore.setState({ teamMembers: mockTeamMembersData });
-    const user = await setupTeamMembersScreen();
+    const { user } = await setupTeamMembersScreen();
     await userTriesToAddNewEditor(user);
   });
 
@@ -70,3 +72,22 @@ describe("when a user fills in the 'add a new editor' form correctly", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("when the addNewEditor modal is rendered", () => {
+  it("should not have any accessibility issues", async () => {
+    const { container } = setup(
+      <DndProvider backend={HTML5Backend}>
+        <AddNewEditorModal
+          setShowErrorToast={() => {}}
+          showModal={true}
+          setShowModal={() => {}}
+          setShowSuccessToast={() => {}}
+        />
+      </DndProvider>,
+    );
+    await screen.findByTestId("modal-create-user");
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

editor.planx.uk/src/pages/FlowEditor/components/Team/tests/helpers/setupTeamMembersScreen.tsx

@@ -7,11 +7,11 @@ import { setup } from "../../../../../../testUtils";
 import { TeamMembers } from "../../TeamMembers";
 
 export const setupTeamMembersScreen = async () => {
-  const { user } = setup(
+  const setupResult = setup(
     <DndProvider backend={HTML5Backend}>
       <TeamMembers />
     </DndProvider>,
   );
-  await screen.findByText("Team editors");
-  return user;
+  await screen.findByTestId("team-editors");
+  return setupResult;
 };

editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts

@@ -12,7 +12,8 @@ export interface MembersTableProps {
 export interface AddNewEditorModalProps {
   showModal: boolean;
   setShowModal: React.Dispatch<SetStateAction<boolean>>;
-  setShowToast: React.Dispatch<SetStateAction<boolean>>;
+  setShowSuccessToast: React.Dispatch<SetStateAction<boolean>>;
+  setShowErrorToast: React.Dispatch<SetStateAction<boolean>>;
 }
 
 export interface AddNewEditorFormValues {