@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-cluster-client-credentials-identity/c4-cluster-client-credentials-identity.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, CodeSnippet, InlineLoading, InlineNotification, Layer, Modal, Stack, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, Tab, TabList, TabPanel, TabPanels, Tabs, } from '@carbon/react';
+import { Download, Save } from '@carbon/react/icons/index.esm.js';
+import { useState } from 'react';
+import { C4Divider } from '../c4-divider/c4-divider.js';
+export const C4ClusterClientCredentialsIdentityModal = (props) => {
+    return (_jsx(Modal, { passiveModal: true, onRequestClose: props.onRequestClose, open: props.isOpen, modalHeading: props.heading, preventCloseOnClickOutside: true, selectorPrimaryFocus: '.cds--btn--tertiary', size: 'md', children: _jsxs(Stack, { gap: 4, children: [_jsx("strong", { children: props.step1Header }), _jsxs(Tabs, { children: [_jsx(TabList, { "aria-label": 'download', contained: true, children: props.variants.map((variant) => (_jsx(Tab, { children: variant.tabTitle }, variant.key))) }), _jsx(TabPanels, { children: props.variants.map((variant) => {
+                                const { key, ...variantProps } = variant;
+                                return (_jsxs(TabPanel, { style: { marginTop: '-12px', padding: '1rem' }, children: [variant.type === 'codesnippet' && (_jsx(C4ClusterClientCredentialsIdentitysVariantCodeSnippet, { ...variantProps })), variant.type === 'items' && (_jsx(C4ClusterClientCredentialsIdentitysVariantItems, { ...variantProps }))] }, key));
+                            }) })] }), _jsx(C4Divider, {}), _jsx("strong", { children: props.step2Header }), _jsx("div", { children: props.step2Description }), _jsxs(Stack, { gap: 2, children: [_jsx("p", { style: { color: 'var(--cds-text-helper)', alignSelf: 'end' }, children: "Client ID" }), _jsx(CodeSnippet, { type: 'single', style: { maxWidth: '22rem' }, children: props.clientId })] }), _jsx(Button, { kind: 'primary', size: 'md', onClick: () => {
+                        window.open(props.identityLink, '_blank');
+                    }, children: props.identityButtonText })] }) }));
+};
+const C4ClusterClientCredentialsIdentitysVariantDownload = (props) => (_jsx(Button, { id: 'credentials-download-button', kind: 'tertiary', size: 'md', renderIcon: Download, onClick: props.onClick, children: props.label }));
+const C4ClusterClientCredentialsIdentitysVariantAdditionalAction = (props) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const handleClick = async () => {
+        setIsLoading(true);
+        const startTime = Date.now();
+        try {
+            await Promise.resolve(props.onClick());
+        }
+        finally {
+            // Ensure minimum 1 second loading time
+            const elapsed = Date.now() - startTime;
+            const remainingTime = Math.max(0, 1000 - elapsed);
+            setTimeout(() => {
+                setIsLoading(false);
+            }, remainingTime);
+        }
+    };
+    if (isLoading) {
+        return _jsx(InlineLoading, { description: 'Saving...' });
+    }
+    return (_jsx(Button, { kind: 'tertiary', size: 'md', renderIcon: Save, onClick: handleClick, children: props.label }));
+};
+export const C4ClusterClientCredentialsIdentitysVariantCodeSnippet = (props) => {
+    const variant = props;
+    const content = (_jsxs(Stack, { gap: 5, children: [_jsx("div", { children: variant.description }), _jsx(InlineNotification, { lowContrast: true, kind: 'warning', title: props.notificationText, hideCloseButton: true, style: { maxInlineSize: '100%' } }), _jsx(Layer, { style: { minWidth: '0' }, children: _jsx(CodeSnippet, { type: 'multi', maxCollapsedNumberOfRows: 4, maxExpandedNumberOfRows: 4, showMoreText: '', onClick: () => {
+                        if (variant.onClick) {
+                            variant.onClick();
+                        }
+                    }, style: {
+                        maxInlineSize: '100%',
+                    }, children: variant.codesnippet }) }), (variant.download || variant.additionalAction) && (_jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [variant.download && (_jsx(C4ClusterClientCredentialsIdentitysVariantDownload, { ...variant.download })), variant.additionalAction && (_jsx(C4ClusterClientCredentialsIdentitysVariantAdditionalAction, { label: variant.additionalAction.label, onClick: variant.additionalAction.onClick }))] }))] }));
+    return content;
+};
+export const C4ClusterClientCredentialsIdentitysVariantItems = (props) => {
+    const variant = props;
+    const content = (_jsxs(Stack, { gap: 5, children: [_jsx("div", { children: variant.description }), _jsx(InlineNotification, { lowContrast: true, kind: 'warning', title: props.notificationText, hideCloseButton: true, style: { maxInlineSize: '100%' } }), _jsx(StructuredListWrapper, { isCondensed: true, isFlush: true, style: { minWidth: '0' }, children: _jsx(StructuredListBody, { children: variant.items.map((item, index) => (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: { width: '200px' }, children: item.label }), _jsx(StructuredListCell, { style: { paddingRight: '0px' }, children: _jsx(Layer, { children: _jsx(CodeSnippet, { type: 'single', wrapText: true, copyText: item.value, style: {
+                                            zIndex: `${(variant.items.length - index) * 100}`,
+                                            maxInlineSize: '100%',
+                                        }, onClick: () => {
+                                            if (item.onClick) {
+                                                item.onClick();
+                                            }
+                                        }, children: item.value }) }) })] }, item.key))) }) }), (variant.download || variant.additionalAction) && (_jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [variant.download && (_jsx(C4ClusterClientCredentialsIdentitysVariantDownload, { ...variant.download })), variant.additionalAction && (_jsx(C4ClusterClientCredentialsIdentitysVariantAdditionalAction, { label: variant.additionalAction.label, onClick: variant.additionalAction.onClick }))] }))] }));
+    return content;
+};

