fix: delete bugs

cardano-foundation · Mar 6, 2025 · abf9e94 · abf9e94
1 parent afc543f
commit abf9e94
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 31 deletions.
diff --git a/services/credential-server-ui/src/pages/Connections/Connections.scss b/services/credential-server-ui/src/pages/Connections/Connections.scss
@@ -83,7 +83,7 @@
     }
 
     tr {
-      height: 3.5rem;
+      height: 3.25rem;
 
       &.Mui-selected {
         background-color: var(--color-neutral-100);
@@ -92,6 +92,7 @@
       th,
       td {
         font-weight: 500;
+        padding: 0.38rem;
 
         .MuiButtonBase-root {
           &:hover {

diff --git a/...edential-server-ui/src/pages/Connections/components/ConnectionsTable/ConnectionsTable.tsx b/...edential-server-ui/src/pages/Connections/components/ConnectionsTable/ConnectionsTable.tsx
@@ -11,8 +11,9 @@ import {
   Checkbox,
   IconButton,
   Tooltip,
+  Button,
 } from "@mui/material";
-import { MoreVert } from "@mui/icons-material";
+import { MoreVert, DeleteOutline } from "@mui/icons-material";
 import { EnhancedTableHead } from "./EnhancedTableHead";
 import { EnhancedTableToolbar } from "./EnhancedTableToolbar";
 import { useTable } from "./useTable";
@@ -28,21 +29,30 @@ import {
 import { RootState, AppDispatch } from "../../../../store";
 import { Contact, Data } from "../ConnectionsTable/ConnectionsTable.types";
 import { createMenuItems } from "./menuItems";
-import { generateRows } from "./helpers";
+import { generateRows, handleDeleteContact } from "./helpers";
+import { PopupModal } from "../../../../components/PopupModal";
+import { useAppSelector } from "../../../../store/hooks";
+import { getRoleView } from "../../../../store/reducers/stateCache";
+import { RoleIndex } from "../../../../constants/roles";
+import { MIN_TABLE_WIDTH, ROWS_PER_PAGE_OPTIONS } from "./constants";
 
 const ConnectionsTable: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
-  const contacts = useSelector(
+  const roleViewIndex = useAppSelector(getRoleView) as RoleIndex;
+  const contacts = useAppSelector(
     (state: RootState) => state.connections.contacts
   );
   const credentials = useSelector(
     (state: RootState) => state.connections.credentials
   );
   const [filteredContacts, setFilteredContacts] = useState<Contact[]>([]);
-  // TODO: implement search filter
   const [connectionsFilterBySearch, setConnectionsFilterBySearch] =
     useState<string>("");
   const [numSelected, setNumSelected] = useState<number>(0);
+  const [openModal, setOpenModal] = useState(false);
+  const [selectedConnectionId, setSelectedConnectionId] = useState<
+    string | null
+  >(null);
 
   useEffect(() => {
     dispatch(fetchContacts());
@@ -69,6 +79,13 @@ const ConnectionsTable: React.FC = () => {
     setRows(generatedRows);
   }, [filteredContacts, credentials]);
 
+  useEffect(() => {
+    setSelected([]);
+    setNumSelected(0);
+    // We only need to track when the role changes, so we only track the roleViewIndex
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roleViewIndex]);
+
   const {
     order,
     orderBy,
@@ -85,16 +102,20 @@ const ConnectionsTable: React.FC = () => {
     visibleRows,
   } = useTable(rows, setNumSelected);
 
-  const ActionButton = (connectionId: string) => (
-    <Tooltip
-      title={i18n.t("pages.connections.actions")}
-      placement="top"
-    >
-      <IconButton aria-label="actions">
-        <MoreVert />
-      </IconButton>
-    </Tooltip>
-  );
+  const handleDelete = async () => {
+    if (selectedConnectionId) {
+      await handleDeleteContact(selectedConnectionId, dispatch);
+      setSelectedConnectionId(null);
+      setOpenModal(false);
+    }
+    setSelected([]);
+    setNumSelected(0);
+  };
+
+  const handleOpenModal = (connectionId: string) => {
+    setSelectedConnectionId(connectionId);
+    setOpenModal(true);
+  };
 
   return (
     <Box sx={{ width: "100%" }}>
@@ -107,7 +128,7 @@ const ConnectionsTable: React.FC = () => {
         />
         <TableContainer>
           <Table
-            sx={{ minWidth: 750 }}
+            sx={{ minWidth: MIN_TABLE_WIDTH }}
             aria-labelledby="tableTitle"
           >
             <EnhancedTableHead
@@ -138,7 +159,7 @@ const ConnectionsTable: React.FC = () => {
                       <Checkbox
                         color="primary"
                         checked={isItemSelected}
-                        inputProps={{ "aria-labelledby": labelId }}
+                        slotProps={{ input: { "aria-labelledby": labelId } }}
                       />
                     </TableCell>
                     <TableCell
@@ -153,26 +174,36 @@ const ConnectionsTable: React.FC = () => {
                     <TableCell align="left">{row.credentials}</TableCell>
                     <TableCell align="left">
                       <DropdownMenu
-                        button={ActionButton(row.id)}
-                        menuItems={createMenuItems(dispatch, row.id)}
+                        button={
+                          <Tooltip
+                            title={i18n.t("pages.connections.actions")}
+                            placement="top"
+                          >
+                            <IconButton aria-label="actions">
+                              <MoreVert />
+                            </IconButton>
+                          </Tooltip>
+                        }
+                        menuItems={createMenuItems(
+                          dispatch,
+                          row.id,
+                          handleOpenModal
+                        )}
                       />
                     </TableCell>
                   </TableRow>
                 );
               })}
               {emptyRows > 0 &&
                 Array.from({ length: emptyRows }).map((_, index) => (
-                  <TableRow
-                    key={`empty-row-${index}`}
-                    style={{ height: 53 }}
-                  >
+                  <TableRow key={`empty-row-${index}`}>
                     <TableCell colSpan={6} />
                   </TableRow>
                 ))}
             </TableBody>
           </Table>
           <TablePagination
-            rowsPerPageOptions={[5, 10, 25]}
+            rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
             component="div"
             count={rows.length}
             rowsPerPage={rowsPerPage}
@@ -182,6 +213,30 @@ const ConnectionsTable: React.FC = () => {
           />
         </TableContainer>
       </Paper>
+      <PopupModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        title={i18n.t("pages.connections.deleteConnections.title")}
+        body={i18n.t("pages.connections.deleteConnections.body")}
+        footer={
+          <>
+            <Button
+              variant="contained"
+              aria-label="cancel delete connection"
+              onClick={() => setOpenModal(false)}
+            >
+              {i18n.t("pages.connections.deleteConnections.cancel")}
+            </Button>
+            <Button
+              variant="contained"
+              aria-label="confirm delete connection"
+              onClick={handleDelete}
+            >
+              {i18n.t("pages.connections.deleteConnections.delete")}
+            </Button>
+          </>
+        }
+      />
     </Box>
   );
 };

diff --git a/...dential-server-ui/src/pages/Connections/components/ConnectionsTable/EnhancedTableHead.tsx b/...dential-server-ui/src/pages/Connections/components/ConnectionsTable/EnhancedTableHead.tsx
@@ -74,8 +74,8 @@ const EnhancedTableHead: React.FC<EnhancedTableProps> = (props) => {
             indeterminate={numSelected > 0 && numSelected < rowCount}
             checked={rowCount > 0 && numSelected === rowCount}
             onChange={onSelectAllClick}
-            inputProps={{
-              "aria-label": "select all connections",
+            slotProps={{
+              input: { "aria-labelledby": "select all connections" },
             }}
           />
         </TableCell>

diff --git a/services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/constants.ts b/services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/constants.ts
@@ -0,0 +1,4 @@
+const MIN_TABLE_WIDTH = 650;
+const ROWS_PER_PAGE_OPTIONS = [5, 10, 25];
+
+export { MIN_TABLE_WIDTH, ROWS_PER_PAGE_OPTIONS };
diff --git a/services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/menuItems.ts b/services/credential-server-ui/src/pages/Connections/components/ConnectionsTable/menuItems.ts
@@ -6,11 +6,11 @@ import {
 } from "@mui/icons-material";
 import { i18n } from "../../../../i18n";
 import { AppDispatch } from "../../../../store";
-import { handleDeleteContact } from "./helpers";
 
 export const createMenuItems = (
   dispatch: AppDispatch,
-  connectionId: string
+  connectionId: string,
+  handleOpenModal: (connectionId: string) => void
 ) => [
   {
     label: i18n.t("pages.connections.viewDetails"),
@@ -29,9 +29,7 @@ export const createMenuItems = (
   },
   {
     label: i18n.t("pages.connections.delete"),
-    action: async () => {
-      await handleDeleteContact(connectionId, dispatch);
-    },
+    action: () => handleOpenModal(connectionId),
     icon: React.createElement(DeleteOutline),
     className: "icon-left action-delete",
   },