@camunda/ccma-saas-frontend 0.0.34 → 0.0.35

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-create-cluster/c4-create-cluster.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { C3ClusterTag, } from '@camunda/camunda-composite-components';
 import { ClusterPlanTypeCategory, checkVersion, VersionCheckOperator, } from '@camunda/ccma-shared-types';
 import { Button, Checkbox, Column, ContentSwitcher, FormLabel, Grid, InlineLoading, InlineNotification, Link, RadioButton, RadioButtonGroup, RadioTile, SkeletonText, Stack, Switch, Tag, TextArea, TextInput, Tile, } from '@carbon/react';
-import { Code, DataBase } from '@carbon/react/icons/index.esm.js';
+import { ChevronDown, ChevronUp, Code, DataBase } from '@carbon/react/icons/index.esm.js';
 import { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { C4ClusterTagSelector } from '../c4-cluster-tag-selector/c4-cluster-tag-selector.js';
@@ -87,6 +87,7 @@ export const C4CreateCluster = ({ loading, cta, formElements, autoUpdate, taskli
     const defaultClusterPlanType = formElements.clusterPlanType.options.find((option) => option.default === true && option.disabled === false);
     const [clusterPlanType, setClusterPlanType] = useState(defaultClusterPlanType ? defaultClusterPlanType?.uuid : '');
     const [selectedTag, setSelectedTag] = useState('dev');
+    const [showOlderGenerations, setShowOlderGenerations] = useState(false);
     const currentClusterPlanType = (clusterPlanType || defaultClusterPlanType?.uuid) ?? '';
     const setClusterPlanTypeWithEffects = (clusterPlanTypeUuid) => {
         updateNumberOfAllocatedHwPackages(1);
@@ -402,6 +403,37 @@ export const C4CreateCluster = ({ loading, cta, formElements, autoUpdate, taskli
                                         setAuthorizationEnabled(selection === 'true');
                                     }, children: [_jsx(RadioButton, { id: 'authorization-enabled', labelText: 'Enabled', value: 'true' }), _jsx(RadioButton, { id: 'authorization-disabled', labelText: 'Disabled', value: 'false' })] }, authorizationEnabled ? 'true' : 'false'), _jsxs("div", { children: [_jsx("p", { children: "When enabled, authorization-based access control is enforced." }), _jsxs("p", { children: ["When disabled, all users and clients will have full access to the cluster.", ' ', _jsx("a", { href: authorizationToggle.authorizationDocs, target: '_blank', rel: 'noopener', children: "Learn more" })] })] }), !authorizationEnabled && (_jsx(InlineNotification, { lowContrast: true, kind: ['stage', 'prod'].includes(selectedTag) ? 'warning' : 'info', hideCloseButton: true, title: 'Authorizations disabled', children: _jsx("p", { children: "All authenticated users & clients will have full access to the cluster." }) }))] }) }) })] }));
     };
+    const renderGenerationRadioButtons = (generations) => {
+        return (_jsx(RadioButtonGroupWithGrid, { children: generations.map((generation) => (_jsx(Column, { sm: 4, md: 4, lg: 3, style: {
+                    justifySelf: 'start',
+                    marginBottom: '0.5rem',
+                }, children: _jsx(RadioButton, { id: generation.uuid, value: generation.uuid, labelText: generation.title, checked: selectedGeneration === generation.uuid, onChange: (value) => {
+                        updateSelectedGeneration(value);
+                    }, disabled: isSubmitting() || noAvailableSlots }, generation.uuid) }, generation.uuid))) }));
+    };
+    const renderGenerationSection = () => {
+        const allGenerations = getSelectedChannel()?.generations ?? [];
+        const existingClusterGenerations = allGenerations.filter((g) => g.classification === 'existingCluster');
+        const channelGenerations = allGenerations.filter((g) => g.classification !== 'existingCluster');
+        const hasOlderGenerations = existingClusterGenerations.length > 0;
+        return (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs(Stack, { gap: 2, children: [_jsx(FormLabel, { children: "Generation" }), renderGenerationRadioButtons(hasOlderGenerations ? channelGenerations : allGenerations), hasOlderGenerations && (_jsxs("div", { style: {
+                                marginTop: 'var(--cds-spacing-03)',
+                            }, children: [_jsx(Button, { kind: 'ghost', size: 'sm', type: 'button', onClick: () => {
+                                        setShowOlderGenerations((prev) => {
+                                            if (prev &&
+                                                existingClusterGenerations.some((g) => g.uuid === selectedGeneration)) {
+                                                return prev;
+                                            }
+                                            return !prev;
+                                        });
+                                    }, renderIcon: showOlderGenerations ? ChevronUp : ChevronDown, "aria-expanded": showOlderGenerations, "aria-controls": 'older-generations-panel', children: formElements.generation.olderGenerationsLabel ??
+                                        'View older generations' }), showOlderGenerations && (_jsxs("div", { id: 'older-generations-panel', style: {
+                                        marginTop: 'var(--cds-spacing-03)',
+                                    }, children: [renderGenerationRadioButtons(existingClusterGenerations), _jsx("p", { style: {
+                                                color: 'var(--cds-text-helper)',
+                                            }, children: formElements.generation.olderGenerationsHelperText ??
+                                                'These are older generations that are used in your organization.' })] }))] }))] }) }) }));
+    };
     const renderContent = () => {
         if (loading) {
             return (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(SkeletonText, {}) }) }));
