@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-cluster-details-hot-backups/c4-cluster-details-hot-backups.js

@@ -0,0 +1,222 @@
+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, C3ResponsiveStack, } from '@camunda/camunda-composite-components';
+import { Button, DataTableSkeleton, InlineNotification, Stack, Tile, } from '@carbon/react';
+import { Add, Chat, Edit, EventSchedule, Renew } from '@carbon/react/icons/index.esm.js';
+import styled from 'styled-components';
+const BackupScheduleWrapper = styled.div `
+  width: 100%;
+
+  @media (min-width: 768px) {
+    max-width: 33%;
+  }
+`;
+const formatDateTime = (date) => {
+    if (date === '-')
+        return '-';
+    return date.toLocaleString('en-US', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    });
+};
+const getStatusIndicator = (status) => {
+    switch (status) {
+        case 'In progress':
+            return 'creating';
+        case 'Complete':
+            return 'healthy';
+        case 'Failed':
+            return 'unhealthy';
+        default:
+            return 'creating';
+    }
+};
+export const C4ClusterDetailsHotBackups = ({ backups, backupSchedule, isLoading, hasError, showTeaser, canCreateBackup, canCreateBackupBasedOnTime, clusterSupportsHotBackups, text, urls, permissions, onCreateBackup, onDeleteBackup, onCreateSchedule, onUpdateSchedule, onDeleteSchedule, onRefresh, onOpenDocs, onTalkToExpert, onGiveFeedback, }) => {
+    const expandedRow = (row) => {
+        const backup = backups.find((b) => b.id === row.id);
+        return (_jsx("div", { style: {
+                marginLeft: '-38px',
+                fontSize: '12px',
+                marginTop: '16px',
+                marginBottom: '16px',
+            }, children: _jsxs(Stack, { gap: 2, children: [_jsxs("div", { style: { display: 'flex' }, children: [_jsx("strong", { style: { width: '292px' }, children: text.tasklistLabel }), _jsx("p", { children: backup?.tasklistStatus ?? 'creating' })] }), _jsxs("div", { style: { display: 'flex' }, children: [_jsx("strong", { style: { width: '292px' }, children: text.operateLabel }), _jsx("p", { children: backup?.operateStatus ?? 'creating' })] }), _jsxs("div", { style: { display: 'flex' }, children: [_jsx("strong", { style: { width: '292px' }, children: text.optimizeLabel }), _jsx("p", { children: backup?.optimizeStatus ?? 'creating' })] }), _jsxs("div", { style: { display: 'flex' }, children: [_jsx("strong", { style: { width: '292px' }, children: text.zeebeLabel }), _jsx("p", { children: backup?.zeebeStatus ?? 'creating' })] })] }) }));
+    };
+    const actions = [
+        {
+            id: 'delete-backup',
+            label: text.deleteAction,
+            kind: 'danger--ghost',
+            onClick: (row) => {
+                onDeleteBackup(row.id);
+            },
+            visible: () => permissions.canDelete,
+        },
+    ];
+    const headerData = [
+        {
+            label: text.headerName,
+            key: 'name',
+            sorting: (a, b) => {
+                return a.name.localeCompare(b.name);
+            },
+        },
+        {
+            label: text.headerStatus,
+            key: 'status',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            return (_jsx("div", { className: `${getStatusIndicator(row.status)} healthIndicator`, children: row.status }));
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => {
+                return a.status.localeCompare(b.status);
+            },
+        },
+        {
+            label: text.headerType,
+            key: 'type',
+            sorting: (a, b) => {
+                return a.type.localeCompare(b.type);
+            },
+        },
+        {
+            label: text.headerStarted,
+            key: 'started',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            return formatDateTime(row.started);
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => {
+                if (a.started === '-')
+                    return 1;
+                if (b.started === '-')
+                    return -1;
+                return a.started.getTime() - b.started.getTime();
+            },
+        },
+        {
+            label: text.headerCompleted,
+            key: 'completed',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            return formatDateTime(row.completed);
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => {
+                if (a.completed === '-')
+                    return 1;
+                if (b.completed === '-')
+                    return -1;
+                return a.completed.getTime() - b.completed.getTime();
+            },
+        },
+    ];
+    const toolbar = [
+        {
+            id: 'search',
+            type: 'search',
+            label: text.searchLabel,
+            filter: (filter) => {
+                const name = filter.row.name.toLowerCase();
+                const type = filter.row.type.toLowerCase();
+                return [name, type].some((value) => value.includes(filter.searchTerm?.toLowerCase()));
+            },
+        },
+        {
+            id: 'create',
+            type: 'button',
+            label: text.createButton,
+            onClick: onCreateBackup,
+            disabled: !permissions.canCreate || !canCreateBackup,
+        },
+    ];
+    if (showTeaser) {
+        return (_jsx(C3EmptyState, { icon: { path: '../../../../assets/backup.svg', altText: 'backup' }, heading: text.teaserHeading, description: _jsxs(_Fragment, { children: [text.teaserDescription, _jsx("strong", { children: text.teaserAdditionalDescription })] }), button: {
+                onClick: onTalkToExpert,
+                disabled: false,
+                label: text.teaserButton,
+            }, link: {
+                href: urls.docs,
+                onClick: () => {
+                    onOpenDocs();
+                },
+                label: text.teaserLink,
+            } }));
+    }
+    if (isLoading) {
+        return _jsx(DataTableSkeleton, { showToolbar: false, showHeader: false });
+    }
+    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 (backups.length === 0 && !backupSchedule) {
+        return (_jsxs(_Fragment, { children: [!clusterSupportsHotBackups && (_jsx(InlineNotification, { style: {
+                        maxWidth: '100%',
+                        width: '100%',
+                        marginBottom: '24px',
+                    }, kind: 'info', title: text.disabledNotificationTitle, subtitle: text.disabledNotificationText, hideCloseButton: true })), _jsx(Tile, { style: {
+                        paddingLeft: '5rem',
+                        paddingTop: '3rem',
+                        paddingBottom: '3rem',
+                    }, children: _jsxs(C3ResponsiveStack, { orientation: 'horizontal', gap: 6, children: [_jsx("div", { style: { maxWidth: '80px', width: '100%' }, children: _jsx("img", { src: '../../../../assets/backup.svg', alt: 'backupsIcon', style: { width: '100%' } }) }), _jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: text.noBackupsTitle }), _jsxs(Stack, { gap: 6, children: [_jsx("p", { style: { maxWidth: '400px' }, children: text.noBackupsDescription }), _jsxs(Stack, { gap: 5, children: [_jsxs(C3ResponsiveStack, { orientation: 'horizontal', gap: '1rem', children: [_jsx(Button, { id: 'createBackupCTA', size: 'md', onClick: onCreateBackup, renderIcon: Add, disabled: !permissions.canCreate || !clusterSupportsHotBackups, children: text.createButton }), _jsx(Button, { id: 'createScheduleCTA', size: 'md', onClick: onCreateSchedule, renderIcon: EventSchedule, disabled: !permissions.canCreate || !clusterSupportsHotBackups, kind: 'tertiary', children: text.scheduleTileButton })] }), _jsx("div", { children: text.infoText })] })] })] })] }) })] }));
+    }
+    return (_jsxs(Stack, { gap: 6, children: [!canCreateBackupBasedOnTime && (_jsx(InlineNotification, { style: { maxWidth: '100%', width: '100%' }, kind: 'info', title: text.backupsUnavailableTitle, subtitle: text.backupsUnavailableText, hideCloseButton: true })), !backupSchedule ? (_jsx(BackupScheduleWrapper, { children: _jsx(Tile, { children: _jsxs(Stack, { children: [_jsx("h3", { children: text.scheduleTileTitle }), _jsx("p", { children: text.scheduleTileDescription }), _jsx(Button, { disabled: !permissions.canCreate, size: 'sm', onClick: onCreateSchedule, kind: 'tertiary', renderIcon: EventSchedule, children: text.scheduleTileButton })] }) }) })) : (_jsx(Tile, { style: { width: '450px' }, children: _jsx(Stack, { gap: 2, children: _jsxs("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: '1fr 1fr',
+                            gridGap: '5px 0px',
+                        }, children: [_jsx("h3", { style: { marginTop: '11px', marginBottom: '14px' }, children: text.scheduleTileTitle }), _jsxs("div", { children: [_jsx(Button, { disabled: !permissions.canDelete, onClick: onDeleteSchedule, kind: 'danger--ghost', style: { float: 'right' }, children: text.scheduleRemoveButton }), _jsx(Button, { disabled: !permissions.canCreate, onClick: onUpdateSchedule, kind: 'ghost', renderIcon: Edit, iconDescription: 'Edit', style: { float: 'right' } })] }), _jsx("strong", { children: "Scheduling" }), _jsx("span", { children: backupSchedule.scheduling }), backupSchedule.frequency !== 'Hourly' &&
+                                backupSchedule.startTime && (_jsxs(_Fragment, { children: [_jsx("strong", { children: text.scheduleStartTime }), _jsxs("span", { children: [backupSchedule.startTime, " UTC", ' ', -new Date().getTimezoneOffset() / 60 > 0 ? '+' : ' ', -new Date().getTimezoneOffset() / 60, ' ', text.scheduleTimezone] })] })), _jsx("strong", { children: text.scheduleFrequency }), _jsx("span", { children: backupSchedule.frequency })] }) }) })), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '2rem',
+                    maxWidth: 'calc(100vw - 64px)',
+                    width: '100%',
+                }, children: _jsx(C3DataTable, { title: text.title, headers: headerData, data: backups.map((item) => {
+                        return { ...item, expansion: expandedRow(item) };
+                    }), toolbar: toolbar, actions: actions, options: {
+                        actionsUseOverflowMenuMinItems: 3,
+                    }, queryPrefix: 'cluster-details-hot-backups' }) }), backups.length === 0 && (_jsx(Tile, { style: {
+                    marginTop: '-23px',
+                    paddingLeft: '5rem',
+                    paddingTop: '3rem',
+                    paddingBottom: '3rem',
+                }, children: _jsxs(Stack, { orientation: 'horizontal', gap: 6, children: [_jsx("img", { src: '../../../../assets/backup.svg', alt: 'backupsIcon' }), _jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: text.emptyTitle }), _jsx(Stack, { gap: 6, children: _jsx("p", { style: { maxWidth: '400px' }, children: text.emptyDescription }) })] })] }) })), _jsxs(Stack, { orientation: 'horizontal', children: [_jsx("span", { className: 'legalText', children: text.infoText }), _jsx(Button, { onClick: onGiveFeedback, kind: 'ghost', renderIcon: Chat, style: {
+                            marginTop: '-13px',
+                            marginRight: '0px',
+                            marginLeft: 'auto',
+                            color: 'var(--cds-text-secondary)',
+                        }, children: text.giveFeedback })] })] }));
+};

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

