feat: add new editor - error handling and enhancements

editor.planx.uk/src/components/Feedback/FeedbackForm.tsx

@@ -1,4 +1,5 @@
 import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
 import { Form, Formik, useFormikContext } from "formik";
@@ -7,8 +8,8 @@ import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer";
 import InputLabel from "ui/public/InputLabel";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
+
 import { FeedbackFormInput, FormProps, UserFeedback } from ".";
-import Link from "@mui/material/Link";
 
 const StyledForm = styled(Form)(({ theme }) => ({
   "& > *": contentFlowSpacing(theme),

editor.planx.uk/src/components/Feedback/index.test.tsx

@@ -183,7 +183,7 @@ describe("Feedback component triage journey", () => {
 
     await user.type(
       getByTestId("userCommentTextarea"),
-      "This information is wrong"
+      "This information is wrong",
     );
 
     await user.click(getByText("Send feedback"));
@@ -210,7 +210,7 @@ describe("Feedback component 'Report an issue with this page journey'", () => {
 
     await waitFor(() => {
       expect(
-        getByText("Report an issue with this service")
+        getByText("Report an issue with this service"),
       ).toBeInTheDocument();
       expect(getByLabelText("What were you doing?")).toBeInTheDocument();
       expect(getByLabelText("What went wrong?")).toBeInTheDocument();
@@ -325,7 +325,7 @@ describe("Feedback component accessibility", () => {
 
   test("Issue form via triage should have no accessibility violations", async () => {
     const { container, getByText, getByLabelText, getByRole, user } = setup(
-      <Feedback />
+      <Feedback />,
     );
 
     await user.click(getByText("feedback"));
@@ -389,11 +389,11 @@ describe("Feedback component accessibility", () => {
 
     await user.type(
       getByLabelText("What were you doing?"),
-      "Answering a question"
+      "Answering a question",
     );
     await user.type(
       getByLabelText("What went wrong?"),
-      "I couldn't select Continue"
+      "I couldn't select Continue",
     );
 
     await user.click(getByText("Send feedback"));

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

@@ -6,11 +6,16 @@ import DialogContent from "@mui/material/DialogContent";
 import Typography from "@mui/material/Typography";
 import { FormikHelpers, useFormik } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
+import React, { useState } from "react";
 import InputGroup from "ui/editor/InputGroup";
 import InputLabel from "ui/editor/InputLabel";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 
+import {
+  AddNewEditorErrors,
+  isUserAlreadyExistsError,
+} from "../errors/addNewEditorErrors";
 import { addNewEditorFormSchema } from "../formSchema";
 import { createAndAddUserToTeam } from "../queries/createAndAddUserToTeam";
 import { AddNewEditorFormValues, AddNewEditorModalProps } from "../types";
@@ -19,7 +24,15 @@ import { optimisticallyUpdateMembersTable } from "./lib/optimisticallyUpdateMemb
 export const AddNewEditorModal = ({
   showModal,
   setShowModal,
+  setShowToast,
 }: AddNewEditorModalProps) => {
+  const [showUserAlreadyExistsError, setShowUserAlreadyExistsError] =
+    useState<boolean>(false);
+
+  const clearErrors = () => {
+    setShowUserAlreadyExistsError(false);
+  };
+
   const handleSubmit = async (
     values: AddNewEditorFormValues,
     { resetForm }: FormikHelpers<AddNewEditorFormValues>,
@@ -32,11 +45,20 @@ export const AddNewEditorModal = ({
       values.lastName,
       teamId,
       teamSlug,
-    );
+    ).catch((err) => {
+      if (isUserAlreadyExistsError(err.message)) {
+        setShowUserAlreadyExistsError(true);
+      }
+      console.error(err);
+    });
 
+    if (!newUserId) {
+      return;
+    }
+    clearErrors();
     optimisticallyUpdateMembersTable(values, newUserId);
-
     setShowModal(false);
+    setShowToast(true);
     resetForm({ values });
   };
 
@@ -53,6 +75,7 @@ export const AddNewEditorModal = ({
   return (
     <Dialog
       aria-labelledby="dialog-heading"
+      data-testid="dialog-create-user"
       PaperProps={{
         sx: (theme) => ({
           width: "100%",
@@ -119,26 +142,36 @@ export const AddNewEditorModal = ({
             padding: 2,
           }}
         >
-          <Box>
-            <Button
-              variant="contained"
-              color="prompt"
-              type="submit"
-              data-testid="modal-create-user-button"
-            >
-              Create user
-            </Button>
-            <Button
-              variant="contained"
-              color="secondary"
-              type="reset"
-              sx={{ ml: 1.5 }}
-              onClick={() => setShowModal(false)}
-              data-testid="modal-cancel-button"
-            >
-              Cancel
-            </Button>
-          </Box>
+          <ErrorWrapper
+            error={
+              showUserAlreadyExistsError
+                ? AddNewEditorErrors.USER_ALREADY_EXISTS.errorMessage
+                : undefined
+            }
+          >
+            <Box>
+              <>
+                <Button
+                  variant="contained"
+                  color="prompt"
+                  type="submit"
+                  data-testid="modal-create-user-button"
+                >
+                  Create user
+                </Button>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  type="reset"
+                  sx={{ ml: 1.5 }}
+                  onClick={() => setShowModal(false)}
+                  data-testid="modal-cancel-button"
+                >
+                  Cancel
+                </Button>
+              </>
+            </Box>
+          </ErrorWrapper>
         </DialogActions>
       </form>
     </Dialog>

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

@@ -1,4 +1,6 @@
+import Alert from "@mui/material/Alert";
 import Chip from "@mui/material/Chip";
+import Snackbar from "@mui/material/Snackbar";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -18,6 +20,18 @@ export const MembersTable = ({
   showAddMemberButton,
 }: MembersTableProps) => {
   const [showModal, setShowModal] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const handleCloseToast = (
+    _event?: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setShowToast(false);
+  };
 
   const roleLabels: Record<string, string> = {
     platformAdmin: "Admin",
@@ -99,9 +113,28 @@ export const MembersTable = ({
             )}
           </TableBody>
         </Table>
+        {showAddMemberButton && (
+          <Snackbar
+            open={showToast}
+            autoHideDuration={6000}
+            onClose={handleCloseToast}
+          >
+            <Alert
+              onClose={handleCloseToast}
+              severity="success"
+              sx={{ width: "100%" }}
+            >
+              Successfully added a user
+            </Alert>
+          </Snackbar>
+        )}
       </TableContainer>
       {showModal && (
-        <AddNewEditorModal showModal={showModal} setShowModal={setShowModal} />
+        <AddNewEditorModal
+          setShowToast={setShowToast}
+          showModal={showModal}
+          setShowModal={setShowModal}
+        />
       )}
     </>
   );

editor.planx.uk/src/pages/FlowEditor/components/Team/errors/addNewEditorErrors.tsx

@@ -0,0 +1,8 @@
+export const AddNewEditorErrors = {
+  USER_ALREADY_EXISTS: {
+    regex: /violates unique constraint "users_email_key"/i,
+    errorMessage: "User already exists",
+  },
+};
+export const isUserAlreadyExistsError = (error: string) =>
+  AddNewEditorErrors.USER_ALREADY_EXISTS.regex.test(error);

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

@@ -0,0 +1,44 @@
+import { screen, within } 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";
+
+vi.mock("lib/featureFlags.ts", () => ({
+  hasFeatureFlag: vi.fn().mockReturnValue(true),
+}));
+
+vi.mock(
+  "pages/FlowEditor/components/Team/queries/createAndAddUserToTeam.tsx",
+  () => ({
+    createAndAddUserToTeam: vi.fn().mockRejectedValue({
+      message:
+        'Uniqueness violation. duplicate key value violates unique constraint "users_email_key"',
+    }),
+  }),
+);
+
+let initialState: FullStore;
+
+describe("when a user fills in the 'add a new editor' form correctly but the user already exists", () => {
+  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 () => {
+    const addNewEditorModal = await screen.findByTestId("dialog-create-user");
+
+    expect(
+      await within(addNewEditorModal).findByText(/User already exists/),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -1,10 +1,10 @@
-
 import { screen, waitFor, within } from "@testing-library/react";
 import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import { vi } from "vitest";
 
 import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
-import { userEntersInput } from "./helpers/userEntersInput";
+import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
+import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 
 vi.mock("lib/featureFlags.ts", () => ({
   hasFeatureFlag: vi.fn().mockReturnValue(true),
@@ -24,6 +24,7 @@ let initialState: FullStore;
 
 describe("when a user with the ADD_NEW_EDITOR feature flag enabled presses 'add a new editor'", () => {
   beforeEach(async () => {
+    useStore.setState({ teamMembers: mockTeamMembersData });
     const user = await setupTeamMembersScreen();
 
     const teamEditorsTable = screen.getByTestId("team-editors");
@@ -42,26 +43,9 @@ describe("when a user with the ADD_NEW_EDITOR feature flag enabled presses 'add
 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 teamEditorsTable = screen.getByTestId("team-editors");
-    const addEditorButton = await within(teamEditorsTable).findByText(
-      "Add a new editor",
-    );
-    user.click(addEditorButton);
-    const addNewEditorModal = await screen.findByTestId("modal-create-user");
-    await userEntersInput("First name", "Mickey", addNewEditorModal);
-    await userEntersInput("Last name", "Mouse", addNewEditorModal);
-    await userEntersInput(
-      "Email address",
-      "[email protected]",
-      addNewEditorModal,
-    );
-
-    const createUserButton = await screen.findByTestId(
-      "modal-create-user-button",
-    );
-
-    user.click(createUserButton);
+    await userTriesToAddNewEditor(user);
   });
 
   it("adds the new user row to the Team Editors table", async () => {
@@ -73,4 +57,16 @@ describe("when a user fills in the 'add a new editor' form correctly", () => {
       ).toBeInTheDocument();
     });
   });
+
+  it("closes the modal", async () => {
+    await waitFor(() => {
+      expect(screen.queryByTestId("modal-create-user")).not.toBeInTheDocument();
+    });
+  });
+
+  it("shows a success message", async () => {
+    expect(
+      await screen.findByText(/Successfully added a user/),
+    ).toBeInTheDocument();
+  });
 });

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

@@ -1,16 +1,12 @@
 import { screen } from "@testing-library/react";
-import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
 import { setup } from "../../../../../../testUtils";
 import { TeamMembers } from "../../TeamMembers";
-import { exampleTeamMembersData } from "../exampleTeamMembersData";
 
 export const setupTeamMembersScreen = async () => {
-  useStore.setState({ teamMembers: exampleTeamMembersData });
-
   const { user } = setup(
     <DndProvider backend={HTML5Backend}>
       <TeamMembers />

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

@@ -1,13 +1,13 @@
-import { fireEvent, within } from "@testing-library/react";
+import { within } from "@testing-library/react";
+import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 
 export const userEntersInput = async (
   labelText: string,
   inputString: string,
   container: HTMLElement,
+  user: UserEvent,
 ) => {
   const inputField = await within(container).findByLabelText(labelText);
 
-  fireEvent.change(inputField, {
-    target: { value: inputString },
-  });
+  await user.type(inputField, inputString);
 };