@keycloakify/keycloak-ui-shared 26.0.6001

package/keycloak-theme/shared/keycloak-ui-shared/controls/table/PaginatingTableToolbar.tsx

@@ -0,0 +1,106 @@
+import {
+  Pagination,
+  PaginationToggleTemplateProps,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { PropsWithChildren, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TableToolbar } from "./TableToolbar";
+
+type KeycloakPaginationProps = {
+  id?: string;
+  count: number;
+  first: number;
+  max: number;
+  onNextClick: (page: number) => void;
+  onPreviousClick: (page: number) => void;
+  onPerPageSelect: (max: number, first: number) => void;
+  variant?: "top" | "bottom";
+};
+
+type TableToolbarProps = KeycloakPaginationProps & {
+  searchTypeComponent?: ReactNode;
+  toolbarItem?: ReactNode;
+  subToolbar?: ReactNode;
+  inputGroupName?: string;
+  inputGroupPlaceholder?: string;
+  inputGroupOnEnter?: (value: string) => void;
+};
+
+const KeycloakPagination = ({
+  id,
+  variant = "top",
+  count,
+  first,
+  max,
+  onNextClick,
+  onPreviousClick,
+  onPerPageSelect,
+}: KeycloakPaginationProps) => {
+  const { t } = useTranslation();
+  const page = Math.round(first / max);
+  return (
+    <Pagination
+      widgetId={id}
+      titles={{
+        paginationAriaLabel: `${t("pagination")} ${variant} `,
+      }}
+      isCompact
+      toggleTemplate={({
+        firstIndex,
+        lastIndex,
+      }: PaginationToggleTemplateProps) => (
+        <b>
+          {firstIndex} - {lastIndex}
+        </b>
+      )}
+      itemCount={count + page * max}
+      page={page + 1}
+      perPage={max}
+      onNextClick={(_, p) => onNextClick((p - 1) * max)}
+      onPreviousClick={(_, p) => onPreviousClick((p - 1) * max)}
+      onPerPageSelect={(_, m, f) => onPerPageSelect(f - 1, m)}
+      variant={variant}
+    />
+  );
+};
+
+export const PaginatingTableToolbar = ({
+  count,
+  searchTypeComponent,
+  toolbarItem,
+  subToolbar,
+  children,
+  inputGroupName,
+  inputGroupPlaceholder,
+  inputGroupOnEnter,
+  ...rest
+}: PropsWithChildren<TableToolbarProps>) => {
+  return (
+    <TableToolbar
+      searchTypeComponent={searchTypeComponent}
+      toolbarItem={
+        <>
+          {toolbarItem}
+          <ToolbarItem variant="pagination">
+            <KeycloakPagination count={count} {...rest} />
+          </ToolbarItem>
+        </>
+      }
+      subToolbar={subToolbar}
+      toolbarItemFooter={
+        count !== 0 ? (
+          <ToolbarItem variant="pagination">
+            <KeycloakPagination count={count} variant="bottom" {...rest} />
+          </ToolbarItem>
+        ) : null
+      }
+      inputGroupName={inputGroupName}
+      inputGroupPlaceholder={inputGroupPlaceholder}
+      inputGroupOnEnter={inputGroupOnEnter}
+    >
+      {children}
+    </TableToolbar>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/table/TableToolbar.tsx

@@ -0,0 +1,92 @@
+import {
+  Divider,
+  InputGroup,
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { KeyboardEvent, PropsWithChildren, ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type TableToolbarProps = {
+  toolbarItem?: ReactNode;
+  subToolbar?: ReactNode;
+  toolbarItemFooter?: ReactNode;
+  searchTypeComponent?: ReactNode;
+  inputGroupName?: string;
+  inputGroupPlaceholder?: string;
+  inputGroupOnEnter?: (value: string) => void;
+};
+
+export const TableToolbar = ({
+  toolbarItem,
+  subToolbar,
+  toolbarItemFooter,
+  children,
+  searchTypeComponent,
+  inputGroupName,
+  inputGroupPlaceholder,
+  inputGroupOnEnter,
+}: PropsWithChildren<TableToolbarProps>) => {
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const onSearch = () => {
+    if (searchValue !== "") {
+      setSearchValue(searchValue);
+      inputGroupOnEnter?.(searchValue);
+    } else {
+      setSearchValue("");
+      inputGroupOnEnter?.("");
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onSearch();
+    }
+  };
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          {inputGroupName && (
+            <ToolbarItem>
+              <InputGroup data-testid={inputGroupName}>
+                {searchTypeComponent}
+                {inputGroupPlaceholder && (
+                  <SearchInput
+                    data-testid="table-search-input"
+                    placeholder={inputGroupPlaceholder}
+                    aria-label={t("search")}
+                    value={searchValue}
+                    onChange={(_, value) => {
+                      setSearchValue(value);
+                    }}
+                    onSearch={onSearch}
+                    onKeyDown={handleKeyDown}
+                    onClear={() => {
+                      setSearchValue("");
+                      inputGroupOnEnter?.("");
+                    }}
+                  />
+                )}
+              </InputGroup>
+            </ToolbarItem>
+          )}
+          {toolbarItem}
+        </ToolbarContent>
+      </Toolbar>
+      {subToolbar && (
+        <Toolbar>
+          <ToolbarContent>{subToolbar}</ToolbarContent>
+        </Toolbar>
+      )}
+      <Divider />
+      {children}
+      <Toolbar>{toolbarItemFooter}</Toolbar>
+    </>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/icons/IconMapper.tsx

@@ -0,0 +1,63 @@
+import { Icon } from "@patternfly/react-core";
+import {
+  BitbucketIcon,
+  CubeIcon,
+  FacebookSquareIcon,
+  GithubIcon,
+  GitlabIcon,
+  GoogleIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  MicrosoftIcon,
+  OpenshiftIcon,
+  PaypalIcon,
+  StackOverflowIcon,
+  TwitterIcon,
+} from "@patternfly/react-icons";
+
+type IconMapperProps = {
+  icon: string;
+};
+
+export const IconMapper = ({ icon }: IconMapperProps) => {
+  const SpecificIcon = getIcon(icon);
+  return (
+    <Icon size="lg">
+      <SpecificIcon alt={icon} />
+    </Icon>
+  );
+};
+
+function getIcon(icon: string) {
+  switch (icon) {
+    case "github":
+      return GithubIcon;
+    case "facebook":
+      return FacebookSquareIcon;
+    case "gitlab":
+      return GitlabIcon;
+    case "google":
+      return GoogleIcon;
+    case "linkedin":
+    case "linkedin-openid-connect":
+      return LinkedinIcon;
+
+    case "openshift-v3":
+    case "openshift-v4":
+      return OpenshiftIcon;
+    case "stackoverflow":
+      return StackOverflowIcon;
+    case "twitter":
+      return TwitterIcon;
+    case "microsoft":
+      return MicrosoftIcon;
+    case "bitbucket":
+      return BitbucketIcon;
+    case "instagram":
+      return InstagramIcon;
+    case "paypal":
+      return PaypalIcon;
+    default:
+      return CubeIcon;
+  }
+}

package/keycloak-theme/shared/keycloak-ui-shared/index.ts

@@ -0,0 +1 @@
+export * from './main';

package/keycloak-theme/shared/keycloak-ui-shared/main.ts

@@ -0,0 +1,96 @@
+export {
+  AlertProvider,
+  useAlerts,
+  type AddAlertFunction,
+  type AddErrorFunction,
+  type AlertProps,
+} from "./alerts/Alerts";
+export { ErrorPage } from "./context/ErrorPage";
+export { Help, useHelp } from "./context/HelpContext";
+export {
+  KeycloakProvider,
+  useEnvironment,
+  type KeycloakContext,
+} from "./context/KeycloakContext";
+export {
+  getInjectedEnvironment,
+  type BaseEnvironment,
+} from "./context/environment";
+export { ContinueCancelModal } from "./continue-cancel/ContinueCancelModal";
+export {
+  FormErrorText,
+  type FormErrorTextProps,
+} from "./controls/FormErrorText";
+export { HelpItem } from "./controls/HelpItem";
+export { NumberControl } from "./controls/NumberControl";
+export { PasswordControl } from "./controls/PasswordControl";
+export { PasswordInput } from "./controls/PasswordInput";
+export {
+  SelectControl,
+  SelectVariant,
+} from "./controls/select-control/SelectControl";
+export type {
+  SelectControlOption,
+  SelectControlProps,
+} from "./controls/select-control/SelectControl";
+export {
+  SwitchControl,
+  type SwitchControlProps,
+} from "./controls/SwitchControl";
+export { TextAreaControl } from "./controls/TextAreaControl";
+export { TextControl } from "./controls/TextControl";
+export {
+  KeycloakTextArea,
+  type KeycloakTextAreaProps,
+} from "./controls/keycloak-text-area/KeycloakTextArea";
+export { IconMapper } from "./icons/IconMapper";
+export { FormPanel } from "./scroll-form/FormPanel";
+export { ScrollForm, mainPageContentId } from "./scroll-form/ScrollForm";
+export {
+  FormSubmitButton,
+  type FormSubmitButtonProps,
+} from "./buttons/FormSubmitButton";
+export { UserProfileFields } from "./user-profile/UserProfileFields";
+export {
+  beerify,
+  debeerify,
+  isUserProfileError,
+  label,
+  setUserProfileServerError,
+} from "./user-profile/utils";
+export type { UserFormFields } from "./user-profile/utils";
+export { createNamedContext } from "./utils/createNamedContext";
+export {
+  getErrorDescription,
+  getErrorMessage,
+  getNetworkErrorMessage,
+  getNetworkErrorDescription,
+} from "./utils/errors";
+export { isDefined } from "./utils/isDefined";
+export { useRequiredContext } from "./utils/useRequiredContext";
+export { useStoredState } from "./utils/useStoredState";
+export { useSetTimeout } from "./utils/useSetTimeout";
+export { generateId } from "./utils/generateId";
+export { default as KeycloakMasthead } from "./masthead/Masthead";
+export { KeycloakSelect } from "./select/KeycloakSelect";
+export type { Variant, KeycloakSelectProps } from "./select/KeycloakSelect";
+export { KeycloakDataTable } from "./controls/table/KeycloakDataTable";
+export type {
+  Action,
+  Field,
+  DetailField,
+  LoaderFunction,
+} from "./controls/table/KeycloakDataTable";
+export { PaginatingTableToolbar } from "./controls/table/PaginatingTableToolbar";
+export { TableToolbar } from "./controls/table/TableToolbar";
+export { ListEmptyState } from "./controls/table/ListEmptyState";
+export { KeycloakSpinner } from "./controls/KeycloakSpinner";
+export { useFetch } from "./utils/useFetch";
+export {
+  useErrorBoundary,
+  ErrorBoundaryFallback,
+  ErrorBoundaryProvider,
+} from "./utils/ErrorBoundary";
+export type { FallbackProps } from "./utils/ErrorBoundary";
+export { OrganizationTable } from "./controls/OrganizationTable";
+export { initializeDarkMode } from "./utils/darkMode";

package/keycloak-theme/shared/keycloak-ui-shared/masthead/DefaultAvatar.tsx

@@ -0,0 +1,109 @@
+import styles from "@patternfly/react-styles/css/components/Avatar/avatar";
+import { css } from "@patternfly/react-styles";
+
+type DefaultAvatarProps = {
+  className?: string;
+  border?: "light" | "dark";
+  size?: "sm" | "md" | "lg" | "xl";
+};
+
+export const DefaultAvatar = ({
+  className = "",
+  border,
+  size = "md",
+}: DefaultAvatarProps) => (
+  <svg
+    className={css(
+      styles.avatar,
+      styles.modifiers[size],
+      border === "light" && styles.modifiers.light,
+      border === "dark" && styles.modifiers.dark,
+      className,
+    )}
+    enableBackground="new 0 0 36 36"
+    version="1.1"
+    viewBox="0 0 36 36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
+      cx="18"
+      cy="18.5"
+      r="18"
+    />
+    <defs>
+      <filter
+        id="b"
+        x="5.2"
+        y="7.2"
+        width="25.6"
+        height="53.6"
+        filterUnits="userSpaceOnUse"
+      >
+        <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+      </filter>
+    </defs>
+    <mask
+      id="a"
+      x="5.2"
+      y="7.2"
+      width="25.6"
+      height="53.6"
+      maskUnits="userSpaceOnUse"
+    >
+      <g style={{ filter: 'url("#b")' }}>
+        <circle
+          style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
+          cx="18"
+          cy="18.5"
+          r="18"
+        />
+      </g>
+    </mask>
+    <g style={{ filter: 'url("#a")' }}>
+      <g transform="translate(5.04 6.88)">
+        <path
+          style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#BBBBBB",
+          }}
+          d="m22.6 18.1c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6-6.1 0.7-6.1 0.7 0 0 0 0c-1.2 0.4-2.4 1.2-3.4 2.6-2.3 2.8-3.2 12.3-3.2 14.8 0 3.2 0.4 12.3 0.6 15.4 0 0-0.4 5.5 4 5.5l-0.3-6.3-0.4-3.5 0.2-0.9c0.9 0.4 3.6 1.2 8.6 1.2 5.3 0 8-0.9 8.8-1.3l0.2 1-0.2 3.6-0.3 6.3c3 0.1 3.7-3 3.8-4.4s0.6-12.6 0.6-16.5c0.1-2.6-0.8-12.1-3.1-15z"
+        />
+        <path
+          style={{
+            opacity: 0.1,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          d="m22.5 26c-0.1-2.1-1.5-2.8-4.8-2.8l2.2 9.6s1.8-1.7 3-1.8c0 0-0.4-4.6-0.4-5z"
+        />
+        <path
+          style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#BBBBBB",
+          }}
+          d="m12.7 13.2c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
+        />
+        <path
+          style={{
+            opacity: 8.0e-2,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#231F20",
+          }}
+          d="m9.4 6.8c0-3 2.1-5.5 4.9-6.3-0.5-0.1-1-0.2-1.6-0.2-3.5 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4c0.6 0 1.1-0.1 1.6-0.2-2.8-0.6-4.9-3.1-4.9-6.1z"
+        />
+        <path
+          style={{
+            opacity: 0.1,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          d="m8.3 22.4c-2 0.4-2.9 1.4-3.1 3.5l-0.6 18.6s1.7 0.7 3.6 0.9l0.1-23z"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/keycloak-theme/shared/keycloak-ui-shared/masthead/KeycloakDropdown.tsx

@@ -0,0 +1,48 @@
+import {
+  Dropdown,
+  DropdownList,
+  DropdownProps,
+  MenuToggle,
+} from "@patternfly/react-core";
+import { EllipsisVIcon } from "@patternfly/react-icons";
+import { ReactNode, useState } from "react";
+
+type KeycloakDropdownProps = Omit<DropdownProps, "toggle"> & {
+  "data-testid"?: string;
+  isKebab?: boolean;
+  title?: ReactNode;
+  dropDownItems: ReactNode[];
+};
+
+export const KeycloakDropdown = ({
+  isKebab = false,
+  title,
+  dropDownItems,
+  ...rest
+}: KeycloakDropdownProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dropdown
+      {...rest}
+      popperProps={{
+        position: "right",
+      }}
+      onOpenChange={(isOpen) => setOpen(isOpen)}
+      toggle={(ref) => (
+        <MenuToggle
+          data-testid={`${rest["data-testid"]}-toggle`}
+          ref={ref}
+          onClick={() => setOpen(!open)}
+          isExpanded={open}
+          variant={isKebab ? "plain" : "default"}
+        >
+          {isKebab ? <EllipsisVIcon /> : title}
+        </MenuToggle>
+      )}
+      isOpen={open}
+    >
+      <DropdownList>{dropDownItems}</DropdownList>
+    </Dropdown>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/masthead/Masthead.tsx

@@ -0,0 +1,161 @@
+import {
+  Avatar,
+  AvatarProps,
+  DropdownItem,
+  Masthead,
+  MastheadBrand,
+  MastheadBrandProps,
+  MastheadContent,
+  MastheadMainProps,
+  MastheadToggle,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { BarsIcon } from "@patternfly/react-icons";
+import { TFunction } from "i18next";
+import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { DefaultAvatar } from "./DefaultAvatar";
+import { KeycloakDropdown } from "./KeycloakDropdown";
+
+function loggedInUserName(
+  token: KeycloakTokenParsed | undefined,
+  t: TFunction,
+) {
+  if (!token) {
+    return t("unknownUser");
+  }
+
+  const givenName = token.given_name;
+  const familyName = token.family_name;
+  const preferredUsername = token.preferred_username;
+
+  if (givenName && familyName) {
+    return t("fullName", { givenName, familyName });
+  }
+
+  return givenName || familyName || preferredUsername || t("unknownUser");
+}
+
+type BrandLogo = MastheadBrandProps;
+
+type KeycloakMastheadProps = MastheadMainProps & {
+  keycloak: Keycloak;
+  brand: BrandLogo;
+  avatar?: AvatarProps;
+  features?: {
+    hasLogout?: boolean;
+    hasManageAccount?: boolean;
+    hasUsername?: boolean;
+  };
+  kebabDropdownItems?: ReactNode[];
+  dropdownItems?: ReactNode[];
+  toolbarItems?: ReactNode[];
+};
+
+const KeycloakMasthead = ({
+  keycloak,
+  brand: { src, alt, className, ...brandProps },
+  avatar,
+  features: {
+    hasLogout = true,
+    hasManageAccount = true,
+    hasUsername = true,
+  } = {},
+  kebabDropdownItems,
+  dropdownItems = [],
+  toolbarItems,
+  ...rest
+}: KeycloakMastheadProps) => {
+  const { t } = useTranslation();
+  const extraItems = [];
+  if (hasManageAccount) {
+    extraItems.push(
+      <DropdownItem
+        key="manageAccount"
+        onClick={() => keycloak.accountManagement()}
+      >
+        {t("manageAccount")}
+      </DropdownItem>,
+    );
+  }
+  if (hasLogout) {
+    extraItems.push(
+      <DropdownItem key="signOut" onClick={() => keycloak.logout()}>
+        {t("signOut")}
+      </DropdownItem>,
+    );
+  }
+
+  const picture = keycloak.idTokenParsed?.picture;
+  return (
+    <Masthead {...rest}>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label={t("navigation")}>
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadBrand {...brandProps}>
+        <img src={src} alt={alt} className={className} />
+      </MastheadBrand>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            {toolbarItems?.map((item, index) => (
+              <ToolbarItem key={index} align={{ default: "alignRight" }}>
+                {item}
+              </ToolbarItem>
+            ))}
+            <ToolbarItem
+              visibility={{
+                default: "hidden",
+                md: "visible",
+              }} /** this user dropdown is hidden on mobile sizes */
+            >
+              <KeycloakDropdown
+                data-testid="options"
+                dropDownItems={[...dropdownItems, extraItems]}
+                title={
+                  hasUsername
+                    ? loggedInUserName(keycloak.idTokenParsed, t)
+                    : undefined
+                }
+              />
+            </ToolbarItem>
+            <ToolbarItem
+              align={{ default: "alignLeft" }}
+              visibility={{
+                md: "hidden",
+              }}
+            >
+              <KeycloakDropdown
+                data-testid="options-kebab"
+                isKebab
+                dropDownItems={[
+                  ...(kebabDropdownItems || dropdownItems),
+                  extraItems,
+                ]}
+              />
+            </ToolbarItem>
+            <ToolbarItem
+              variant="overflow-menu"
+              align={{ default: "alignRight" }}
+              className="pf-v5-u-m-0-on-lg"
+            >
+              {picture || avatar?.src ? (
+                <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
+              ) : (
+                <DefaultAvatar {...avatar} />
+              )}
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+
+export default KeycloakMasthead;