package/lib/esm/components/c4-cluster-client-credentials-identity/c4-cluster-client-credentials-identity.types.d.ts

@@ -0,0 +1,45 @@
+export interface C4ClusterClientCredentialsIdentityProps {
+    heading: string;
+    isOpen: boolean;
+    onRequestClose: () => void;
+    step1Header: string;
+    step2Header: string;
+    step2Description: any;
+    clientId: string;
+    notificationText: string;
+    identityButtonText: string;
+    identityLink: string;
+    variants: Array<C4ClusterClientCredentialsIdentityVariantCodeSnippetProps | C4ClusterClientCredentialsIdentityVariantItemsProps>;
+}
+interface C4ClusterClientCredentialsIdentityVariantBaseProps {
+    key: string;
+    type: 'codesnippet' | 'items';
+    tabTitle: string;
+    description: any;
+    download?: C4ClusterClientCredentialsIdentityVariantDownloadProps;
+    additionalAction?: C4ClusterClientCredentialsIdentityVariantAdditionalActionProps;
+}
+export interface C4ClusterClientCredentialsIdentityVariantDownloadProps {
+    onClick: () => void;
+    label: string;
+}
+export interface C4ClusterClientCredentialsIdentityVariantAdditionalActionProps {
+    onClick: () => Promise<void> | void;
+    label: string;
+    isLoading?: boolean;
+}
+export interface C4ClusterClientCredentialsIdentityVariantCodeSnippetProps extends C4ClusterClientCredentialsIdentityVariantBaseProps {
+    codesnippet: string;
+    notificationText: string;
+    onClick?: () => void;
+}
+export interface C4ClusterClientCredentialsIdentityVariantItemsProps extends C4ClusterClientCredentialsIdentityVariantBaseProps {
+    notificationText: string;
+    items: Array<{
+        key: string;
+        label: string;
+        value: string;
+        onClick?: () => void;
+    }>;
+}
+export {};

package/lib/esm/components/c4-cluster-client-credentials-identity/c4-cluster-client-credentials-identity.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-cluster-details-activity/c4-cluster-details-activity.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ClusterDetailsActivityProps } from './c4-cluster-details-activity.types';
+export declare const C4ClusterDetailsActivity: ({ activityGroups, isLoading, hasError, text, onRefresh, }: C4ClusterDetailsActivityProps) => JSX.Element;