@@ -481,12 +513,7 @@ export const C4CreateCluster = ({ loading, cta, formElements, autoUpdate, taskli
                                         : enableMap.prod }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: formElements.stageLabel.textBelow }) }) })] }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs(Stack, { gap: 2, children: [_jsx(FormElementTitle, { title: formElements.generation.title }), _jsx("div", { style: { overflowX: 'auto', marginBottom: '0.5rem' }, children: _jsx(ContentSwitcher, { size: 'md', style: {
                                             height: '100%',
                                             width: `${7 * formElements.generation.channels.length}rem`,
-                                        }, onChange: (data) => updateSelectedChannel(String(data.name ?? '')), selectedIndex: defaultChannelIndex, children: formElements.generation.channels.map((channel) => (_jsx(Switch, { name: channel.uuid, disabled: noAvailableSlots, children: channel.title }, channel.uuid))) }) }), getSelectedChannel() && (_jsxs(Stack, { gap: 4, children: [_jsx(Grid, { children: _jsx(Column, { span: 7, children: _jsx("p", { children: getSelectedChannel()?.description }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs(Stack, { gap: 2, children: [_jsx(FormLabel, { children: "Generation" }), _jsx(RadioButtonGroupWithGrid, { children: (getSelectedChannel()?.generations ?? []).map((generation) => (_jsx(Column, { sm: 4, md: 4, lg: 3, style: {
-                                                                    justifySelf: 'start',
-                                                                    marginBottom: '0.5rem',
-                                                                }, children: _jsx(RadioButton, { id: generation.uuid, value: generation.uuid, labelText: generation.title, checked: selectedGeneration === generation.uuid, onChange: (value) => {
-                                                                        updateSelectedGeneration(value);
-                                                                    }, disabled: isSubmitting() || noAvailableSlots }, generation.uuid) }, generation.uuid))) })] }) }) })] }))] }) }) }), authorizationToggle?.enabled && renderAuthorizationRadio(), tasklistModeToggle?.enabled && renderTasklistV2Content(), autoUpdate?.enabled && (_jsxs(_Fragment, { children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), _jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.autoUpdate?.title ?? '' }) }) }), autoUpdateEnabled && (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(Checkbox, { id: 'autoupdate', labelText: formElements.autoUpdate?.label ?? '', checked: autoUpdateChecked, onChange: (event) => {
+                                        }, onChange: (data) => updateSelectedChannel(String(data.name ?? '')), selectedIndex: defaultChannelIndex, children: formElements.generation.channels.map((channel) => (_jsx(Switch, { name: channel.uuid, disabled: noAvailableSlots, children: channel.title }, channel.uuid))) }) }), getSelectedChannel() && (_jsxs(Stack, { gap: 4, children: [_jsx(Grid, { children: _jsx(Column, { span: 7, children: _jsx("p", { children: getSelectedChannel()?.description }) }) }), renderGenerationSection()] }))] }) }) }), authorizationToggle?.enabled && renderAuthorizationRadio(), tasklistModeToggle?.enabled && renderTasklistV2Content(), autoUpdate?.enabled && (_jsxs(_Fragment, { children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), _jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.autoUpdate?.title ?? '' }) }) }), autoUpdateEnabled && (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(Checkbox, { id: 'autoupdate', labelText: formElements.autoUpdate?.label ?? '', checked: autoUpdateChecked, onChange: (event) => {
                                                 setAutoUpdateChecked(event.target.checked);
                                             }, disabled: isSubmitting() || !autoUpdateEnabled || noAvailableSlots }, 'autoupdate') }) })), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: autoUpdateEnabled
                                                 ? formElements.autoUpdate?.description

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

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

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

