Small fix on policies tab (#1246)

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -144,8 +144,8 @@ export default class RealmSettingsPage {
   executeActionsSelectMenuList = "#kc-execute-actions-select-menu > div > ul";
 
   private createProfileBtn = "createProfile";
-  private formViewSelect = "formView-radioBtn";
-  private jsonEditorSelect = "formView-radioBtn";
+  private formViewSelect = "formView-profilesView";
+  private jsonEditorSelect = "jsonEditor-profilesView";
   private newClientProfileNameInput = "client-profile-name";
   private newClientProfileDescriptionInput = "client-profile-description";
   private saveNewClientProfileBtn = "saveCreateProfile";

src/realm-settings/PoliciesTab.tsx

@@ -8,15 +8,15 @@ import {
   FlexItem,
   PageSection,
   Radio,
+  Spinner,
   Title,
   ToolbarItem,
 } from "@patternfly/react-core";
 
-import "./RealmSettingsSection.css";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useTranslation } from "react-i18next";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { upperCaseFormatter } from "../util";
 import { CodeEditor, Language } from "@patternfly/react-code-editor";
 import { Link } from "react-router-dom";
@@ -24,23 +24,25 @@ import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useAlerts } from "../components/alert/Alerts";
 
+import "./RealmSettingsSection.css";
+
 export const PoliciesTab = () => {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
 
   const [show, setShow] = useState(false);
-  const [policies, setPolicies] = useState<ClientPolicyRepresentation[]>([]);
+  const [policies, setPolicies] = useState<ClientPolicyRepresentation[]>();
   const [selectedPolicy, setSelectedPolicy] =
     useState<ClientPolicyRepresentation>();
 
-  const loader = async () => {
-    const policies = await adminClient.clientPolicies.listPolicies();
+  useFetch(
+    () => adminClient.clientPolicies.listPolicies(),
+    (policies) => setPolicies(policies.policies),
+    []
+  );
 
-    setPolicies(policies.policies!);
-
-    return policies.policies!;
-  };
+  const loader = async () => policies ?? [];
 
   const code = useMemo(() => JSON.stringify(policies, null, 2), [policies]);
 
@@ -61,6 +63,13 @@ export const PoliciesTab = () => {
     },
   });
 
