@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/utils/download-file.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadCvsFile = exports.downloadTextFile = void 0;
+function downloadTextFile(name, content) {
+    var file = new Blob(content.split('/n'), { type: 'text/plain' });
+    var element = document.createElement('a');
+    element.href = URL.createObjectURL(file);
+    element.download = name + '.txt';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}
+exports.downloadTextFile = downloadTextFile;
+function downloadCvsFile(name, content) {
+    var file = new Blob(content, { type: 'text/csv' });
+    var element = document.createElement('a');
+    element.href = URL.createObjectURL(file);
+    element.download = name + '.csv';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}
+exports.downloadCvsFile = downloadCvsFile;

package/cjs/framework/utils/random-string.js

@@ -0,0 +1,17 @@
+"use strict";
+/* istanbul ignore file */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomString = void 0;
+var randomCharacters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+function randomString(length, base) {
+    if (base === void 0) { base = randomCharacters.length; }
+    if (base > randomCharacters.length || base <= 0)
+        base = randomCharacters.length;
+    var text = '';
+    for (var i = 0; i < length; i++) {
+        var index = Math.floor(Math.random() * base) % base;
+        text += randomCharacters.charAt(index);
+    }
+    return text;
+}
+exports.randomString = randomString;

package/cjs/frontend/controller/access/organizations/Organization.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/mjs/framework/BulkActionDialog.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+export interface BulkActionDialogProps {
+    isDanger?: boolean;
+}
+export declare function BulkActionDialog<T extends object>(props: {
+    title: string;
+    prompt?: string;
+    submitting: string;
+    submittingTitle: string;
+    submitText: string;
+    confirmText: string;
+    cancelText?: string;
+    error: string;
+    closeText?: string;
+    successText?: string;
+    pendingText?: string;
+    isDanger?: boolean;
+    items: T[];
+    columns: ITableColumn<T>[];
+    errorColumns: ITableColumn<T>[];
+    keyFn: (item: T) => string | number;
+    action: (item: T) => Promise<void>;
+    onClose?: (items: T[]) => void;
+}): JSX.Element;

