Changed the load to also include the existing values (#2507)

src/clients/authorization/PermissionDetails.tsx

@@ -296,8 +296,8 @@ export default function PermissionDetails() {
               >
                 <ResourcesPolicySelect
                   name="resources"
-                  searchFunction="listResources"
                   clientId={id}
+                  permissionId={permissionId}
                   preSelected={
                     permissionType === "scope" ? undefined : selectedId
                   }
@@ -343,8 +343,8 @@ export default function PermissionDetails() {
             >
               <ResourcesPolicySelect
                 name="policies"
-                searchFunction="listPolicies"
                 clientId={id}
+                permissionId={permissionId}
               />
             </FormGroup>
             <FormGroup

src/clients/authorization/ResourcesPolicySelect.tsx

@@ -3,14 +3,17 @@ import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
 import { Select, SelectOption, SelectVariant } from "@patternfly/react-core";
 
+import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceRepresentation";
 import type PolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyRepresentation";
 import type { Clients } from "@keycloak/keycloak-admin-client/lib/resources/clients";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 
+type Type = "resources" | "policies";
+
 type ResourcesPolicySelectProps = {
-  name: keyof PolicyRepresentation;
+  name: Type;
   clientId: string;
-  searchFunction: keyof Pick<Clients, "listPolicies" | "listResources">;
+  permissionId?: string;
   variant?: SelectVariant;
   preSelected?: string;
   isRequired?: boolean;
@@ -21,10 +24,31 @@ type Policies = {
   name?: string;
 };
 
+type TypeMapping = {
+  [key in Type]: {
+    searchFunction: keyof Pick<Clients, "listPolicies" | "listResources">;
+    fetchFunction: keyof Pick<
+      Clients,
+      "getAssociatedPolicies" | "getAssociatedResources"
+    >;
+  };
+};
+
+const typeMapping: TypeMapping = {
+  resources: {
+    searchFunction: "listResources",
+    fetchFunction: "getAssociatedResources",
+  },
+  policies: {
+    searchFunction: "listPolicies",
+    fetchFunction: "getAssociatedPolicies",
+  },
+};
+
 export const ResourcesPolicySelect = ({
   name,
-  searchFunction,
   clientId,
+  permissionId,
   variant = SelectVariant.typeaheadMulti,
   preSelected,
   isRequired = false,
@@ -40,20 +64,40 @@ export const ResourcesPolicySelect = ({
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
 
+  const functions = typeMapping[name];
+
+  const convert = (
+    p: PolicyRepresentation | ResourceRepresentation
+  ): Policies => ({
+    id: "_id" in p ? p._id : "id" in p ? p.id : undefined,
+    name: p.name,
+  });
+
   useFetch(
     async () =>
       (
-        await adminClient.clients[searchFunction](
+        await Promise.all([
-          Object.assign(
+          adminClient.clients[functions.searchFunction](
-            { id: clientId, first: 0, max: 10 },
+            Object.assign(
-            search === "" ? null : { name: search }
+              { id: clientId, first: 0, max: 10 },
-          )
+              search === "" ? null : { name: search }
-        )
+            )
-      ).map((p) => ({
+          ),
-        id: "_id" in p ? p._id : "id" in p ? p.id : undefined,
+          permissionId
-        name: p.name,
+            ? adminClient.clients[functions.fetchFunction]({
-      })),
+                id: clientId,
-    (policies) => setItems(policies),
+                permissionId,
+              })
+            : Promise.resolve([]),
+        ])
+      )
+        .flat()
+        .map(convert)
+        .filter(
+          ({ id }, index, self) =>
+            index === self.findIndex(({ id: otherId }) => id === otherId)
+        ),
+    setItems,
     [search]
   );
 

src/clients/authorization/policy/Aggregate.tsx

@@ -24,11 +24,7 @@ export const Aggregate = () => {
           />
         }
       >
-        <ResourcesPolicySelect
+        <ResourcesPolicySelect name="policies" clientId={id} />
-          name="policies"
-          searchFunction="listPolicies"
-          clientId={id}
-        />
       </FormGroup>
       <DecisionStrategySelect helpLabel="policyDecisionStagey" />
     </>