+  if (!policies) {
+    return (
+      <div className="pf-u-text-align-center">
+        <Spinner />
+      </div>
+    );
+  }
   return (
     <>
       <DeleteConfirm />
@@ -74,20 +83,20 @@ export const PoliciesTab = () => {
           <FlexItem>
             <Radio
               isChecked={!show}
-              name="formView"
+              name="policiesView"
               onChange={() => setShow(false)}
               label={t("policiesConfigTypes.formView")}
-              id="formView-radioBtn"
+              id="formView-policiesView"
               className="kc-form-radio-btn pf-u-mr-sm pf-u-ml-sm"
             />
           </FlexItem>
           <FlexItem>
             <Radio
               isChecked={show}
-              name="jsonEditor"
+              name="policiesView"
               onChange={() => setShow(true)}
               label={t("policiesConfigTypes.jsonEditor")}
-              id="jsonEditor-radioBtn"
+              id="jsonEditor-policiesView"
               className="kc-editor-radio-btn"
             />
           </FlexItem>
@@ -96,6 +105,7 @@ export const PoliciesTab = () => {
       <Divider />
       {!show ? (
         <KeycloakDataTable
+          key={policies.length}
           emptyState={
             <ListEmptyState
               message={t("realm-settings:noClientPolicies")}
@@ -103,9 +113,8 @@ export const PoliciesTab = () => {
               primaryActionText={t("realm-settings:createClientPolicy")}
             />
           }
-          ariaLabelKey="identity-providers:mappersList"
+          ariaLabelKey="realm-settings:clientPolicies"
           searchPlaceholderKey="realm-settings:clientPolicySearch"
-          isPaginated
           loader={loader}
           toolbarItem={
             <ToolbarItem>
@@ -130,16 +139,13 @@ export const PoliciesTab = () => {
           columns={[
             {
               name: "name",
-              displayKey: "common:name",
             },
             {
               name: "enabled",
-              displayKey: "common:enabled",
               cellFormatters: [upperCaseFormatter()],
             },
             {
               name: "description",
-              displayKey: "common:description",
             },
           ]}
         />

src/realm-settings/ProfilesTab.tsx

@@ -6,6 +6,7 @@ import {
   ButtonVariant,
   Label,
   PageSection,
+  Spinner,
   ToolbarItem,
 } from "@patternfly/react-core";
 import { Divider, Flex, FlexItem, Radio, Title } from "@patternfly/react-core";
@@ -13,15 +14,16 @@ import { CodeEditor, Language } from "@patternfly/react-code-editor";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { useTranslation } from "react-i18next";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { Link } from "react-router-dom";
-import "./RealmSettingsSection.css";
 import { toNewClientProfile } from "./routes/NewClientProfile";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
 
+import "./RealmSettingsSection.css";
+
 type ClientProfile = ClientProfileRepresentation & {
   global: boolean;
 };
@@ -38,31 +40,33 @@ export const ProfilesTab = () => {
   const [show, setShow] = useState(false);
   const [key, setKey] = useState(0);
 
-  const loader = async () => {
-    const allProfiles = await adminClient.clientPolicies.listProfiles({
-      realm,
-      includeGlobalProfiles: true,
-    });
+  useFetch(
+    () =>
+      adminClient.clientPolicies.listProfiles({
+        includeGlobalProfiles: true,
+      }),
+    (allProfiles) => {
+      setGlobalProfiles(allProfiles.globalProfiles);
 
-    setGlobalProfiles(allProfiles.globalProfiles);
+      const globalProfiles = allProfiles.globalProfiles?.map(
+        (globalProfiles) => ({
+          ...globalProfiles,
+          global: true,
+        })
+      );
 
-    const globalProfiles = allProfiles.globalProfiles?.map(
-      (globalProfiles) => ({
-        ...globalProfiles,
-        global: true,
-      })
-    );
+      const profiles = allProfiles.profiles?.map((profiles) => ({
+        ...profiles,
+        global: false,
+      }));
 
-    const profiles = allProfiles.profiles?.map((profiles) => ({
-      ...profiles,
-      global: false,
-    }));
+      const allClientProfiles = globalProfiles?.concat(profiles ?? []);
+      setTableProfiles(allClientProfiles || []);
+    },
+    [key]
+  );
 
-    const allClientProfiles = globalProfiles?.concat(profiles ?? []);
-    setTableProfiles(allClientProfiles);
-
-    return allClientProfiles ?? [];
-  };
+  const loader = async () => tableProfiles ?? [];
 
   const code = useMemo(
     () => JSON.stringify(tableProfiles, null, 2),
@@ -96,11 +100,18 @@ export const ProfilesTab = () => {
 
   const cellFormatter = (row: ClientProfile) => (
     <Link to={""} key={row.name}>
-      {row.name} {""}
-      {row.global && <Label color="blue">{t("global")}</Label>}
+      {row.name} {row.global && <Label color="blue">{t("global")}</Label>}
     </Link>
   );
 
+  if (!tableProfiles) {
+    return (
+      <div className="pf-u-text-align-center">
+        <Spinner />
+      </div>
+    );
+  }
+
   return (
     <>
       <DeleteConfirm />
@@ -114,23 +125,23 @@ export const ProfilesTab = () => {
           <FlexItem>
             <Radio
               isChecked={!show}
-              name="formView"
+              name="profilesView"
               onChange={() => setShow(false)}
               label={t("profilesConfigTypes.formView")}
-              id="formView-radioBtn"
+              id="formView-profilesView"
               className="kc-form-radio-btn pf-u-mr-sm pf-u-ml-sm"
-              data-testid="formView-radioBtn"
+              data-testid="formView-profilesView"
             />
           </FlexItem>
           <FlexItem>
             <Radio
               isChecked={show}
-              name="jsonEditor"
+              name="profilesView"
               onChange={() => setShow(true)}
               label={t("profilesConfigTypes.jsonEditor")}
-              id="jsonEditor-radioBtn"
+              id="jsonEditor-profilesView"
               className="kc-editor-radio-btn"
-              data-testid="jsonEditor-radioBtn"
+              data-testid="jsonEditor-profilesView"
             />
           </FlexItem>
         </Flex>
@@ -138,10 +149,9 @@ export const ProfilesTab = () => {
       <Divider />
       {!show ? (
         <KeycloakDataTable
-          key={key}
-          ariaLabelKey="userEventsRegistered"
+          key={tableProfiles.length}
+          ariaLabelKey="realm-settings:profiles"
           searchPlaceholderKey="realm-settings:clientProfileSearch"
-          isPaginated
           loader={loader}
           toolbarItem={
             <ToolbarItem>

src/realm-settings/RealmSettingsSection.tsx

@@ -2,7 +2,7 @@ import { Breadcrumb, BreadcrumbItem, Spinner } from "@patternfly/react-core";
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
@@ -58,15 +58,6 @@ export const RealmSettingsSection = () => {
     setKey(key + 1);
   };
 
-  // delays realm fetch by 100ms in order to fetch newly updated value from server
-  useEffect(() => {
-    const update = async () => {
-      const realm = await adminClient.realms.findOne({ realm: realmName });
-      setRealm(realm);
-    };
-    setTimeout(update, 100);
-  }, [key]);
-
   useFetch(
     async () => {
       const realm = await adminClient.realms.findOne({ realm: realmName });
@@ -83,7 +74,7 @@ export const RealmSettingsSection = () => {
       setCurrentUser(user);
       setRealm(realm);
     },
-    []
+    [key]
   );
 
   if (!realm || !realmComponents || !currentUser) {