@camunda/ccma-saas-frontend 0.0.33 → 0.0.35

package/lib/esm/components/c4-ai-usage/c4-ai-usage.types.d.ts

@@ -46,7 +46,7 @@ export interface C4AiUsageProps {
     urls: {
         blueprints: string;
         llmTokensDocs: string;
-        contact?: string;
+        contact: string;
     };
     /**
      * Callback when the "View AI blueprints" button is clicked

package/lib/esm/components/c4-billing-page/elements/current-usage-metrics.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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.
@@ -38,7 +38,9 @@ export const CurrentUsageMetrics = ({ title, decisionInstances, description, gen
                 break;
         }
     }
-    const component = (_jsx(C4TileWithTitleAndAction, { title: title, description: description, children: ['sm', 'md'].includes(mediaSize) ? (_jsxs(Stack, { gap: 5, children: [_jsxs(Grid, { style: { ...STYLES.grid }, children: [_jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[0] }), _jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[1] })] }), _jsxs(Grid, { style: { ...STYLES.grid }, children: [_jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[2] }), _jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[3] })] })] })) : (_jsx(Grid, { style: { ...STYLES.grid }, children: metrics.map((metric, index) => (_jsx(Column, { span: 4, style: { ...STYLES.grid }, children: metric }, `metric-${metricsOrder[index]}`))) })) }));
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, description: description, children: ['sm', 'md'].includes(mediaSize) ? (_jsx(Stack, { gap: 5, children: Array.from({ length: Math.ceil(metrics.length / 2) }, (_, rowIndex) => (_jsx(Grid, { style: { ...STYLES.grid }, children: metrics
+                    .slice(rowIndex * 2, rowIndex * 2 + 2)
+                    .map((metric, colIndex) => (_jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metric }, `metric-${metricsOrder[rowIndex * 2 + colIndex]}`))) }, `row-${rowIndex}`))) })) : (_jsx(Grid, { style: { ...STYLES.grid }, children: metrics.map((metric, index) => (_jsx(Column, { span: 4, style: { ...STYLES.grid }, children: metric }, `metric-${metricsOrder[index]}`))) })) }));
     return component;
 };
 export function mediaSizeByWidth(width) {

package/lib/esm/components/c4-billing-page/elements/value-metric.js

@@ -103,14 +103,14 @@ const MeterVisualization = ({ currentPrefix, current, currentPostfix, max, maxPo
                     display: 'grid',
                     gridTemplateColumns: '1fr auto',
                     width: '100%',
-                }, children: [_jsx("p", { style: { fontSize: '18px' }, children: data.current }), _jsx("p", { style: { color: 'var(--cds-text-helper)', alignSelf: 'end' }, children: data.max })] }), _jsx(MeterChart, { data: [
+                }, children: [_jsx("p", { style: { fontSize: '18px' }, children: data.current }), _jsx("p", { style: { color: 'var(--cds-text-helper)', alignSelf: 'end' }, children: data.max })] }), max > 0 && (_jsx(MeterChart, { data: [
                     {
                         group,
                         value: current,
                     },
-                ], options: chartOptions })] }));
+                ], options: chartOptions }))] }));
     return component;
 };
 function formatNumber(number) {
-    return new Intl.NumberFormat('en-US', { maximumSignificantDigits: 3 }).format(number);
+    return new Intl.NumberFormat('en-US').format(number);
 }

package/lib/esm/components/c4-billing-page/elements/value-metric.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/c4-billing-page/elements/value-metric.spec.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } 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 { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ValueMetric } from './value-metric.js';
+vi.mock('@carbon/charts-react', () => ({
+    MeterChart: ({ data }) => (_jsx("div", { "data-testid": 'meter-chart', "data-value": data[0]?.value })),
+}));
+function buildChartProps(current, max = 500000) {
+    return {
+        title: 'Process instances',
+        loading: false,
+        metric: {
+            kind: 'chart',
+            value: {
+                current,
+                max,
+            },
+        },
+    };
+}
+describe('ValueMetric', () => {
+    describe('MeterChart (progress bar)', () => {
+        it('renders the progress bar when included (max) > 0', () => {
+            render(_jsx(ValueMetric, { ...buildChartProps(0, 500000) }));
+            expect(screen.getByTestId('meter-chart')).toBeInTheDocument();
+        });
+        it('renders the progress bar when both current and max are > 0', () => {
+            render(_jsx(ValueMetric, { ...buildChartProps(400000, 500000) }));
+            expect(screen.getByTestId('meter-chart')).toBeInTheDocument();
+        });
+        it('does NOT render the progress bar when included (max) is zero', () => {
+            render(_jsx(ValueMetric, { ...buildChartProps(0, 0) }));
+            expect(screen.queryByTestId('meter-chart')).not.toBeInTheDocument();
+        });
+        it('does NOT render the progress bar when max is zero even if current > 0', () => {
+            render(_jsx(ValueMetric, { ...buildChartProps(5, 0) }));
+            expect(screen.queryByTestId('meter-chart')).not.toBeInTheDocument();
+        });
+        it('still renders the current and max values when included (max) is zero', () => {
+            render(_jsx(ValueMetric, { ...buildChartProps(0, 0) }));
+            expect(screen.getAllByText('0')).toHaveLength(2);
+        });
+    });
+});

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

@@ -1,3 +1,3 @@
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 import type { C4ClusterDetailsSecureConnectivityProps } from './c4-cluster-details-secure-connectivity.types';
 export declare const C4ClusterDetailsSecureConnectivity: ({ status, privateEndpoints, connectInAwsUrl, isLoading, isDeactivating, text, permissions, urls, onOpenActivate, onOpenPrivateEndpoint, onOpenDocs, onDeactivate, onOpenConnectInAws, onEditAllowedPrincipals, onEditAllowedRegions, }: C4ClusterDetailsSecureConnectivityProps) => JSX.Element;

package/lib/esm/components/c4-cluster-details-secure-connectivity/c4-cluster-details-secure-connectivity.js

@@ -7,6 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { C3DataTable, C3EmptyState, } from '@camunda/camunda-composite-components';
 import { Button, CodeSnippet, Layer, Link, Stack, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, Tile, } from '@carbon/react';
 import { CheckmarkFilled, Edit, Launch, PendingFilled, } from '@carbon/react/icons/index.esm.js';
+import { useEffect, useState } from 'react';
+const singleSnippetMaxWidth = '48rem';
 export const C4ClusterDetailsSecureConnectivity = ({ status, privateEndpoints, connectInAwsUrl, isLoading, isDeactivating, text, permissions, urls, onOpenActivate, onOpenPrivateEndpoint, onOpenDocs, onDeactivate, onOpenConnectInAws, onEditAllowedPrincipals, onEditAllowedRegions, }) => {
     const endpointRows = (privateEndpoints ?? []).map((endpoint, index) => ({
         id: endpoint.id,
@@ -102,15 +104,20 @@ export const C4ClusterDetailsSecureConnectivity = ({ status, privateEndpoints, c
         if (!value) {
             return _jsx("span", { children: "\u2014" });
         }
-        return (_jsx(Layer, { style: { width: '100%', minWidth: 0 }, children: _jsx(CodeSnippet, { type: 'single', children: value }) }));
+        return (_jsx(Layer, { style: { width: '100%', maxWidth: singleSnippetMaxWidth, minWidth: 0 }, children: _jsx(CodeSnippet, { type: 'single', children: value }) }));
     };
     const renderListFieldWithEdit = (options) => {
         const values = options.values ?? [];
         return (_jsxs("div", { style: {
                 display: 'flex',
+                width: '100%',
+                minWidth: 0,
+                maxWidth: options.alignToSingleSnippet
+                    ? singleSnippetMaxWidth
+                    : undefined,
                 gap: 'var(--cds-spacing-02)',
                 alignItems: values.length > 1 ? 'flex-start' : 'center',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: values.length ? (_jsx(Stack, { gap: 1, children: values.map((value) => (_jsx(CodeSnippet, { type: 'inline', align: 'top', children: value }, value))) })) : (_jsx("span", { children: "\u2014" })) }), options.onEdit ? (_jsx(Button, { kind: 'ghost', size: 'sm', hasIconOnly: true, renderIcon: Edit, iconDescription: options.editLabel, style: { marginRight: options.marginRight ? '28px' : '4px' }, onClick: () => options.onEdit?.() })) : undefined] }));
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: values.length ? (_jsx(Stack, { gap: 1, children: values.map((value) => (_jsx(CodeSnippet, { type: 'inline', align: 'top', children: value }, value))) })) : (_jsx("span", { children: "\u2014" })) }), options.onEdit ? (_jsx(Button, { kind: 'ghost', size: 'md', hasIconOnly: true, renderIcon: Edit, iconDescription: options.editLabel, onClick: () => options.onEdit?.() })) : undefined] }));
     };
     const labelCellLeftStyle = {
         width: '12rem',
@@ -121,11 +128,43 @@ export const C4ClusterDetailsSecureConnectivity = ({ status, privateEndpoints, c
         color: 'var(--cds-text-secondary)',
         paddingLeft: '40px',
     };
+    const helperText01Style = {
+        fontSize: 'var(--cds-helper-text-01-font-size)',
+        fontWeight: 'var(--cds-helper-text-01-font-weight)',
+        lineHeight: 'var(--cds-helper-text-01-line-height)',
+        letterSpacing: 'var(--cds-helper-text-01-letter-spacing)',
+        color: 'var(--cds-text-secondary)',
+    };
+    // Responsive layout: switch to single-column when the viewport is narrower
+    // than 1520px (the point at which the 2-column layout starts breaking).
+    // Measuring window.innerWidth is simpler and more reliable than observing
+    // the container element: the content tile sits inside Carbon's 1584px max
+    // grid with a sidebar, so the container never reaches the element-width
+    // thresholds that would be needed to detect this breakpoint.
+    const [isNarrowLayout, setIsNarrowLayout] = useState(() => typeof window !== 'undefined' && window.innerWidth < 1520);
+    useEffect(() => {
+        const handleResize = () => setIsNarrowLayout(window.innerWidth < 1520);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    const deactivateLinkElement = onDeactivate ? (_jsx(Link, { href: '#', "aria-disabled": !permissions.canDeactivate || !!isDeactivating, tabIndex: !permissions.canDeactivate || isDeactivating ? -1 : undefined, onClick: (e) => {
+            e.preventDefault();
+            if (permissions.canDeactivate && !isDeactivating) {
+                onDeactivate();
+            }
+        }, style: !permissions.canDeactivate || isDeactivating
+            ? {
+                color: 'var(--cds-text-disabled)',
+                pointerEvents: 'none',
+            }
+            : undefined, children: isDeactivating
+            ? text.deactivatingButton
+            : (text.deactivateButton ?? 'Deactivate service') })) : undefined;
     if (!isReady) {
         return (_jsx(C3EmptyState, { icon: {
                 path: `../../../../assets/secureConnectivity.svg`,
                 altText: 'secureConnectivityIcon',
-            }, heading: text.emptyTitle, description: text.emptyDescription, button: status?.status !== undefined
+            }, heading: text.emptyTitle, description: text.emptyDescription, button: isLoading || status?.status !== undefined
                 ? undefined
                 : {
                     onClick: () => onOpenActivate(),
@@ -142,47 +181,57 @@ export const C4ClusterDetailsSecureConnectivity = ({ status, privateEndpoints, c
                                         display: 'flex',
                                         alignItems: 'center',
                                         gap: 'var(--cds-spacing-05)',
-                                    }, children: _jsx("h4", { style: { margin: 0 }, children: text.serviceDetailsTitle ?? 'Service details' }) }), _jsx(StructuredListWrapper, { isCondensed: true, isFlush: true, style: { borderTop: 'none' }, children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.enabledStatusLabel ?? 'Status' }), _jsx(StructuredListCell, { style: { borderTop: 'none' }, children: statusElement }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: _jsx("span", { style: { opacity: 0 }, children: "\u2014" }) }), _jsx(StructuredListCell, { style: {
-                                                            borderTop: 'none',
-                                                            textAlign: 'right',
-                                                        }, children: onDeactivate ? (_jsx(Link, { href: '#', "aria-disabled": !permissions.canDeactivate || !!isDeactivating, tabIndex: !permissions.canDeactivate || isDeactivating
-                                                                ? -1
-                                                                : undefined, onClick: (e) => {
-                                                                e.preventDefault();
-                                                                if (permissions.canDeactivate && !isDeactivating) {
-                                                                    onDeactivate();
-                                                                }
-                                                            }, style: !permissions.canDeactivate || isDeactivating
-                                                                ? {
-                                                                    color: 'var(--cds-text-disabled)',
-                                                                    pointerEvents: 'none',
-                                                                }
-                                                                : undefined, children: isDeactivating
-                                                                ? text.deactivatingButton
-                                                                : (text.deactivateButton ?? 'Deactivate service') })) : undefined })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceNameLabel ?? 'Service name' }), _jsx(StructuredListCell, { style: {
-                                                            minWidth: 0,
-                                                            paddingRight: '40px',
-                                                        }, children: renderInlineCodeField(endpoint?.serviceName) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.serviceRegionLabel ?? 'Service region' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.region) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceTypeLabel ?? 'Service type' }), _jsx(StructuredListCell, { style: {
-                                                            minWidth: 0,
-                                                            paddingRight: '40px',
-                                                        }, children: renderInlineCodeField(endpoint?.type) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.privateDnsNameLabel ?? 'Private DNS name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.privateDnsName) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.allowedPrincipalsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
-                                                            values: status?.spec.allowedPrincipals,
-                                                            onEdit: onEditAllowedPrincipals,
-                                                            editLabel: 'Edit allowed principals',
-                                                            marginRight: true,
-                                                        }) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.allowedRegionsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
-                                                            values: status?.spec.allowedRegions,
-                                                            onEdit: onEditAllowedRegions,
-                                                            editLabel: 'Edit supported regions',
-                                                        }) })] })] }) }), _jsx("div", { children: _jsxs(Stack, { gap: 3, children: [_jsx("h4", { style: { margin: 0, marginTop: '12px' }, children: text.connectTitle ?? 'Connect to the service' }), connectInAwsUrl ? (_jsx(Button, { kind: 'tertiary', renderIcon: Launch, style: { whiteSpace: 'nowrap', maxWidth: '100%' }, onClick: () => {
+                                    }, children: _jsx("h4", { style: { margin: 0 }, children: text.serviceDetailsTitle ?? 'Service details' }) }), _jsx("div", { children: isNarrowLayout ? (
+                                    // Single-column layout: each field on its own row
+                                    _jsx(StructuredListWrapper, { isCondensed: true, isFlush: true, style: { borderTop: 'none' }, children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.enabledStatusLabel ?? 'Status' }), _jsx(StructuredListCell, { style: { borderTop: 'none' }, children: _jsxs("div", { style: {
+                                                                    display: 'flex',
+                                                                    justifyContent: 'space-between',
+                                                                    alignItems: 'center',
+                                                                }, children: [statusElement, deactivateLinkElement] }) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceNameLabel ?? 'Service name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.serviceName) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceRegionLabel ?? 'Service region' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.region) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceTypeLabel ?? 'Service type' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.type) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.privateDnsNameLabel ?? 'Private DNS name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.privateDnsName) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.allowedPrincipalsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
+                                                                values: status?.spec.allowedPrincipals,
+                                                                onEdit: onEditAllowedPrincipals,
+                                                                editLabel: 'Edit allowed principals',
+                                                                alignToSingleSnippet: true,
+                                                            }) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.allowedRegionsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
+                                                                values: status?.spec.allowedRegions,
+                                                                onEdit: onEditAllowedRegions,
+                                                                editLabel: 'Edit supported regions',
+                                                                alignToSingleSnippet: true,
+                                                            }) })] })] }) })) : (
+                                    // Two-column layout: pairs of fields side-by-side
+                                    _jsx(StructuredListWrapper, { isCondensed: true, isFlush: true, style: { borderTop: 'none', overflowX: 'auto' }, children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.enabledStatusLabel ?? 'Status' }), _jsx(StructuredListCell, { style: { borderTop: 'none' }, children: statusElement }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: _jsx("span", { style: { opacity: 0 }, children: "\u2014" }) }), _jsx(StructuredListCell, { style: {
+                                                                borderTop: 'none',
+                                                                textAlign: 'right',
+                                                            }, children: deactivateLinkElement })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceNameLabel ?? 'Service name' }), _jsx(StructuredListCell, { style: {
+                                                                minWidth: 0,
+                                                                paddingRight: '40px',
+                                                            }, children: renderInlineCodeField(endpoint?.serviceName) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.serviceRegionLabel ?? 'Service region' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.region) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.serviceTypeLabel ?? 'Service type' }), _jsx(StructuredListCell, { style: {
+                                                                minWidth: 0,
+                                                                paddingRight: '40px',
+                                                            }, children: renderInlineCodeField(endpoint?.type) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.privateDnsNameLabel ?? 'Private DNS name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.privateDnsName) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellLeftStyle, children: text.allowedPrincipalsLabel }), _jsx(StructuredListCell, { style: {
+                                                                minWidth: 0,
+                                                                paddingRight: '40px',
+                                                            }, children: renderListFieldWithEdit({
+                                                                values: status?.spec.allowedPrincipals,
+                                                                onEdit: onEditAllowedPrincipals,
+                                                                editLabel: 'Edit allowed principals',
+                                                            }) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellRightStyle, children: text.allowedRegionsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
+                                                                values: status?.spec.allowedRegions,
+                                                                onEdit: onEditAllowedRegions,
+                                                                editLabel: 'Edit supported regions',
+                                                            }) })] })] }) })) }), _jsx("div", { children: _jsxs(Stack, { gap: 3, children: [_jsx("h4", { style: { margin: 0, marginTop: '12px' }, children: text.connectTitle ?? 'Connect to the service' }), connectInAwsUrl ? (_jsx(Button, { kind: 'tertiary', size: 'md', renderIcon: Launch, style: { whiteSpace: 'nowrap', maxWidth: '100%' }, onClick: () => {
                                                     if (onOpenConnectInAws) {
                                                         onOpenConnectInAws(connectInAwsUrl);
                                                     }
                                                 }, disabled: !onOpenConnectInAws, children: text.connectInAwsButtonLabel ??
-                                                    'Create interface VPC endpoint connections in AWS' })) : undefined, text.connectHelperText ? (_jsx("div", { style: { color: 'var(--cds-text-secondary)' }, children: text.connectHelperText })) : undefined] }) }), _jsxs("div", { children: [_jsx("div", { style: {
+                                                    'Create interface VPC endpoint connections in AWS' })) : undefined, text.connectHelperText ? (_jsx("div", { style: helperText01Style, children: text.connectHelperText })) : undefined] }) }), _jsxs("div", { children: [_jsx("div", { style: {
                                                 borderTop: '1px solid var(--cds-border-subtle-01)',
                                                 paddingTop: 'var(--cds-spacing-05)',
-                                            } }), _jsxs("h4", { style: { margin: 0, marginTop: '12px', marginBottom: '20px' }, children: [text.endpointConnectionsTitle ?? 'Endpoint connections', " (", endpointConnectionsCount, ")"] }), endpointRows.length === 0 && !isLoading ? (_jsx("div", { style: {
+                                            } }), _jsxs("h4", { style: {
+                                                margin: 0,
+                                                marginTop: '12px',
+                                                marginBottom: 'var(--cds-spacing-03)',
+                                            }, children: [text.endpointConnectionsTitle ?? 'Endpoint connections', " (", endpointConnectionsCount, ")"] }), endpointRows.length === 0 && !isLoading ? (_jsx("div", { style: {
                                                 color: 'var(--cds-text-secondary)',
                                                 marginLeft: '24px',
                                                 marginBottom: '16px',

package/lib/esm/components/c4-cluster-list/c4-cluster-list.d.ts

@@ -1,3 +1,3 @@
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 import type { C4ClusterListProps } from './c4-cluster-list.types';
 export declare const C4ClusterList: ({ clusters, loading, urls, permissions, onNavigate, onDeleteCluster, onAssignTag, onWakeCluster, trialNotification, encryptionNotification, clusterCapMessage, emptyStateContent, translations, isClusterPaused, isRunningOnUnsupportedGeneration, }: C4ClusterListProps) => JSX.Element;

package/lib/esm/components/c4-cluster-list/c4-cluster-list.js

@@ -7,10 +7,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { C3ClusterTag, C3DataTable, } from '@camunda/camunda-composite-components';
 import { Button, InlineNotification, Link } from '@carbon/react';
 import { Add, WarningAltFilled } from '@carbon/react/icons/index.esm.js';
+import { useCallback, useEffect, useLayoutEffect, useRef, } from 'react';
 import { ClusterStatusElement } from '../c4-cluster-overview/applications.js';
 import { C4IconAndTextElement, getClusterLoadConfig, } from '../c4-cluster-overview/c4-cluster-overview.js';
 import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
 import { C4PageTemplate } from '../c4-page-template/c4-page-template.js';
+const DEFAULT_PAGE_SIZE = 10;
+const PAGE_NUMBER_SELECTOR = '.cds--select__page-number select';
+const PAGE_SIZE_SELECTOR = '.cds--select__item-count select';
+const PAGE_FORWARD_BUTTON_SELECTOR = '.cds--pagination__button--forward';
+const PAGE_BACKWARD_BUTTON_SELECTOR = '.cds--pagination__button--backward';
 function isPlainLeftClick(event) {
     return (event.button === 0 &&
         !event.defaultPrevented &&
@@ -20,6 +26,106 @@ function isPlainLeftClick(event) {
         !event.shiftKey);
 }
 export const C4ClusterList = ({ clusters, loading, urls, permissions, onNavigate, onDeleteCluster, onAssignTag, onWakeCluster, trialNotification, encryptionNotification, clusterCapMessage, emptyStateContent, translations, isClusterPaused, isRunningOnUnsupportedGeneration, }) => {
+    const tableContainerRef = useRef(null);
+    const stableClustersRef = useRef(clusters.map((cluster) => ({ ...cluster })));
+    const selectedPageRef = useRef(1);
+    const syncPageTimeoutRef = useRef(undefined);
+    const stableClusters = (() => {
+        const previousClusters = stableClustersRef.current;
+        const canReusePreviousClusters = previousClusters.length === clusters.length &&
+            previousClusters.every((cluster, index) => cluster.id === clusters[index]?.id);
+        if (canReusePreviousClusters) {
+            clusters.forEach((cluster, index) => {
+                Object.assign(previousClusters[index], cluster);
+            });
+            return previousClusters;
+        }
+        const nextClusters = clusters.map((cluster) => ({ ...cluster }));
+        stableClustersRef.current = nextClusters;
+        return nextClusters;
+    })();
+    const readPageSelect = useCallback(() => {
+        return (tableContainerRef.current?.querySelector(PAGE_NUMBER_SELECTOR) ?? null);
+    }, []);
+    const readPageSizeSelect = useCallback(() => {
+        return (tableContainerRef.current?.querySelector(PAGE_SIZE_SELECTOR) ?? null);
+    }, []);
+    const syncSelectedPageFromDom = useCallback(() => {
+        const pageSelect = readPageSelect();
+        if (!pageSelect) {
+            selectedPageRef.current = 1;
+            return;
+        }
+        const page = Number(pageSelect.value);
+        if (Number.isFinite(page) && page > 0) {
+            selectedPageRef.current = page;
+        }
+    }, [readPageSelect]);
+    const scheduleSelectedPageSync = useCallback(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (syncPageTimeoutRef.current !== undefined) {
+            window.clearTimeout(syncPageTimeoutRef.current);
+        }
+        syncPageTimeoutRef.current = window.setTimeout(() => {
+            syncSelectedPageFromDom();
+            syncPageTimeoutRef.current = undefined;
+        }, 0);
+    }, [syncSelectedPageFromDom]);
+    useEffect(() => {
+        const tableContainer = tableContainerRef.current;
+        if (!tableContainer) {
+            return;
+        }
+        const pageSelect = tableContainer.querySelector(PAGE_NUMBER_SELECTOR);
+        const forwardButton = tableContainer.querySelector(PAGE_FORWARD_BUTTON_SELECTOR);
+        const backwardButton = tableContainer.querySelector(PAGE_BACKWARD_BUTTON_SELECTOR);
+        pageSelect?.addEventListener('change', syncSelectedPageFromDom);
+        forwardButton?.addEventListener('click', scheduleSelectedPageSync);
+        backwardButton?.addEventListener('click', scheduleSelectedPageSync);
+        return () => {
+            pageSelect?.removeEventListener('change', syncSelectedPageFromDom);
+            forwardButton?.removeEventListener('click', scheduleSelectedPageSync);
+            backwardButton?.removeEventListener('click', scheduleSelectedPageSync);
+        };
+    }, [scheduleSelectedPageSync, syncSelectedPageFromDom, stableClusters.length]);
+    useEffect(() => {
+        return () => {
+            if (typeof window !== 'undefined' &&
+                syncPageTimeoutRef.current !== undefined) {
+                window.clearTimeout(syncPageTimeoutRef.current);
+            }
+        };
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const pageSelect = readPageSelect();
+        if (!pageSelect) {
+            return;
+        }
+        const currentPage = Number(pageSelect.value);
+        const currentPageSize = Number(readPageSizeSelect()?.value);
+        const pageSize = Number.isFinite(currentPageSize) && currentPageSize > 0
+            ? currentPageSize
+            : DEFAULT_PAGE_SIZE;
+        const maxPage = Math.max(1, Math.ceil(stableClusters.length / pageSize));
+        const nextPage = Math.min(selectedPageRef.current, maxPage);
+        selectedPageRef.current = nextPage;
+        if (nextPage <= 1 || currentPage === nextPage) {
+            return;
+        }
+        pageSelect.value = String(nextPage);
+        pageSelect.dispatchEvent(new Event('change', { bubbles: true }));
+        syncSelectedPageFromDom();
+    }, [
+        readPageSelect,
+        readPageSizeSelect,
+        stableClusters,
+        syncSelectedPageFromDom,
+    ]);
     const headerData = [
         {
             label: translations.headers.name,
@@ -208,7 +314,7 @@ export const C4ClusterList = ({ clusters, loading, urls, permissions, onNavigate
                     paddingBlockEnd: 'var(--cds-spacing-07)',
                 }, children: [_jsx("p", { style: { color: 'var(--cds-text-secondary)' }, children: translations.emptyState.noClusters }), permissions.canCreateCluster && (_jsx("div", { style: { marginTop: 'var(--cds-spacing-05)' }, children: _jsx(Button, { kind: 'primary', onClick: () => onNavigate(urls.createCluster), disabled: permissions.createClusterButtonDisabled, children: translations.createButton }) }))] })));
         }
-        return (_jsx(C3DataTable, { headers: headerData, isLoading: loading, toolbar: toolbar, actions: actions, data: clusters, queryPrefix: 'cluster-list' }));
+        return (_jsx("div", { ref: tableContainerRef, children: _jsx(C3DataTable, { headers: headerData, isLoading: loading, toolbar: toolbar, actions: actions, data: stableClusters, queryPrefix: 'cluster-list' }) }));
     };
     return (_jsxs(_Fragment, { children: [trialNotification, _jsxs(C4PageTemplate, { loading: loading, header: {
                     title: translations.title,

package/lib/esm/components/c4-cluster-list/c4-cluster-list.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/c4-cluster-list/c4-cluster-list.spec.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } 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 { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { C4ClusterList } from './c4-cluster-list.js';
+function createCluster(id) {
+    return {
+        id: `cluster-${id}`,
+        name: `Cluster ${id}`,
+        generation: '8.8',
+        type: 'Production',
+        region: 'eu-central-1',
+        status: 'healthy',
+        tags: [],
+        originalIndex: id - 1,
+    };
+}
+function buildProps(clusters) {
+    return {
+        orgId: 'org-1',
+        clusters,
+        loading: false,
+        urls: {
+            clusterDetails: (clusterId) => `/org/org-1/clusters/${clusterId}`,
+            createCluster: '/org/org-1/clusters/create',
+        },
+        permissions: {
+            canCreateCluster: true,
+            canEditCluster: true,
+            canDeleteCluster: true,
+            canUpdateTag: true,
+            canSeeClusterLoad: false,
+            canWakeCluster: true,
+            createClusterButtonDisabled: false,
+        },
+        onNavigate: vi.fn(),
+        onDeleteCluster: vi.fn(),
+        onAssignTag: vi.fn(),
+        onWakeCluster: vi.fn(),
+        translations: {
+            title: 'Clusters',
+            createButton: 'Create cluster',
+            searchLabel: 'Search',
+            emptyState: {
+                noClusters: 'No clusters',
+            },
+            headers: {
+                name: 'Name',
+                generation: 'Generation',
+                type: 'Type',
+                region: 'Region',
+                status: 'Status',
+                tags: 'Tags',
+            },
+            overflowMenu: {
+                delete: 'Delete',
+                resume: 'Resume',
+            },
+            tags: {
+                addLabel: 'Add tag',
+            },
+            tooltips: {
+                clusterLoad: 'Cluster load',
+            },
+        },
+        isClusterPaused: () => false,
+        isRunningOnUnsupportedGeneration: () => false,
+    };
+}
+function getPageSelect() {
+    const pageSelect = document.querySelector('.cds--select__page-number select');
+    if (!pageSelect) {
+        throw new Error('Expected cluster list pagination page select');
+    }
+    return pageSelect;
+}
+describe('C4ClusterList pagination', () => {
+    it('preserves the selected page when clusters are added or removed', async () => {
+        const user = userEvent.setup();
+        const initialClusters = Array.from({ length: 20 }, (_, index) => {
+            return createCluster(index + 1);
+        });
+        const { rerender } = render(_jsx(C4ClusterList, { ...buildProps(initialClusters) }));
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('1');
+        });
+        await user.selectOptions(getPageSelect(), '2');
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('2');
+        });
+        rerender(_jsx(C4ClusterList, { ...buildProps([...initialClusters, createCluster(21)]) }));
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('2');
+        });
+        rerender(_jsx(C4ClusterList, { ...buildProps(initialClusters.slice(0, 19)) }));
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('2');
+        });
+    });
+    it('preserves the selected page when cluster data updates without changing list length', async () => {
+        const user = userEvent.setup();
+        const initialClusters = Array.from({ length: 20 }, (_, index) => {
+            return createCluster(index + 1);
+        });
+        const { rerender } = render(_jsx(C4ClusterList, { ...buildProps(initialClusters) }));
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('1');
+        });
+        await user.selectOptions(getPageSelect(), '2');
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('2');
+        });
+        const updatedClusters = initialClusters.map((cluster, index) => {
+            if (index !== 0) {
+                return cluster;
+            }
+            return {
+                ...cluster,
+                status: 'updating',
+                generation: '8.8.1',
+            };
+        });
+        rerender(_jsx(C4ClusterList, { ...buildProps(updatedClusters) }));
+        await waitFor(() => {
+            expect(getPageSelect().value).toBe('2');
+        });
+    });
+});

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

@@ -90,7 +90,7 @@ export interface ClusterDetailsProps {
 }
 export declare const ClusterDetails: (props: ClusterDetailsProps) => JSX.Element;
 export interface ClusterDetailsGenerationUpdateProps {
-    updateType: 'update-available' | 'update-available-wait-needed' | 'update-available-no-permissions' | 'no-update-latest' | 'no-update-refresh' | 'updating' | 'creating';
+    updateType: 'update-available' | 'update-available-wait-needed' | 'update-available-no-permissions' | 'no-update-latest' | 'updating' | 'creating';
     updateStates: {
         updateAvailable: {
             action: () => void;
@@ -107,10 +107,6 @@ export interface ClusterDetailsGenerationUpdateProps {
         noUpdateLatest: {
             label: string;
         };
-        noUpdateRefresh: {
-            action: () => void;
-            label: string;
-        };
     };
 }
 export declare const ClusterDetailsGenerationUpdate: (props: ClusterDetailsGenerationUpdateProps) => JSX.Element;

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

@@ -5,8 +5,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * You may not use this file except in compliance with the commercial license.
  */
 import { C3ClusterTag, } from '@camunda/camunda-composite-components';
-import { Button, CodeSnippet, IconButton, Layer, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, TextArea, } from '@carbon/react';
-import { Add, Information, Pause, Play, Renew, UpdateNow, } from '@carbon/react/icons/index.esm.js';
+import { Button, CodeSnippet, Layer, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, TextArea, } from '@carbon/react';
+import { Add, Information, Pause, Play, UpdateNow } from '@carbon/react/icons/index.esm.js';
 import { useEffect, useRef, useState } from 'react';
 import { C4ActionableNotification } from '../c4-actionable-notification/c4-actionable-notification.js';
 import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
@@ -102,6 +102,7 @@ export const ClusterDetails = (props) => {
                                             display: 'grid',
                                             gridTemplateColumns: 'auto 1fr',
                                             gap: '0.5rem',
+                                            alignItems: 'center',
                                         }, children: [_jsx("p", { children: props.generation.value }), props.status?.value.toLowerCase() === 'healthy' && (_jsx(ClusterDetailsGenerationUpdate, { ...props.generation.update }))] }) })] }), props.type && (_jsxs(StructuredListRow, { style: rowStyle, children: [_jsx(StructuredListCell, { noWrap: true, children: props.type.label }), _jsx(StructuredListCell, { noWrap: true, children: _jsxs("div", { style: {
                                             display: 'inline-grid',
                                             gridAutoFlow: 'column',
@@ -119,7 +120,7 @@ export const ClusterDetailsGenerationUpdate = (props) => {
     const latestMessage = 'No updates available - running on latest available version';
     switch (props.updateType) {
         case 'update-available':
-            component = (_jsx(Button, { onClick: () => props.updateStates.updateAvailable.action(), size: 'sm', renderIcon: UpdateNow, style: { top: '-0.4rem' }, children: props.updateStates.updateAvailable.label }));
+            component = (_jsx(Button, { onClick: () => props.updateStates.updateAvailable.action(), size: 'sm', renderIcon: UpdateNow, children: props.updateStates.updateAvailable.label }));
             break;
         case 'update-available-no-permissions':
             component = (_jsxs("div", { style: {
@@ -153,14 +154,6 @@ export const ClusterDetailsGenerationUpdate = (props) => {
                 }, children: [_jsx(Information, {}), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: resolvedNoUpdateLatestLabel })] }));
             break;
         }
-        case 'no-update-refresh':
-            component = (_jsxs("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: '16px auto 1fr',
-                    gap: '0.5rem',
-                    alignItems: 'start',
-                }, children: [_jsx(Information, {}), _jsx("p", { style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: props.updateStates.noUpdateRefresh.label }), _jsx("div", { children: _jsx(IconButton, { label: 'Refresh', onClick: () => props.updateStates.noUpdateRefresh.action(), kind: 'ghost', style: { top: '-0.2rem' }, size: 'xs', children: _jsx(Renew, {}) }) })] }));
-            break;
         case 'creating':
         case 'updating':
             component = _jsx(_Fragment, {});