@camunda/ccma-saas-frontend 0.0.31

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

@@ -0,0 +1,508 @@
+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 { 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 { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { C4ClusterTagSelector } from '../c4-cluster-tag-selector/c4-cluster-tag-selector.js';
+import { C4Divider } from '../c4-divider/c4-divider.js';
+import { C4ExternalLink } from '../c4-external-link/c4-external-link.js';
+import { C4LinkButton } from '../c4-link-button/c4-link-button.js';
+var TasklistMode;
+(function (TasklistMode) {
+    TasklistMode["V1"] = "v1";
+    TasklistMode["V2"] = "v2";
+})(TasklistMode || (TasklistMode = {}));
+const SummaryDesktopWrapper = styled.div `
+  position: sticky;
+  top: 5rem;
+  align-self: start;
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+const SummaryMobileWrapper = styled.div `
+  @media (min-width: 768px) {
+    display: none;
+  }
+`;
+const getInlineStatusByState = (state) => {
+    switch (state) {
+        case 'submitting':
+            return 'active';
+        case 'success':
+            return 'finished';
+        case 'error':
+            return 'error';
+        default:
+            return 'inactive';
+    }
+};
+const FormElementTitle = (props) => _jsx("h3", { children: props.title });
+const ClusterPlanTypeTile = (props) => {
+    return (_jsxs(Stack, { gap: 4, children: [props.type === 'dev' ? _jsx(Code, {}) : _jsx(DataBase, {}), _jsx("h6", { children: props.title }), _jsx("p", { children: props.description })] }));
+};
+const RadioButtonGroupWithGrid = (props) => {
+    return _jsx(Grid, { children: props.children });
+};
+const enableMap = {
+    prod: ['dev', 'test', 'stage', 'prod'],
+    stage: ['dev', 'test', 'stage'],
+    test: ['dev', 'test'],
+    dev: ['dev', 'test'],
+};
+export const C4CreateCluster = ({ loading, cta, formElements, autoUpdate, tasklistModeToggle, authorizationToggle, banner: { noSlotsLeft }, }) => {
+    const preConditions = formElements.clusterPlanType.options.length > 0 &&
+        formElements.region.options.length > 0 &&
+        formElements.generation.channels.length > 0 &&
+        formElements.generation.channels.reduce((a, b) => a && b.generations?.length > 0, true);
+    // CONTEXT STATES
+    const [clusterNameValidation, setClusterNameValidation] = useState({
+        isValid: true,
+        message: '',
+    });
+    const [clusterDescriptionValidation, setClusterDescriptionValidation] = useState({
+        isValid: true,
+        message: '',
+    });
+    const [regionValidation, setRegionValidation] = useState({
+        isValid: true,
+        message: '',
+    });
+    const clusterNameInputFieldRef = useRef(null);
+    const clusterDescriptionInputFieldRef = useRef(null);
+    const regionSectionRef = useRef(null);
+    const defaultChannel = formElements.generation.channels.find((channel) => channel.default === true) ?? formElements.generation.channels[0];
+    const defaultGeneration = defaultChannel?.generations?.find((generation) => generation.default === true) ?? defaultChannel?.generations?.[0];
+    const [selectedChannel, setSelectedChannel] = useState(defaultChannel?.uuid);
+    const [selectedGeneration, setSelectedGeneration] = useState(defaultGeneration?.uuid);
+    const [clusterName, setClusterName] = useState('');
+    const [clusterDescription, setClusterDescription] = useState('');
+    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 currentClusterPlanType = (clusterPlanType || defaultClusterPlanType?.uuid) ?? '';
+    const setClusterPlanTypeWithEffects = (clusterPlanTypeUuid) => {
+        updateNumberOfAllocatedHwPackages(1);
+        setClusterPlanType(clusterPlanTypeUuid);
+        const selectedType = formElements.clusterPlanType.options.find((option) => option.uuid === clusterPlanTypeUuid)?.type;
+        if (selectedType === 'dev') {
+            if (selectedTag === 'prod') {
+                setSelectedTag('dev');
+            }
+        }
+    };
+    const selectedPlan = formElements.clusterPlanType.options.find((option) => option.uuid === clusterPlanType);
+    const [tasklistV2Enabled, setTasklistV2Enabled] = useState(true);
+    // depends on cluster type
+    const [authorizationEnabled, setAuthorizationEnabled] = useState(selectedPlan?.type !== 'prod');
+    const [numberOfAllocatedHwPackages, setNumberOfAllocatedHwPackages] = useState(1);
+    const defaultRegion = formElements.region.options.length === 1
+        ? formElements.region.options[0].uuid
+        : formElements.region.options.find((option) => option.default === true)
+            ?.uuid;
+    const [region, setRegion] = useState(defaultRegion);
+    const defaultProvider = formElements.region.options.find((option) => option.default === true)
+        ?.provider ?? formElements.region.options[0]?.provider;
+    const [provider, setProvider] = useState(defaultProvider);
+    const getEncryptionsByProvider = (providerName) => {
+        if (providerName === 'AWS') {
+            return formElements.encryptionAWS ?? formElements.encryptionGCP;
+        }
+        return formElements.encryptionGCP ?? formElements.encryptionAWS;
+    };
+    const getDefaultBackupRegion = () => {
+        if (!defaultRegion)
+            return undefined;
+        const selectedRegion = formElements.region.options.find((r) => r.uuid === defaultRegion);
+        if (!selectedRegion)
+            return undefined;
+        return formElements.region.dualRegionBackups
+            ? (selectedRegion.backups.find((backup) => backup.regions.length === 1)
+                ?.uuid ?? '')
+            : undefined;
+    };
+    const [backupRegion, setBackupRegion] = useState(getDefaultBackupRegion());
+    const [encryptions, setEncryptions] = useState(getEncryptionsByProvider(defaultProvider));
+    const defaultEncryption = encryptions?.options
+        ? (encryptions.options.find((enc) => enc.default)?.value ?? '')
+        : undefined;
+    const [encryption, setEncryption] = useState(defaultEncryption);
+    const [submitState, setSubmitState] = useState('idle');
+    const [autoUpdateChecked, setAutoUpdateChecked] = useState(autoUpdate?.default || false);
+    const [autoUpdateEnabled, setAutoUpdateEnabled] = useState(formElements?.autoUpdate?.shouldBeEnabled(selectedChannel) ?? false);
+    const noAvailableSlots = (submitState === 'idle' &&
+        formElements.clusterPlanType.options.every((option) => option.disabled)) ??
+        false;
+    // CONTEXT STATES
+    const updateNumberOfAllocatedHwPackages = (value) => {
+        setNumberOfAllocatedHwPackages(value);
+    };
+    const getChannelIndex = (channelUuid) => formElements.generation.channels.findIndex((channel) => channel.uuid === channelUuid);
+    const defaultChannelIndex = getChannelIndex(defaultChannel?.uuid);
+    const getSelectedChannel = () => {
+        const foundChannel = formElements.generation.channels.find((channel) => channel.uuid === selectedChannel);
+        return foundChannel;
+    };
+    const updateSelectedGeneration = (generationUuid) => {
+        setSelectedGeneration(generationUuid);
+    };
+    const updateSelectedChannel = (channelUuid) => {
+        const foundChannel = formElements.generation.channels.find((channel) => channel.uuid === channelUuid) ?? formElements.generation.channels[0];
+        const foundDefaultGeneration = foundChannel.generations.find((generation) => generation.default === true) ?? foundChannel.generations[0];
+        setSelectedChannel(channelUuid);
+        updateSelectedGeneration(foundDefaultGeneration.uuid);
+        if (formElements.autoUpdate) {
+            setAutoUpdateEnabled(formElements.autoUpdate.shouldBeEnabled(foundChannel.uuid));
+        }
+    };
+    const updateProvider = (providerName) => {
+        if (provider !== providerName) {
+            setProvider(providerName);
+            updateRegion(formElements.region.options.find((region) => region.provider === providerName)?.uuid ?? '');
+            const providerEncryptions = getEncryptionsByProvider(providerName);
+            setEncryptions(providerEncryptions);
+            updateEncryption(providerEncryptions?.options.find((enc) => enc.default)?.value ??
+                'Provider');
+        }
+    };
+    const providerSupportsEncryption = () => encryption !== undefined;
+    const getUniqueProviders = () => formElements.region.options
+        .map((option) => option.provider)
+        .filter((value, index, array) => array.lastIndexOf(value) === index)
+        .sort((a, b) => a.localeCompare(b));
+    const updateRegion = (regionUuid) => {
+        setRegion(regionUuid);
+        setRegionValidation({ isValid: true, message: '' });
+        const region = formElements.region.options.find((region) => region.uuid === regionUuid);
+        if (region) {
+            const defaultDualRegionBackups = formElements.region.dualRegionBackups
+                ? (region.backups.find((backup) => backup.regions.length === 1)?.uuid ??
+                    '')
+                : undefined;
+            setBackupRegion(defaultDualRegionBackups);
+        }
+        else {
+            setBackupRegion(undefined);
+        }
+    };
+    const updateBackupRegion = (regionUuid) => {
+        setBackupRegion(regionUuid);
+    };
+    const updateEncryption = (value) => {
+        setEncryption(value);
+    };
+    const updateClusterName = (name) => {
+        setClusterNameValidation({ isValid: true, message: '' });
+        setClusterName(name);
+    };
+    const getClusterPlanType = () => {
+        const foundClusterPlanType = formElements.clusterPlanType.options.find((currentClusterPlanType) => currentClusterPlanType.uuid === clusterPlanType);
+        return foundClusterPlanType ?? defaultClusterPlanType;
+    };
+    const clusterCreationAllowed = () => !!(currentClusterPlanType?.length > 0 &&
+        selectedChannel?.length > 0 &&
+        selectedGeneration?.length > 0);
+    const getSummary = () => {
+        const foundClusterPlanType = getClusterPlanType();
+        const foundRegion = formElements.region.options.find((currentRegion) => currentRegion.uuid === region);
+        const foundBackupRegion = foundRegion?.backups.find((backup) => backup.uuid === backupRegion);
+        const foundChannel = getSelectedChannel();
+        const foundGeneration = foundChannel
+            ? foundChannel?.generations?.find((currentGeneration) => currentGeneration.uuid === selectedGeneration)
+            : null;
+        return {
+            clusterPlanType: foundClusterPlanType ? foundClusterPlanType.title : '-',
+            region: foundRegion ? foundRegion.title : '-',
+            backup: foundBackupRegion
+                ? `${foundBackupRegion.regions.length > 1
+                    ? 'Dual region'
+                    : 'Single region'}`
+                : '-',
+            channel: foundChannel ? foundChannel.title : '-',
+            generation: foundGeneration ? foundGeneration.title : '-',
+            stageTag: selectedTag,
+            encryption,
+            provider: foundRegion ? foundRegion.provider : undefined,
+        };
+    };
+    const isSubmitting = () => {
+        return submitState === 'submitting';
+    };
+    const handleSubmit = async () => {
+        // validation
+        const validationResponse = formElements.name.validation(clusterName);
+        if (!validationResponse.isValid) {
+            setClusterNameValidation(validationResponse);
+            const rect = clusterNameInputFieldRef.current?.getBoundingClientRect();
+            if (rect) {
+                const y = rect?.top + window.scrollY;
+                window.scrollTo({
+                    top: y - 150,
+                    behavior: 'smooth',
+                });
+            }
+            return;
+        }
+        // validate description if validation function is provided
+        if (formElements.description?.validation) {
+            const descriptionValidationResponse = formElements.description.validation(clusterDescription);
+            if (!descriptionValidationResponse.isValid) {
+                setClusterDescriptionValidation(descriptionValidationResponse);
+                const rect = clusterDescriptionInputFieldRef.current?.getBoundingClientRect();
+                if (rect) {
+                    const y = rect?.top + window.scrollY;
+                    window.scrollTo({
+                        top: y - 150,
+                        behavior: 'smooth',
+                    });
+                }
+                return;
+            }
+        }
+        // validate region selection
+        if (!region) {
+            setRegionValidation({
+                isValid: false,
+                message: formElements.region.validationMessage ?? 'Please select a region',
+            });
+            const rect = regionSectionRef.current?.getBoundingClientRect();
+            if (rect) {
+                const y = rect?.top + window.scrollY;
+                window.scrollTo({
+                    top: y - 150,
+                    behavior: 'smooth',
+                });
+            }
+            return;
+        }
+        const currentClusterPlanType = (clusterPlanType || defaultClusterPlanType?.uuid) ?? '';
+        const selectedRegion = region;
+        setSubmitState('submitting');
+        const success = await cta.create({
+            name: clusterName,
+            description: clusterDescription,
+            clusterPlanType: currentClusterPlanType,
+            channel: selectedChannel,
+            region: selectedRegion,
+            backupRegion,
+            generation: selectedGeneration,
+            autoUpdate: autoUpdate?.enabled && autoUpdateChecked,
+            stageLabel: selectedTag,
+            encryption: encryption,
+            numberOfAllocatedHwPackages,
+            tasklistV2Enabled: tasklistModeToggle?.enabled && generationIs8_8OrAboveAndLessThan8_10()
+                ? tasklistV2Enabled
+                : undefined,
+            identityBackendChecksEnabled: authorizationToggle?.enabled && generationIs8_8OrAbove()
+                ? authorizationEnabled
+                : undefined,
+        });
+        if (success.success) {
+            setSubmitState('success');
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            if (success.clusterId) {
+                cta.postCreate(success.clusterId);
+            }
+        }
+        else {
+            setSubmitState('error');
+            await new Promise((resolve) => setTimeout(resolve, 5000));
+            setSubmitState('idle');
+        }
+    };
+    const generationIs8_8OrAbove = () => {
+        const foundChannel = getSelectedChannel();
+        const foundGeneration = foundChannel
+            ? foundChannel?.generations?.find((currentGeneration) => currentGeneration.uuid === selectedGeneration)
+            : null;
+        if (!foundGeneration?.version) {
+            return false;
+        }
+        try {
+            return checkVersion({
+                possiblyVersionOrDockerPath: foundGeneration.version,
+                operator: VersionCheckOperator.GreaterThanOrEqual,
+                versionToCompareTo: '8.8.0-alpha4',
+                trueForSnapshot: true,
+            });
+        }
+        catch (_error) {
+            return false;
+        }
+    };
+    const generationIs8_8OrAboveAndLessThan8_10 = () => {
+        const foundChannel = getSelectedChannel();
+        const foundGeneration = foundChannel
+            ? foundChannel?.generations?.find((currentGeneration) => currentGeneration.uuid === selectedGeneration)
+            : null;
+        if (!foundGeneration?.version) {
+            return false;
+        }
+        try {
+            return (checkVersion({
+                possiblyVersionOrDockerPath: foundGeneration.version,
+                operator: VersionCheckOperator.GreaterThanOrEqual,
+                versionToCompareTo: '8.8.0-alpha8',
+                trueForSnapshot: true,
+            }) &&
+                checkVersion({
+                    possiblyVersionOrDockerPath: foundGeneration.version,
+                    operator: VersionCheckOperator.LessThan,
+                    versionToCompareTo: '8.10.0',
+                    trueForSnapshot: true,
+                }));
+        }
+        catch (_error) {
+            return false;
+        }
+    };
+    const renderSummary = () => {
+        if (loading || !preConditions) {
+            return null;
+        }
+        const summary = getSummary();
+        const submitStateDescription = submitState === 'submitting'
+            ? cta.states.submitting
+            : submitState === 'success'
+                ? cta.states.success
+                : cta.states.error;
+        return (_jsxs("div", { style: {
+                display: 'grid',
+                gridAutoFlow: 'row',
+                gridAutoRows: 'max-content 1fr',
+                overflow: 'hidden',
+                zIndex: 1,
+                minHeight: '572px',
+            }, children: [_jsxs("div", { children: [_jsx("h6", { children: "Summary" }), _jsx(C4Divider, {}), _jsxs(Stack, { gap: 4, children: [loading ? (_jsx(SkeletonText, {})) : (_jsxs("h6", { children: [summary.clusterPlanType, " - ", numberOfAllocatedHwPackages, "x"] })), _jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: "Provider and region" }), loading ? (_jsx(SkeletonText, {})) : summary.provider ? (`${summary.provider} - ${summary.region}`) : (summary.region)] }), formElements.region.dualRegionBackups && (_jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: "Backup region" }), loading ? _jsx(SkeletonText, {}) : summary.backup] })), summary.encryption && (_jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: encryptions?.title ?? 'Encryption at rest' }), loading ? _jsx(SkeletonText, {}) : summary.encryption] })), _jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: "Channel" }), loading ? _jsx(SkeletonText, {}) : summary.channel] }), _jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: "Generation" }), loading ? _jsx(SkeletonText, {}) : summary.generation] }), _jsxs(Stack, { gap: 1, children: [_jsx(FormLabel, { children: "Cluster tag" }), loading ? (_jsx(SkeletonText, {})) : (_jsx("span", { children: _jsx(C3ClusterTag, { stage: summary.stageTag }) }))] })] })] }), !loading && (_jsx("div", { style: { alignSelf: 'end' }, children: _jsx("div", { children: _jsxs(Stack, { gap: 3, children: [['submitting', 'success', 'error'].includes(submitState) ? (_jsx(InlineLoading, { description: submitStateDescription, status: getInlineStatusByState(submitState), style: { marginLeft: '1rem' } })) : (_jsx(Button, { disabled: !clusterCreationAllowed(), style: { width: '100%' }, onClick: handleSubmit, children: cta.label })), cta.cancel && (_jsx(Button, { onClick: () => {
+                                        if (cta.cancel) {
+                                            cta.cancel.onClick();
+                                        }
+                                    }, disabled: submitState !== 'idle', kind: 'secondary', style: { width: '100%' }, children: cta.cancel.label })), cta.help && (_jsxs("p", { children: [cta.help.prefix, ' ', _jsx(Link, { href: cta.help.href, target: '_blank', children: cta.help.label })] }))] }) }) }))] }));
+    };
+    const renderTasklistV2Content = () => {
+        if (!(tasklistModeToggle?.enabled && generationIs8_8OrAboveAndLessThan8_10())) {
+            return null;
+        }
+        return (_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: tasklistModeToggle?.title ?? '' }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs(RadioButtonGroup, { defaultSelected: TasklistMode.V2, invalidText: 'Invalid selection', legendText: 'Select Tasklist version', name: 'tasklist-mode', warnText: 'Please select a Tasklist version', required: true, orientation: 'horizontal', onChange: (selection) => {
+                                        setTasklistV2Enabled(selection === TasklistMode.V2);
+                                    }, children: [_jsx(RadioButton, { id: TasklistMode.V2, labelText: 'Tasklist API v2', value: TasklistMode.V2 }), _jsx(RadioButton, { id: TasklistMode.V1, labelText: 'Tasklist API v1 (legacy)', value: TasklistMode.V1 })] }), _jsx("div", { children: _jsx("p", { children: _jsx("a", { href: 'https://docs.camunda.io/docs/next/components/tasklist/api-versions/', target: '_blank', rel: 'noopener', children: "Learn more about Tasklist v1 and v2" }) }) })] }) }) })] }));
+    };
+    const renderAuthorizationRadio = () => {
+        if (!(authorizationToggle?.enabled && generationIs8_8OrAbove())) {
+            return null;
+        }
+        return (_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: authorizationToggle?.title ?? '' }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs(RadioButtonGroup, { valueSelected: authorizationEnabled ? 'true' : 'false', invalidText: 'Invalid selection', legendText: _jsx("div", {}), name: 'authorization-mode', warnText: 'Please select an option', required: true, orientation: 'horizontal', onChange: (selection) => {
+                                        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: 'https://docs.camunda.io/docs/next/components/concepts/access-control/authorizations/', 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 renderContent = () => {
+        if (loading) {
+            return (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(SkeletonText, {}) }) }));
+        }
+        if (!preConditions) {
+            return (_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: "Something went wrong. Please try again later." }) }) }));
+        }
+        return (_jsxs(Stack, { gap: 6, children: [noAvailableSlots && (_jsx(InlineNotification, { kind: 'warning', hideCloseButton: true, style: { minWidth: '0' }, title: noSlotsLeft.title, subtitle: noSlotsLeft.description })), _jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.name.title }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 8, children: _jsx(TextInput, { ref: clusterNameInputFieldRef, invalidText: clusterNameValidation.message, invalid: !clusterNameValidation.isValid, type: 'text', id: 'cluster-name', placeholder: formElements.name.placeholder, onChange: (event) => updateClusterName(event.target.value), labelText: '', disabled: isSubmitting() || noAvailableSlots }) }) })] }), formElements.description && (_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.description.title }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 8, children: _jsx(TextArea, { ref: clusterDescriptionInputFieldRef, id: 'cluster-description', placeholder: formElements.description.placeholder, onChange: (event) => {
+                                        setClusterDescriptionValidation({
+                                            isValid: true,
+                                            message: '',
+                                        });
+                                        setClusterDescription(event.target.value);
+                                    }, labelText: '', disabled: isSubmitting() || noAvailableSlots, rows: 3, invalid: !clusterDescriptionValidation.isValid, invalidText: clusterDescriptionValidation.message }) }) })] })), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), _jsxs(Stack, { gap: 2, ref: regionSectionRef, children: [_jsx(Grid, { children: _jsxs(Column, { span: 12, children: [_jsx(FormElementTitle, { title: formElements.region.title }), !regionValidation.isValid && (_jsx("p", { style: {
+                                            color: 'var(--cds-text-error)',
+                                            marginTop: '0.25rem',
+                                            marginBottom: '0.5rem',
+                                        }, children: regionValidation.message })), getUniqueProviders().length > 1 && (_jsx(ContentSwitcher, { size: 'md', style: {
+                                            width: `${7 * getUniqueProviders().length}rem`,
+                                            marginBottom: '0.5rem',
+                                        }, onChange: (data) => updateProvider(String(data.name ?? '')), selectedIndex: getUniqueProviders().indexOf(provider), children: getUniqueProviders().map((provider) => (_jsx(Switch, { name: provider, children: provider }, provider))) }))] }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(RadioButtonGroupWithGrid, { children: formElements.region.options
+                                        .filter((option) => option.provider === provider)
+                                        .map((option) => (_jsx(Column, { sm: 4, md: 6, lg: 4, style: { justifySelf: 'start', marginBottom: '0.5rem' }, children: _jsx(RadioButton, { id: option.uuid, value: option.uuid, labelText: option.title, checked: option.uuid === region, disabled: isSubmitting() || noAvailableSlots, onChange: (value) => {
+                                                updateRegion(value);
+                                            } }, option.uuid) }, option.uuid))) }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: formElements.region.description }) }) })] }), (() => {
+                    if (formElements.region.dualRegionBackups) {
+                        const selectedRegion = formElements.region.options.find((reg) => reg.uuid === region);
+                        return (_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.region.backupRegionTitle }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(RadioButtonGroupWithGrid, { children: selectedRegion?.backups.map((option) => (_jsx(Column, { sm: 4, md: 6, lg: 4, style: {
+                                                    justifySelf: 'start',
+                                                    marginBottom: '0.5rem',
+                                                }, children: _jsx(RadioButton, { id: option.uuid, value: option.uuid, labelText: `${option.regions.length > 1
+                                                        ? 'Dual region: '
+                                                        : 'Single region: '} ${option.regions
+                                                        .map((reg) => reg.label)
+                                                        .join(', ')}`, checked: option.uuid === backupRegion, disabled: isSubmitting() || noAvailableSlots, onChange: (value) => {
+                                                        updateBackupRegion(value);
+                                                    } }, option.uuid) }, option.uuid))) ?? _jsx(_Fragment, {}) }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: formElements.region.backupDescription }) }) })] }));
+                    }
+                    else {
+                        return _jsx(_Fragment, {});
+                    }
+                })(), _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.clusterPlanType.title }) }) }), _jsx("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+                                gap: '1rem',
+                                padding: '0 1rem',
+                            }, children: formElements.clusterPlanType.options.map((option) => (_jsx("div", { style: { marginBottom: '2.0rem' }, children: _jsx("div", { style: {
+                                        height: '100%',
+                                        display: 'grid',
+                                    }, children: _jsx(RadioTile, { value: option.uuid, checked: option.uuid === currentClusterPlanType, onChange: () => setClusterPlanTypeWithEffects(option.uuid), disabled: option.disabled || isSubmitting() || noAvailableSlots, style: { height: '100%' }, children: _jsx(ClusterPlanTypeTile, { type: option.type, title: option.title, description: option.description }) }, option.uuid) }) }, option.uuid))) })] }), formElements.allocatedHardwarePackages &&
+                    formElements.clusterPlanType.options.find((option) => option.uuid === currentClusterPlanType &&
+                        option.category === ClusterPlanTypeCategory.ADVANCED_OFFERING &&
+                        option.availabilityClass !== 'unset' &&
+                        option.availabilityClass !== undefined) !== undefined && (_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: formElements.allocatedHardwarePackages.title }) }), _jsx("div", { style: { marginLeft: '1rem' }, children: Array.from(Array(formElements.allocatedHardwarePackages.max), (_d, i) => i).map((val) => {
+                                // return "asd"
+                                return (_jsxs(Tag, { id: `allocatedHardwarePackages-${val + 1}`, onClick: () => {
+                                        updateNumberOfAllocatedHwPackages(val + 1);
+                                    }, type: numberOfAllocatedHwPackages === val + 1
+                                        ? 'high-contrast'
+                                        : 'outline', style: { borderWidth: '0px' }, disabled: (getClusterPlanType()?.available ?? 0) < val + 1, children: [val + 1, "x"] }, `allocatedHardwarePackages-${val + 1}`));
+                            }) }), _jsx("p", { style: { marginLeft: '1rem' }, children: formElements.allocatedHardwarePackages.description }), _jsx("p", { style: { marginLeft: '1rem' }, children: _jsxs("strong", { children: [formElements.allocatedHardwarePackages.bold, ":", ' ', getClusterPlanType()?.used, " Used /", ' ', (getClusterPlanType()?.used ?? 0) +
+                                        (getClusterPlanType()?.available ?? 0), ' ', "Total"] }) }), _jsx("p", { style: { marginLeft: '1rem' }, children: _jsx(C4ExternalLink, { id: 'allocatedHardwarePackages-docs', inline: true, label: formElements.allocatedHardwarePackages.link.label, href: formElements.allocatedHardwarePackages.link.href }) })] })), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), _jsxs(Stack, { gap: 5, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: formElements.stageLabel.title }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 16, children: _jsx(C4ClusterTagSelector, { boxes: formElements.stageLabel.boxes, isDevCluster: !!(getClusterPlanType() && getClusterPlanType()?.type === 'dev'), onChange: (selected) => {
+                                        setSelectedTag(selected);
+                                        switch (selected) {
+                                            case 'prod':
+                                            case 'stage': {
+                                                setAuthorizationEnabled(true);
+                                                break;
+                                            }
+                                            default: {
+                                                setAuthorizationEnabled(false);
+                                                break;
+                                            }
+                                        }
+                                    }, save: { allowed: !noAvailableSlots }, currentStage: selectedTag, allowedTags: selectedPlan?.type
+                                        ? enableMap[selectedPlan?.type]
+                                        : 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) => {
+                                                setAutoUpdateChecked(event.target.checked);
+                                            }, disabled: isSubmitting() || !autoUpdateEnabled || noAvailableSlots }, 'autoupdate') }) })), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx("p", { children: autoUpdateEnabled
+                                                ? formElements.autoUpdate?.description
+                                                : formElements.autoUpdate?.descriptionIfDisabled }) }) })] })] })), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) }), encryptions && providerSupportsEncryption() && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: 2, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(FormElementTitle, { title: encryptions.title }) }) }), _jsxs(Stack, { gap: 6, children: [_jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsxs("p", { children: [encryptions.description.text, ' ', _jsx("strong", { children: encryptions.description.bold }), ' ', _jsx(C4LinkButton, { label: encryptions.link.text, onClick: () => {
+                                                                window.open(encryptions?.link.url ?? '', '_blank');
+                                                            } })] }) }) }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(RadioButtonGroupWithGrid, { children: encryptions.options.map((option) => (_jsxs(Column, { sm: 4, md: 6, lg: 4, style: {
+                                                            justifySelf: 'start',
+                                                            marginBottom: '0.5rem',
+                                                        }, children: [_jsx(RadioButton, { id: option.value, value: option.value, labelText: option.title, checked: option.value === encryption, onChange: (value) => {
+                                                                    updateEncryption(value);
+                                                                } }, option.value), _jsx("p", { style: {
+                                                                    color: 'var(--cds-text-helper)',
+                                                                    marginLeft: '30px',
+                                                                }, children: option.description })] }, option.value))) }) }) })] })] }), _jsx(Grid, { children: _jsx(Column, { span: 12, children: _jsx(C4Divider, {}) }) })] }))] }));
+    };
+    return (_jsx(Grid, { style: { maxWidth: '1584px' }, children: _jsx(Column, { span: 16, children: _jsx(Stack, { gap: 8, children: _jsxs(Grid, { fullWidth: true, narrow: true, children: [_jsxs(Column, { span: 12, children: [renderContent(), !loading && preConditions && (_jsx(SummaryMobileWrapper, { children: _jsx(Tile, { children: renderSummary() }) }))] }), !loading && preConditions && (_jsx(SummaryDesktopWrapper, { children: _jsx(Column, { sm: { span: 4, start: 13 }, children: _jsx(Tile, { style: {
+                                        minWidth: '243px',
+                                    }, children: renderSummary() }) }) }))] }) }) }) }));
+};