package/mjs/framework/BulkActionDialog.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Modal, ModalBoxBody, ModalVariant, Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon } from '@patternfly/react-icons';
+import pLimit from 'p-limit';
+import { useCallback, useState } from 'react';
+import { Collapse } from './components/Collapse';
+import { usePageDialog } from './PageDialog';
+import { PageTable } from './PageTable';
+import { useFrameworkTranslations } from './useFrameworkTranslations';
+import { usePaged } from './useTableItems';
+export function BulkActionDialog(props) {
+    const [_, setDialog] = usePageDialog();
+    const [translations] = useFrameworkTranslations();
+    const [isSubmitting, setSubmitting] = useState(false);
+    const [isSubmited, setSubmited] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState('');
+    const [statuses, setStatuses] = useState();
+    const onClose = useCallback(() => {
+        props.onClose?.(props.items.filter((item) => statuses?.[props.keyFn(item)] === null));
+        setDialog(undefined);
+    }, [props, setDialog, statuses]);
+    const onConfirm = () => {
+        async function handleConfirm() {
+            const limit = pLimit(5);
+            setSubmitting(true);
+            let progress = 0;
+            await Promise.all(props.items.map((item) => limit(async () => {
+                const key = props.keyFn(item);
+                try {
+                    await props.action(item);
+                    setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: null }));
+                }
+                catch (err) {
+                    if (err instanceof Error) {
+                        const message = err.message;
+                        setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: message }));
+                    }
+                    else {
+                        setStatuses((statuses) => ({
+                            ...(statuses ?? {}),
+                            [key]: `Unknown error`,
+                        }));
+                    }
+                    setError(props.error);
+                }
+                finally {
+                    setProgress(++progress);
+                }
+            })));
+            setSubmitting(false);
+            setSubmited(true);
+        }
+        void handleConfirm();
+    };
+    const { paged, page, perPage, setPage, setPerPage } = usePaged(props.items);
+    const [confirmed, setConfirmed] = useState(!props.confirmText);
+    return (_jsx(Modal, { titleIconVariant: props.isDanger ? 'warning' : undefined, title: props.title, variant: ModalVariant.medium, isOpen: true, onClose: onClose, actions: !isSubmited
+            ? [
+                _jsx(Button, { variant: props.isDanger ? 'danger' : 'primary', onClick: onConfirm, isDisabled: !confirmed || isSubmitting || isSubmited, isLoading: isSubmitting, children: isSubmitting
+                        ? props.submitting ?? translations.submittingText
+                        : props.submitText ?? translations.submitText }, "submit"),
+                _jsx(Button, { variant: "link", onClick: onClose, children: props.cancelText ?? translations.cancelText }, "cancel"),
+            ]
+            : [
+                _jsx(Button, { variant: "secondary", onClick: onClose, children: props.closeText ?? translations.closeText }, "close"),
+            ], description: _jsx(Collapse, { open: !isSubmitting && !isSubmited, children: props.prompt }), hasNoBodyWrapper: true, children: _jsxs(ModalBoxBody, { style: { paddingLeft: 0, paddingRight: 0 }, children: [_jsx(Collapse, { open: isSubmitting || isSubmited, children: _jsx(ModalBoxBody, { style: { paddingTop: 0 }, children: _jsx(Progress, { value: (progress / props.items.length) * 100, title: error
+                                ? props.error
+                                : progress === props.items.length
+                                    ? props.successText ?? translations.successText
+                                    : props.submittingTitle, size: ProgressSize.lg, variant: error
+                                ? ProgressVariant.danger
+                                : progress === props.items.length
+                                    ? ProgressVariant.success
+                                    : undefined, measureLocation: error && progress === props.items.length ? ProgressMeasureLocation.none : undefined }) }) }), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        maxHeight: 500,
+                        overflow: 'hidden',
+                        borderTop: 'thin solid var(--pf-global--BorderColor--100)',
+                    }, children: !isSubmitting && !isSubmited ? (_jsx(PageTable, { pageItems: paged, itemCount: props.items.length, tableColumns: props.columns, keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "Error", emptyStateTitle: "No items" }, "items")) : (_jsx(PageTable, { pageItems: [...paged], itemCount: props.items.length, tableColumns: [
+                            ...props.errorColumns,
+                            {
+                                header: 'Status',
+                                cell: (item) => {
+                                    const key = props.keyFn(item);
+                                    const status = statuses?.[key];
+                                    if (status === undefined) {
+                                        return (_jsxs("span", { style: {
+                                                color: 'var(--pf-global--info-color--100)',
+                                            }, children: [_jsx(PendingIcon, {}), "\u00A0 ", props.pendingText ?? translations.pendingText, ' ', JSON.stringify(status)] }));
+                                    }
+                                    if (status === null) {
+                                        return (_jsxs("span", { style: {
+                                                color: 'var(--pf-global--success-color--100)',
+                                            }, children: [_jsx(CheckCircleIcon, {}), "\u00A0", ' ', props.successText ?? translations.successText] }));
+                                    }
+                                    return (_jsxs("span", { style: {
+                                            color: 'var(--pf-global--danger-color--100)',
+                                        }, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
+                                },
+                            },
+                        ], keyFn: props.keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status")) }), props.confirmText && (_jsx(Collapse, { open: !isSubmitting && !isSubmited, children: _jsx("div", { style: { marginLeft: 32, marginTop: 0, marginBottom: 8 }, children: _jsx(Checkbox, { id: "confirm", label: props.confirmText, isChecked: confirmed, onChange: setConfirmed }) }) }))] }) }));
+}

package/mjs/framework/BulkProgressDialog.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+export interface BulkProgressDialogProps<T extends object> {
+    title: string;
+    keyFn: (item: T) => string | number;
+    items: T[];
+    columns: ITableColumn<T>[];
+    actionFn: (item: T, signal: AbortSignal) => Promise<unknown>;
+    onClose?: (items: T[]) => void;
+    processingText?: string;
+    errorText?: string;
+    successText?: string;
+    itemPendingText?: string;
+    itemSuccessText?: string;
+    cancelText?: string;
+    closeText?: string;
+    isDanger?: boolean;
+}
+export declare function BulkProgressDialog<T extends object>(props: BulkProgressDialogProps<T>): JSX.Element;
+export declare function useBulkProgressDialog<T extends object>(): import("react").Dispatch<import("react").SetStateAction<BulkProgressDialogProps<T> | undefined>>;

package/mjs/framework/BulkProgressDialog.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal, ModalBoxBody, ModalVariant, Progress, ProgressSize, ProgressVariant, } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon } from '@patternfly/react-icons';
+import pLimit from 'p-limit';
+import { useCallback, useEffect, useState } from 'react';
+import { usePageDialog } from './PageDialog';
+import { PageTable } from './PageTable';
+import { useFrameworkTranslations } from './useFrameworkTranslations';
+import { usePaged } from './useTableItems';
+export function BulkProgressDialog(props) {
+    const { title, keyFn, items, columns, actionFn, onClose, processingText, errorText, itemPendingText, itemSuccessText, successText, cancelText, closeText, isDanger, } = props;
+    const [translations] = useFrameworkTranslations();
+    const [isProcessing, setProcessing] = useState(true);
+    const [progress, setProgress] = useState(0);
+    const [error, setError] = useState('');
+    const [statuses, setStatuses] = useState();
+    const [abortController] = useState(() => new AbortController());
+    const onCancelClicked = useCallback(() => {
+        abortController.abort();
+        setProcessing(false);
+    }, [abortController]);
+    const onCloseClicked = useCallback(() => {
+        onClose?.(items.filter((item) => statuses?.[keyFn(item)] === null));
+    }, [items, keyFn, onClose, statuses]);
+    useEffect(() => {
+        async function process() {
+            const limit = pLimit(5);
+            let progress = 0;
+            await Promise.all(items.map((item) => limit(async () => {
+                if (abortController.signal.aborted)
+                    return;
+                const key = keyFn(item);
+                try {
+                    await actionFn(item, abortController.signal);
+                    if (!abortController.signal.aborted) {
+                        setStatuses((statuses) => ({ ...(statuses ?? {}), [key]: null }));
+                    }
+                }
+                catch (err) {
+                    if (!abortController.signal.aborted) {
+                        if (err instanceof Error) {
+                            const message = err.message;
+                            setStatuses((statuses) => ({
+                                ...(statuses ?? {}),
+                                [key]: message,
+                            }));
+                        }
+                        else {
+                            setStatuses((statuses) => ({
+                                ...(statuses ?? {}),
+                                [key]: `Unknown error`,
+                            }));
+                        }
+                        setError(errorText ?? translations.errorText);
+                    }
+                }
+                finally {
+                    if (!abortController.signal.aborted) {
+                        setProgress(++progress);
+                    }
+                }
+            })));
+            if (!abortController.signal.aborted) {
+                setProcessing(false);
+            }
+        }
+        void process();
+    }, [abortController, actionFn, errorText, items, keyFn, translations.errorText]);
+    const { paged, page, perPage, setPage, setPerPage } = usePaged(items);
+    return (_jsxs(Modal, { titleIconVariant: isDanger ? 'warning' : undefined, title: title, variant: ModalVariant.medium, isOpen: true, onClose: () => {
+            onCancelClicked();
+            onCloseClicked();
+        }, actions: isProcessing
+            ? [
+                _jsx(Button, { variant: "link", onClick: onCancelClicked, children: cancelText ?? translations.cancelText }, "cancel"),
+            ]
+            : [
+                _jsx(Button, { variant: "secondary", onClick: onCloseClicked, children: closeText ?? translations.closeText }, "close"),
+            ], hasNoBodyWrapper: true, children: [_jsx(ModalBoxBody, { children: _jsx(Progress, { value: (progress / items.length) * 100, title: abortController.signal.aborted
+                        ? 'Cancelled'
+                        : error
+                            ? errorText ?? translations.errorText
+                            : progress === items.length
+                                ? successText ?? translations.successText
+                                : processingText ?? translations.processingText, size: ProgressSize.lg, variant: error
+                        ? ProgressVariant.danger
+                        : progress === items.length
+                            ? ProgressVariant.success
+                            : undefined }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: 560,
+                    overflow: 'hidden',
+                    paddingTop: 16,
+                }, children: _jsx(PageTable, { pageItems: [...paged], itemCount: items.length, tableColumns: [
+                        ...columns,
+                        {
+                            header: 'Status',
+                            cell: (item) => {
+                                const key = keyFn(item);
+                                const status = statuses?.[key];
+                                if (status === undefined) {
+                                    return (_jsxs("span", { style: { color: 'var(--pf-global--info-color--100)' }, children: [_jsx(PendingIcon, {}), "\u00A0 ", itemPendingText ?? translations.pendingText, ' ', JSON.stringify(status)] }));
+                                }
+                                if (status === null) {
+                                    return (_jsxs("span", { style: {
+                                            color: 'var(--pf-global--success-color--100)',
+                                        }, children: [_jsx(CheckCircleIcon, {}), "\u00A0 ", itemSuccessText ?? translations.successText] }));
+                                }
+                                return (_jsxs("span", { style: { color: 'var(--pf-global--danger-color--100)' }, children: [_jsx(ExclamationCircleIcon, {}), "\u00A0 ", statuses?.[key]] }));
+                            },
+                        },
+                    ], keyFn: keyFn, page: page, perPage: perPage, setPage: setPage, setPerPage: setPerPage, compact: true, errorStateTitle: "", emptyStateTitle: "No items" }, "status") })] }));
+}
+export function useBulkProgressDialog() {
+    const [_, setDialog] = usePageDialog();
+    const [props, setProps] = useState();
+    useEffect(() => {
+        if (props) {
+            const onCloseHandler = (items) => {
+                setProps(undefined);
+                props.onClose?.(items);
+            };
+            setDialog(_jsx(BulkProgressDialog, { ...props, onClose: onCloseHandler }));
+        }
+        else {
+            setDialog(undefined);
+        }
+    }, [props, setDialog]);
+    return setProps;
+}

package/mjs/framework/FilterDrawer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IFilterState, IItemFilter, SetFilterValues } from './PageToolbar';
+export declare function FilterDrawer<T extends object>(props: {
+    filters?: IItemFilter<T>[];
+    filterState: IFilterState;
+    setFilterValues: SetFilterValues<T>;
+    t?: (t: string) => string;
+}): JSX.Element;

package/mjs/framework/FilterDrawer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Checkbox, DrawerPanelBody, DrawerPanelContent, DrawerSection, Stack, Title, } from '@patternfly/react-core';
+import { Fragment, useCallback } from 'react';
+export function FilterDrawer(props) {
+    let { t } = props;
+    t = t ? t : (t) => t;
+    const { filters, filterState, setFilterValues } = props;
+    const toggleFilterValue = useCallback((filter, filterValues, option) => {
+        if (filterValues?.includes(option)) {
+            setFilterValues(filter, filterValues.filter((o) => o !== option));
+        }
+        else {
+            setFilterValues(filter, [...(filterValues ?? []), option]);
+        }
+    }, [setFilterValues]);
+    if (!filters)
+        return _jsx(Fragment, {});
+    return (_jsx(DrawerPanelContent, { minSize: "250px", defaultSize: "250px", maxSize: "250px", children: _jsxs(DrawerPanelBody, { children: [_jsx(Title, { headingLevel: "h2", style: { paddingBottom: 24 }, children: t('Filters') }), filters?.map((filter) => {
+                    const filterValues = filterState[filter.label];
+                    return (_jsx(DrawerSection, { style: { paddingBottom: 32 }, children: _jsxs(Stack, { hasGutter: true, children: [_jsx(Title, { headingLevel: "h4", children: filter.label }), filter.options.map((option) => (_jsx(Checkbox, { id: option.label, isChecked: filterValues?.includes(option.value), onChange: () => toggleFilterValue(filter, filterValues, option.value), label: option.label }, option.label)))] }) }, filter.label));
+                })] }) }));
+}

package/mjs/framework/PageBody.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function PageBody(props: {
+    children: ReactNode;
+}): JSX.Element;

package/mjs/framework/PageBody.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useBreakpoint } from '.';
+import ErrorBoundary from './components/ErrorBoundary';
+import { useSettings } from './Settings';
+export function PageBody(props) {
+    const usePadding = useBreakpoint('xxl');
+    const settings = useSettings();
+    const { t } = useTranslation();
+    return (_jsx(ErrorBoundary, { message: t('Error'), children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                maxHeight: '100%',
+                overflow: 'hidden',
+                backgroundColor: 'var(--pf-c-page__main-section--BackgroundColor)',
+            }, children: _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    maxHeight: '100%',
+                    margin: usePadding ? 24 : 0,
+                    overflow: 'hidden',
+                    border: settings.borders && usePadding
+                        ? 'thin solid var(--pf-global--BorderColor--100)'
+                        : undefined,
+                    backgroundColor: 'var(--pf-global--BackgroundColor--100)',
+                }, children: props.children }) }) }));
+}

