Lazy-load data required for rows in scopes table (#4393)

apps/admin-ui/src/clients/authorization/Scopes.tsx

@@ -24,7 +24,6 @@ import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinn
 import { PaginatingTableToolbar } from "../../components/table-toolbar/PaginatingTableToolbar";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
-import { MoreLabel } from "./MoreLabel";
 import { toScopeDetails } from "../routes/Scope";
 import { toNewScope } from "../routes/NewScope";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
@@ -49,17 +48,6 @@ type ExpandableRow = {
   isExpanded: boolean;
 };
 
-const PermissionsRenderer = ({
-  row,
-}: {
-  row: PermissionScopeRepresentation;
-}) => (
-  <>
-    {row.permissions?.[0]?.name ? row.permissions[0]?.name : "—"}{" "}
-    <MoreLabel array={row.permissions} />
-  </>
-);
-
 export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
   const { t } = useTranslation("clients");
   const navigate = useNavigate();
@@ -80,34 +68,20 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
   const [search, setSearch] = useState("");
 
   useFetch(
-    async () => {
+    () => {
       const params = {
         first,
         max: max + 1,
         deep: false,
         name: search,
       };
-      const scopes = await adminClient.clients.listAllScopes({
+      return adminClient.clients.listAllScopes({
         ...params,
         id: clientId,
       });
-
-      return await Promise.all(
-        scopes.map(async (scope) => {
-          const options = { id: clientId, scopeId: scope.id! };
-          const permissions =
-            await adminClient.clients.listAllPermissionsByScope(options);
-
-          return {
-            ...scope,
-            permissions,
-            isLoaded: false,
-          };
-        })
-      );
     },
     (scopes) => {
-      setScopes(scopes);
+      setScopes(scopes.map((s) => ({ ...s, isLoaded: false })));
       setCollapsed(scopes.map((s) => ({ id: s.id!, isExpanded: false })));
     },
     [key, search, first, max]
@@ -118,21 +92,32 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
     collapsed.find((c) => c.id === id)?.isExpanded || false;
 
   useFetch(
-    async () => {
+    () => {
       const newlyOpened = collapsed
         .filter((row) => row.isExpanded)
         .map(({ id }) => getScope(id))
         .filter((s) => !s.isLoaded);
 
-      return await Promise.all(
-        newlyOpened.map(async (scope) => ({
-          ...scope,
-          resources: await adminClient.clients.listAllResourcesByScope({
-            id: clientId,
-            scopeId: scope.id!,
-          }),
-          isLoaded: true,
-        }))
+      return Promise.all(
+        newlyOpened.map(async (scope) => {
+          const [resources, permissions] = await Promise.all([
+            adminClient.clients.listAllResourcesByScope({
+              id: clientId,
+              scopeId: scope.id!,
+            }),
+            adminClient.clients.listAllPermissionsByScope({
+              id: clientId,
+              scopeId: scope.id!,
+            }),
+          ]);
+
+          return {
+            ...scope,
+            resources,
+            permissions,
+            isLoaded: true,
+          };
+        })
       );
     },
     (resourcesScopes) => {
@@ -201,7 +186,6 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
                 <Tr>
                   <Th />
                   <Th>{t("common:name")}</Th>
-                  <Th>{t("common:permissions")}</Th>
                   <Th />
                   <Th />
                 </Tr>
@@ -233,9 +217,6 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
                         {scope.name}
                       </Link>
                     </Td>
-                    <Td>
-                      <PermissionsRenderer row={scope} />
-                    </Td>
                     <Td width={10}>
                       <Button
                         variant="link"
@@ -276,7 +257,7 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
                     <Td />
                     <Td colSpan={4}>
                       <ExpandableRowContent>
-                        {isExpanded(scope.id) && (
+                        {isExpanded(scope.id) && scope.isLoaded ? (
                           <DescriptionList
                             isHorizontal
                             className="keycloak_resource_details"
@@ -307,6 +288,8 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
                               }
                             />
                           </DescriptionList>
+                        ) : (
+                          <KeycloakSpinner />
                         )}
                       </ExpandableRowContent>
                     </Td>