fix: hide add/edit user in Templates team and for archived members

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

@@ -15,7 +15,13 @@ import { MembersTable } from "./components/MembersTable";
 import { TeamMember } from "./types";
 
 export const TeamMembers = () => {
-  const teamMembers = useStore((state) => state.teamMembers);
+  const [teamMembers, teamSlug] = useStore((state) => [
+    state.teamMembers, 
+    state.teamSlug,
+  ]);
+
+  // All users are automatically added to Templates team via a db trigger, we never want to manually add/edit them
+  const isNotTemplatesTeam = teamSlug !== "templates";
 
   const teamMembersByRole = groupBy(teamMembers, "role") as Record<
     Role,
@@ -42,7 +48,7 @@ export const TeamMembers = () => {
         <Typography variant="body1">
           Editors have access to edit your services.
         </Typography>
-        <MembersTable members={activeMembers} showAddMemberButton />
+        <MembersTable members={activeMembers} showAddMemberButton={isNotTemplatesTeam} showEditMemberButton={isNotTemplatesTeam} />
       </SettingsSection>
       <SettingsSection>
         <Typography variant="h2" component="h3" gutterBottom>
@@ -51,7 +57,7 @@ export const TeamMembers = () => {
         <Typography variant="body1">
           Admins have editor access across all teams.
         </Typography>
-        <MembersTable members={platformAdmins} />
+        <MembersTable members={platformAdmins} showEditMemberButton={isNotTemplatesTeam} />
       </SettingsSection>
       {archivedMembers.length > 0 && (
         <SettingsSection>

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

@@ -29,6 +29,7 @@ const EditUserButton = styled(Button)(({ theme }) => ({
 export const MembersTable = ({
   members,
   showAddMemberButton,
+  showEditMemberButton,
 }: MembersTableProps) => {
   const [showAddModal, setShowAddModal] = useState<boolean>(false);
   const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false);
@@ -126,19 +127,21 @@ export const MembersTable = ({
                   />
                 </TableCell>
                 <TableCell>{member.email}</TableCell>
-                <Permission.IsPlatformAdmin>
-                  <TableCell>
-                    <EditUserButton
-                      onClick={() => {
-                        setShowUpdateModal(true);
-                        setInitialValues(member);
-                      }}
-                      data-testId={`edit-button-${i}`}
-                    >
-                      Edit
-                    </EditUserButton>
-                  </TableCell>
-                </Permission.IsPlatformAdmin>
+                {showEditMemberButton && (
+                  <Permission.IsPlatformAdmin>
+                    <TableCell>
+                      <EditUserButton
+                        onClick={() => {
+                          setShowUpdateModal(true);
+                          setInitialValues(member);
+                        }}
+                        data-testId={`edit-button-${i}`}
+                      >
+                        Edit
+                      </EditUserButton>
+                    </TableCell>
+                  </Permission.IsPlatformAdmin>
+                )}
               </StyledTableRow>
             ))}
             {showAddMemberButton && (

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

@@ -27,7 +27,7 @@ let initialState: FullStore;
 
 describe("when a user presses 'add a new editor'", () => {
   beforeEach(async () => {
-    useStore.setState({ teamMembers: mockTeamMembersData });
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "planx" });
     const { user } = await setupTeamMembersScreen();
 
     const teamEditorsTable = screen.getByTestId("team-editors");
@@ -46,7 +46,7 @@ describe("when a user presses 'add a new editor'", () => {
 describe("when a user fills in the 'add a new editor' form correctly", () => {
   afterAll(() => useStore.setState(initialState));
   beforeEach(async () => {
-    useStore.setState({ teamMembers: mockTeamMembersData });
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "planx" });
     const { user } = await setupTeamMembersScreen();
     await userTriesToAddNewEditor(user);
   });
@@ -92,3 +92,16 @@ describe("when the addNewEditor modal is rendered", () => {
     expect(results).toHaveNoViolations();
   });
 });
+
+describe("'add a new editor' button is hidden from Templates team", () => {
+  beforeEach(async() => {
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "templates" });
+  });
+
+  it("hides the button on the Templates team", async () => {
+    const { user: _user } = await setupTeamMembersScreen();
+    const teamEditorsTable = screen.getByTestId("team-editors");
+    const addEditorButton = within(teamEditorsTable).queryByText("Add a new editor");
+    expect(addEditorButton).not.toBeInTheDocument();
+  });
+});

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

@@ -17,6 +17,7 @@ describe("when a user presses 'edit button'", () => {
     useStore.setState({
       teamMembers: mockTeamMembersData,
       user: mockPlatformAdminUser,
+      teamSlug: "planx",
     });
 
     const { user } = await setupTeamMembersScreen();
@@ -56,7 +57,7 @@ describe("when a user presses 'edit button'", () => {
 
 describe("when a user deletes an input value", () => {
   beforeEach(async () => {
-    useStore.setState({ teamMembers: mockTeamMembersData });
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "planx" });
   });
   it("displays an error message when clicking away", async () => {
     const { user } = await setupTeamMembersScreen();
@@ -92,7 +93,7 @@ describe("when a user deletes an input value", () => {
 
 describe("when a user updates a field correctly", () => {
   beforeEach(async () => {
-    useStore.setState({ teamMembers: mockTeamMembersData });
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "planx" });
     const { user } = await setupTeamMembersScreen();
 
     const teamEditorsTable = screen.getByTestId("team-editors");
@@ -124,7 +125,7 @@ describe("when a user updates a field correctly", () => {
 
 describe("when a user correctly updates an Editor", () => {
   beforeEach(async () => {
-    useStore.setState({ teamMembers: mockTeamMembersData });
+    useStore.setState({ teamMembers: mockTeamMembersData, teamSlug: "planx" });
     const { user } = await setupTeamMembersScreen();
 
     const teamEditorsTable = screen.getByTestId("team-editors");
@@ -164,11 +165,25 @@ describe("when a user correctly updates an Editor", () => {
   });
 });
 
+describe("'edit' button is hidden from Templates team", () => {
+  beforeEach(async() => {
+    useStore.setState({ teamMembers: mockTeamMembersData, user: mockPlatformAdminUser, teamSlug: "templates" });
+  });
+
+  it("hides the button on the Templates team", async () => {
+    const { user: _user } = await setupTeamMembersScreen();
+    const teamEditorsTable = screen.getByTestId("team-editors");
+    const editButton = within(teamEditorsTable).queryByTestId("edit-button-0");
+    expect(editButton).not.toBeInTheDocument();
+  });
+});
+
 describe("when a user is not a platform admin", () => {
   beforeEach(async () => {
     useStore.setState({
       teamMembers: mockTeamMembersData,
       user: mockPlainUser,
+      team: "planx",
     });
 
     await setupTeamMembersScreen();

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

@@ -8,6 +8,7 @@ export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
 export interface MembersTableProps {
   members: TeamMember[];
   showAddMemberButton?: boolean;
+  showEditMemberButton?: boolean;
 }
 export interface AddNewEditorModalProps {
   showModal: boolean;