package/lib/esm/components/c4-cluster-details-activity/c4-cluster-details-activity.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3EmptyState } from '@camunda/camunda-composite-components';
+import { Stack, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, } from '@carbon/react';
+import { Renew } from '@carbon/react/icons/index.esm.js';
+export const C4ClusterDetailsActivity = ({ activityGroups, isLoading, hasError, text, onRefresh, }) => {
+    if (hasError) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `../../../../assets/error.svg`,
+                altText: 'errorIcon',
+            }, heading: text.errorTitle, description: text.errorDescription, button: {
+                onClick: onRefresh,
+                disabled: false,
+                label: text.errorButton,
+                icon: Renew,
+            } }));
+    }
+    return (_jsx(Stack, { gap: 6, children: activityGroups.map((group, groupIndex) => {
+            if (group.items.length === 0) {
+                return null;
+            }
+            return (_jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: group.heading }), isLoading ? (_jsx(StructuredListSkeleton, {})) : (_jsx(StructuredListWrapper, { isCondensed: true, children: _jsx(StructuredListBody, { children: group.items.map((item) => {
+                                const formattedDateTime = formatDateTime(new Date(item.timestamp));
+                                return (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { style: { width: '250px' }, children: _jsx("strong", { children: formattedDateTime }) }), _jsxs(StructuredListCell, { children: [item.userName, ": ", item.audit] })] }, `audit-row-${item.entityId}-${item.timestamp}`));
+                            }) }) }))] }, `activity-group-${groupIndex}`));
+        }) }));
+};
+const formatDateTime = (date) => {
+    try {
+        return Intl.DateTimeFormat('en-GB', {
+            hour12: false,
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(date);
+    }
+    catch (_error) {
+        return '';
+    }
+};

package/lib/esm/components/c4-cluster-details-activity/c4-cluster-details-activity.types.d.ts

@@ -0,0 +1,24 @@
+export interface C4ClusterDetailsActivityProps {
+    activityGroups: ActivityGroup[];
+    isLoading: boolean;
+    hasError: boolean;
+    text: {
+        today: string;
+        yesterday: string;
+        older: string;
+        errorTitle: string;
+        errorDescription: string;
+        errorButton: string;
+    };
+    onRefresh: () => void;
+}
+export interface ActivityGroup {
+    heading: string;
+    items: ActivityItem[];
+}
+export interface ActivityItem {
+    userName: string;
+    audit: string;
+    entityId: string;
+    timestamp: number;
+}

package/lib/esm/components/c4-cluster-details-activity/c4-cluster-details-activity.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-cluster-details-alerts/c4-cluster-details-alerts.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ClusterDetailsAlertsProps } from './c4-cluster-details-alerts.types';
+export declare const C4ClusterDetailsAlerts: ({ alerts, isLoading, text, permissions, onCreateAlert, onUpdateAlert, onDeleteAlert, onNoAlertsDocsClick, }: C4ClusterDetailsAlertsProps) => JSX.Element;

package/lib/esm/components/c4-cluster-details-alerts/c4-cluster-details-alerts.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3DataTable, C3EmptyState, } from '@camunda/camunda-composite-components';
+import { DataTableSkeleton, Stack, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, } from '@carbon/react';
+import { Edit } from '@carbon/react/icons/index.esm.js';
+export const C4ClusterDetailsAlerts = ({ alerts, isLoading, text, permissions, onCreateAlert, onUpdateAlert, onDeleteAlert, onNoAlertsDocsClick, }) => {
+    const headerData = [
+        {
+            label: text.deliveryTypeHeader,
+            key: 'deliveryMethod',
+            sorting: (a, b) => {
+                return a.deliveryMethod.localeCompare(b.deliveryMethod);
+            },
+        },
+        {
+            label: text.createdAtHeader,
+            key: 'createdAt',
+            sorting: (a, b) => {
+                return a.createdAt.localeCompare(b.createdAt);
+            },
+        },
+        {
+            label: text.createdByHeader,
+            key: 'createdBy',
+            sorting: (a, b) => {
+                return a.createdBy.localeCompare(b.createdBy);
+            },
+        },
+    ];
+    const ExpandedRowContent = (alert) => {
+        return (_jsx(StructuredListWrapper, { isCondensed: true, style: {
+                marginLeft: '-56px',
+            }, children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: { minHeight: '50px', width: '250px' }, children: alert.reportType === 'Webhook'
+                                    ? text.targetWebhookLabel
+                                    : text.targetEmailLabel }), _jsx(StructuredListCell, { children: alert.userIdOrWebhook })] }), alert.reportType === 'Webhook' && (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: {
+                                    minHeight: '50px',
+                                    width: '250px',
+                                }, children: text.hmacEnabledLabel }), _jsx(StructuredListCell, { children: alert.hmacEnabled ? 'Yes' : 'No' })] })), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: { minHeight: '50px', width: '250px' }, children: text.updatedLabel }), _jsx(StructuredListCell, { children: alert.updatedAt ? alert.updatedAt : _jsx(_Fragment, {}) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: { minHeight: '50px', width: '250px' }, children: text.updatedByLabel }), _jsx(StructuredListCell, { children: alert.updatedBy })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: { minHeight: '50px' }, children: text.lastTimeTriggeredLabel }), _jsx(StructuredListCell, { children: alert.lastTimeTriggered ? alert.lastTimeTriggered : '-' })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, style: { minHeight: '50px', width: '250px' }, children: text.numberOfTimesTriggeredLabel }), _jsx(StructuredListCell, { children: alert.triggerCount })] })] }) }));
+    };
+    const toolbar = [
+        {
+            id: 'search',
+            type: 'search',
+            label: text.searchLabel,
+            filter: (filter) => {
+                const alert = alerts.find((a) => a.id === filter.row.id);
+                const createdBy = filter.row.createdBy.toLowerCase();
+                const createdAt = filter.row.createdAt.toLowerCase();
+                const deliveryMethod = filter.row.deliveryMethod.toLowerCase();
+                return [
+                    createdBy,
+                    createdAt,
+                    deliveryMethod,
+                    alert?.userIdOrWebhook,
+                ].some((value) => value?.includes(filter.searchTerm?.toLowerCase()));
+            },
+        },
+        {
+            id: 'create',
+            type: 'button',
+            label: text.createButton,
+            onClick: onCreateAlert,
+            disabled: permissions.canCreateDisabled,
+        },
+    ];
+    const actions = [
+        {
+            id: 'edit-alert',
+            label: text.updateAction,
+            kind: 'ghost',
+            icon: Edit,
+            disabled: (row) => !row.canEdit,
+            onClick: (row) => onUpdateAlert(row.id),
+            visible: () => permissions.canUpdate,
+        },
+        {
+            id: 'delete-alert',
+            label: text.deleteAction,
+            kind: 'danger--ghost',
+            onClick: (row) => onDeleteAlert(row.id),
+            visible: () => permissions.canDelete,
+        },
+    ];
+    if (isLoading) {
+        return _jsx(DataTableSkeleton, { showToolbar: false, showHeader: false });
+    }
+    if (alerts.length === 0) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `../../../../assets/alerts.svg`,
+                altText: 'allertsIcon',
+            }, heading: text.noAlertsTitle, description: text.noAlertsDescription, button: permissions.canCreate
+                ? {
+                    onClick: onCreateAlert,
+                    disabled: permissions.canCreateDisabled,
+                    label: text.noAlertsButton,
+                    id: 'createAlertCTA',
+                }
+                : undefined, link: {
+                label: text.noAlertsLink,
+                href: '#',
+                onClick: onNoAlertsDocsClick,
+            } }));
+    }
+    return (_jsx(Stack, { gap: 5, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2rem',
+                maxWidth: 'calc(100vw - 64px)',
+                width: '100%',
+            }, children: [_jsx(C3DataTable, { headers: headerData, data: alerts.map((alert) => {
+                        return {
+                            id: alert.id,
+                            deliveryMethod: alert.deliveryMethod,
+                            createdAt: alert.createdAt,
+                            createdBy: alert.createdBy,
+                            canEdit: alert.canEdit,
+                            expansion: ExpandedRowContent(alert),
+                        };
+                    }), actions: actions, toolbar: toolbar, title: text.title, queryPrefix: 'cluster-details-alerts' }), _jsx("span", { className: 'legalText', children: text.infoText })] }) }));
+};