@@ -0,0 +1,89 @@
+import type { ReactElement } from 'react';
+export interface C4ClusterDetailsHotBackupsProps {
+    backups: BackupItem[];
+    backupSchedule?: BackupScheduleItem;
+    isLoading: boolean;
+    hasError: boolean;
+    showTeaser: boolean;
+    canCreateBackup: boolean;
+    canCreateBackupBasedOnTime: boolean;
+    clusterSupportsHotBackups: boolean;
+    text: {
+        title: string;
+        teaserHeading: string;
+        teaserDescription: ReactElement | string;
+        teaserAdditionalDescription: string;
+        teaserButton: string;
+        teaserLink: string;
+        createButton: string;
+        searchLabel: string;
+        headerName: string;
+        headerStatus: string;
+        headerType: string;
+        headerStarted: string;
+        headerCompleted: string;
+        deleteAction: string;
+        errorTitle: string;
+        errorDescription: string;
+        errorButton: string;
+        emptyTitle: string;
+        emptyDescription: string;
+        noBackupsTitle: string;
+        noBackupsDescription: string;
+        backupsUnavailableTitle: string;
+        backupsUnavailableText: string;
+        disabledNotificationTitle: string;
+        disabledNotificationText: string;
+        scheduleTileTitle: string;
+        scheduleTileDescription: string;
+        scheduleTileButton: string;
+        scheduleStatusEnabled: string;
+        scheduleStatusDisabled: string;
+        scheduleStartTime: string;
+        scheduleFrequency: string;
+        scheduleTimezone: string;
+        scheduleRemoveButton: string;
+        infoText: ReactElement | string;
+        giveFeedback: string;
+        zeebeLabel: string;
+        operateLabel: string;
+        tasklistLabel: string;
+        optimizeLabel: string;
+    };
+    urls: {
+        docs: string;
+        support: string;
+        talkToExpert: string;
+    };
+    permissions: {
+        canCreate: boolean;
+        canDelete: boolean;
+    };
+    onCreateBackup: () => void;
+    onDeleteBackup: (backupId: string) => void;
+    onCreateSchedule: () => void;
+    onUpdateSchedule: () => void;
+    onDeleteSchedule: () => void;
+    onRefresh: () => void;
+    onOpenDocs: () => void;
+    onTalkToExpert: () => void;
+    onGiveFeedback: () => void;
+}
+export interface BackupItem {
+    id: string;
+    uuid: string;
+    name: string;
+    status: 'In progress' | 'Complete' | 'Failed';
+    type: 'Manual' | 'Scheduled';
+    started: Date | '-';
+    completed: Date | '-';
+    zeebeStatus?: string;
+    operateStatus?: string;
+    tasklistStatus?: string;
+    optimizeStatus?: string;
+}
+export interface BackupScheduleItem {
+    scheduling: 'Enabled' | 'Disabled';
+    startTime?: string;
+    frequency: string;
+}

