fixing issue 629 (#655)

* address some of the issues in 629

* made breadcrumb/page title same as other sections

* fixed tests

cypress/integration/group_test.spec.ts

@@ -9,6 +9,7 @@ import LoginPage from "../support/pages/LoginPage";
 import ViewHeaderPage from "../support/pages/ViewHeaderPage";
 import AdminClient from "../support/util/AdminClient";
 import { keycloakBefore } from "../support/util/keycloak_before";
+import ModalUtils from "../support/util/ModalUtils";
 
 describe("Group test", () => {
   const loginPage = new LoginPage();
@@ -19,6 +20,7 @@ describe("Group test", () => {
   const groupModal = new GroupModal();
   const searchGroupPage = new SearchGroupPage();
   const moveGroupModal = new MoveGroupModal();
+  const modalUtils = new ModalUtils();
 
   let groupName = "group";
 
@@ -53,6 +55,7 @@ describe("Group test", () => {
 
       // Delete
       listingPage.deleteItem(groupName);
+      modalUtils.checkModalTitle("Delete group?").confirmModal();
       masthead.checkNotificationMessage("Group deleted");
     });
 
@@ -71,6 +74,7 @@ describe("Group test", () => {
       sidebarPage.goToGroups();
       listingPage.searchItem(newName, false).itemExist(newName);
       listingPage.deleteItem(newName);
+      modalUtils.checkModalTitle("Delete group?").confirmModal();
       masthead.checkNotificationMessage("Group deleted");
     });
 
@@ -95,6 +99,7 @@ describe("Group test", () => {
       listingPage.itemExist(groupName);
       sidebarPage.goToGroups();
       listingPage.deleteItem(targetGroupName);
+      modalUtils.checkModalTitle("Delete group?").confirmModal();
       masthead.checkNotificationMessage("Group deleted");
     });
 
@@ -112,7 +117,9 @@ describe("Group test", () => {
 
       new GroupDetailPage().checkListSubGroup(groups);
       listingPage.deleteItem(groups[0]);
+      modalUtils.checkModalTitle("Delete group?").confirmModal();
       listingPage.deleteItem(groups[1]);
+      modalUtils.checkModalTitle("Delete group?").confirmModal();
     });
 
     it("Group search", () => {

cypress/integration/user_fed_ldap_mapper_test.spec.ts

@@ -265,6 +265,7 @@ describe("User Fed LDAP mapper tests", () => {
   it("Cleanup - delete group", () => {
     sidebarPage.goToGroups();
     listingPage.deleteItem(groupName);
+    modalUtils.confirmModal();
     masthead.checkNotificationMessage("Group deleted");
   });
 

src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -42,7 +42,7 @@ export const GroupBreadCrumbs = () => {
                   {group.name}
                 </Link>
               )}
-              {subGroups.length - 1 === i && <>{group.name}</>}
+              {subGroups.length - 1 === i && <>{t("groups:groupDetails")}</>}
             </BreadcrumbItem>
           ))}
         </Breadcrumb>

src/components/bread-crumb/__tests__/__snapshots__/GroupBreadCrumbs.test.tsx.snap

@@ -129,7 +129,7 @@ exports[`Group BreadCrumbs tests couple of crumbs 1`] = `
                   </svg>
                 </AngleRightIcon>
               </span>
-              active group
+              Group details
             </li>
           </BreadcrumbItem>
         </ol>

src/groups/GroupTable.tsx

@@ -5,11 +5,13 @@ import _ from "lodash";
 import {
   AlertVariant,
   Button,
+  ButtonVariant,
   Dropdown,
   DropdownItem,
   KebabToggle,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { cellWidth } from "@patternfly/react-table";
 import { UsersIcon } from "@patternfly/react-icons";
 
 import type GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";
@@ -22,6 +24,7 @@ import { GroupsModal } from "./GroupsModal";
 import { getLastId } from "./groupIdUtils";
 import { MoveGroupDialog } from "./MoveGroupDialog";
 import { useSubGroups } from "./SubGroupsContext";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 
 type GroupTableData = GroupRepresentation & {
   membersLength?: number;
@@ -71,27 +74,22 @@ export const GroupTable = () => {
     return [];
   };
 
-  const deleteGroup = async (group: GroupRepresentation) => {
+  const multiDelete = async () => {
     try {
+      for (const group of selectedRows) {
         await adminClient.groups.del({
           id: group.id!,
         });
-      addAlert(t("groupDelete"), AlertVariant.success);
+      }
+      addAlert(
+        t("groupDeleted", { count: selectedRows.length }),
+        AlertVariant.success
+      );
+      setSelectedRows([]);
     } catch (error) {
       addAlert(t("groupDeleteError", { error }), AlertVariant.danger);
     }
-    return true;
-  };
-
-  const multiDelete = async () => {
-    if (selectedRows!.length !== 0) {
-      const chainedPromises = selectedRows!.map((group) => deleteGroup(group));
-
-      await Promise.all(chainedPromises);
-      addAlert(t("groupsDeleted"), AlertVariant.success);
-      setSelectedRows([]);
     refresh();
-    }
   };
 
   const GroupNameCell = (group: GroupTableData) => (
@@ -120,8 +118,17 @@ export const GroupTable = () => {
     setIsCreateModalOpen(!isCreateModalOpen);
   };
 
+  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
+    titleKey: t("deleteConfirmTitle", { count: selectedRows.length }),
+    messageKey: t("deleteConfirm", { count: selectedRows.length }),
+    continueButtonLabel: "common:delete",
+    continueButtonVariant: ButtonVariant.danger,
+    onConfirm: multiDelete,
+  });
+
   return (
     <>
+      <DeleteConfirm />
       <KeycloakDataTable
         key={`${id}${key}`}
         onSelect={(rows) => setSelectedRows([...rows])}
@@ -143,7 +150,10 @@ export const GroupTable = () => {
             <ToolbarItem>
               <Dropdown
                 toggle={
-                  <KebabToggle onToggle={() => setIsKebabOpen(!isKebabOpen)} />
+                  <KebabToggle
+                    onToggle={() => setIsKebabOpen(!isKebabOpen)}
+                    isDisabled={selectedRows!.length === 0}
+                  />
                 }
                 isOpen={isKebabOpen}
                 isPlain
@@ -152,7 +162,7 @@ export const GroupTable = () => {
                     key="action"
                     component="button"
                     onClick={() => {
-                      multiDelete();
+                      toggleDeleteDialog();
                       setIsKebabOpen(false);
                     }}
                   >
@@ -174,8 +184,8 @@ export const GroupTable = () => {
           {
             title: t("common:delete"),
             onRowClick: async (group: GroupRepresentation) => {
-              await deleteGroup(group);
-              refresh();
+              setSelectedRows([group]);
+              toggleDeleteDialog();
               return true;
             },
           },
@@ -185,6 +195,7 @@ export const GroupTable = () => {
             name: "name",
             displayKey: "groups:groupName",
             cellRenderer: GroupNameCell,
+            transforms: [cellWidth(15)],
           },
           {
             name: "members",

src/groups/GroupsSection.tsx

@@ -97,7 +97,7 @@ export const GroupsSection = () => {
         />
       )}
       <ViewHeader
-        titleKey="groups:groups"
+        titleKey={!id ? "groups:groups" : currentGroup()?.name!}
         subKey={!id ? "groups:groupsDescription" : ""}
         divider={!id}
         dropdownItems={

src/groups/messages.json

@@ -1,6 +1,7 @@
 {
   "groups": {
     "groups": "Groups",
+    "groupDetails": "Group details",
     "childGroups": "Child groups",
     "createGroup": "Create group",
     "groupName": "Group name",
@@ -48,8 +49,12 @@
     "noGroupsInThisRealmInstructions": "You haven't created any groups in this realm. Create a group to get started.",
     "noGroupsInThisSubGroup": "No groups in this sub group",
     "noGroupsInThisSubGroupInstructions": "You haven't created any groups in this sub group.",
-    "groupDelete": "Group deleted",
-    "groupsDeleted": "Groups deleted",
+    "deleteConfirmTitle": "Delete group?",
+    "deleteConfirmTitle_plural": "Delete groups?",
+    "deleteConfirm": "Are you sure you want to delete this group",
+    "deleteConfirm_plural": "Are you sure you want to delete this groups.",
+    "groupDeleted": "Group deleted",
+    "groupDeleted_plural": "Groups deleted",
     "groupDeleteError": "Error deleting group {error}",
     "attributes": "Attributes",
     "groupUpdated": "Group updated",