keycloak · edewit · Jun 13, 2025
@@ -1,18 +1,18 @@
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
-import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
 import {
-  SelectControl,
-  SelectControlOption,
+  HelpItem,
   SelectVariant,
   useFetch,
 } from "@keycloak/keycloak-ui-shared";
+import { Button, FormGroup } from "@patternfly/react-core";
+import { MinusCircleIcon } from "@patternfly/react-icons";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import type { ComponentProps } from "../dynamic/components";
-import { PermissionsConfigurationTabsParams } from "../../permissions-configuration/routes/PermissionsConfigurationTabs";
-import { useParams } from "react-router-dom";
-import { useFormContext, useWatch } from "react-hook-form";
+import { ClientSelectModal } from "./ClientSelectModal";
 
 type ClientSelectProps = Omit<ComponentProps, "convertToName"> & {
   variant?: `${SelectVariant}`;
@@ -30,19 +30,16 @@ export const ClientSelect = ({
   isRequired,
   variant = "typeahead",
   clientKey = "clientId",
-  placeholderText,
 }: ClientSelectProps) => {
   const { adminClient } = useAdminClient();
-
   const { t } = useTranslation();
 
-  const [clients, setClients] = useState<ClientRepresentation[]>([]);
-  const [selectedClients, setSelectedClients] =
-    useState<SelectControlOption[]>();
-  const [search, setSearch] = useState("");
-  const { tab } = useParams<PermissionsConfigurationTabsParams>();
+  const [selectedClients, setSelectedClients] = useState<
+    ClientRepresentation[]
+  >([]);
+  const [open, setOpen] = useState(false);
 
-  const { control } = useFormContext();
+  const { control, setValue } = useFormContext();
   const value = useWatch({
     control,
     name: name!,
@@ -56,21 +53,6 @@ export const ClientSelect = ({
     return value || [];
   };
 
-  useFetch(
-    () => {
-      const params: ClientQuery = {
-        max: 20,
-      };
-      if (search) {
-        params.clientId = search;
-        params.search = true;
-      }
-      return adminClient.clients.find(params);
-    },
-    (clients) => setClients(clients),
-    [search],
-  );
-
   useFetch(
     () => {
       const values = getValue().map(async (clientId) => {
@@ -83,41 +65,88 @@ export const ClientSelect = ({
       return Promise.all(values);
     },
     (clients) => {
-      setSelectedClients(
-        clients
-          .filter((client) => !!client)
-          .map((client) => ({
-            key: client[clientKey] as string,
-            value: client.clientId!,
-          })),
-      );
+      setSelectedClients(clients.filter((c) => !!c));
     },
     [],
   );
 
+  const isSelectOne = variant === "typeahead";
+
+  const select = (clients: ClientRepresentation[]) => {
+    setSelectedClients(clients);
+    if (isSelectOne) {
+      setValue(name!, clients[0][clientKey]);
+    } else
+      setValue(
+        name!,
+        clients.map((c) => c[clientKey]),
+      );
+  };
+
   return (
-    <SelectControl
-      name={name!}
-      label={tab !== "evaluation" ? t(label!) : t("client")}
-      labelIcon={tab !== "evaluation" ? t(helpText!) : t("selectClient")}
-      controller={{
-        defaultValue: defaultValue || "",
-        rules: {
-          required: {
-            value: isRequired || false,
-            message: t("required"),
-          },
-        },
-      }}
-      onFilter={(value) => setSearch(value)}
-      variant={variant}
-      isDisabled={isDisabled}
-      selectedOptions={selectedClients}
-      options={clients.map((client) => ({
-        key: client[clientKey] as string,
-        value: client.clientId!,
-      }))}
-      placeholderText={placeholderText}
-    />
+    <FormGroup
+      label={t(label!)}
+      fieldId={name}
+      labelIcon={
+        helpText ? (
+          <HelpItem helpText={t(helpText)} fieldLabelId={name!} />
+        ) : undefined
+      }
+      isRequired={isRequired}
+    >
+      <Button
+        variant="secondary"
+        isDisabled={isDisabled}
+        onClick={() => setOpen(true)}
+      >
+        {t("selectClient")}
+      </Button>
+      {open && (
+        <ClientSelectModal
+          isRadio={variant === "typeahead"}
+          onClose={() => setOpen(false)}
+          onSelect={select}
+        />
+      )}
+      {selectedClients.length > 0 && (
+        <Table>
+          <Thead>
+            <Tr>
+              <Th>{t(clientKey)}</Th>
+              <Th aria-hidden="true" />
+            </Tr>
+          </Thead>
+          <Tbody>
+            {selectedClients.map((client) => (
+              <Tr key={client.id}>
+                <Td>{client.clientId}</Td>
+                <Td>
+                  <Button
+                    variant="link"
+                    icon={<MinusCircleIcon />}
+                    onClick={() => {
+                      if (isSelectOne) {
+                        setValue(name!, client[clientKey]);
+                      } else
+                        setValue(
+                          name!,
+                          value.filter(
+                            (id: string) => id !== client[clientKey],
+                          ),
+                        );
+                      setSelectedClients(
+                        selectedClients.filter(
+                          (c) => c[clientKey] !== client[clientKey],
+                        ),
+                      );
+                    }}
+                  />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      )}
+    </FormGroup>
   );
 };
@@ -0,0 +1,74 @@
+import ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
+import { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
+import { KeycloakDataTable } from "@keycloak/keycloak-ui-shared";
+import { Button, Modal } from "@patternfly/react-core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAdminClient } from "../../admin-client";
+
+type ClientSelectModalProps = {
+  onClose: () => void;
+  onSelect: (clients: ClientRepresentation[]) => void;
+  isRadio?: boolean;
+};
+
+export const ClientSelectModal = ({
+  onClose,
+  onSelect,
+  isRadio = false,
+}: ClientSelectModalProps) => {
+  const { t } = useTranslation();
+  const { adminClient } = useAdminClient();
+  const [selectedClients, setSelectedClients] = useState<
+    ClientRepresentation[]
+  >([]);
+
+  const loader = (first?: number, max?: number, search?: string) => {
+    const params: ClientQuery = {
+      first: first!,
+      max: max!,
+    };
+
+    if (search) {
+      params.clientId = search;
+      params.search = true;
+    }
+
+    return adminClient.clients.find(params);
+  };
+
+  return (
+    <Modal
+      title={t("selectClient")}
+      variant="medium"
+      isOpen
+      onClose={onClose}
+      actions={[
+        <Button
+          data-testid="confirm"
+          key="confirm"
+          onClick={() => {
+            onSelect(selectedClients);
+            onClose();
+          }}
+        >
+          {t("add")}
+        </Button>,
+        <Button key="close" onClick={onClose} variant="secondary">
+          {t("close")}
+        </Button>,
+      ]}
+    >
+      <KeycloakDataTable
+        searchPlaceholderKey="searchForClient"
+        isPaginated
+        isRadio={isRadio}
+        ariaLabelKey="clientList"
+        canSelectAll
+        onSelect={setSelectedClients}
+        loader={loader}
+        columns={[{ name: "clientId" }, { name: "name" }]}
+      />
+    </Modal>
+  );
+};