keycloak-scim/js/apps/admin-ui/src/user-federation/UserFederationSection.tsx

244 lines
7.5 KiB
TypeScript
Raw Normal View History

import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
import {
AlertVariant,
ButtonVariant,
CardTitle,
remove all use of deprecated Select and Dropdown (#29270) * removed deprecated select Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * some more deprecation removal working towards fixing: #28197 Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to use new api Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * more deprecation removal Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed merge error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fix tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * small fix Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed merge error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * no more default text for SelectOption Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to use id Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed dropdown in keycloakCard and test fixes Signed-off-by: mfrances <mfrances@redhat.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed lint error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fix dropdown/select related test failures Signed-off-by: mfrances <mfrances@redhat.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * i18n label Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fix test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * removed Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed merge error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> Signed-off-by: mfrances <mfrances@redhat.com> Co-authored-by: mfrances <mfrances@redhat.com>
2024-05-30 11:45:58 +00:00
DropdownItem,
Gallery,
GalleryItem,
Icon,
PageSection,
Split,
SplitItem,
Text,
TextContent,
TextVariants,
} from "@patternfly/react-core";
import { DatabaseIcon } from "@patternfly/react-icons";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
2023-01-18 12:09:49 +00:00
import { useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ClickableCard } from "../components/keycloak-card/ClickableCard";
import { KeycloakCard } from "../components/keycloak-card/KeycloakCard";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import helpUrls from "../help-urls";
import { toUpperCase } from "../util";
import { useFetch } from "../utils/useFetch";
import { ManagePriorityDialog } from "./ManagePriorityDialog";
import { toCustomUserFederation } from "./routes/CustomUserFederation";
import { toNewCustomUserFederation } from "./routes/NewCustomUserFederation";
import { toUserFederationKerberos } from "./routes/UserFederationKerberos";
import { toUserFederationLdap } from "./routes/UserFederationLdap";
import "./user-federation.css";
2021-02-09 18:01:23 +00:00
2021-10-29 16:11:06 +00:00
export default function UserFederationSection() {
const { adminClient } = useAdminClient();
const [userFederations, setUserFederations] =
useState<ComponentRepresentation[]>();
const { addAlert, addError } = useAlerts();
const { t } = useTranslation();
initial ui for organizations (#29643) * initial screen Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * more screens Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added members tab Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added the backend Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added member add / invite models Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * initial version of the identity provider section Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * add link and unlink providers Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * small fix Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * PR comments Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Do not validate broker domain when the domain is an empty string Closes #29759 Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added filter and value Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added first name last name Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * refresh menu when realm organization is changed Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to record Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to form data Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed lint error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Changing name of invitation parameters Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Chancing name of parameters on the client Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Enable organization at the realm before running tests Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Domain help message Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Handling model validation errors when creating organizations Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Message key for organizationDetails Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Do not change kc.org attribute on group Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * add realm into the context Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Changing button in invitation model to use Send instead of Save Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Better message when validating the organization domain Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Fixing compilation error after rebase Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * removed wait as it no longer required and skip flacky test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * skip tests that are flaky Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * stabilize user create test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Co-authored-by: Pedro Igor <pigor.craveiro@gmail.com>
2024-05-29 12:34:02 +00:00
const { realm, realmRepresentation } = useRealm();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const navigate = useNavigate();
2021-02-09 18:01:23 +00:00
const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
const providers =
useServerInfo().componentTypes?.[
"org.keycloak.storage.UserStorageProvider"
] || [];
useFetch(
async () => {
const testParams: { [name: string]: string | number } = {
initial ui for organizations (#29643) * initial screen Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * more screens Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added members tab Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added the backend Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added member add / invite models Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * initial version of the identity provider section Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * add link and unlink providers Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * small fix Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * PR comments Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Do not validate broker domain when the domain is an empty string Closes #29759 Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added filter and value Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * added first name last name Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * refresh menu when realm organization is changed Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to record Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * changed to form data Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed lint error Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Changing name of invitation parameters Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Chancing name of parameters on the client Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Enable organization at the realm before running tests Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Domain help message Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Handling model validation errors when creating organizations Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Message key for organizationDetails Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Do not change kc.org attribute on group Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * add realm into the context Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * tests Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Changing button in invitation model to use Send instead of Save Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Better message when validating the organization domain Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * Fixing compilation error after rebase Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * fixed test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * removed wait as it no longer required and skip flacky test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * skip tests that are flaky Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> * stabilize user create test Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> --------- Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com> Signed-off-by: Pedro Igor <pigor.craveiro@gmail.com> Co-authored-by: Pedro Igor <pigor.craveiro@gmail.com>
2024-05-29 12:34:02 +00:00
parentId: realmRepresentation!.id!,
type: "org.keycloak.storage.UserStorageProvider",
};
return adminClient.components.find(testParams);
},
(userFederations) => {
setUserFederations(userFederations);
},
[key],
);
const ufAddProviderDropdownItems = useMemo(
() =>
providers.map((p) => (
<DropdownItem
key={p.id}
onClick={() =>
navigate(toNewCustomUserFederation({ realm, providerId: p.id! }))
}
>
2022-01-08 09:27:57 +00:00
{p.id.toUpperCase() == "LDAP"
? p.id.toUpperCase()
: toUpperCase(p.id)}
</DropdownItem>
)),
[],
);
const lowerButtonProps = {
variant: "link",
onClick: () => setManageDisplayDialog(true),
lowerButtonTitle: t("managePriorities"),
};
let cards;
const [currentCard, setCurrentCard] = useState("");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("userFedDeleteConfirmTitle"),
messageKey: t("userFedDeleteConfirm"),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({ id: currentCard });
refresh();
addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
} catch (error) {
addError("userFedDeleteError", error);
}
},
});
const toggleDeleteForCard = (id: string) => {
setCurrentCard(id);
toggleDeleteDialog();
};
const cardSorter = (card1: any, card2: any) => {
const a = `${card1.name}`;
const b = `${card2.name}`;
return a < b ? -1 : 1;
};
const toDetails = (providerId: string, id: string) => {
switch (providerId) {
case "ldap":
return toUserFederationLdap({ realm, id });
case "kerberos":
return toUserFederationKerberos({ realm, id });
default:
return toCustomUserFederation({ realm, providerId, id });
}
};
if (userFederations) {
cards = userFederations.sort(cardSorter).map((userFederation, index) => (
<GalleryItem
key={index}
className="keycloak-admin--user-federation__gallery-item"
>
<KeycloakCard
to={toDetails(userFederation.providerId!, userFederation.id!)}
dropdownItems={[
<DropdownItem
key={`${index}-cardDelete`}
onClick={() => {
toggleDeleteForCard(userFederation.id!);
}}
data-testid="card-delete"
>
{t("delete")}
</DropdownItem>,
]}
title={userFederation.name!}
footerText={toUpperCase(userFederation.providerId!)}
labelText={
userFederation.config?.["enabled"]?.[0] !== "false"
? `${t("enabled")}`
: `${t("disabled")}`
}
labelColor={
userFederation.config?.["enabled"]?.[0] !== "false"
? "blue"
: "gray"
}
/>
</GalleryItem>
));
}
return (
<>
<DeleteConfirm />
{manageDisplayDialog && userFederations && (
<ManagePriorityDialog
onClose={() => setManageDisplayDialog(false)}
components={userFederations.filter((p) => p.config?.enabled)}
/>
)}
<ViewHeader
titleKey="userFederation"
subKey="userFederationExplain"
helpUrl={helpUrls.userFederationUrl}
{...(userFederations && userFederations.length > 0
? {
lowerDropdownItems: ufAddProviderDropdownItems,
lowerDropdownMenuTitle: "addNewProvider",
lowerButton: lowerButtonProps,
}
: {})}
/>
<PageSection>
{userFederations && userFederations.length > 0 ? (
<Gallery hasGutter>{cards}</Gallery>
) : (
<>
<TextContent>
<Text component={TextVariants.p}>{t("getStarted")}</Text>
</TextContent>
<TextContent>
<Text className="pf-v5-u-mt-lg" component={TextVariants.h2}>
{t("providers")}
</Text>
</TextContent>
<hr className="pf-v5-u-mb-lg" />
<Gallery hasGutter>
{providers.map((p) => (
<ClickableCard
key={p.id}
onClick={() =>
navigate(
toNewCustomUserFederation({ realm, providerId: p.id! }),
)
}
data-testid={`${p.id}-card`}
>
<CardTitle>
<Split hasGutter>
<SplitItem>
<Icon size="lg">
<DatabaseIcon />
</Icon>
</SplitItem>
<SplitItem isFilled>
{t("addProvider", {
provider: toUpperCase(p.id!),
count: 4,
})}
</SplitItem>
</Split>
</CardTitle>
</ClickableCard>
))}
</Gallery>
</>
)}
</PageSection>
</>
);
2021-10-29 16:11:06 +00:00
}