@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/widgets/clusters/c4-clusters-page.js

@@ -0,0 +1,682 @@
+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 { OrgsService } from '@camunda/ccma-api';
+import { ClusterEncryptionKey, OrganizationRole, SalesPlanType, } from '@camunda/ccma-shared-types';
+import { InlineNotification, Modal, Select, SelectItem, Stack, TextInput, } from '@carbon/react';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { C4ClusterList } from '../../components/c4-cluster-list/c4-cluster-list.js';
+import { C4ClustersEmptyState } from '../../components/c4-clusters-empty-state/c4-clusters-empty-state.js';
+import { C4ClustersTrialNotification } from '../../components/c4-clusters-trial-notification/c4-clusters-trial-notification.js';
+import { useC4ConsoleAuthz } from '../../runtime/c4-console-authz.js';
+import { useC4ConsoleData } from '../../runtime/c4-console-data-context.js';
+import { useC4ConsoleRuntime } from '../../runtime/c4-console-runtime-context.js';
+import { toApiConfig } from '../../runtime/to-api-config.js';
+function getString(record, key) {
+    const value = record[key];
+    return typeof value === 'string' ? value : undefined;
+}
+function getPathString(record, path) {
+    let current = record;
+    for (const key of path) {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[key];
+    }
+    return typeof current === 'string' ? current : undefined;
+}
+function getBoolean(record, key) {
+    const value = record[key];
+    return typeof value === 'boolean' ? value : undefined;
+}
+function openUrlInNewTab(url) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+}
+function getOptionalNumber(record, key) {
+    const value = record[key];
+    return typeof value === 'number' ? value : undefined;
+}
+function getPathUnknown(record, path) {
+    let current = record;
+    for (const key of path) {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[key];
+    }
+    return current;
+}
+function normalizeStatus(input) {
+    if (typeof input !== 'string') {
+        return 'unknown';
+    }
+    return input.toLowerCase();
+}
+function mapClusterToListItem(rawCluster, index) {
+    const id = getString(rawCluster, 'id') ??
+        getString(rawCluster, 'clusterId') ??
+        getString(rawCluster, 'uuid') ??
+        getString(rawCluster, 'clusterUuid');
+    if (!id) {
+        return undefined;
+    }
+    const name = getString(rawCluster, 'name') ?? getString(rawCluster, 'clusterName') ?? id;
+    const generation = getString(rawCluster, 'generation') ??
+        getPathString(rawCluster, ['generation', 'name']) ??
+        getString(rawCluster, 'generationId') ??
+        getString(rawCluster, 'generationName') ??
+        'unknown';
+    const type = getString(rawCluster, 'type') ??
+        getPathString(rawCluster, ['planType', 'name']) ??
+        getString(rawCluster, 'planType') ??
+        getString(rawCluster, 'planTypeId') ??
+        'unknown';
+    const region = getString(rawCluster, 'region') ??
+        getPathString(rawCluster, ['k8sContext', 'name']) ??
+        getPathString(rawCluster, ['k8sContext', 'config', 'name']) ??
+        'unknown';
+    const status = normalizeStatus(getPathString(rawCluster, ['status', 'ready']) ?? 'unknown');
+    // Extract tags from labels.camunda and labels.custom
+    const labelsObj = rawCluster.labels;
+    const camundaTags = labelsObj?.camunda;
+    const customTags = labelsObj?.custom;
+    const camundaArray = Array.isArray(camundaTags)
+        ? camundaTags.filter((t) => typeof t === 'string')
+        : [];
+    const customArray = Array.isArray(customTags)
+        ? customTags.filter((t) => typeof t === 'string')
+        : [];
+    const tags = [...camundaArray, ...customArray];
+    const currentClusterLoad = getOptionalNumber(rawCluster, 'currentClusterLoad');
+    return {
+        id,
+        name,
+        generation,
+        type,
+        region,
+        status,
+        tags,
+        currentClusterLoad,
+        originalIndex: index,
+    };
+}
+function buildDefaultTranslations(t) {
+    const translate = (key, fallback) => {
+        try {
+            const translated = t?.(key);
+            return translated && translated !== key ? translated : fallback;
+        }
+        catch {
+            return fallback;
+        }
+    };
+    return {
+        title: translate('c4console:clusters.list.title', 'Clusters'),
+        createButton: translate('c4console:clusters.list.createButton', 'Create new cluster'),
+        searchLabel: translate('c4console:clusters.list.searchLabel', 'Search'),
+        emptyState: {
+            noClusters: translate('c4console:clusters.list.emptyState.noClusters', 'No clusters found.'),
+        },
+        headers: {
+            name: translate('c4console:clusters.list.headers.name', 'Name'),
+            generation: translate('c4console:clusters.list.headers.generation', 'Generation'),
+            type: translate('c4console:clusters.list.headers.type', 'Type'),
+            region: translate('c4console:clusters.list.headers.region', 'Region'),
+            status: translate('c4console:clusters.list.headers.status', 'Status'),
+            tags: translate('c4console:clusters.list.headers.tags', 'Tags'),
+            currentClusterLoad: translate('c4console:clusters.list.headers.currentClusterLoad', 'Load'),
+        },
+        overflowMenu: {
+            delete: translate('c4console:clusters.list.overflowMenu.delete', 'Delete'),
+            resume: translate('c4console:clusters.list.overflowMenu.resume', 'Resume'),
+        },
+        tags: {
+            addLabel: translate('c4console:clusters.tags.addLabel', 'Add tag'),
+        },
+        tooltips: {
+            clusterLoad: translate('c4console:clusters.tooltips.clusterLoad', 'Cluster load'),
+        },
+    };
+}
+function encodeClusterDetailsUrl(orgId, clusterId) {
+    return `/org/${encodeURIComponent(orgId)}/cluster/${encodeURIComponent(clusterId)}`;
+}
+function encodeCreateClusterUrl(orgId) {
+    return `createCluster:${orgId}`;
+}
+function decodeNavigateUrl(url) {
+    if (url.startsWith('clusterDetails:')) {
+        const [, orgId, clusterId] = url.split(':');
+        if (orgId && clusterId) {
+            return { kind: 'clusterDetails', orgId, clusterId };
+        }
+    }
+    // Support real hrefs so browser features (open in new tab) work.
+    // Example: /org/<orgId>/cluster/<clusterId>
+    try {
+        const parsed = new URL(url, 'https://example.invalid');
+        const match = parsed.pathname.match(/^\/org\/([^/]+)\/cluster\/([^/]+)(?:\/|$)/);
+        if (match) {
+            const orgId = decodeURIComponent(match[1] ?? '');
+            const clusterId = decodeURIComponent(match[2] ?? '');
+            if (orgId && clusterId) {
+                return { kind: 'clusterDetails', orgId, clusterId };
+            }
+        }
+    }
+    catch {
+        // ignore
+    }
+    if (url.startsWith('createCluster:')) {
+        const [, orgId] = url.split(':');
+        if (orgId) {
+            return { kind: 'createCluster', orgId };
+        }
+    }
+    return undefined;
+}
+function mergePermissions(base, override) {
+    if (!override) {
+        return base;
+    }
+    return { ...base, ...override };
+}
+export const C4ClustersPage = observer(({ orgId, gettingStartedHref, onNavigate, translations, permissionsOverride, clusterCapMessage, isClusterPaused: isClusterPausedOverride, isRunningOnUnsupportedGeneration: isRunningOnUnsupportedGenerationOverride, onRequestAssignTag, onRequestDeleteCluster, onRequestWakeCluster, }) => {
+    const runtime = useC4ConsoleRuntime();
+    const authz = useC4ConsoleAuthz({ orgId });
+    const data = useC4ConsoleData();
+    const apiConfig = useMemo(() => {
+        return toApiConfig(runtime);
+    }, [runtime]);
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+    const [deleteTarget, setDeleteTarget] = useState(undefined);
+    const [deleteConfirmation, setDeleteConfirmation] = useState('');
+    const [deleteBusy, setDeleteBusy] = useState(false);
+    const [deleteError, setDeleteError] = useState(undefined);
+    const [tagModalOpen, setTagModalOpen] = useState(false);
+    const [tagTarget, setTagTarget] = useState(undefined);
+    const [selectedTag, setSelectedTag] = useState('');
+    const [tagBusy, setTagBusy] = useState(false);
+    const [tagError, setTagError] = useState(undefined);
+    const [wakeModalOpen, setWakeModalOpen] = useState(false);
+    const [wakeTarget, setWakeTarget] = useState(undefined);
+    const [wakeBusy, setWakeBusy] = useState(false);
+    const [wakeError, setWakeError] = useState(undefined);
+    const [orgInfo, setOrgInfo] = useState(undefined);
+    useEffect(() => {
+        if (!orgId) {
+            setOrgInfo(undefined);
+            return;
+        }
+        let cancelled = false;
+        OrgsService.getOrgInfo({ config: apiConfig, orgUuid: orgId })
+            .then((result) => {
+            if (cancelled)
+                return;
+            setOrgInfo(result);
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            setOrgInfo(undefined);
+            runtime.telemetry?.captureException?.(error, {
+                widget: 'C4ClustersPage',
+                action: 'loadOrgInfo',
+                orgId,
+            });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [apiConfig, orgId, runtime.telemetry]);
+    // Fetch data on mount/orgId change (idempotent, cached in context)
+    useEffect(() => {
+        if (!orgId)
+            return;
+        // Trigger fetch (context handles caching/deduplication)
+        data.fetchClusters(orgId).then(() => {
+            // Once clusters are loaded, fetch capacity data
+            const clusters = data.getClusters(orgId) ?? [];
+            if (clusters.length > 0) {
+                const clusterIds = clusters
+                    .map((cluster) => {
+                    return (getString(cluster, 'uuid') ??
+                        getString(cluster, 'id') ??
+                        getString(cluster, 'clusterId'));
+                })
+                    .filter((id) => Boolean(id));
+                if (clusterIds.length > 0) {
+                    data.fetchClusterCapacity(orgId, clusterIds);
+                }
+            }
+        });
+    }, [orgId, data.fetchClusterCapacity, data.fetchClusters, data.getClusters]);
+    // Get data from context (reactive via MobX)
+    const clustersCache = data.clusters[orgId];
+    const clusterCapacityMap = data.clusterCapacity[orgId] ?? new Map();
+    const rawClusters = (clustersCache?.data ?? []);
+    const isLoading = clustersCache?.isLoading ?? false;
+    const error = clustersCache?.error;
+    // Map cluster load from context
+    const clusterLoadData = useMemo(() => {
+        return clusterCapacityMap;
+    }, [clusterCapacityMap]);
+    const clusters = useMemo(() => {
+        return rawClusters
+            .map((rawCluster, index) => {
+            const item = mapClusterToListItem(rawCluster, index);
+            if (!item)
+                return undefined;
+            // Add cluster load data if available
+            const clusterLoad = clusterLoadData.get(item.id);
+            const clusterWithLoad = {
+                ...item,
+                currentClusterLoad: clusterLoad,
+            };
+            return clusterWithLoad;
+        })
+            .filter((item) => Boolean(item));
+    }, [rawClusters, clusterLoadData]);
+    const clusterById = useMemo(() => {
+        const map = new Map();
+        for (const cluster of clusters) {
+            map.set(cluster.id, cluster);
+        }
+        return map;
+    }, [clusters]);
+    const clusterStatusById = useMemo(() => {
+        const statusMap = new Map();
+        for (const cluster of clusters) {
+            if (cluster) {
+                statusMap.set(cluster.id, normalizeStatus(cluster.status));
+            }
+        }
+        return statusMap;
+    }, [clusters]);
+    const unsupportedGenerationById = useMemo(() => {
+        const map = new Map();
+        for (const rawCluster of rawClusters) {
+            const clusterId = getString(rawCluster, 'uuid') ??
+                getString(rawCluster, 'id') ??
+                getString(rawCluster, 'clusterId');
+            if (!clusterId) {
+                continue;
+            }
+            const isUnsupportedStarting = getPathUnknown(rawCluster, [
+                'generation',
+                'isUnsupportedStarting',
+            ]);
+            if (typeof isUnsupportedStarting !== 'string' ||
+                !isUnsupportedStarting) {
+                map.set(clusterId, false);
+                continue;
+            }
+            const start = new Date(isUnsupportedStarting).getTime();
+            map.set(clusterId, Number.isFinite(start) && Date.now() > start);
+        }
+        return map;
+    }, [rawClusters]);
+    const hasEncryptionWarning = useMemo(() => {
+        return rawClusters.some((cluster) => {
+            return (cluster.primaryEncryptionKeyId === null &&
+                cluster.encryption === ClusterEncryptionKey.EXTERNAL);
+        });
+    }, [rawClusters]);
+    const safeTranslate = (key, fallback, options) => {
+        try {
+            const translated = runtime.i18n?.t(key, options);
+            if (!translated || translated === key) {
+                return fallback;
+            }
+            // i18next can return the key *without* the namespace when the namespace is missing.
+            // Example: `c4console:clusters.list.trialExpired.title` -> `clusters.list.trialExpired.title`
+            if (key.includes(':')) {
+                const withoutNamespace = key.split(':').slice(1).join(':');
+                if (translated === withoutNamespace) {
+                    return fallback;
+                }
+            }
+            return translated;
+        }
+        catch {
+            return fallback;
+        }
+    };
+    const trialState = useMemo(() => {
+        if (!orgInfo || typeof orgInfo !== 'object') {
+            return {
+                isTrial: false,
+                trialStateExpired: false,
+                showClusterListBanner: false,
+            };
+        }
+        const orgInfoRecord = orgInfo;
+        const organizationToSalesPlan = getPathUnknown(orgInfoRecord, ['organizationToSalesPlan']) ?? {};
+        const salesPlanTypeRaw = getPathString(organizationToSalesPlan, [
+            'salesPlan',
+            'salesPlanType',
+        ]);
+        const isTrial = salesPlanTypeRaw === SalesPlanType.TRIAL;
+        const trialStateExpired = getBoolean(organizationToSalesPlan, 'trialStateExpired') ?? false;
+        const trialExpirationDateRaw = getString(organizationToSalesPlan, 'trialExpirationDate');
+        const trialExpirationMs = trialExpirationDateRaw
+            ? new Date(trialExpirationDateRaw).getTime()
+            : Number.NaN;
+        const countdownDays = Number.isFinite(trialExpirationMs)
+            ? Math.round((trialExpirationMs - Date.now()) / 1000 / 60 / 60 / 24)
+            : undefined;
+        const showClusterListBanner = isTrial &&
+            !trialStateExpired &&
+            typeof countdownDays === 'number' &&
+            countdownDays <= 7 &&
+            countdownDays >= 0;
+        return {
+            isTrial,
+            trialStateExpired,
+            showClusterListBanner,
+        };
+    }, [orgInfo]);
+    const isOrgAdmin = useMemo(() => {
+        const orgAdminRoles = new Set([
+            OrganizationRole.ADMIN,
+            OrganizationRole.OWNER,
+            OrganizationRole.ORGANIZATION_ADMIN,
+            OrganizationRole.ORGANIZATION_OWNER,
+        ]);
+        const roles = authz.orgRoles ?? [];
+        return roles.some((role) => orgAdminRoles.has(role));
+    }, [authz]);
+    const contactUrl = 'https://camunda.com/contact';
+    const derivedTrialNotification = useMemo(() => {
+        if (!trialState.showClusterListBanner) {
+            return undefined;
+        }
+        const prelude = safeTranslate('c4console:clusters.list.banner.trialIsAboutToExpirePrelude', 'Your trial is about to expire.');
+        const actionText = isOrgAdmin
+            ? safeTranslate('c4console:clusters.list.banner.actionAdmin', 'Upgrade your plan to keep using Camunda.')
+            : safeTranslate('c4console:clusters.list.banner.actionMember', 'Contact your admin to upgrade your plan.');
+        return (_jsx(C4ClustersTrialNotification, { title: `${prelude} ${actionText}`, showUpgradeAction: isOrgAdmin, upgradeButtonLabel: safeTranslate('c4console:clusters.list.banner.upgradeButton', 'Upgrade'), onUpgradeClick: () => openUrlInNewTab(contactUrl) }));
+    }, [
+        contactUrl,
+        isOrgAdmin,
+        safeTranslate,
+        trialState.showClusterListBanner,
+    ]);
+    const encryptionNotification = hasEncryptionWarning
+        ? {
+            kind: 'warning',
+            title: safeTranslate('c4console:clusters.encryption.notification.title', 'Action Required'),
+            subtitle: safeTranslate('c4console:clusters.encryption.notification.text', 'Complete the remaining steps to finalize the cluster creation.'),
+            lowContrast: true,
+            hideCloseButton: true,
+        }
+        : undefined;
+    const derivedPermissions = useMemo(() => {
+        const clustersVisibility = authz.visibilities.clusters;
+        const base = {
+            canCreateCluster: clustersVisibility?.canCreate ?? false,
+            canEditCluster: clustersVisibility?.canEdit ?? false,
+            canDeleteCluster: clustersVisibility?.canDelete ?? false,
+            canUpdateTag: clustersVisibility?.canUpdateTag ?? false,
+            canSeeClusterLoad: clustersVisibility?.canSeeClusterLoad ?? false,
+            canWakeCluster: clustersVisibility?.canWake ?? false,
+            createClusterButtonDisabled: !(clustersVisibility?.canCreate ?? false),
+        };
+        return mergePermissions(base, permissionsOverride);
+    }, [authz.visibilities.clusters, permissionsOverride]);
+    const resolvedTranslations = useMemo(() => {
+        if (translations) {
+            return translations;
+        }
+        const t = runtime.i18n?.t;
+        return buildDefaultTranslations((key) => t?.(key) ?? key);
+    }, [runtime.i18n, translations]);
+    const urls = useMemo(() => {
+        return {
+            clusterDetails: (clusterId) => encodeClusterDetailsUrl(orgId, clusterId),
+            createCluster: encodeCreateClusterUrl(orgId),
+        };
+    }, [orgId]);
+    const handleNavigate = useCallback((url) => {
+        const event = decodeNavigateUrl(url);
+        if (event) {
+            onNavigate?.(event);
+            return;
+        }
+        runtime.telemetry?.track?.('c4Clusters.navigate.unknown', { url });
+    }, [onNavigate, runtime.telemetry]);
+    const derivedEmptyStateContent = useMemo(() => {
+        // Avoid flashing the empty state before we know whether clusters exist.
+        if (isLoading || authz.isLoading) {
+            return undefined;
+        }
+        if (trialState.isTrial && trialState.trialStateExpired) {
+            const variant = isOrgAdmin ? 'trialExpiredAdmin' : 'trialExpiredMember';
+            return (_jsx(C4ClustersEmptyState, { variant: variant, onUpgrade: isOrgAdmin ? () => openUrlInNewTab(contactUrl) : undefined, texts: {
+                    noClusters: {
+                        heading: safeTranslate('c4console:clusters.emptyState.noClusters.heading', 'Processes run on clusters'),
+                        description: safeTranslate('c4console:clusters.emptyState.noClusters.description', 'Create a cluster to get started.'),
+                        createButtonLabel: resolvedTranslations.createButton,
+                        docsLinkLabel: safeTranslate('c4console:clusters.emptyState.noClusters.docsLinkLabel', 'View The Getting Started Guide'),
+                    },
+                    trialExpired: {
+                        heading: safeTranslate('c4console:clusters.list.trialExpired.title', 'Your trial has expired'),
+                        adminDescription: safeTranslate('c4console:clusters.list.trialExpired.admin.text', 'Upgrade your plan to continue using Camunda.'),
+                        memberDescription: safeTranslate('c4console:clusters.list.trialExpired.member.text', 'Contact your admin to upgrade your plan.'),
+                        upgradeButtonLabel: safeTranslate('c4console:clusters.list.trialExpired.admin.upgradeButton', 'Upgrade'),
+                    },
+                } }));
+        }
+        if (clusters.length !== 0) {
+            return undefined;
+        }
+        const createButtonLabel = safeTranslate('c4console:clusters.emptyState.noClusters.createButtonLabel', 'Create new cluster');
+        const descriptionPrefix = safeTranslate('c4console:clusters.emptyState.noClusters.descriptionPrefix', 'Click ');
+        const descriptionSuffix = safeTranslate('c4console:clusters.emptyState.noClusters.descriptionSuffix', ' to have a place to execute your processes');
+        return (_jsx(C4ClustersEmptyState, { variant: 'noClusters', docsHref: gettingStartedHref, onCreateCluster: derivedPermissions.canCreateCluster
+                ? () => handleNavigate(urls.createCluster)
+                : undefined, createClusterButtonDisabled: derivedPermissions.createClusterButtonDisabled, texts: {
+                noClusters: {
+                    heading: safeTranslate('c4console:clusters.emptyState.noClusters.heading', 'Processes run on clusters'),
+                    description: (_jsxs("span", { children: [descriptionPrefix, _jsx("strong", { children: createButtonLabel }), descriptionSuffix] })),
+                    createButtonLabel,
+                    docsLinkLabel: safeTranslate('c4console:clusters.emptyState.noClusters.docsLinkLabel', 'View The Getting Started Guide'),
+                },
+                trialExpired: {
+                    heading: safeTranslate('c4console:clusters.list.trialExpired.title', 'Your trial has expired'),
+                    adminDescription: safeTranslate('c4console:clusters.list.trialExpired.admin.text', 'Upgrade your plan to continue using Camunda.'),
+                    memberDescription: safeTranslate('c4console:clusters.list.trialExpired.member.text', 'Contact your admin to upgrade your plan.'),
+                    upgradeButtonLabel: safeTranslate('c4console:clusters.list.trialExpired.admin.upgradeButton', 'Upgrade'),
+                },
+            } }));
+    }, [
+        authz.isLoading,
+        clusters.length,
+        contactUrl,
+        derivedPermissions.canCreateCluster,
+        derivedPermissions.createClusterButtonDisabled,
+        gettingStartedHref,
+        handleNavigate,
+        isLoading,
+        isOrgAdmin,
+        resolvedTranslations.createButton,
+        safeTranslate,
+        trialState.isTrial,
+        trialState.trialStateExpired,
+        urls.createCluster,
+    ]);
+    const handleDeleteCluster = (clusterId) => {
+        onRequestDeleteCluster?.(clusterId);
+        if (!onRequestDeleteCluster) {
+            const cluster = clusterById.get(clusterId);
+            setDeleteTarget({
+                clusterId,
+                clusterName: cluster?.name ?? clusterId,
+            });
+            setDeleteConfirmation('');
+            setDeleteError(undefined);
+            setDeleteModalOpen(true);
+            runtime.telemetry?.track?.('c4Clusters.delete.requested', { clusterId });
+        }
+    };
+    const handleAssignTag = (clusterId) => {
+        onRequestAssignTag?.(clusterId);
+        if (!onRequestAssignTag) {
+            const cluster = clusterById.get(clusterId);
+            setTagTarget({
+                clusterId,
+                clusterName: cluster?.name ?? clusterId,
+            });
+            setSelectedTag('');
+            setTagError(undefined);
+            setTagModalOpen(true);
+            runtime.telemetry?.track?.('c4Clusters.tag.requested', { clusterId });
+        }
+    };
+    const handleWakeCluster = (clusterId) => {
+        onRequestWakeCluster?.(clusterId);
+        if (!onRequestWakeCluster) {
+            const cluster = clusterById.get(clusterId);
+            setWakeTarget({
+                clusterId,
+                clusterName: cluster?.name ?? clusterId,
+            });
+            setWakeError(undefined);
+            setWakeModalOpen(true);
+            runtime.telemetry?.track?.('c4Clusters.wake.requested', { clusterId });
+        }
+    };
+    const isClusterPausedFallback = (clusterId) => {
+        const status = clusterStatusById.get(clusterId);
+        return status === 'suspended';
+    };
+    const isRunningOnUnsupportedGenerationFallback = (clusterId) => {
+        return unsupportedGenerationById.get(clusterId) ?? false;
+    };
+    const isPageLoading = isLoading || authz.isLoading;
+    useEffect(() => {
+        if (!error) {
+            return;
+        }
+        runtime.telemetry?.captureException?.(error, {
+            widget: 'C4ClustersPage',
+            orgId,
+        });
+    }, [error, orgId, runtime.telemetry]);
+    return (_jsxs(_Fragment, { children: [_jsx(C4ClusterList, { orgId: orgId, clusters: clusters, loading: isPageLoading, urls: urls, permissions: derivedPermissions, onNavigate: handleNavigate, onDeleteCluster: handleDeleteCluster, onAssignTag: handleAssignTag, onWakeCluster: handleWakeCluster, trialNotification: derivedTrialNotification, encryptionNotification: encryptionNotification, clusterCapMessage: clusterCapMessage, emptyStateContent: derivedEmptyStateContent, translations: resolvedTranslations, isClusterPaused: isClusterPausedOverride ?? isClusterPausedFallback, isRunningOnUnsupportedGeneration: isRunningOnUnsupportedGenerationOverride ??
+                    isRunningOnUnsupportedGenerationFallback }), deleteTarget ? (_jsx(Modal, { open: deleteModalOpen, danger: true, modalHeading: safeTranslate('clustermodals:delete.heading', 'Delete cluster'), primaryButtonText: safeTranslate('clustermodals:delete.buttons.primary', 'Delete'), secondaryButtonText: safeTranslate('clustermodals:delete.buttons.secondary', 'Cancel'), primaryButtonDisabled: deleteBusy || deleteConfirmation.trim() !== 'DELETE', onRequestClose: () => {
+                    if (deleteBusy)
+                        return;
+                    setDeleteModalOpen(false);
+                }, onRequestSubmit: async () => {
+                    if (deleteBusy)
+                        return;
+                    setDeleteError(undefined);
+                    setDeleteBusy(true);
+                    try {
+                        const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                        await ConsoleClusterService.deleteCluster({
+                            config: apiConfig,
+                            params: { orgId, clusterId: deleteTarget.clusterId },
+                        });
+                        data.invalidateClusters(orgId);
+                        data.invalidateClusterCapacity(orgId);
+                        await data.fetchClusters(orgId, { force: true });
+                        setDeleteModalOpen(false);
+                    }
+                    catch (error) {
+                        const message = error instanceof Error ? error.message : 'Unknown error';
+                        setDeleteError(message);
+                        runtime.telemetry?.captureException?.(error, {
+                            widget: 'C4ClustersPage',
+                            action: 'delete',
+                            orgId,
+                            clusterId: deleteTarget.clusterId,
+                        });
+                    }
+                    finally {
+                        setDeleteBusy(false);
+                    }
+                }, children: _jsxs(Stack, { gap: 4, children: [deleteError ? (_jsx(InlineNotification, { kind: 'error', lowContrast: true, title: safeTranslate('clustermodals:delete.error.generic', 'Error deleting cluster'), subtitle: deleteError, hideCloseButton: true })) : null, _jsx("p", { children: safeTranslate('clustermodals:delete.description', `This will permanently delete ${deleteTarget.clusterName}.`, { clusterName: deleteTarget.clusterName }) }), _jsx(TextInput, { id: 'c4-delete-cluster-confirmation', labelText: safeTranslate('clustermodals:delete.confirm.label', 'Type the word DELETE to confirm'), value: deleteConfirmation, onChange: (e) => setDeleteConfirmation(e.target.value), disabled: deleteBusy })] }) })) : null, tagTarget ? (_jsx(Modal, { open: tagModalOpen, modalHeading: safeTranslate('clustermodals:assignTag.heading', 'Assign cluster tag'), primaryButtonText: safeTranslate('clustermodals:assignTag.buttons.primary', 'Assign'), secondaryButtonText: safeTranslate('clustermodals:assignTag.buttons.secondary', 'Cancel'), primaryButtonDisabled: tagBusy || selectedTag === '', onRequestClose: () => {
+                    if (tagBusy)
+                        return;
+                    setTagModalOpen(false);
+                }, onRequestSubmit: async () => {
+                    if (tagBusy || selectedTag === '')
+                        return;
+                    setTagError(undefined);
+                    setTagBusy(true);
+                    try {
+                        const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                        await ConsoleClusterService.updateCluster({
+                            config: apiConfig,
+                            params: { orgId, clusterId: tagTarget.clusterId },
+                            body: {
+                                labels: {
+                                    custom: [],
+                                    camunda: [selectedTag],
+                                },
+                            },
+                        });
+                        data.invalidateClusters(orgId);
+                        await data.fetchClusters(orgId, { force: true });
+                        setTagModalOpen(false);
+                    }
+                    catch (error) {
+                        const message = error instanceof Error ? error.message : 'Unknown error';
+                        setTagError(message);
+                        runtime.telemetry?.captureException?.(error, {
+                            widget: 'C4ClustersPage',
+                            action: 'assignTag',
+                            orgId,
+                            clusterId: tagTarget.clusterId,
+                        });
+                    }
+                    finally {
+                        setTagBusy(false);
+                    }
+                }, children: _jsxs(Stack, { gap: 4, children: [tagError ? (_jsx(InlineNotification, { kind: 'error', lowContrast: true, title: safeTranslate('clustermodals:assignTag.errorMessage', 'Error assigning tag'), subtitle: tagError, hideCloseButton: true })) : null, _jsx("p", { children: safeTranslate('clustermodals:assignTag.description', `Assign an environment tag to ${tagTarget.clusterName}.`) }), _jsxs(Select, { id: 'c4-assign-cluster-tag', labelText: safeTranslate('clustermodals:assignTag.label', 'Tag'), value: selectedTag, disabled: tagBusy, onChange: (e) => {
+                                const value = e.target.value;
+                                setSelectedTag(value);
+                            }, children: [_jsx(SelectItem, { value: '', text: 'Select a tag' }), _jsx(SelectItem, { value: 'dev', text: 'dev' }), _jsx(SelectItem, { value: 'test', text: 'test' }), _jsx(SelectItem, { value: 'stage', text: 'stage' }), _jsx(SelectItem, { value: 'prod', text: 'prod' })] })] }) })) : null, wakeTarget ? (_jsx(Modal, { open: wakeModalOpen, modalHeading: safeTranslate('clustermodals:resume.heading', 'Resume cluster'), primaryButtonText: safeTranslate('clustermodals:resume.buttons.primary', 'Resume'), secondaryButtonText: safeTranslate('clustermodals:resume.buttons.secondary', 'Cancel'), primaryButtonDisabled: wakeBusy, onRequestClose: () => {
+                    if (wakeBusy)
+                        return;
+                    setWakeModalOpen(false);
+                }, onRequestSubmit: async () => {
+                    if (wakeBusy)
+                        return;
+                    setWakeError(undefined);
+                    setWakeBusy(true);
+                    try {
+                        const { ConsoleClusterService } = await import('@camunda/ccma-api');
+                        await ConsoleClusterService.wakeCluster({
+                            config: apiConfig,
+                            params: { orgId, clusterId: wakeTarget.clusterId },
+                        });
+                        data.invalidateClusters(orgId);
+                        await data.fetchClusters(orgId, { force: true });
+                        setWakeModalOpen(false);
+                    }
+                    catch (error) {
+                        const message = error instanceof Error ? error.message : 'Unknown error';
+                        setWakeError(message);
+                        runtime.telemetry?.captureException?.(error, {
+                            widget: 'C4ClustersPage',
+                            action: 'wake',
+                            orgId,
+                            clusterId: wakeTarget.clusterId,
+                        });
+                    }
+                    finally {
+                        setWakeBusy(false);
+                    }
+                }, children: _jsxs(Stack, { gap: 4, children: [wakeError ? (_jsx(InlineNotification, { kind: 'error', lowContrast: true, title: safeTranslate('clustermodals:resume.errorMessage', 'Error resuming cluster'), subtitle: wakeError, hideCloseButton: true })) : null, _jsx("p", { children: safeTranslate('clustermodals:resume.description', `Resume ${wakeTarget.clusterName}?`) })] }) })) : null] }));
+});