From c7be03b10356a556ba272851ad08aa2e4efb36b1 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 11 Dec 2023 14:38:20 +0100 Subject: [PATCH] Idp pager UI (#24933) * Identity Provider Pager (UI) Closes #21074 Signed-off-by: Andreas Kozadinos * fixed the PR Signed-off-by: Erik Jan de Wit * Update js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx Co-authored-by: Jon Koops * Update js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx Co-authored-by: Jon Koops * Update js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx Co-authored-by: Jon Koops --------- Signed-off-by: Andreas Kozadinos Signed-off-by: Erik Jan de Wit Co-authored-by: Andreas Kozadinos Co-authored-by: Jon Koops --- .../IdentityProvidersSection.tsx | 48 +++++++++---------- .../identity-providers/ManageOrderDialog.tsx | 30 ++++++++---- .../src/resources/identityProviders.ts | 14 +++++- 3 files changed, 56 insertions(+), 36 deletions(-) diff --git a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx index 4ef9a39601..ce7b9f3b12 100644 --- a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx +++ b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx @@ -1,4 +1,5 @@ import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation"; +import type { IdentityProvidersQuery } from "@keycloak/keycloak-admin-client/lib/resources/identityProviders"; import { AlertVariant, Badge, @@ -11,7 +12,6 @@ import { DropdownToggle, Gallery, PageSection, - Spinner, Split, SplitItem, Text, @@ -24,7 +24,6 @@ import { Fragment, useState } from "react"; import { useTranslation } from "react-i18next"; import { Link, useNavigate } from "react-router-dom"; import { IconMapper } from "ui-shared"; - import { adminClient } from "../admin-client"; import { useAlerts } from "../components/alert/Alerts"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; @@ -84,26 +83,31 @@ export default function IdentityProvidersSection() { const [addProviderOpen, setAddProviderOpen] = useState(false); const [manageDisplayDialog, setManageDisplayDialog] = useState(false); - const [providers, setProviders] = - useState(); + const [hasProviders, setHasProviders] = useState(false); const [selectedProvider, setSelectedProvider] = useState(); const { addAlert, addError } = useAlerts(); useFetch( - async () => { - const provider = await adminClient.realms.findOne({ realm }); - if (!provider) { - throw new Error(t("notFound")); - } - return provider.identityProviders!; - }, + async () => adminClient.identityProviders.find({ max: 1 }), (providers) => { - setProviders(sortBy(providers, ["config.guiOrder", "alias"])); + setHasProviders(providers.length === 1); }, [key], ); + const loader = async (first?: number, max?: number, search?: string) => { + const params: IdentityProvidersQuery = { + first: first!, + max: max!, + }; + if (search) { + params.search = search; + } + const providers = await adminClient.identityProviders.find(params); + return sortBy(providers, ["config.guiOrder", "alias"]); + }; + const navigateToCreate = (providerId: string) => navigate( toIdentityProviderCreate({ @@ -145,9 +149,6 @@ export default function IdentityProvidersSection() { await adminClient.identityProviders.del({ alias: selectedProvider!.alias!, }); - setProviders([ - ...providers!.filter((p) => p.alias !== selectedProvider?.alias), - ]); refresh(); addAlert(t("deletedSuccessIdentityProvider"), AlertVariant.success); } catch (error) { @@ -156,10 +157,6 @@ export default function IdentityProvidersSection() { }, }); - if (!providers) { - return ; - } - return ( <> @@ -169,7 +166,6 @@ export default function IdentityProvidersSection() { setManageDisplayDialog(false); refresh(); }} - providers={providers.filter((p) => p.enabled)} /> )} - {providers.length === 0 && ( + {!hasProviders && ( <> {t("getStarted")} @@ -216,9 +212,11 @@ export default function IdentityProvidersSection() { ))} )} - {providers.length !== 0 && ( + {hasProviders && ( void; }; -export const ManageOrderDialog = ({ - providers, - onClose, -}: ManageOrderDialogProps) => { +export const ManageOrderDialog = ({ onClose }: ManageOrderDialogProps) => { const { t } = useTranslation(); const { addAlert, addError } = useAlerts(); const [alias, setAlias] = useState(""); const [liveText, setLiveText] = useState(""); - const [order, setOrder] = useState( - providers.map((provider) => provider.alias!), - ); + const [providers, setProviders] = + useState(); + const [order, setOrder] = useState([]); const onDragStart = (id: string) => { setAlias(id); @@ -57,11 +54,24 @@ export const ManageOrderDialog = ({ setOrder(providerOrder); }; + useFetch( + () => adminClient.identityProviders.find(), + (providers) => { + setProviders(sortBy(providers, ["config.guiOrder", "alias"])); + setOrder(providers.map((provider) => provider.alias!)); + }, + [], + ); + + if (!providers) { + return ; + } + return ( { /** * Identity provider * https://www.keycloak.org/docs-api/11.0/rest-api/#_identity_providers_resource */ - public find = this.makeRequest<{}, IdentityProviderRepresentation[]>({ + public find = this.makeRequest< + IdentityProvidersQuery, + IdentityProviderRepresentation[] + >({ method: "GET", path: "/instances", });