package/lib/esm/components/c4-cluster-details-alerts/c4-cluster-details-alerts.types.d.ts

@@ -0,0 +1,51 @@
+import type { JSX } from 'react';
+export interface C4ClusterDetailsAlertsProps {
+    alerts: Alert[];
+    isLoading: boolean;
+    text: {
+        title: string;
+        createButton: string;
+        searchLabel: string;
+        deliveryTypeHeader: string;
+        createdAtHeader: string;
+        createdByHeader: string;
+        updateAction: string;
+        deleteAction: string;
+        targetWebhookLabel: string;
+        targetEmailLabel: string;
+        updatedLabel: string;
+        updatedByLabel: string;
+        lastTimeTriggeredLabel: string;
+        numberOfTimesTriggeredLabel: string;
+        hmacEnabledLabel: string;
+        noAlertsTitle: string;
+        noAlertsDescription: JSX.Element;
+        noAlertsButton: string;
+        noAlertsLink: string;
+        infoText: JSX.Element;
+    };
+    permissions: {
+        canCreate: boolean;
+        canCreateDisabled: boolean;
+        canUpdate: boolean;
+        canDelete: boolean;
+    };
+    onCreateAlert: () => void;
+    onUpdateAlert: (alertId: string) => void;
+    onDeleteAlert: (alertId: string) => void;
+    onNoAlertsDocsClick: () => void;
+}
+export interface Alert {
+    id: string;
+    deliveryMethod: string;
+    createdAt: string;
+    createdBy: string;
+    updatedAt?: string;
+    updatedBy?: string;
+    lastTimeTriggered?: string;
+    triggerCount: number;
+    userIdOrWebhook: string;
+    reportType: 'Email' | 'Webhook';
+    hmacEnabled: boolean;
+    canEdit: boolean;
+}