package/lib/esm/components/c4-cluster-details-hot-backups/c4-cluster-details-hot-backups.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-ip-whitelist/c4-cluster-details-ip-whitelist.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ClusterDetailsIpWhitelistProps } from './c4-cluster-details-ip-whitelist.types';
+export declare const C4ClusterDetailsIpWhitelist: ({ ipWhitelist, isLoading, text, urls, permissions, onCreateIpWhitelist, onUpdateIpWhitelist, onDeleteIpWhitelist, onOpenDocs, }: C4ClusterDetailsIpWhitelistProps) => JSX.Element;

package/lib/esm/components/c4-cluster-details-ip-whitelist/c4-cluster-details-ip-whitelist.js

@@ -0,0 +1,93 @@
+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 { C3DataTable, C3EmptyState, } from '@camunda/camunda-composite-components';
+import { DataTableSkeleton, Stack } from '@carbon/react';
+import { Edit } from '@carbon/react/icons/index.esm.js';
+export const C4ClusterDetailsIpWhitelist = ({ ipWhitelist, isLoading, text, urls, permissions, onCreateIpWhitelist, onUpdateIpWhitelist, onDeleteIpWhitelist, onOpenDocs, }) => {
+    const headerData = [
+        {
+            label: text.headerIp,
+            key: 'ip',
+            sorting: (a, b) => {
+                return a.ip.localeCompare(b.ip);
+            },
+        },
+        {
+            label: text.headerDescription,
+            key: 'description',
+            sorting: (a, b) => {
+                return a.description.localeCompare(b.description);
+            },
+        },
+    ];
+    const toolbar = [
+        {
+            id: 'search',
+            type: 'search',
+            label: text.searchLabel,
+            filter: (filter) => {
+                const name = filter.row.ip.toLowerCase();
+                const description = filter.row.description.toLowerCase();
+                return [name, description].some((value) => value.includes(filter.searchTerm?.toLowerCase()));
+            },
+        },
+        {
+            id: 'create',
+            type: 'button',
+            label: text.createButton,
+            onClick: onCreateIpWhitelist,
+            disabled: !permissions.canCreate,
+        },
+    ];
+    const hasActions = permissions.canUpdate || permissions.canDelete;
+    const actions = hasActions
+        ? [
+            {
+                id: 'edit-ipWhitelist',
+                label: text.updateAction,
+                kind: 'ghost',
+                icon: Edit,
+                onClick: (row) => onUpdateIpWhitelist(Number(row.id)),
+                visible: () => permissions.canUpdate,
+            },
+            {
+                id: 'delete-ipWhitelist',
+                label: text.deleteAction,
+                kind: 'danger--ghost',
+                onClick: (row) => onDeleteIpWhitelist(Number(row.id)),
+                visible: () => permissions.canDelete,
+            },
+        ]
+        : [];
+    if (isLoading) {
+        return _jsx(DataTableSkeleton, { showToolbar: false, showHeader: false });
+    }
+    if (ipWhitelist.length === 0) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `../../../../assets/ipwhitelist.svg`,
+                altText: 'ipwhitelistIcon',
+            }, heading: text.emptyTitle, description: text.emptyDescription, button: permissions.canCreate
+                ? {
+                    onClick: onCreateIpWhitelist,
+                    disabled: !permissions.canCreate,
+                    label: text.emptyButton,
+                    id: 'createWhitelistCTA',
+                }
+                : undefined, link: {
+                label: text.emptyLink,
+                href: urls.docs,
+                onClick: onOpenDocs,
+            } }));
+    }
+    return (_jsx(Stack, { gap: 6, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2rem',
+                maxWidth: 'calc(100vw - 64px)',
+                width: '100%',
+            }, children: [_jsx(C3DataTable, { headers: headerData, data: ipWhitelist, actions: actions, toolbar: toolbar, title: text.title, queryPrefix: 'cluster-details-ip-whitelist' }), _jsx("span", { className: 'legalText', children: text.infoText })] }) }));
+};

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

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react';
+export interface C4ClusterDetailsIpWhitelistProps {
+    ipWhitelist: IpWhitelistItem[];
+    isLoading: boolean;
+    text: {
+        title: string;
+        createButton: string;
+        searchLabel: string;
+        headerIp: string;
+        headerDescription: string;
+        updateAction: string;
+        deleteAction: string;
+        emptyTitle: string;
+        emptyDescription: ReactElement | string;
+        emptyButton: string;
+        emptyLink: string;
+        infoText: ReactElement | string;
+    };
+    urls: {
+        docs: string;
+    };
+    permissions: {
+        canCreate: boolean;
+        canUpdate: boolean;
+        canDelete: boolean;
+    };
+    onCreateIpWhitelist: () => void;
+    onUpdateIpWhitelist: (index: number) => void;
+    onDeleteIpWhitelist: (index: number) => void;
+    onOpenDocs: () => void;
+}
+export interface IpWhitelistItem {
+    id: string;
+    ip: string;
+    description: string;
+}

