Merge pull request #735 from edewit/removed-member-count

removed member count column

cypress/integration/group_test.spec.ts

@@ -25,10 +25,8 @@ describe("Group test", () => {
   let groupName = "group";
 
   const clickGroup = (itemName: string) => {
-    const groupUrl = "/auth/admin/realms/master/groups/*/members*";
+    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
-    cy.intercept(groupUrl).as("groupFetch");
     cy.get("table").contains(itemName).click();
-    cy.wait(["@groupFetch"]);
 
     return this;
   };
@@ -83,6 +81,7 @@ describe("Group test", () => {
       groupModal.open("no-groups-in-this-realm-empty-action");
       groupModal.fillGroupForm(groupName).clickCreate();
 
+      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
       groupModal.open().fillGroupForm(targetGroupName).clickCreate();
 
       listingPage.clickRowDetails(groupName).clickDetailMenu("Move to");

cypress/support/pages/admin_console/manage/groups/GroupModal.ts

@@ -18,11 +18,7 @@ export default class GroupModal {
   }
 
   clickCreate() {
-    cy.intercept("/auth/admin/realms/master/groups/*/members").as(
-      "groupCreate"
-    );
     cy.getId(this.createButton).click();
-    cy.wait(["@groupCreate"]);
 
     return this;
   }

cypress/support/pages/admin_console/manage/groups/MoveGroupModal.ts

@@ -18,9 +18,7 @@ export default class MoveGroupModal {
   }
 
   clickMove() {
-    cy.intercept("/auth/admin/realms/master/groups/*/members").as("groupMove");
     cy.getId(this.moveButton).click();
-    cy.wait(["@groupMove"]);
     return this;
   }
 }

src/groups/GroupTable.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import _ from "lodash";
 import {
   AlertVariant,
   Button,
@@ -12,7 +11,6 @@ import {
   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";
 import { useAdminClient } from "../context/auth/AdminClient";
@@ -26,10 +24,6 @@ import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
 import { useSubGroups } from "./SubGroupsContext";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 
-type GroupTableData = GroupRepresentation & {
-  membersLength?: number;
-};
-
 export const GroupTable = () => {
   const { t } = useTranslation("groups");
 
@@ -39,7 +33,7 @@ export const GroupTable = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [selectedRows, setSelectedRows] = useState<GroupRepresentation[]>([]);
-  const [move, setMove] = useState<GroupTableData>();
+  const [move, setMove] = useState<GroupRepresentation>();
 
   const { subGroups, setSubGroups } = useSubGroups();
 
@@ -50,28 +44,16 @@ export const GroupTable = () => {
   const location = useLocation();
   const id = getLastId(location.pathname);
 
-  const getMembers = async (id: string) => {
-    const response = await adminClient.groups.listMembers({ id });
-    return response ? response.length : 0;
-  };
-
   const loader = async () => {
     const groupsData = id
       ? (await adminClient.groups.findOne({ id })).subGroups
       : await adminClient.groups.find();
 
-    if (groupsData) {
+    if (!groupsData) {
-      const memberPromises = groupsData.map((group) => getMembers(group.id!));
-      const memberData = await Promise.all(memberPromises);
-      return _.cloneDeep(groupsData).map((group: GroupTableData, i) => {
-        group.membersLength = memberData[i];
-        return group;
-      });
-    } else {
       history.push(`/${realm}/groups`);
     }
 
-    return [];
+    return groupsData || [];
   };
 
   const multiDelete = async () => {
@@ -92,13 +74,12 @@ export const GroupTable = () => {
     refresh();
   };
 
-  const GroupNameCell = (group: GroupTableData) => (
+  const GroupNameCell = (group: GroupRepresentation) => (
     <>
       <Link
         key={group.id}
         to={`${location.pathname}/${group.id}`}
         onClick={() => {
-          delete group.membersLength;
           setSubGroups([...subGroups, group]);
         }}
       >
@@ -107,13 +88,6 @@ export const GroupTable = () => {
     </>
   );
 
-  const GroupMemberCell = (group: GroupTableData) => (
-    <div className="keycloak-admin--groups__member-count">
-      <UsersIcon key={`user-icon-${group.id}`} />
-      {group.membersLength}
-    </div>
-  );
-
   const handleModalToggle = () => {
     setIsCreateModalOpen(!isCreateModalOpen);
   };
@@ -195,12 +169,7 @@ export const GroupTable = () => {
             name: "name",
             displayKey: "groups:groupName",
             cellRenderer: GroupNameCell,
-            transforms: [cellWidth(15)],
+            transforms: [cellWidth(90)],
-          },
-          {
-            name: "members",
-            displayKey: "groups:members",
-            cellRenderer: GroupMemberCell,
           },
         ]}
         emptyState={
@@ -232,7 +201,6 @@ export const GroupTable = () => {
           }}
           onClose={() => setMove(undefined)}
           onConfirm={async (group) => {
-            delete move.membersLength;
             try {
               try {
                 if (group[0].id) {