package/mjs/framework/PageCatalog.d.ts

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+import { ITypedAction } from './TypedActions';
+declare type CatalogFilterValue = string;
+interface ICatalogFilterGroup {
+    id: string;
+    label: string;
+    filters?: ICatalogFilter[];
+}
+interface ICatalogFilter {
+    id?: string;
+    label?: string;
+    value: CatalogFilterValue;
+    filters?: ICatalogFilter[];
+}
+export declare function Catalog<T extends object>(props: {
+    keyFn: (item: T) => string;
+    items: T[];
+    itemToCardFn: (item: T) => ICatalogCard;
+    filterGroups?: ICatalogFilterGroup[];
+    onBack?: () => void;
+    cardWidth?: number;
+    selectItem: (item: T) => void;
+    unselectItem: (item: T) => void;
+    isSelected: (item: T) => boolean;
+    itemActions?: ITypedAction<T>[];
+    showSelect: boolean;
+}): JSX.Element;
+export declare enum CatalogIconColor {
+    'red' = "red",
+    'green' = "green",
+    'blue' = "blue",
+    'yellow' = "yellow"
+}
+export declare enum CatalogColor {
+    blue = "blue",
+    cyan = "cyan",
+    green = "green",
+    orange = "orange",
+    purple = "purple",
+    red = "red",
+    grey = "grey"
+}
+export interface ICatalogCard {
+    id: string;
+    icon?: ReactNode;
+    title: string;
+    items?: CatalogCardItem[];
+    labels?: {
+        label: string;
+        color?: CatalogColor;
+    }[];
+    learnMore?: string;
+    badge?: string;
+    badgeColor?: CatalogColor;
+    badgeTooltip?: string;
+    badgeTooltipTitle?: string;
+    alertTitle?: string;
+    alertContent?: ReactNode;
+    alertVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+    onClick?: () => void;
+}
+export interface ICatalogCardFeatureGroup {
+    title: string;
+    features: string[];
+}
+export declare enum CatalogCardItemType {
+    Description = "description",
+    List = "list"
+}
+export interface ICatalogCardDescription {
+    type: CatalogCardItemType.Description;
+    title?: string;
+    description: string;
+}
+export interface ICatalogCardList {
+    type: CatalogCardItemType.List;
+    title: string;
+    items: ICatalogCardListItem[];
+    horizontal?: boolean;
+    icon?: ReactNode;
+}
+export declare enum CatalogCardListItemIcon {
+    Checkmark = "checkmark",
+    Plus = "plus",
+    CheckCircle = "check-circle",
+    ExclamationCircle = "exclamation-circle"
+}
+export interface ICatalogCardListItem {
+    icon?: ReactNode;
+    text: string;
+    helpTitle?: string;
+    help?: ReactNode;
+}
+export declare type CatalogCardItem = ICatalogCardDescription | ICatalogCardList;
+export declare function CatalogCard<T extends object>(props: {
+    item: T;
+    itemToCardFn: (item: T) => ICatalogCard;
+    isSelected: (item: T) => boolean;
+    selectItem: (item: T) => void;
+    unselectItem: (item: T) => void;
+    itemActions?: ITypedAction<T>[];
+    showSelect: boolean;
+    t?: (t: string) => string;
+}): JSX.Element;
+export declare function CardSection(props: {
+    title?: string;
+    children: ReactNode;
+}): JSX.Element;
+export declare function CardList(props: {
+    icon?: ReactNode;
+    items: ICatalogCardListItem[];
+}): JSX.Element;
+export {};

