From 808883c34dd8689d3b9097e271c4561ec1957f92 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 16 Sep 2024 13:34:29 +0200 Subject: [PATCH] added filter to idp table and manage order (#32889) * added filter to idp table and manage order fixes: #32780 Signed-off-by: Erik Jan de Wit * Update js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties Co-authored-by: Stefan Guilhen Signed-off-by: Erik Jan de Wit --------- Signed-off-by: Erik Jan de Wit Signed-off-by: Erik Jan de Wit Co-authored-by: Stefan Guilhen --- .../admin/messages/messages_en.properties | 2 + .../IdentityProvidersSection.tsx | 43 ++++- .../identity-providers/ManageOrderDialog.tsx | 20 +- .../src/organizations/IdentityProviders.tsx | 174 ++++++++++-------- 4 files changed, 158 insertions(+), 81 deletions(-) diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties index 0b1101ed17..ca1b57b1e3 100644 --- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties +++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties @@ -1481,6 +1481,8 @@ mapperTypeMsadLdsUserAccountControlMapper=msad-user-account-control-mapper realmSettingsExplain=Realm settings are settings that control the options for users, applications, roles, and groups in the current realm. mappingUpdatedError=Could not update mapping\: '{{error}}' manageDisplayOrder=Manage display order +emptyRealmBasedIdps=No realm based identity providers are configured for this realm. +hideOrganizationLinkedIdps=Hide organization linked identity providers exactSearch=Exact search value=Value filenamePlaceholder=Upload a PEM file or paste key below diff --git a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx index c42d71b364..69cda48599 100644 --- a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx +++ b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx @@ -1,12 +1,20 @@ import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation"; import type { IdentityProvidersQuery } from "@keycloak/keycloak-admin-client/lib/resources/identityProviders"; -import { IconMapper, useAlerts, useFetch } from "@keycloak/keycloak-ui-shared"; +import { + Action, + IconMapper, + KeycloakDataTable, + ListEmptyState, + useAlerts, + useFetch, +} from "@keycloak/keycloak-ui-shared"; import { AlertVariant, Badge, Button, ButtonVariant, CardTitle, + Checkbox, Dropdown, DropdownGroup, DropdownItem, @@ -28,7 +36,6 @@ import { Link, useNavigate } from "react-router-dom"; import { useAdminClient } from "../admin-client"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; import { ClickableCard } from "../components/keycloak-card/ClickableCard"; -import { Action, KeycloakDataTable } from "@keycloak/keycloak-ui-shared"; import { ViewHeader } from "../components/view-header/ViewHeader"; import { useRealm } from "../context/realm-context/RealmContext"; import { useServerInfo } from "../context/server-info/ServerInfoProvider"; @@ -102,6 +109,7 @@ export default function IdentityProvidersSection() { const [key, setKey] = useState(0); const refresh = () => setKey(key + 1); + const [hide, setHide] = useState(false); const [addProviderOpen, setAddProviderOpen] = useState(false); const [manageDisplayDialog, setManageDisplayDialog] = useState(false); const [hasProviders, setHasProviders] = useState(false); @@ -121,6 +129,7 @@ export default function IdentityProvidersSection() { const params: IdentityProvidersQuery = { first: first!, max: max!, + realmOnly: hide, }; if (search) { params.search = search; @@ -184,6 +193,7 @@ export default function IdentityProvidersSection() { {manageDisplayDialog && ( { setManageDisplayDialog(false); refresh(); @@ -243,6 +253,18 @@ export default function IdentityProvidersSection() { searchPlaceholderKey="searchForProvider" toolbarItem={ <> + + { + setHide(check); + refresh(); + }} + /> + { + setHide(false); + refresh(); + }, + type: ButtonVariant.link, + }, + ]} + /> + } /> )} diff --git a/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx b/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx index b43336da6d..e5f33d2617 100644 --- a/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx +++ b/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx @@ -1,5 +1,9 @@ import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation"; -import { useAlerts, useFetch } from "@keycloak/keycloak-ui-shared"; +import { + KeycloakSpinner, + useAlerts, + useFetch, +} from "@keycloak/keycloak-ui-shared"; import { Button, ButtonVariant, @@ -23,13 +27,18 @@ import { sortBy } from "lodash-es"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useAdminClient } from "../admin-client"; -import { KeycloakSpinner } from "@keycloak/keycloak-ui-shared"; type ManageOrderDialogProps = { + orgId?: string; + hideRealmBasedIdps?: boolean; onClose: () => void; }; -export const ManageOrderDialog = ({ onClose }: ManageOrderDialogProps) => { +export const ManageOrderDialog = ({ + orgId, + hideRealmBasedIdps = false, + onClose, +}: ManageOrderDialogProps) => { const { adminClient } = useAdminClient(); const { t } = useTranslation(); @@ -67,7 +76,10 @@ export const ManageOrderDialog = ({ onClose }: ManageOrderDialogProps) => { }; useFetch( - () => adminClient.identityProviders.find(), + () => + orgId + ? adminClient.organizations.listIdentityProviders({ orgId }) + : adminClient.identityProviders.find({ realmOnly: hideRealmBasedIdps }), (providers) => { setProviders(providers); setOrder( diff --git a/js/apps/admin-ui/src/organizations/IdentityProviders.tsx b/js/apps/admin-ui/src/organizations/IdentityProviders.tsx index 306ef3cf05..375a22d349 100644 --- a/js/apps/admin-ui/src/organizations/IdentityProviders.tsx +++ b/js/apps/admin-ui/src/organizations/IdentityProviders.tsx @@ -1,6 +1,7 @@ import IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation"; import { KeycloakDataTable, + ListEmptyState, useAlerts, useFetch, } from "@keycloak/keycloak-ui-shared"; @@ -17,7 +18,7 @@ import { useTranslation } from "react-i18next"; import { useParams } from "react-router-dom"; import { useAdminClient } from "../admin-client"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; -import { ListEmptyState } from "@keycloak/keycloak-ui-shared"; +import { ManageOrderDialog } from "../identity-providers/ManageOrderDialog"; import useToggle from "../utils/useToggle"; import { LinkIdentityProviderModal } from "./LinkIdentityProviderModal"; import { EditOrganizationParams } from "./routes/EditOrganization"; @@ -74,6 +75,7 @@ export const IdentityProviders = () => { const [key, setKey] = useState(0); const refresh = () => setKey(key + 1); + const [manageDisplayDialog, setManageDisplayDialog] = useState(false); const [hasProviders, setHasProviders] = useState(false); const [selectedRow, setSelectedRow] = useState(); @@ -111,88 +113,110 @@ export const IdentityProviders = () => { }); return ( - - - {open && ( - + {manageDisplayDialog && ( + { - toggleOpen(); + setManageDisplayDialog(false); refresh(); }} /> )} - {!hasProviders ? ( - - ) : ( - - + + + + + + } + actions={[ + { + title: t("edit"), + onRowClick: (row) => { + setSelectedRow(row); toggleOpen(); - }} - > - {t("linkIdentityProvider")} - - - } - actions={[ - { - title: t("edit"), - onRowClick: (row) => { - setSelectedRow(row); - toggleOpen(); + }, }, - }, - { - title: t("unLinkIdentityProvider"), - onRowClick: (row) => { - setSelectedRow(row); - toggleUnlinkDialog(); + { + title: t("unLinkIdentityProvider"), + onRowClick: (row) => { + setSelectedRow(row); + toggleUnlinkDialog(); + }, }, - }, - ]} - columns={[ - { - name: "alias", - }, - { - name: "config['kc.org.domain']", - displayKey: "domain", - }, - { - name: "providerId", - displayKey: "providerDetails", - }, - { - name: "config['kc.org.broker.public']", - displayKey: "shownOnLoginPage", - cellRenderer: (row) => ( - - ), - }, - ]} - emptyState={ - - } - /> - )} - + ]} + columns={[ + { + name: "alias", + }, + { + name: "config['kc.org.domain']", + displayKey: "domain", + }, + { + name: "providerId", + displayKey: "providerDetails", + }, + { + name: "config['kc.org.broker.public']", + displayKey: "shownOnLoginPage", + cellRenderer: (row) => ( + + ), + }, + ]} + emptyState={ + + } + /> + )} + + ); };