package/lib/esm/components/c4-cluster-details-alerts/c4-cluster-details-alerts.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-cluster-details-clients/c4-cluster-details-clients.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ClusterDetailsClientsProps } from './c4-cluster-details-clients.types';
+export declare const C4ClusterDetailsClients: ({ clients, isLoading, hasError, hasIdentityIntegration, hasIdentityAuthorization, hasZeebeUrl, text, urls, permissions, onNavigateToClient, onCreateClient, onUpdateClient, onDeleteClient, onRefresh, onOpenIdentity, onOpenDocs, }: C4ClusterDetailsClientsProps) => JSX.Element;

package/lib/esm/components/c4-cluster-details-clients/c4-cluster-details-clients.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3DataTable, C3EmptyState, } from '@camunda/camunda-composite-components';
+import { Button, CodeSnippet, Stack } from '@carbon/react';
+import { Edit, Renew } from '@carbon/react/icons/index.esm.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+export const C4ClusterDetailsClients = ({ clients, isLoading, hasError, hasIdentityIntegration, hasIdentityAuthorization, hasZeebeUrl, text, urls, permissions, onNavigateToClient, onCreateClient, onUpdateClient, onDeleteClient, onRefresh, onOpenIdentity, onOpenDocs, }) => {
+    const tableData = clients.map((client, originalIndex) => ({
+        ...client,
+        originalIndex,
+    }));
+    const headerData = [
+        {
+            label: text.headerName,
+            key: 'name',
+            type: {
+                type: 'link-button',
+                options: {
+                    linkButtonOptions: {
+                        onClick: (row) => {
+                            onNavigateToClient(row.id);
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => {
+                const left = a;
+                const right = b;
+                return left.name.localeCompare(right.name);
+            },
+        },
+        {
+            label: text.headerClientId,
+            key: 'clientId',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            const clientRow = row;
+                            return (_jsx(CodeSnippet, { type: 'inline', align: 'top', children: clientRow.clientId }));
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => {
+                const left = a;
+                const right = b;
+                return left.clientId.localeCompare(right.clientId);
+            },
+        },
+        {
+            label: text.headerScopes,
+            key: 'scopes',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            const clientRow = row;
+                            return (_jsx(_Fragment, { children: new Intl.ListFormat('en', {
+                                    style: 'long',
+                                    type: 'conjunction',
+                                }).format(clientRow.scopes) }));
+                        },
+                    },
+                },
+            },
+        },
+        {
+            label: text.headerCreated,
+            key: 'created',
+            sorting: (a, b) => (b.created?.getTime() ?? 0) -
+                (a.created?.getTime() ?? 0),
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            const clientRow = row;
+                            if (!clientRow.created)
+                                return _jsx(_Fragment, { children: "-" });
+                            return (_jsx(_Fragment, { children: clientRow.created.toLocaleString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                }) }));
+                        },
+                    },
+                },
+            },
+        },
+        {
+            label: text.headerLastUsed,
+            key: 'lastUsed',
+            sorting: (a, b) => (b.lastUsed?.getTime() ?? 0) -
+                (a.lastUsed?.getTime() ?? 0),
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            const clientRow = row;
+                            if (!clientRow.lastUsed)
+                                return _jsx(_Fragment, { children: "-" });
+                            return (_jsx(_Fragment, { children: clientRow.lastUsed.toLocaleString('en-US', {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                }) }));
+                        },
+                    },
+                },
+            },
+        },
+    ];
+    const toolbar = [
+        {
+            id: 'search',
+            type: 'search',
+            label: text.searchLabel,
+            filter: (filter) => {
+                const row = filter.row;
+                const name = row.name.toLowerCase();
+                const clientId = row.clientId.toLowerCase();
+                const scopes = row.scopes;
+                const searchTerm = (filter.searchTerm ?? '').toLowerCase();
+                const scopeIncludesSearchTerm = scopes.some((scope) => scope.toLowerCase().includes(searchTerm));
+                return ([name, clientId].some((value) => value.includes(searchTerm)) ||
+                    scopeIncludesSearchTerm);
+            },
+        },
+        {
+            id: 'create',
+            type: 'button',
+            label: text.createButton,
+            onClick: onCreateClient,
+            disabled: !permissions.canCreate || !hasZeebeUrl,
+        },
+    ];
+    const actions = [
+        {
+            id: 'edit-client',
+            label: text.renameAction,
+            kind: 'ghost',
+            icon: Edit,
+            onClick: (row) => onUpdateClient(row.id),
+            visible: () => permissions.canUpdate,
+        },
+        {
+            id: 'delete-alert',
+            label: text.deleteAction,
+            kind: 'danger--ghost',
+            onClick: (row) => onDeleteClient(row.id),
+            visible: () => permissions.canDelete,
+        },
+    ];
+    if (hasError) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `/assets/error.svg`,
+                altText: 'errorIcon',
+            }, heading: text.errorTitle, description: text.errorDescription, button: {
+                onClick: onRefresh,
+                disabled: false,
+                label: text.errorButton,
+                icon: Renew,
+            } }));
+    }
+    if (!isLoading && clients.length === 0) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `/assets/clientApi.svg`,
+                altText: 'clientApiIcon',
+            }, heading: text.emptyTitle, description: text.emptyDescription, button: {
+                onClick: onCreateClient,
+                disabled: !permissions.canCreate || !hasZeebeUrl,
+                label: text.createFirstClient,
+                id: 'createClientCTA',
+            }, link: {
+                href: urls.docs,
+                label: text.learnMoreLabel,
+                onClick: onOpenDocs,
+            } }));
+    }
+    return (_jsx(Stack, { gap: 5, children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2rem',
+                maxWidth: 'calc(100vw - 64px)',
+                width: '100%',
+            }, children: _jsx(C3DataTable, { data: tableData, isLoading: isLoading, headers: headerData, actions: actions, toolbar: toolbar, title: text.title, description: (() => {
+                    if (hasIdentityIntegration && hasIdentityAuthorization) {
+                        return (_jsxs(Stack, { children: [_jsxs("p", { children: [text.subtitleIdentityPrefix, ' ', _jsx(C4LinkButton, { label: text.subtitleIdentityLinkLabel, onClick: onOpenDocs, inline: true }), text.subtitleIdentitySuffix] }), _jsx(Button, { kind: 'tertiary', size: 'md', onClick: onOpenIdentity, children: text.identityButton })] }));
+                    }
+                    else {
+                        return text.subtitle;
+                    }
+                })(), queryPrefix: 'cluster-details-clients' }) }) }));
+};