@@ -0,0 +1,187 @@
+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 userEvent from '@testing-library/user-event';
+import { C4CreateCluster } from './c4-create-cluster.js';
+function buildChannelsWithClassification() {
+    return [
+        {
+            title: 'Stable',
+            description: 'Stable channel',
+            uuid: 'stable',
+            default: true,
+            generations: [
+                {
+                    title: 'Camunda 8.8+gen18',
+                    uuid: 'gen-8.8-18',
+                    default: true,
+                    classification: 'channel',
+                },
+                {
+                    title: 'Camunda 8.7+gen24',
+                    uuid: 'gen-8.7-24',
+                    default: false,
+                    classification: 'channel',
+                },
+                {
+                    title: 'Camunda 8.4+gen15',
+                    uuid: 'gen-8.4-15',
+                    default: false,
+                    classification: 'existingCluster',
+                },
+                {
+                    title: 'Camunda 8.3+gen10',
+                    uuid: 'gen-8.3-10',
+                    default: false,
+                    classification: 'existingCluster',
+                },
+            ],
+        },
+    ];
+}
+function buildChannelsWithoutClassification() {
+    return [
+        {
+            title: 'Stable',
+            description: 'Stable channel',
+            uuid: 'stable',
+            default: true,
+            generations: [
+                {
+                    title: 'Camunda 8.8+gen18',
+                    uuid: 'gen-8.8-18',
+                    default: true,
+                },
+                {
+                    title: 'Camunda 8.7+gen24',
+                    uuid: 'gen-8.7-24',
+                    default: false,
+                },
+            ],
+        },
+    ];
+}
+function buildProps(channels) {
+    return {
+        loading: false,
+        banner: {
+            noSlotsLeft: {
+                title: 'No slots',
+                description: 'No slots available',
+            },
+        },
+        cta: {
+            label: 'Create cluster',
+            states: {
+                submitting: 'Creating...',
+                success: 'Created',
+                error: 'Error',
+            },
+            create: vi.fn().mockResolvedValue({ success: true, clusterId: 'c-1' }),
+            postCreate: vi.fn(),
+        },
+        formElements: {
+            name: {
+                title: 'Cluster name',
+                placeholder: 'Name',
+                validation: () => ({ isValid: true, message: '' }),
+            },
+            clusterPlanType: {
+                title: 'Cluster type',
+                options: [
+                    {
+                        title: 'Production',
+                        type: 'prod',
+                        uuid: 'prod',
+                        description: 'Production cluster',
+                        default: true,
+                    },
+                ],
+            },
+            region: {
+                title: 'Region',
+                backupRegionTitle: 'Backup',
+                description: 'Select region',
+                backupDescription: 'Select backup',
+                dualRegionBackups: false,
+                options: [
+                    {
+                        title: 'EU West',
+                        uuid: 'eu-west',
+                        provider: 'aws',
+                        default: true,
+                        backups: [],
+                    },
+                ],
+            },
+            generation: {
+                title: 'Channel',
+                channels,
+                olderGenerationsLabel: 'View older generations',
+                olderGenerationsHelperText: 'These are older generations that are used in your organization.',
+            },
+            stageLabel: {
+                title: 'Tag',
+                textBelow: 'Assign a tag',
+                boxes: {
+                    dev: { text: 'dev' },
+                    test: { text: 'test' },
+                    stage: { text: 'stage' },
+                    prod: { text: 'prod' },
+                },
+            },
+        },
+    };
+}
+describe('C4CreateCluster older generations toggle', () => {
+    it('hides existingCluster generations by default', () => {
+        render(_jsx(C4CreateCluster, { ...buildProps(buildChannelsWithClassification()) }));
+        expect(screen.getByLabelText('Camunda 8.8+gen18')).toBeInTheDocument();
+        expect(screen.getByLabelText('Camunda 8.7+gen24')).toBeInTheDocument();
+        expect(screen.queryByLabelText('Camunda 8.4+gen15')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Camunda 8.3+gen10')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /view older generations/i })).toBeInTheDocument();
+    });
+    it('shows existingCluster generations when toggle is clicked', async () => {
+        render(_jsx(C4CreateCluster, { ...buildProps(buildChannelsWithClassification()) }));
+        const toggle = screen.getByRole('button', {
+            name: /view older generations/i,
+        });
+        await userEvent.click(toggle);
+        expect(screen.getByLabelText('Camunda 8.4+gen15')).toBeInTheDocument();
+        expect(screen.getByLabelText('Camunda 8.3+gen10')).toBeInTheDocument();
+        expect(screen.getByText('These are older generations that are used in your organization.')).toBeInTheDocument();
+    });
+    it('prevents collapsing when an older generation is selected', async () => {
+        render(_jsx(C4CreateCluster, { ...buildProps(buildChannelsWithClassification()) }));
+        const toggle = screen.getByRole('button', {
+            name: /view older generations/i,
+        });
+        await userEvent.click(toggle);
+        const olderRadio = screen.getByLabelText('Camunda 8.4+gen15');
+        await userEvent.click(olderRadio);
+        await userEvent.click(toggle);
+        expect(screen.getByLabelText('Camunda 8.4+gen15')).toBeInTheDocument();
+        expect(screen.getByLabelText('Camunda 8.3+gen10')).toBeInTheDocument();
+    });
+    it('allows collapsing when a channel generation is selected', async () => {
+        render(_jsx(C4CreateCluster, { ...buildProps(buildChannelsWithClassification()) }));
+        const toggle = screen.getByRole('button', {
+            name: /view older generations/i,
+        });
+        await userEvent.click(toggle);
+        expect(screen.getByLabelText('Camunda 8.4+gen15')).toBeInTheDocument();
+        await userEvent.click(toggle);
+        expect(screen.queryByLabelText('Camunda 8.4+gen15')).not.toBeInTheDocument();
+    });
+    it('does not render the toggle when no existingCluster generations exist', () => {
+        render(_jsx(C4CreateCluster, { ...buildProps(buildChannelsWithoutClassification()) }));
+        expect(screen.queryByRole('button', { name: /view older generations/i })).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Camunda 8.8+gen18')).toBeInTheDocument();
+        expect(screen.getByLabelText('Camunda 8.7+gen24')).toBeInTheDocument();
+    });
+});

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

@@ -61,6 +61,7 @@ export interface C4CreateClusterChannelWithGenerations {
         default: boolean;
         uuid: string;
         version?: string;
+        classification?: 'channel' | 'existingCluster';
     }>;
 }
 export interface C4CreateClusterProps {
@@ -143,6 +144,8 @@ export interface C4CreateClusterProps {
         generation: {
             title: string;
             channels: C4CreateClusterChannelWithGenerations[];
+            olderGenerationsLabel?: string;
+            olderGenerationsHelperText?: string;
         };
         autoUpdate?: {
             title: string;

package/lib/esm/components/c4-delete-organization-modal/c4-delete-organization-modal.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from 'react';
+import type { C4DeleteOrganizationModalProps } from './c4-delete-organization-modal.types';
+export declare const C4DeleteOrganizationModal: ({ t, open, loading, error, organizationName, onRequestClose, onRequestSubmit, preventCloseOnClickOutside, }: C4DeleteOrganizationModalProps) => JSX.Element;

package/lib/esm/components/c4-delete-organization-modal/c4-delete-organization-modal.js

@@ -0,0 +1,41 @@
+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 { InlineNotification, Modal, Stack, TextInput } from '@carbon/react';
+import { useEffect, useState } from 'react';
+function safeTranslate(t, key, fallback, options) {
+    try {
+        const translated = t?.(key, options);
+        if (!translated || translated === key) {
+            return fallback;
+        }
+        if (key.includes(':')) {
+            const withoutNamespace = key.split(':').slice(1).join(':');
+            if (translated === withoutNamespace) {
+                return fallback;
+            }
+        }
+        return translated;
+    }
+    catch {
+        return fallback;
+    }
+}
+export const C4DeleteOrganizationModal = ({ t, open, loading, error, organizationName, onRequestClose, onRequestSubmit, preventCloseOnClickOutside, }) => {
+    const [confirmText, setConfirmText] = useState('');
+    useEffect(() => {
+        if (!open) {
+            setConfirmText('');
+        }
+    }, [open]);
+    const modalHeading = safeTranslate(t, 'orgmanagement:tabs.settings.orgmanagement.deleteOrganization', 'Delete organization');
+    const primaryButtonText = safeTranslate(t, 'orgmanagement:tabs.overview.actions.deleteOrg', 'Delete');
+    const secondaryButtonText = safeTranslate(t, 'common:cancel', 'Cancel');
+    const message = safeTranslate(t, 'orgmanagement:tabs.settings.orgmanagement.deleteConfirmation', `Are you sure you want to delete "${organizationName}"? The organization and its clusters, Web Modeler files, and other assets will be deleted. This action cannot be undone.`, { organizationName });
+    const confirmLabel = safeTranslate(t, 'orgmanagement:tabs.settings.orgmanagement.deleteConfirmLabel', 'Type the word DELETE to confirm');
+    const errorMessage = safeTranslate(t, 'orgmanagement:tabs.settings.orgmanagement.deleteError', 'Failed to delete organization. Please try again.');
+    return (_jsx(Modal, { modalHeading: modalHeading, open: open, onRequestClose: onRequestClose, onRequestSubmit: onRequestSubmit, primaryButtonText: primaryButtonText, primaryButtonDisabled: loading || confirmText.trim() !== 'DELETE', secondaryButtonText: secondaryButtonText, size: 'sm', danger: true, id: 'delete-organization-modal', preventCloseOnClickOutside: preventCloseOnClickOutside ?? true, children: _jsxs(Stack, { gap: 6, children: [error && (_jsx(InlineNotification, { kind: 'error', title: errorMessage, hideCloseButton: true })), _jsx("p", { children: message }), _jsx(TextInput, { id: 'c4-delete-organization-confirmation', labelText: confirmLabel, value: confirmText, onChange: (e) => setConfirmText(e.target.value), disabled: loading })] }) }));
+};

package/lib/esm/components/c4-delete-organization-modal/c4-delete-organization-modal.types.d.ts

@@ -0,0 +1,10 @@
+export interface C4DeleteOrganizationModalProps {
+    t?: (key: string, options?: Record<string, unknown>) => string;
+    open: boolean;
+    loading: boolean;
+    error?: boolean;
+    organizationName: string;
+    onRequestClose: () => void;
+    onRequestSubmit: () => void | Promise<void>;
+    preventCloseOnClickOutside?: boolean;
+}

package/lib/esm/components/c4-delete-organization-modal/c4-delete-organization-modal.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-job-dashboard-details-page/c4-job-dashboard-details-page.d.ts

@@ -5,4 +5,5 @@ export interface ColorScale {
     Failed: string;
 }
 export declare const CHART_HEIGHT = "20vh";
+export declare const PIE_CHART_MAX_WIDTH_PX = 400;
 export declare const C4JobDashboardDetailsPage: ({ jobType, config, isLoadingConfig, lastUpdatedAt, errorData, timeSeries, workerData, jobData, onTimeRangeChange, breadcrumb, translations, docsUrls, trackErrorClick, }: C4JobDashboardDetailsPageProps) => import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/c4-job-dashboard-details-page/c4-job-dashboard-details-page.js

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { InlineNotification, Stack, Tile } from '@carbon/react';
 import styled from 'styled-components';
+import { getC4JobDashboardDocsUrls } from '../../externalUrls.const.js';
 import { C4Breadcrumb } from '../c4-breadcrumb/c4-breadcrumb.js';
 import { C4JobDashboardErrorHandler } from '../c4-job-dashboard-shared/c4-job-dashboard-error-handler.js';
 import C4JobDashboardTimeRangeDropdown from '../c4-job-dashboard-shared/c4-job-dashboard-time-range-dropdown.js';
@@ -41,7 +42,9 @@ const PieChartWrapper = styled(TileWithShadow) `
   }
 `;
 export const CHART_HEIGHT = '20vh';
+export const PIE_CHART_MAX_WIDTH_PX = 400;
 export const C4JobDashboardDetailsPage = ({ jobType, config, isLoadingConfig, lastUpdatedAt, errorData, timeSeries, workerData, jobData, onTimeRangeChange, breadcrumb, translations, docsUrls, trackErrorClick, }) => {
+    const resolvedDocsUrls = getC4JobDashboardDocsUrls(docsUrls);
     const colorScale = {
         Created: '#002D9C',
         Completed: '#009D9A',
@@ -50,7 +53,7 @@ export const C4JobDashboardDetailsPage = ({ jobType, config, isLoadingConfig, la
     const featureIsDisabled = !isLoadingConfig && config && !config.enabled;
     if (featureIsDisabled) {
         const error = { status: 403, details: 'Feature is disabled', message: '' };
-        return (_jsx(C4JobDashboardErrorHandler, { itemsLength: 0, showIcons: true, translations: translations.errorHandler, error: error, docsUrls: docsUrls }));
+        return (_jsx(C4JobDashboardErrorHandler, { itemsLength: 0, showIcons: true, translations: translations.errorHandler, error: error, docsUrls: resolvedDocsUrls }));
     }
-    return (_jsxs(Stack, { gap: 4, children: [_jsx(C4Breadcrumb, { title: translations.title, elements: breadcrumb.elements }), _jsxs("p", { children: [translations.jobTypeLabel, " ", _jsx("strong", { children: jobType })] }), _jsx(C4TimestampInformation, { description: translations.lastUpdated, lastUpdatedAt: lastUpdatedAt }), _jsx(C4JobDashboardTimeRangeDropdown, { onChange: onTimeRangeChange, exportInterval: config?.exportInterval, disabled: isLoadingConfig, translations: translations.dropdown }), jobData.isIncomplete && (_jsx(InlineNotification, { style: { maxWidth: '100%' }, lowContrast: true, kind: 'warning', title: translations.dataLimitWarning.title, subtitle: translations.dataLimitWarning.description })), _jsx(ChartContainer, { children: _jsxs(ChartGrid, { children: [_jsx(TimeChartWrapper, { children: _jsx(C4JobDashboardTimeChart, { timeSeries: timeSeries.items, colorScale: colorScale, isLoading: timeSeries.isLoading, translations: translations, error: timeSeries.error, docsUrls: docsUrls }) }), _jsx(PieChartWrapper, { children: _jsx(C4JobDashboardPieChart, { jobData: jobData.data, colorScale: colorScale, isLoading: jobData.isLoading, translations: translations, error: jobData.error, docsUrls: docsUrls }) })] }) }), _jsx(TileWithShadow, { children: _jsx(C4JobDashboardWorkerTable, { workerData: workerData.items, isLoading: workerData.isLoading, translations: translations, error: workerData.error, docsUrls: docsUrls }) }), _jsx(TileWithShadow, { children: _jsx(C4JobDashboardErrorTable, { errors: errorData.items, operateBaseUrl: errorData.operateBaseUrl, isLoading: errorData.isLoading, translations: translations, error: errorData.error, docsUrls: docsUrls, trackErrorClick: trackErrorClick }) })] }));
+    return (_jsxs(Stack, { gap: 4, children: [_jsx(C4Breadcrumb, { title: translations.title, elements: breadcrumb.elements }), _jsxs("p", { children: [translations.jobTypeLabel, " ", _jsx("strong", { children: jobType })] }), _jsx(C4TimestampInformation, { description: translations.lastUpdated, lastUpdatedAt: lastUpdatedAt }), _jsx(C4JobDashboardTimeRangeDropdown, { onChange: onTimeRangeChange, exportInterval: config?.exportInterval, disabled: isLoadingConfig, translations: translations.dropdown }), jobData.isIncomplete && (_jsx(InlineNotification, { style: { maxWidth: '100%' }, lowContrast: true, kind: 'warning', title: translations.dataLimitWarning.title, subtitle: translations.dataLimitWarning.description })), _jsx(ChartContainer, { children: _jsxs(ChartGrid, { children: [_jsx(TimeChartWrapper, { children: _jsx(C4JobDashboardTimeChart, { timeSeries: timeSeries.items, colorScale: colorScale, isLoading: timeSeries.isLoading, translations: translations, error: timeSeries.error, docsUrls: resolvedDocsUrls }) }), _jsx(PieChartWrapper, { children: _jsx(C4JobDashboardPieChart, { jobData: jobData.data, colorScale: colorScale, isLoading: jobData.isLoading, translations: translations, error: jobData.error, docsUrls: resolvedDocsUrls }) })] }) }), _jsx(TileWithShadow, { children: _jsx(C4JobDashboardWorkerTable, { workerData: workerData.items, isLoading: workerData.isLoading, translations: translations, error: workerData.error, docsUrls: resolvedDocsUrls }) }), _jsx(TileWithShadow, { children: _jsx(C4JobDashboardErrorTable, { errors: errorData.items, operateBaseUrl: errorData.operateBaseUrl, isLoading: errorData.isLoading, translations: translations, error: errorData.error, docsUrls: resolvedDocsUrls, trackErrorClick: trackErrorClick }) })] }));
 };

package/lib/esm/components/c4-job-dashboard-details-page/c4-job-dashboard-details-page.types.d.ts

@@ -100,5 +100,5 @@ export interface C4JobDashboardDetailsPageProps {
     onTimeRangeChange: (value: number) => void;
     breadcrumb: C4BreadcrumbProps;
     translations: JobDashboardDetailsTranslations;
-    docsUrls: DocsUrls;
+    docsUrls?: DocsUrls;
 }

package/lib/esm/components/c4-job-dashboard-details-page/elements/c4-job-dashboard-piechart.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { DonutChart } from '@carbon/charts-react';
 import { C4JobDashboardErrorHandler } from '../../c4-job-dashboard-shared/c4-job-dashboard-error-handler.js';
-import { CHART_HEIGHT } from '../c4-job-dashboard-details-page.js';
+import { CHART_HEIGHT, PIE_CHART_MAX_WIDTH_PX, } from '../c4-job-dashboard-details-page.js';
 import C4JobDashboardChartHeading from './c4-job-dashboard-chart-heading.js';
 function C4JobDashboardPieChart({ jobData, error, colorScale, isLoading, translations, docsUrls, }) {
     const completedCount = jobData?.completed?.count ?? 0;
@@ -70,6 +70,6 @@ function C4JobDashboardPieChart({ jobData, error, colorScale, isLoading, transla
     const noData = (jobData?.created.count === jobData?.failed.count &&
         jobData?.completed.count === 0) ||
         !jobData;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginBottom: 25 }, children: _jsx(C4JobDashboardChartHeading, { title: translations.charts.createdVsCompleted.title, tooltipLabel: translations.charts.createdVsCompleted.tooltip }) }), (!jobData || noData || error) && !isLoading ? (_jsx(C4JobDashboardErrorHandler, { itemsLength: noData ? 0 : 1, showIcons: false, translations: translations.errorHandler, error: error, docsUrls: docsUrls })) : (_jsx("div", { children: _jsx(DonutChart, { data: pieData, options: pieOptions }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginBottom: 25 }, children: _jsx(C4JobDashboardChartHeading, { title: translations.charts.createdVsCompleted.title, tooltipLabel: translations.charts.createdVsCompleted.tooltip }) }), (!jobData || noData || error) && !isLoading ? (_jsx(C4JobDashboardErrorHandler, { itemsLength: noData ? 0 : 1, showIcons: false, translations: translations.errorHandler, error: error, docsUrls: docsUrls })) : (_jsx("div", { style: { maxWidth: PIE_CHART_MAX_WIDTH_PX, margin: '0 auto' }, children: _jsx(DonutChart, { data: pieData, options: pieOptions }) }))] }));
 }
 export default C4JobDashboardPieChart;

package/lib/esm/components/c4-job-dashboard-details-page/elements/c4-job-dashboard-time-chart.js

@@ -44,6 +44,11 @@ function C4JobDashboardTimeChart({ timeSeries, isLoading, colorScale, translatio
     const lastTimeDataPoint = Math.max(...timeSeries.map((t) => new Date(t.time).getTime()));
     const coversMultipleDays = new Date(firstTimeDataPoint).toDateString() !==
         new Date(lastTimeDataPoint).toDateString();
+    const formattedColorScale = {
+        [translations.charts.legend.completed]: colorScale.Completed,
+        [translations.charts.legend.failed]: colorScale.Failed,
+        [translations.charts.legend.created]: colorScale.Created,
+    };
     const areaOptions = {
         resizable: true,
         toolbar: {
@@ -89,7 +94,7 @@ function C4JobDashboardTimeChart({ timeSeries, isLoading, colorScale, translatio
             },
         },
         color: {
-            scale: colorScale,
+            scale: formattedColorScale,
         },
     };
     return (_jsxs(Stack, { gap: 6, children: [_jsx(C4JobDashboardChartHeading, { title: translations.charts.jobWorkload.title, tooltipLabel: translations.charts.jobWorkload.tooltip }), _jsxs("strong", { children: [translations.charts.jobWorkload.subtitle, " "] }), (!timeSeries || timeSeries.length === 0 || error) && !isLoading ? (_jsx(C4JobDashboardErrorHandler, { itemsLength: timeSeries.length, showIcons: false, translations: translations.errorHandler, error: error, docsUrls: docsUrls })) : (_jsx("div", { style: { height: CHART_HEIGHT }, children: _jsx(StackedAreaChart, { data: chartData, options: areaOptions }) }))] }));

package/lib/esm/components/c4-job-dashboard-overview-page/c4-job-dashboard-overview.js

@@ -8,6 +8,7 @@ import { C3DataTable, } from '@camunda/camunda-composite-components';
 import { InlineNotification, Stack } from '@carbon/react';
 import { Launch } from '@carbon/react/icons/index.esm.js';
 import { useEffect, useState } from 'react';
+import { getC4JobDashboardDocsUrls } from '../../externalUrls.const.js';
 import { C4Breadcrumb } from '../c4-breadcrumb/c4-breadcrumb.js';
 import { C4BackgroundFetchingIndicator } from '../c4-job-dashboard-shared/c4-background-fetching-indicator.js';
 import { C4JobDashboardErrorHandler } from '../c4-job-dashboard-shared/c4-job-dashboard-error-handler.js';
@@ -16,6 +17,7 @@ import C4JobDashboardTimeRangeDropdown from '../c4-job-dashboard-shared/c4-job-d
 import C4TimestampInformation from '../c4-job-dashboard-shared/c4-timestamp-information.js';
 import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
 export const C4JobDashboardOverviewPage = ({ error, items, isIncomplete, config, onTimeRangeChange, breadcrumb, isLoadingConfig, isLoadingTable, translations, lastUpdatedAt, docsUrls, }) => {
+    const resolvedDocsUrls = getC4JobDashboardDocsUrls(docsUrls);
     const [rows, setRows] = useState([]);
     useEffect(() => {
         const originalRows = items.map((row, index) => ({
@@ -51,9 +53,9 @@ export const C4JobDashboardOverviewPage = ({ error, items, isIncomplete, config,
             details: 'Feature is disabled',
             message: '',
         };
-        return (_jsx(C4JobDashboardErrorHandler, { itemsLength: 0, showIcons: true, translations: translations.errorHandler, error: error, docsUrls: docsUrls }));
+        return (_jsx(C4JobDashboardErrorHandler, { itemsLength: 0, showIcons: true, translations: translations.errorHandler, error: error, docsUrls: resolvedDocsUrls }));
     }
-    return (_jsxs(Stack, { gap: 3, children: [_jsx(C4Breadcrumb, { loading: false, elements: breadcrumb.elements, title: translations.title }), _jsxs("p", { children: [translations.description, ' ', _jsx(C4LinkButton, { onClick: () => window.open('https://docs.camunda.io/docs/components/concepts/job-workers/'), label: translations.learnMoreLabel, icon: _jsx(Launch, {}) })] }), _jsx(C4TimestampInformation, { description: translations.lastUpdated, lastUpdatedAt: lastUpdatedAt }), _jsx(C4JobDashboardTimeRangeDropdown, { onChange: onTimeRangeChange, exportInterval: config?.exportInterval, disabled: isLoadingConfig, translations: translations.dropdown }), shouldShowErrorHandler ? (_jsx(C4JobDashboardErrorHandler, { error: error, itemsLength: items.length, showIcons: true, translations: translations.errorHandler, docsUrls: docsUrls })) : (_jsxs(_Fragment, { children: [isIncomplete && (_jsx(InlineNotification, { style: { maxWidth: '100%' }, lowContrast: true, kind: 'warning', title: translations.dataLimitWarning.title, subtitle: translations.dataLimitWarning.description })), _jsx(C3DataTable, { id: 'usage-history-table', data: rows, toolbar: toolbar, headers: [
+    return (_jsxs(Stack, { gap: 3, children: [_jsx(C4Breadcrumb, { loading: false, elements: breadcrumb.elements, title: translations.title }), _jsxs("p", { children: [translations.description, ' ', _jsx(C4LinkButton, { onClick: () => window.open('https://docs.camunda.io/docs/components/concepts/job-workers/'), label: translations.learnMoreLabel, icon: _jsx(Launch, {}) })] }), _jsx(C4TimestampInformation, { description: translations.lastUpdated, lastUpdatedAt: lastUpdatedAt }), _jsx(C4JobDashboardTimeRangeDropdown, { onChange: onTimeRangeChange, exportInterval: config?.exportInterval, disabled: isLoadingConfig, translations: translations.dropdown }), shouldShowErrorHandler ? (_jsx(C4JobDashboardErrorHandler, { error: error, itemsLength: items.length, showIcons: true, translations: translations.errorHandler, docsUrls: resolvedDocsUrls })) : (_jsxs(_Fragment, { children: [isIncomplete && (_jsx(InlineNotification, { style: { maxWidth: '100%' }, lowContrast: true, kind: 'warning', title: translations.dataLimitWarning.title, subtitle: translations.dataLimitWarning.description })), _jsx(C3DataTable, { id: 'usage-history-table', data: rows, toolbar: toolbar, headers: [
                             {
                                 key: 'jobType',
                                 label: translations.tableHeaders.jobType,

package/lib/esm/components/c4-job-dashboard-overview-page/c4-job-dashboard-overview.types.d.ts

@@ -43,5 +43,5 @@ export interface C4JobDashboardOverviewPageProps {
     isLoadingConfig: boolean;
     isLoadingTable: boolean;
     translations: JobDashboardOverviewTranslations;
-    docsUrls: DocsUrls;
+    docsUrls?: DocsUrls;
 }

package/lib/esm/components/c4-theme-switcher/c4-theme-switcher.js

@@ -21,6 +21,12 @@ import cyberzeeIcon from './cyberzee-removebg-preview-100.png';
 const STORAGE_KEY = 'camunda-theme-mode';
 const ACTIVATION_KEY = 'camunda-theme-switcher-enabled';
 const ACTIVATION_EVENT = 'camunda-theme-switcher-activated';
+/**
+ * Custom events dispatched by the AprilFoolsNotification component.
+ * Used to reposition the theme switcher when the notification is visible.
+ */
+const APRIL_FOOLS_SHOWN_EVENT = 'camunda-april-fools-shown';
+const APRIL_FOOLS_HIDDEN_EVENT = 'camunda-april-fools-hidden';
 /**
  * Cyberzee icon component for theme toggle
  */
@@ -54,6 +60,7 @@ const getThemeButtonContent = (theme) => {
 export const C4ThemeSwitcher = ({ position = 'bottom-right', visible = true, onThemeChange, }) => {
     const [currentTheme, setCurrentTheme] = useState('normal');
     const [isActivated, setIsActivated] = useState(() => localStorage.getItem(ACTIVATION_KEY) === 'true');
+    const [isAprilFoolsVisible, setIsAprilFoolsVisible] = useState(false);
     const { resolvedTheme } = useC3Profile();
     // Register developer-console activation function
     useEffect(() => {
@@ -70,6 +77,17 @@ export const C4ThemeSwitcher = ({ position = 'bottom-right', visible = true, onT
             window.removeEventListener(ACTIVATION_EVENT, handleActivation);
         };
     }, []);
+    // Listen for April Fools notification visibility to shift position left
+    useEffect(() => {
+        const handleShown = () => setIsAprilFoolsVisible(true);
+        const handleHidden = () => setIsAprilFoolsVisible(false);
+        window.addEventListener(APRIL_FOOLS_SHOWN_EVENT, handleShown);
+        window.addEventListener(APRIL_FOOLS_HIDDEN_EVENT, handleHidden);
+        return () => {
+            window.removeEventListener(APRIL_FOOLS_SHOWN_EVENT, handleShown);
+            window.removeEventListener(APRIL_FOOLS_HIDDEN_EVENT, handleHidden);
+        };
+    }, []);
     // Apply theme class to body
     const applyThemeClass = useCallback((theme, carbonTheme) => {
         // Remove all theme classes
@@ -174,9 +192,14 @@ export const C4ThemeSwitcher = ({ position = 'bottom-right', visible = true, onT
     if (!visible || (!isActivated && currentTheme === 'normal')) {
         return _jsx(_Fragment, { children: " " });
     }
-    // Position styles
+    // Position styles. When the April Fools notification is visible in the
+    // bottom-right corner (right: 1rem, maxWidth: 28rem), shift the button
+    // further left so the two never overlap.
     const positionStyles = {
-        'bottom-right': { bottom: '20px', right: '80px' },
+        'bottom-right': {
+            bottom: '20px',
+            right: isAprilFoolsVisible ? 'calc(28rem + 2rem)' : '80px',
+        },
         'bottom-left': { bottom: '20px', left: '20px' },
         'top-right': { top: '20px', right: '20px' },
         'top-left': { top: '20px', left: '20px' },