Introduced picker dialog (#4344)

apps/admin-ui/src/realm-settings/keys/KeysProvidersTab.tsx

@@ -5,9 +5,6 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   InputGroup,
   PageSection,
   TextInput,
@@ -30,6 +27,7 @@ import { KEY_PROVIDER_TYPE } from "../../util";
 import useToggle from "../../utils/useToggle";
 import { ProviderType, toKeyProvider } from "../routes/KeyProvider";
 import { KeyProviderModal } from "./key-providers/KeyProviderModal";
+import { KeyProvidersPicker } from "./key-providers/KeyProvidersPicker";
 
 import "../realm-settings-section.css";
 
@@ -65,9 +63,8 @@ export const KeysProvidersTab = ({
   const serverInfo = useServerInfo();
   const keyProviderComponentTypes =
     serverInfo.componentTypes?.[KEY_PROVIDER_TYPE] ?? [];
-  const providerTypes = keyProviderComponentTypes.map((item) => item.id);
 
-  const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
+  const [providerOpen, toggleProviderOpen] = useToggle();
   const [defaultUIDisplayName, setDefaultUIDisplayName] =
     useState<ProviderType>();
 
@@ -140,6 +137,16 @@ export const KeysProvidersTab = ({
 
   return (
     <>
+      {providerOpen && (
+        <KeyProvidersPicker
+          onClose={() => toggleProviderOpen()}
+          onConfirm={(provider) => {
+            handleModalToggle();
+            setDefaultUIDisplayName(provider as ProviderType);
+            toggleProviderOpen();
+          }}
+        />
+      )}
       {isCreateModalOpen && defaultUIDisplayName && (
         <KeyProviderModal
           providerType={defaultUIDisplayName}
@@ -175,35 +182,13 @@ export const KeysProvidersTab = ({
               </InputGroup>
             </ToolbarItem>
             <ToolbarItem>
-              <Dropdown
+              <Button
                 data-testid="addProviderDropdown"
                 className="add-provider-dropdown"
-                isOpen={providerDropdownOpen}
-                toggle={
-                  <DropdownToggle
-                    onToggle={(val) => setProviderDropdownOpen(val)}
-                    isPrimary
-                  >
-                    {t("addProvider")}
-                  </DropdownToggle>
-                }
-                dropdownItems={[
-                  providerTypes.map((item) => (
-                    <DropdownItem
-                      onClick={() => {
-                        handleModalToggle();
-
-                        setProviderDropdownOpen(false);
-                        setDefaultUIDisplayName(item as ProviderType);
-                      }}
-                      data-testid={`option-${item}`}
-                      key={item}
-                    >
-                      {item}
-                    </DropdownItem>
-                  )),
-                ]}
-              />
+                onClick={() => toggleProviderOpen()}
+              >
+                {t("addProvider")}
+              </Button>
             </ToolbarItem>
           </ToolbarGroup>
         </Toolbar>

apps/admin-ui/src/realm-settings/keys/key-providers/KeyProvidersPicker.tsx

@@ -0,0 +1,61 @@
+import {
+  DataList,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Modal,
+} from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";
+import { KEY_PROVIDER_TYPE } from "../../../util";
+
+type KeyProvidersPickerProps = {
+  onConfirm: (provider: string) => void;
+  onClose: () => void;
+};
+
+export const KeyProvidersPicker = ({
+  onConfirm,
+  onClose,
+}: KeyProvidersPickerProps) => {
+  const { t } = useTranslation("realm-settings");
+  const serverInfo = useServerInfo();
+  const keyProviderComponentTypes =
+    serverInfo.componentTypes?.[KEY_PROVIDER_TYPE] ?? [];
+  return (
+    <Modal variant="medium" title={t("addProvider")} isOpen onClose={onClose}>
+      <DataList
+        onSelectDataListItem={(id) => {
+          onConfirm(id);
+        }}
+        aria-label={t("addPredefinedMappers")}
+        isCompact
+      >
+        {keyProviderComponentTypes.map((provider) => (
+          <DataListItem
+            aria-label={provider.id}
+            key={provider.id}
+            id={provider.id}
+          >
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell
+                    key={`name-${provider.id}`}
+                    data-testid={`option-${provider.id}`}
+                  >
+                    {provider.id}
+                  </DataListCell>,
+                  <DataListCell width={2} key={`helpText-${provider.helpText}`}>
+                    {provider.helpText}
+                  </DataListCell>,
+                ]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+        ))}
+      </DataList>
+    </Modal>
+  );
+};