package/lib/esm/components/c4-cluster-details-clients/c4-cluster-details-clients.types.d.ts

@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react';
+export interface C4ClusterDetailsClientsProps {
+    clients: ClientItem[];
+    isLoading: boolean;
+    hasError: boolean;
+    hasIdentityIntegration: boolean;
+    hasIdentityAuthorization: boolean;
+    hasZeebeUrl: boolean;
+    text: {
+        title: string;
+        subtitle: string;
+        subtitleIdentityPrefix: string;
+        subtitleIdentityLinkLabel: string;
+        subtitleIdentitySuffix: string;
+        identityButton: string;
+        createButton: string;
+        createFirstClient: string;
+        searchLabel: string;
+        headerName: string;
+        headerClientId: string;
+        headerScopes: string;
+        headerCreated: string;
+        headerLastUsed: string;
+        renameAction: string;
+        deleteAction: string;
+        errorTitle: string;
+        errorDescription: string;
+        errorButton: string;
+        emptyTitle: string;
+        emptyDescription: string | ReactElement;
+        learnMoreLabel: string;
+    };
+    urls: {
+        clientDetails: (clientId: string) => string;
+        identity: string;
+        docs: string;
+    };
+    permissions: {
+        canCreate: boolean;
+        canUpdate: boolean;
+        canDelete: boolean;
+    };
+    onNavigateToClient: (clientId: string) => void;
+    onCreateClient: () => void;
+    onUpdateClient: (clientId: string) => void;
+    onDeleteClient: (clientId: string) => void;
+    onRefresh: () => void;
+    onOpenIdentity: () => void;
+    onOpenDocs: () => void;
+}
+export interface ClientItem {
+    id: string;
+    name: string;
+    clientId: string;
+    scopes: string[];
+    created?: Date;
+    lastUsed?: Date;
+}