package/mjs/framework/PageCatalog.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { Alert, Button, Card, CardActions, CardBody, CardFooter, CardHeader, CardTitle, Checkbox, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Dropdown, DropdownSeparator, KebabToggle, Label, LabelGroup, List, ListItem, PageSection, Popover, Split, SplitItem, Stack, StackItem, Title, Truncate, } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { Fragment, useCallback, useMemo, useState } from 'react';
+import { Grid } from './components/Grid';
+import { IconWrapper } from './components/IconWrapper';
+import { Scrollable } from './components/Scrollable';
+export function Catalog(props) {
+    const { keyFn, items, itemToCardFn, isSelected, selectItem, unselectItem, itemActions, showSelect, } = props;
+    const catalogCards = useMemo(() => {
+        return (_jsx(Grid, { size: props.cardWidth ?? 470, children: items.map((item) => (_jsx(CatalogCard, { item: item, itemToCardFn: itemToCardFn, isSelected: isSelected, selectItem: selectItem, unselectItem: unselectItem, itemActions: itemActions, showSelect: showSelect }, keyFn(item)))) }));
+    }, [
+        props.cardWidth,
+        items,
+        keyFn,
+        itemToCardFn,
+        isSelected,
+        selectItem,
+        unselectItem,
+        itemActions,
+        showSelect,
+    ]);
+    return (_jsx(PageSection, { style: { flexGrow: 1 }, children: _jsx("div", { children: catalogCards }) }));
+}
+export var CatalogIconColor;
+(function (CatalogIconColor) {
+    CatalogIconColor["red"] = "red";
+    CatalogIconColor["green"] = "green";
+    CatalogIconColor["blue"] = "blue";
+    CatalogIconColor["yellow"] = "yellow";
+})(CatalogIconColor || (CatalogIconColor = {}));
+export var CatalogColor;
+(function (CatalogColor) {
+    CatalogColor["blue"] = "blue";
+    CatalogColor["cyan"] = "cyan";
+    CatalogColor["green"] = "green";
+    CatalogColor["orange"] = "orange";
+    CatalogColor["purple"] = "purple";
+    CatalogColor["red"] = "red";
+    CatalogColor["grey"] = "grey";
+})(CatalogColor || (CatalogColor = {}));
+export var CatalogCardItemType;
+(function (CatalogCardItemType) {
+    CatalogCardItemType["Description"] = "description";
+    CatalogCardItemType["List"] = "list";
+})(CatalogCardItemType || (CatalogCardItemType = {}));
+export var CatalogCardListItemIcon;
+(function (CatalogCardListItemIcon) {
+    CatalogCardListItemIcon["Checkmark"] = "checkmark";
+    CatalogCardListItemIcon["Plus"] = "plus";
+    CatalogCardListItemIcon["CheckCircle"] = "check-circle";
+    CatalogCardListItemIcon["ExclamationCircle"] = "exclamation-circle";
+})(CatalogCardListItemIcon || (CatalogCardListItemIcon = {}));
+export function CatalogCard(props) {
+    let { t } = props;
+    t = t ? t : (t) => t;
+    const { item, itemToCardFn, isSelected, selectItem, unselectItem, itemActions, showSelect } = props;
+    const card = useMemo(() => itemToCardFn(item), [item, itemToCardFn]);
+    const [isOpen, setIsOpen] = useState(false);
+    const onSelect = useCallback(() => { }, []);
+    const onClick = useCallback(() => {
+        if (isSelected(item)) {
+            unselectItem(item);
+        }
+        else {
+            selectItem(item);
+        }
+    }, [isSelected, item, selectItem, unselectItem]);
+    const showDropdown = itemActions !== undefined && itemActions.length > 0;
+    const showActions = showSelect || showDropdown;
+    const dropdownItems = useMemo(() => itemActions?.map((itemAction, index) => {
+        // if (isItemActionClick(itemAction)) {
+        //   return (
+        //     <DropdownItem
+        //       key={itemAction.label}
+        //       onClick={() => {
+        //         itemAction.onClick(item)
+        //         setIsOpen(false)
+        //       }}
+        //     >
+        //       {itemAction.label}
+        //     </DropdownItem>
+        //   )
+        // }
+        return _jsx(DropdownSeparator, {}, index);
+    }), [itemActions]);
+    const disabled = !card.onClick;
+    return (_jsxs(Card, { id: card.id, onClick: card.onClick, isFlat: true, isLarge: true, isSelectable: !disabled, isRounded: true, style: {
+            transition: 'box-shadow 0.25s',
+            cursor: !disabled ? 'pointer' : undefined,
+        }, children: [_jsxs(CardHeader, { style: { opacity: !disabled ? undefined : '0.5' }, children: [_jsxs(Split, { hasGutter: true, style: { width: '100%' }, children: [_jsx(SplitItem, { isFilled: true, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [card.icon && (_jsx("div", { style: {
+                                                display: 'flex',
+                                                height: 40,
+                                                width: 40,
+                                                marginTop: -20,
+                                                marginBottom: -20,
+                                                marginRight: 12,
+                                                alignItems: 'center',
+                                                justifyItems: 'stretch',
+                                            }, children: _jsx(IconWrapper, { size: "lg", children: card.icon }) })), _jsx(CardTitle, { children: card.title })] }) }), card.badge && card.badgeTooltip && (_jsx(SplitItem, { children: _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(Popover, { headerContent: card.badgeTooltipTitle, bodyContent: card.badgeTooltip, removeFindDomNode: true, children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }) }) })), card.badge && !card.badgeTooltip && (_jsx(SplitItem, { children: _jsx(Label, { color: card.badgeColor, children: card.badge }) }))] }), showActions && (_jsxs(CardActions, { hasNoOffset: true, children: [showDropdown && (_jsx(Dropdown, { onSelect: onSelect, toggle: _jsx(KebabToggle, { onToggle: setIsOpen }), isOpen: isOpen, isPlain: true, dropdownItems: dropdownItems, position: "right" })), showSelect && (_jsx(Checkbox, { isChecked: isSelected(item), onChange: onClick, "aria-label": "card checkbox example", id: "check-1", name: "check1" }))] }))] }), card.items && (_jsx(Scrollable, { children: _jsx(CardBody, { style: { paddingTop: 0, opacity: !disabled ? undefined : '0.5' }, children: _jsx(DescriptionList, { children: card.items &&
+                            card.items.map((item, index) => {
+                                switch (item.type) {
+                                    case CatalogCardItemType.Description:
+                                        return (_jsx(DescriptionList, { children: _jsx(DescriptionListGroup, { children: _jsx("span", { style: { opacity: 9 }, children: item.description }) }) }, index));
+                                    case CatalogCardItemType.List:
+                                        return (_jsx(DescriptionList, { orientation: item.horizontal ? { sm: 'horizontal' } : undefined, children: _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: item.title }), _jsx(DescriptionListDescription, { children: _jsx(CardList, { icon: item.icon, items: item.items }) })] }) }, index));
+                                    default:
+                                        return _jsx(Fragment, {}, index);
+                                }
+                            }) }) }) })), (card.labels || card.learnMore) && (_jsx(CardFooter, { children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'end',
+                        gap: 16,
+                    }, children: [_jsx("div", { style: { flexGrow: 1, opacity: !disabled ? undefined : '0.5' }, children: card.labels && (_jsx(LabelGroup, { children: card.labels.map((item) => (_jsx(Label, { color: item.color, children: _jsx(Truncate, { content: item.label, style: { minWidth: 0 } }) }, item.label))) })) }), card.learnMore && (_jsxs(Button, { variant: "link", icon: _jsx(ExternalLinkAltIcon, {}), isInline: true, onClick: () => window.open(card.learnMore, '_blank'), children: ["\u00A0", t('Learn more')] }))] }) })), card.alertTitle && (_jsx(Alert, { title: card.alertTitle, isInline: true, variant: card.alertVariant, children: card.alertContent }))] }, card.id ?? card.title));
+}
+export function CardSection(props) {
+    return (_jsxs(Stack, { children: [props.title && (_jsx(StackItem, { children: _jsx(Title, { headingLevel: "h6", style: { paddingBottom: 8 }, children: props.title }) })), props.children] }));
+}
+export function CardList(props) {
+    const { items, icon } = props;
+    return (_jsx(List, { isPlain: true, children: items?.map((listItem, index) => {
+            let itemIcon;
+            if (listItem.icon) {
+                itemIcon = (_jsx(IconWrapper, { size: "md", noPadding: true, children: listItem.icon }));
+            }
+            else if (icon) {
+                itemIcon = (_jsx(IconWrapper, { size: "md", noPadding: true, children: icon }));
+            }
+            return (_jsxs(ListItem, { icon: itemIcon, style: { opacity: 0.85 }, children: [listItem.text, listItem.help && (
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                    _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(Popover, { headerContent: listItem.helpTitle, bodyContent: listItem.help, removeFindDomNode: true, children: _jsx(Button, { variant: "link", style: {
+                                    padding: 0,
+                                    marginLeft: '8px',
+                                    verticalAlign: 'middle',
+                                }, children: _jsx(OutlinedQuestionCircleIcon, {}) }) }) }))] }, index));
+        }) }));
+}