Changed the way the table is updated (#2505)

src/components/role-mapping/AddRoleMappingModal.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { findIndex } from "lodash-es";
 import {
   Badge,
   Button,
@@ -15,11 +14,11 @@ import {
   SelectVariant,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { FilterIcon } from "@patternfly/react-icons";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import { KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
 import { useFetch, useAdminClient } from "../../context/auth/AdminClient";
-import { FilterIcon } from "@patternfly/react-icons";
 import {
   castAdminClient,
   mapping,
@@ -27,6 +26,7 @@ import {
   Row,
   ServiceRole,
 } from "./RoleMapping";
+import { KeycloakSpinner } from "../keycloak-spinner/KeycloakSpinner";
 
 type AddRoleMappingModalProps = {
   id: string;
@@ -61,12 +61,11 @@ export const AddRoleMappingModal = ({
   const [clients, setClients] = useState<ClientRole[]>([]);
   const [searchToggle, setSearchToggle] = useState(false);
 
-  const [key, setKey] = useState(0);
-  const refresh = () => setKey(key + 1);
-
   const [selectedClients, setSelectedClients] = useState<ClientRole[]>([]);
   const [selectedRows, setSelectedRows] = useState<Row[]>([]);
 
+  const [data, setData] = useState<Row[]>();
+
   const mapType = mapping.find((m) => m.resource === type)!;
 
   useFetch(
@@ -101,27 +100,22 @@ export const AddRoleMappingModal = ({
     []
   );
 
-  useEffect(refresh, [searchToggle]);
+  useFetch(
-
+    async () => {
-  const removeClient = (client: ClientRole) => {
+      const realmRolesSelected = selectedClients.some(
-    setSelectedClients(selectedClients.filter((item) => item.id !== client.id));
-  };
-
-  const loader = async () => {
-    const realmRolesSelected = findIndex(
-      selectedClients,
         (client) => client.name === "realmRoles"
       );
       let selected = selectedClients;
-    if (realmRolesSelected !== -1) {
+      if (realmRolesSelected) {
         selected = selectedClients.filter(
           (client) => client.name !== "realmRoles"
         );
       }
 
-    const availableRoles = await castAdminClient(adminClient, mapType.resource)[
+      const availableRoles = await castAdminClient(
-      mapType.functions.list[1]
+        adminClient,
-    ]({
+        mapType.resource
+      )[mapType.functions.list[1]]({
         id,
       });
 
@@ -162,11 +156,22 @@ export const AddRoleMappingModal = ({
       ).flat();
 
       return [
-      ...(realmRolesSelected !== -1 || selected.length === 0 ? realmRoles : []),
+        ...(realmRolesSelected || selected.length === 0 ? realmRoles : []),
         ...roles,
       ];
+    },
+    setData,
+    [selectedClients]
+  );
+
+  const removeClient = (client: ClientRole) => {
+    setSelectedClients(selectedClients.filter((item) => item.id !== client.id));
   };
 
+  if (!data) {
+    return <KeycloakSpinner />;
+  }
+
   const createSelectGroup = (clients: ClientRepresentation[]) => [
     <SelectGroup key="role" label={t("realmRoles")}>
       <SelectOption key="realmRoles" value={realmRole}>
@@ -215,14 +220,13 @@ export const AddRoleMappingModal = ({
       ]}
     >
       <KeycloakDataTable
-        key={key}
         onSelect={(rows) => setSelectedRows([...rows])}
         searchPlaceholderKey="clients:searchByRoleName"
         searchTypeComponent={
           <ToolbarItem>
             <Select
               toggleId="role"
-              onToggle={() => setSearchToggle(!searchToggle)}
+              onToggle={setSearchToggle}
               isOpen={searchToggle}
               variant={isRadio ? SelectVariant.single : SelectVariant.checkbox}
               hasInlineFilter
@@ -232,6 +236,7 @@ export const AddRoleMappingModal = ({
                 </>
               }
               isGrouped
+              isCheckboxSelectionBadgeHidden
               onFilter={(evt) => {
                 const value = evt?.target.value || "";
                 return createSelectGroup(
@@ -259,10 +264,7 @@ export const AddRoleMappingModal = ({
               {selectedClients.map((client) => (
                 <Chip
                   key={`chip-${client.id}`}
-                  onClick={() => {
+                  onClick={() => removeClient(client)}
-                    removeClient(client);
-                    refresh();
-                  }}
                 >
                   {client.clientId || t("realmRoles")}
                   <Badge isRead={true}>{client.numberOfRoles}</Badge>
@@ -273,7 +275,7 @@ export const AddRoleMappingModal = ({
         }
         canSelectAll
         isRadio={isRadio}
-        loader={loader}
+        loader={data}
         ariaLabelKey="clients:roles"
         columns={[
           {

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -303,7 +303,11 @@ export function KeycloakDataTable<T>({
     (data) => {
       if (!isPaginated) {
         setUnPaginatedData(data);
+        if (data.length > first) {
           data = data.slice(first, first + max + 1);
+        } else {
+          setFirst(0);
+        }
       }
 
       const result = convertToColumns(data);