chore: Update copy on "Team Members" page to be less Editor specific

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

@@ -41,12 +41,12 @@ export const TeamMembers = () => {
 
   return (
     <Container maxWidth="contentWrap">
-      <SettingsSection data-testid="team-editors">
+      <SettingsSection data-testid="team-members">
         <Typography variant="h2" component="h3" gutterBottom>
-          Team editors
+          Team members
         </Typography>
         <Typography variant="body1">
-          Editors have access to edit your services.
+          Editors have access to edit your services, whilst viewers can only browse your services.
         </Typography>
         <MembersTable
           members={activeMembers}

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

@@ -1,23 +1,22 @@
 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";
 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 { Role, UserRole } from "@opensystemslab/planx-core/types";
+import { Role } from "@opensystemslab/planx-core/types";
 import { AddButton } from "pages/Team";
 import React, { useState } from "react";
 import Permission from "ui/editor/Permission";
 
 import { StyledAvatar, StyledTableRow } from "./../styles";
 import { ActionType, MembersTableProps, TeamMember } from "./../types";
-import { EditorUpsertModal } from "./EditorUpsertModal";
 import { RemoveUserModal } from "./RemoveUserModal";
+import { UserUpsertModal } from "./UserUpsertModal";
 
 const TableRowButton = styled(Button)(({ theme }) => ({
   textDecoration: "underline",
@@ -28,12 +27,14 @@ const TableRowButton = styled(Button)(({ theme }) => ({
     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": {
@@ -64,11 +65,13 @@ export const MembersTable = ({
     setShowModal(true);
     setInitialValues(member);
   };
+
   const removeUser = (member: TeamMember) => {
     setActionType("remove");
     setShowModal(true);
     setInitialValues(member);
   };
+
   const addUser = () => {
     setActionType("add");
     setShowModal(true);
@@ -99,15 +102,15 @@ export const MembersTable = ({
                       addUser();
                     }}
                   >
-                    Add a new editor
+                    Add a new member
                   </AddButton>
                 </TableCell>
               </TableRow>
             </TableBody>
           )}
         </Table>
         {showModal && (
-          <EditorUpsertModal
+          <UserUpsertModal
             showModal={showModal}
             setShowModal={setShowModal}
             initialValues={initialValues}
@@ -141,7 +144,7 @@ export const MembersTable = ({
             </StyledTableRow>
           </TableHead>
           <TableBody
-            data-testid={`members-table${showAddMemberButton && "-add-editor"}`}
+            data-testid={`members-table${showAddMemberButton && "-add-member"}`}
           >
             {members.map((member) => (
               <StyledTableRow key={member.id}>
@@ -207,7 +210,7 @@ export const MembersTable = ({
                         addUser();
                       }}
                     >
-                      Add a new editor
+                      Add a new member
                     </AddButton>
                   </TableCell>
                 </TableRow>
@@ -225,7 +228,7 @@ export const MembersTable = ({
             actionType={actionType}
           />
         ) : (
-          <EditorUpsertModal
+          <UserUpsertModal
             setShowModal={setShowModal}
             showModal={showModal}
             initialValues={initialValues}

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

@@ -13,10 +13,10 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input/Input";
 
 import {
-  AddNewEditorErrors,
+  AddNewMemberErrors,
   isUserAlreadyExistsError,
 } from "../errors/addNewEditorErrors";
-import { upsertEditorSchema } from "../formSchema";
+import { upsertMemberSchema } from "../formSchema";
 import { createAndAddUserToTeam } from "../queries/createAndAddUserToTeam";
 import { updateTeamMember } from "../queries/updateUser";
 import { SettingsDialog } from "../styles";
@@ -28,7 +28,7 @@ import {
 
 export const DEMO_TEAM_ID = 32;
 
-export const EditorUpsertModal = ({
+export const UserUpsertModal = ({
   setShowModal,
   showModal,
   initialValues,
@@ -117,7 +117,7 @@ export const EditorUpsertModal = ({
       // Users within the Demo team are granted a role with a restricted permission set
       role: isDemoTeam ? "demoUser" : "teamEditor",
     },
-    validationSchema: upsertEditorSchema,
+    validationSchema: upsertMemberSchema,
     onSubmit: handleSubmit,
   });
 
@@ -136,7 +136,7 @@ export const EditorUpsertModal = ({
         >
           <Box sx={{ mt: 1, mb: 4 }}>
             <Typography variant="h3" component="h2" id="dialog-heading">
-              Add a new editor
+              Add a new member
             </Typography>
           </Box>
           <InputGroup flowSpacing>
@@ -191,7 +191,7 @@ export const EditorUpsertModal = ({
           <ErrorWrapper
             error={
               showUserAlreadyExistsError
-                ? AddNewEditorErrors.USER_ALREADY_EXISTS.errorMessage
+                ? AddNewMemberErrors.USER_ALREADY_EXISTS.errorMessage
                 : undefined
             }
           >

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

@@ -1,8 +1,8 @@
-export const AddNewEditorErrors = {
+export const AddNewMemberErrors = {
   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);
+  AddNewMemberErrors.USER_ALREADY_EXISTS.regex.test(error);

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

@@ -1,6 +1,6 @@
 import * as Yup from "yup";
 
-export const upsertEditorSchema = Yup.object({
+export const upsertMemberSchema = Yup.object({
   firstName: Yup.string().required("Enter a first name"),
   lastName: Yup.string().required("Enter a last name"),
   email: Yup.string()

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

@@ -2,9 +2,9 @@ import { waitFor, within } from "@testing-library/react";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { vi } from "vitest";
 
-import { DEMO_TEAM_ID } from "../components/EditorUpsertModal";
+import { DEMO_TEAM_ID } from "../components/UserUpsertModal";
 import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
-import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
+import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
 import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 import { mockPlatformAdminUser } from "./mocks/mockUsers";
 
@@ -34,9 +34,9 @@ describe("adding a new user to the Demo team", () => {
     expect(currentUsers).toHaveLength(3);
 
     const { user, getByTestId } = await setupTeamMembersScreen();
-    await userTriesToAddNewEditor(user);
+    await userTriesToAddNewMember(user);
 
-    const membersTable = getByTestId("members-table-add-editor");
+    const membersTable = getByTestId("members-table-add-member");
 
     await waitFor(() => {
       expect(

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

@@ -3,7 +3,7 @@ import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import { vi } from "vitest";
 
 import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
-import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
+import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
 import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 import { alreadyExistingUser, mockPlatformAdminUser } from "./mocks/mockUsers";
 
@@ -17,7 +17,7 @@ vi.mock(
   }),
 );
 
-describe("when a user fills in the 'add a new editor' form correctly but there is a server-side error", () => {
+describe("when a user fills in the 'add a new member' form correctly but there is a server-side error", () => {
   afterAll(() => useStore.setState(initialState));
   beforeEach(async () => {
     useStore.setState({
@@ -26,7 +26,7 @@ describe("when a user fills in the 'add a new editor' form correctly but there i
     });
 
     const { user } = await setupTeamMembersScreen();
-    await userTriesToAddNewEditor(user);
+    await userTriesToAddNewMember(user);
   });
 
   it("shows an appropriate error message", async () => {

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

@@ -3,7 +3,7 @@ import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import { vi } from "vitest";
 
 import { setupTeamMembersScreen } from "./helpers/setupTeamMembersScreen";
-import { userTriesToAddNewEditor } from "./helpers/userTriesToAddNewEditor";
+import { userTriesToAddNewMember } from "./helpers/userTriesToAddNewMember";
 import { mockTeamMembersData } from "./mocks/mockTeamMembersData";
 import { alreadyExistingUser, mockPlatformAdminUser } from "./mocks/mockUsers";
 
@@ -18,7 +18,7 @@ vi.mock(
 );
 let initialState: FullStore;
 
-describe("when a user fills in the 'add a new editor' form correctly but the user already exists", () => {
+describe("when a user fills in the 'add a new member' form correctly but the user already exists", () => {
   afterAll(() => useStore.setState(initialState));
   beforeEach(async () => {
     useStore.setState({
@@ -27,7 +27,7 @@ describe("when a user fills in the 'add a new editor' form correctly but the use
     });
 
     const { user } = await setupTeamMembersScreen();
-    await userTriesToAddNewEditor(user);
+    await userTriesToAddNewMember(user);
   });
 
   it("shows an appropriate error message", async () => {

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

@@ -15,7 +15,7 @@ const mockTeamMembersDataWithNoTeamEditors: TeamMember[] = [
   },
 ];
 
-describe("when a user views the 'Team members' screen but there are no existing team editors listed", () => {
+describe("when a user views the 'Team members' screen but there are no existing team members listed", () => {
   beforeEach(async () => {
     useStore.setState({
       teamMembers: mockTeamMembersDataWithNoTeamEditors,
@@ -25,10 +25,10 @@ describe("when a user views the 'Team members' screen but there are no existing
     getByText("No members found");
   });
 
-  it("shows the 'add a new editor' button", async () => {
-    const teamEditorsTable = screen.getByTestId("team-editors");
+  it("shows the 'add a new member' button", async () => {
+    const teamMembersTable = screen.getByTestId("team-members");
     expect(
-      await within(teamEditorsTable).findByText("Add a new editor"),
+      await within(teamMembersTable).findByText("Add a new member"),
     ).toBeVisible();
   });
 });