package/lib/esm/components/c4-cluster-details-ip-whitelist/c4-cluster-details-ip-whitelist.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-secure-connectivity/c4-cluster-details-secure-connectivity.d.ts

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,174 @@
+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 { 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';
+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,
+        status: endpoint.status ?? '',
+        awsConsoleUrl: endpoint.awsConsoleUrl,
+        originalIndex: index,
+    }));
+    const endpointConnectionsCount = status?.status?.endpointConnectionCount ?? endpointRows.length;
+    const renderEndpointStatus = (rawStatus) => {
+        const normalized = (rawStatus ?? '').trim().toLowerCase();
+        if (!normalized) {
+            return _jsx("span", { children: "\u2014" });
+        }
+        const isAvailable = normalized.includes('available');
+        const isPending = normalized.includes('pending');
+        const icon = isAvailable ? (_jsx(CheckmarkFilled, {})) : isPending ? (_jsx(PendingFilled, {})) : undefined;
+        const label = isAvailable
+            ? 'Available'
+            : isPending
+                ? 'Pending'
+                : `${normalized.charAt(0).toUpperCase()}${normalized.slice(1)}`;
+        const color = isAvailable
+            ? 'var(--cds-support-success)'
+            : 'var(--cds-icon-secondary)';
+        return (_jsxs("span", { style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 'var(--cds-spacing-03)',
+                color: 'var(--cds-text-secondary)',
+            }, children: [icon ? (_jsx("span", { style: { display: 'inline-flex', color }, children: icon })) : null, _jsx("span", { children: label })] }));
+    };
+    const headerData = [
+        {
+            label: text.privateEndpointsColumnVpcEndpointId ?? 'VPC endpoint ID',
+            key: 'id',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => {
+                            if (!onOpenPrivateEndpoint) {
+                                return (_jsx(CodeSnippet, { type: 'inline', align: 'top', children: row.id }));
+                            }
+                            return (_jsx(Link, { href: row.awsConsoleUrl ?? '#', onClick: (e) => {
+                                    e.preventDefault();
+                                    onOpenPrivateEndpoint({
+                                        id: row.id,
+                                        awsConsoleUrl: row.awsConsoleUrl,
+                                    });
+                                }, children: _jsx("span", { style: { fontFamily: 'var(--cds-font-family-mono)' }, children: row.id }) }));
+                        },
+                    },
+                },
+            },
+            sorting: (a, b) => a.id.localeCompare(b.id),
+        },
+        {
+            label: text.privateEndpointsColumnStatus ?? 'Status',
+            key: 'status',
+            type: {
+                type: 'wrapper',
+                options: {
+                    wrapperOptions: {
+                        wrapper: (row) => renderEndpointStatus(row.status),
+                    },
+                },
+            },
+            sorting: (a, b) => (a.status ?? '').localeCompare(b.status ?? ''),
+        },
+    ];
+    const toolbar = [];
+    const readyCondition = status?.status?.conditions?.find((condition) => condition.type === 'Ready');
+    const isReady = readyCondition?.status === 'True';
+    const statusElement = (() => {
+        const icon = isReady ? _jsx(CheckmarkFilled, {}) : _jsx(PendingFilled, {});
+        const label = isReady ? 'Ready' : 'Pending';
+        const color = isReady
+            ? 'var(--cds-support-success)'
+            : 'var(--cds-icon-secondary)';
+        return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        display: 'flex',
+                        color,
+                    }, children: icon }), _jsx("span", { style: {
+                        paddingInlineStart: '1.5rem',
+                        color: 'var(--cds-text-secondary)',
+                    }, children: label })] }));
+    })();
+    const endpoint = status?.status?.endpoint;
+    const renderInlineCodeField = (value) => {
+        if (!value) {
+            return _jsx("span", { children: "\u2014" });
+        }
+        return (_jsx(Layer, { style: { height: '0px', width: 'calc(100% - 4rem)' }, children: _jsx(CodeSnippet, { type: 'single', children: value }) }));
+    };
+    const renderListFieldWithEdit = (options) => {
+        const values = options.values ?? [];
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                gap: 'var(--cds-spacing-03)',
+                alignItems: values.length > 1 ? 'flex-start' : 'center',
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: values.length ? (_jsx(Stack, { gap: 2, 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, onClick: () => options.onEdit?.() })) : undefined] }));
+    };
+    const labelCellStyle = {
+        width: '10rem',
+        color: 'var(--cds-text-secondary)',
+    };
+    if (!isReady) {
+        return (_jsx(C3EmptyState, { icon: {
+                path: `../../../../assets/secureConnectivity.svg`,
+                altText: 'secureConnectivityIcon',
+            }, heading: text.emptyTitle, description: text.emptyDescription, button: status?.status !== undefined
+                ? undefined
+                : {
+                    onClick: () => onOpenActivate(),
+                    disabled: !permissions.canActivate,
+                    label: text.activateButton,
+                    id: 'activateSecureConnectivityCTA',
+                }, link: {
+                href: urls.docs,
+                label: text.learnMoreLabel,
+                onClick: onOpenDocs,
+            } }));
+    }
+    return (_jsxs(Stack, { gap: 6, children: [_jsx(Tile, { children: _jsxs(Stack, { gap: 6, children: [_jsx("h2", { children: text.activatedTitle ?? text.title }), text.activatedDescription ? (_jsx("p", { style: { maxWidth: '500px' }, children: text.activatedDescription })) : undefined, text.enabledFooterText ? (_jsx("p", { style: { maxWidth: '500px' }, children: text.enabledFooterText })) : undefined, _jsxs(Stack, { gap: 6, children: [_jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        gap: 'var(--cds-spacing-05)',
+                                    }, children: [_jsx("h4", { style: { margin: 0 }, children: text.serviceDetailsTitle ?? 'Service details' }), 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] }), _jsx(StructuredListWrapper, { children: _jsxs(StructuredListBody, { children: [_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.enabledStatusLabel ?? 'Status' }), _jsx(StructuredListCell, { children: statusElement })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.serviceNameLabel ?? 'Service name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.serviceName) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.serviceRegionLabel ?? 'Service region' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.region) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.serviceTypeLabel ?? 'Service type' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.type) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.privateDnsNameLabel ?? 'Private DNS name' }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderInlineCodeField(endpoint?.privateDnsName) })] }), _jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, children: text.allowedPrincipalsLabel }), _jsx(StructuredListCell, { style: { minWidth: 0 }, children: renderListFieldWithEdit({
+                                                            values: status?.spec.allowedPrincipals,
+                                                            onEdit: onEditAllowedPrincipals,
+                                                            editLabel: 'Edit allowed principals',
+                                                        }) }), _jsx(StructuredListCell, { noWrap: true, style: labelCellStyle, 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 }, children: text.connectTitle ?? 'Connect to the service' }), connectInAwsUrl ? (_jsx(Button, { kind: 'tertiary', 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: {
+                                                borderTop: '1px solid var(--cds-border-subtle-01)',
+                                                paddingTop: 'var(--cds-spacing-05)',
+                                            } }), _jsxs("h4", { style: { margin: 0 }, children: [text.endpointConnectionsTitle ?? 'Endpoint connections', " (", endpointConnectionsCount, ")"] }), endpointRows.length === 0 && !isLoading ? (_jsx("div", { style: { color: 'var(--cds-text-secondary)' }, children: text.endpointConnectionsEmptyText ??
+                                                text.privateEndpointsEmptyText ??
+                                                'Created endpoint connections will be listed here.' })) : (_jsx("div", { style: { maxWidth: 'calc(100vw - 64px)' }, children: _jsx(C3DataTable, { isLoading: isLoading, headers: headerData, data: endpointRows, toolbar: toolbar, queryPrefix: 'cluster-details-secure-connectivity' }) }))] })] })] }) }), _jsx("div", { children: _jsxs(Link, { href: urls.docs, onClick: onOpenDocs, children: [_jsx("span", { children: text.learnMoreLabel }), _jsx("span", { style: { paddingLeft: 'var(--cds-spacing-02)' }, children: _jsx(Launch, { size: 16 }) })] }) })] }));
+};