Replace hamburger menu with delete icon in user management table (#2958)

ethyca · Apr 6, 2023 · 43ae8eb · 43ae8eb
1 parent 78865fb
commit 43ae8eb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ The types of changes are:
 
 ### Changed
 * Updated the check for if a user can assign owner roles to be scope-based instead of role-based [#2964](https://github.com/ethyca/fides/pull/2964)
+* Replaced menu in user management table with delete icon [#2958](https://github.com/ethyca/fides/pull/2958)
 
 ### Developer Experience
 * Nox commands for git tagging to support feature branch builds [#2979](https://github.com/ethyca/fides/pull/2979)

diff --git a/clients/admin-ui/cypress/e2e/user-management.cy.ts b/clients/admin-ui/cypress/e2e/user-management.cy.ts
@@ -57,11 +57,6 @@ describe("User management", () => {
         cy.visit("/user-management");
         cy.wait("@getAllUsers");
 
-        // try via the menu button
-        cy.getByTestId(`row-${USER_1_ID}`).within(() => {
-          cy.getByTestId("menu-btn").should("not.exist");
-        });
-
         // try via clicking the row
         cy.getByTestId(`row-${USER_1_ID}`).click();
         cy.url().should("not.contain", "profile");
@@ -211,10 +206,7 @@ describe("User management", () => {
     it("can delete a user via the menu", () => {
       cy.visit("/user-management");
       cy.getByTestId(`row-${USER_1_ID}`).within(() => {
-        cy.getByTestId("menu-btn").click();
-      });
-      cy.getByTestId(`menu-${USER_1_ID}`).within(() => {
-        cy.getByTestId("delete-btn").click();
+        cy.getByTestId("delete-user-btn").click();
       });
       cy.getByTestId("delete-user-modal");
       cy.getByTestId("submit-btn").should("be.disabled");

diff --git a/clients/admin-ui/src/features/user-management/UserManagementRow.tsx b/clients/admin-ui/src/features/user-management/UserManagementRow.tsx
@@ -1,18 +1,12 @@
 import {
   Badge,
-  Button,
   ButtonGroup,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  MoreIcon,
-  Portal,
+  IconButton,
   Td,
-  Text,
   Tr,
   useDisclosure,
 } from "@fidesui/react";
+import { TrashCanSolidIcon } from "common/Icon/TrashCanSolidIcon";
 import { useRouter } from "next/router";
 import React from "react";
 import {
@@ -123,46 +117,17 @@ const UserManagementRow: React.FC<UserManagementRowProps> = ({ user }) => {
         <Td pl={0} py={1} onClick={handleEditUser}>
           {user.created_at ? new Date(user.created_at).toUTCString() : null}
         </Td>
-        <Restrict
-          scopes={[
-            ScopeRegistryEnum.USER_UPDATE,
-            ScopeRegistryEnum.USER_DELETE,
-          ]}
-        >
+        <Restrict scopes={[ScopeRegistryEnum.USER_DELETE]}>
           <Td pr={0} py={1} textAlign="end" position="relative">
             <ButtonGroup>
-              <Menu>
-                <MenuButton
-                  as={Button}
-                  size="xs"
-                  bg="white"
-                  data-testid="menu-btn"
-                >
-                  <MoreIcon color="gray.700" w={18} h={18} />
-                </MenuButton>
-                <Portal>
-                  <MenuList shadow="xl" data-testid={`menu-${user.id}`}>
-                    <Restrict scopes={[ScopeRegistryEnum.USER_UPDATE]}>
-                      <MenuItem
-                        _focus={{ color: "complimentary.500", bg: "gray.100" }}
-                        onClick={handleEditUser}
-                        data-testid="edit-btn"
-                      >
-                        <Text fontSize="sm">Edit</Text>
-                      </MenuItem>
-                    </Restrict>
-                    <Restrict scopes={[ScopeRegistryEnum.USER_DELETE]}>
-                      <MenuItem
-                        _focus={{ color: "complimentary.500", bg: "gray.100" }}
-                        onClick={deleteModal.onOpen}
-                        data-testid="delete-btn"
-                      >
-                        <Text fontSize="sm">Delete</Text>
-                      </MenuItem>
-                    </Restrict>
-                  </MenuList>
-                </Portal>
-              </Menu>
+              <IconButton
+                aria-label="delete"
+                icon={<TrashCanSolidIcon />}
+                variant="outline"
+                size="sm"
+                onClick={deleteModal.onOpen}
+                data-testid="delete-user-btn"
+              />
             </ButtonGroup>
           </Td>
         </Restrict>