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

import {
  AlertVariant,
  ButtonVariant,
  Card,
  CardTitle,
  DropdownItem,
  Gallery,
  GalleryItem,
  PageSection,
  Split,
  SplitItem,
  Text,
  TextContent,
  TextVariants,
} from "@patternfly/react-core";
import { DatabaseIcon } from "@patternfly/react-icons";
import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom-v5-compat";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ManagePriorityDialog } from "./ManagePriorityDialog";
import { KeycloakCard } from "../components/keycloak-card/KeycloakCard";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { toUpperCase } from "../util";
import { toProvider } from "./routes/NewProvider";

import "./user-federation.css";
import helpUrls from "../help-urls";

export default function UserFederationSection() {
  const [userFederations, setUserFederations] =
    useState<ComponentRepresentation[]>();
  const { addAlert, addError } = useAlerts();
  const { t } = useTranslation("user-federation");
  const { realm } = useRealm();
  const { adminClient } = useAdminClient();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());

  const navigate = useNavigate();

  const [manageDisplayDialog, setManageDisplayDialog] = useState(false);

  const providers =
    useServerInfo().componentTypes?.[
      "org.keycloak.storage.UserStorageProvider"
    ] || [];

  useFetch(
    async () => {
      const realmModel = await adminClient.realms.findOne({ realm });
      const testParams: { [name: string]: string | number } = {
        parentId: realmModel!.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(toProvider({ realm, providerId: p.id!, id: "new" }))
          }
        >
          {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: "common:delete",
    continueButtonVariant: ButtonVariant.danger,
    onConfirm: async () => {
      try {
        await adminClient.components.del({ id: currentCard });
        refresh();
        addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
      } catch (error) {
        addError("user-federation: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;
  };

  if (userFederations) {
    cards = userFederations.sort(cardSorter).map((userFederation, index) => (
      <GalleryItem
        key={index}
        className="keycloak-admin--user-federation__gallery-item"
      >
        <KeycloakCard
          id={userFederation.id!}
          dropdownItems={[
            <DropdownItem
              key={`${index}-cardDelete`}
              onClick={() => {
                toggleDeleteForCard(userFederation.id!);
              }}
              data-testid="card-delete"
            >
              {t("common:delete")}
            </DropdownItem>,
          ]}
          providerId={userFederation.providerId!}
          title={userFederation.name!}
          footerText={toUpperCase(userFederation.providerId!)}
          labelText={
            userFederation.config?.["enabled"]?.[0] !== "false"
              ? `${t("common:enabled")}`
              : `${t("common: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="user-federation:userFederationExplain"
        helpUrl={helpUrls.userFederationUrl}
        {...(userFederations && userFederations.length > 0
          ? {
              lowerDropdownItems: ufAddProviderDropdownItems,
              lowerDropdownMenuTitle: "user-federation: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-u-mt-lg" component={TextVariants.h2}>
                {t("providers")}
              </Text>
            </TextContent>
            <hr className="pf-u-mb-lg" />
            <Gallery hasGutter>
              {providers.map((p) => (
                <Card
                  key={p.id}
                  className="keycloak-empty-state-card"
                  role="button"
                  isHoverable
                  onClick={() =>
                    navigate(toProvider({ realm, providerId: p.id! }))
                  }
                  data-testid={`${p.id}-card`}
                >
                  <CardTitle>
                    <Split hasGutter>
                      <SplitItem>
                        <DatabaseIcon size="lg" />
                      </SplitItem>
                      <SplitItem isFilled>
                        {t("addProvider", {
                          provider: toUpperCase(p.id!),
                          count: 4,
                        })}
                      </SplitItem>
                    </Split>
                  </CardTitle>
                </Card>
              ))}
            </Gallery>
          </>
        )}
      </PageSection>
    </>
  );
}