@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/widgets/management/tabs/c4-management-api-tab.js

@@ -0,0 +1,629 @@
+import { jsxs as _jsxs, jsx as _jsx, 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 { Checkbox, Form, FormGroup, Link, Modal, Stack, StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, TextInput, } from '@carbon/react';
+import { useMemo, useState } from 'react';
+import { C4ClusterClientCredentialsModal } from '../../../components/c4-cluster-client-credentials/c4-cluster-client-credentials.js';
+import { C4ManagementApi } from '../../../components/c4-management-api/c4-management-api.js';
+// Helper functions
+function isApiClientNameValid(name) {
+    if (!name.trim()) {
+        return false;
+    }
+    return /^[A-Za-z0-9_-]+$/.test(name);
+}
+function downloadTextFile(params) {
+    const blob = new Blob([params.content], { type: params.mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = params.fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+function normalizeUrlBase(url) {
+    if (!url) {
+        return '';
+    }
+    return url.endsWith('/') ? url.slice(0, -1) : url;
+}
+function joinUrl(baseUrl, path) {
+    const base = normalizeUrlBase(baseUrl);
+    const nextPath = path.startsWith('/') ? path : `/${path}`;
+    return `${base}${nextPath}`;
+}
+function toAudienceFromApiBaseUrl(apiBaseUrl) {
+    return apiBaseUrl.replace(/^https?:\/\//, '');
+}
+function safeTranslate(t, key, defaultValue, 
+// biome-ignore lint/suspicious/noExplicitAny: legacy compatibility
+opts) {
+    if (!t)
+        return defaultValue;
+    try {
+        const translated = t(key, opts);
+        return typeof translated === 'string' ? translated : defaultValue;
+    }
+    catch {
+        return defaultValue;
+    }
+}
+function renderInlineLink0(value, renderLink) {
+    const match = value.match(/^(.*)<0>(.*)<\/0>(.*)$/);
+    if (!match)
+        return value;
+    const [, before, label, after] = match;
+    return (_jsxs("span", { children: [before, renderLink(label), after] }));
+}
+function mapPermissionsToScopeStrings(permissions, t) {
+    const clusterScopes = [];
+    const zeebeScopes = [];
+    const byomClientScopes = [];
+    const modelerScopes = [];
+    const ipWhiteListScopes = [];
+    const secretsScopes = [];
+    const memberScopes = [];
+    const hotBackupScopes = [];
+    const activityScopes = [];
+    for (const scope of permissions) {
+        switch (scope) {
+            case 'CreateCluster':
+                clusterScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetCluster':
+                clusterScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteCluster':
+                clusterScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'UpdateCluster':
+                clusterScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.update', 'Update'));
+                break;
+            case 'CreateZeebeClient':
+                zeebeScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetZeebeClient':
+                zeebeScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteZeebeClient':
+                zeebeScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'CreateByomClient':
+                byomClientScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetByomClient':
+                byomClientScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteByomClient':
+                byomClientScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'UpdateByomClient':
+                byomClientScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.rotate', 'Rotate'));
+                break;
+            case 'ActivateByom':
+                byomClientScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.activate', 'Activate'));
+                break;
+            case 'CreateModelerClient':
+                modelerScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetModelerClient':
+                modelerScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteModelerClient':
+                modelerScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'CreateIpWhitelist':
+                ipWhiteListScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetIpWhitelist':
+                ipWhiteListScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteIpWhitelist':
+                ipWhiteListScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'UpdateIpWhitelist':
+                ipWhiteListScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.update', 'Update'));
+                break;
+            case 'CreateSecret':
+                secretsScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetSecret':
+                secretsScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteSecret':
+                secretsScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'UpdateSecret':
+                secretsScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.update', 'Update'));
+                break;
+            case 'CreateMember':
+                memberScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'RemoveMember':
+                memberScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'GetMember':
+                memberScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'CreateHotBackup':
+                hotBackupScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.create', 'Create'));
+                break;
+            case 'GetHotBackup':
+                hotBackupScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            case 'DeleteHotBackup':
+                hotBackupScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.delete', 'Delete'));
+                break;
+            case 'GetActivity':
+                activityScopes.push(safeTranslate(t, 'orgmanagement:tabs.api.scopes.get', 'Get'));
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        clusterScopes: clusterScopes.join(', ') || '-',
+        zeebeScopes: zeebeScopes.join(', ') || '-',
+        byomClientScopes: byomClientScopes.join(', ') || '-',
+        modelerScopes: modelerScopes.join(', ') || '-',
+        ipWhiteListScopes: ipWhiteListScopes.join(', ') || '-',
+        secretsScopes: secretsScopes.join(', ') || '-',
+        memberScopes: memberScopes.join(', ') || '-',
+        hotBackupScopes: hotBackupScopes.join(', ') || '-',
+        activityScopes: activityScopes.join(', ') || '-',
+    };
+}
+export const C4ManagementApiTab = (props) => {
+    const { t, apiUrls, showIpWhitelistColumn, showHotBackupColumn } = props;
+    // Create modal state
+    const [apiCreateModalOpen, setApiCreateModalOpen] = useState(false);
+    const [apiCreateName, setApiCreateName] = useState('');
+    const [apiCreatePermissions, setApiCreatePermissions] = useState([]);
+    const [apiCreateSaving, setApiCreateSaving] = useState(false);
+    const [apiCreateError, setApiCreateError] = useState(undefined);
+    // Create response modal state
+    const [apiCreateResponseOpen, setApiCreateResponseOpen] = useState(false);
+    const [apiCreateResponse, setApiCreateResponse] = useState(undefined);
+    // Update modal state
+    const [apiUpdateModalOpen, setApiUpdateModalOpen] = useState(false);
+    const [apiUpdateTargetUuid, setApiUpdateTargetUuid] = useState(undefined);
+    const [apiUpdateName, setApiUpdateName] = useState('');
+    const [apiUpdateSaving, setApiUpdateSaving] = useState(false);
+    const [apiUpdateError, setApiUpdateError] = useState(undefined);
+    // Delete modal state
+    const [apiDeleteModalOpen, setApiDeleteModalOpen] = useState(false);
+    const [apiDeleteTargetUuid, setApiDeleteTargetUuid] = useState(undefined);
+    const [apiDeleteSaving, setApiDeleteSaving] = useState(false);
+    const [apiDeleteError, setApiDeleteError] = useState(undefined);
+    // Details modal state
+    const [apiDetailsModalOpen, setApiDetailsModalOpen] = useState(false);
+    const [apiDetailsTargetUuid, setApiDetailsTargetUuid] = useState(undefined);
+    // Available scopes for create modal
+    const apiClientAvailableScopes = useMemo(() => {
+        const scopes = [
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.cluster.label', 'Clusters'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.cluster.get', 'Get'),
+                        value: 'GetCluster',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.cluster.create', 'Create'),
+                        value: 'CreateCluster',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.cluster.delete', 'Delete'),
+                        value: 'DeleteCluster',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.cluster.update', 'Update'),
+                        value: 'UpdateCluster',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.zeebe.label', 'Zeebe'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.zeebe.get', 'Get'),
+                        value: 'GetZeebeClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.zeebe.create', 'Create'),
+                        value: 'CreateZeebeClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.zeebe.delete', 'Delete'),
+                        value: 'DeleteZeebeClient',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.label', 'BYOM'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.get', 'Get'),
+                        value: 'GetByomClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.create', 'Create'),
+                        value: 'CreateByomClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.delete', 'Delete'),
+                        value: 'DeleteByomClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.update', 'Rotate'),
+                        value: 'UpdateByomClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.byomClient.activate', 'Activate'),
+                        value: 'ActivateByom',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.modeler.label', 'Modeler'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.modeler.get', 'Get'),
+                        value: 'GetModelerClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.modeler.create', 'Create'),
+                        value: 'CreateModelerClient',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.modeler.delete', 'Delete'),
+                        value: 'DeleteModelerClient',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.ipWhiteList.label', 'IP Whitelist'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.ipWhiteList.get', 'Get'),
+                        value: 'GetIpWhitelist',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.ipWhiteList.create', 'Create'),
+                        value: 'CreateIpWhitelist',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.ipWhiteList.update', 'Update'),
+                        value: 'UpdateIpWhitelist',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.ipWhiteList.delete', 'Delete'),
+                        value: 'DeleteIpWhitelist',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.secrets.label', 'Secrets'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.secrets.get', 'Get'),
+                        value: 'GetSecret',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.secrets.create', 'Create'),
+                        value: 'CreateSecret',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.secrets.update', 'Update'),
+                        value: 'UpdateSecret',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.secrets.delete', 'Delete'),
+                        value: 'DeleteSecret',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.members.label', 'Members'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.members.get', 'Get'),
+                        value: 'GetMember',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.members.create', 'Create'),
+                        value: 'CreateMember',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.members.delete', 'Delete'),
+                        value: 'RemoveMember',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.hotBackups.label', 'Backups'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.hotBackups.get', 'Get'),
+                        value: 'GetHotBackup',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.hotBackups.create', 'Create'),
+                        value: 'CreateHotBackup',
+                    },
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.hotBackups.delete', 'Delete'),
+                        value: 'DeleteHotBackup',
+                    },
+                ],
+            },
+            {
+                label: safeTranslate(t, 'apiclients:create.fields.scopes.activity.label', 'Activity'),
+                scopes: [
+                    {
+                        label: safeTranslate(t, 'apiclients:create.fields.scopes.activity.get', 'Get'),
+                        value: 'GetActivity',
+                    },
+                ],
+            },
+        ];
+        return scopes;
+    }, [t]);
+    const docsUrl = apiUrls.docsLink;
+    const openDocs = () => {
+        if (!docsUrl) {
+            return;
+        }
+        window.open(docsUrl, '_blank', 'noopener,noreferrer');
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(C4ManagementApi, { clients: props.apiClientsItems, loading: props.apiClientsLoading, showIpWhitelistColumn: showIpWhitelistColumn, showHotBackupColumn: showHotBackupColumn, text: props.apiTabText, urls: apiUrls, permissions: props.apiClientPermissions, onShowDetails: (clientUuid) => {
+                    const client = props.apiClientsByUuid.get(clientUuid);
+                    if (client) {
+                        setApiDetailsTargetUuid(clientUuid);
+                        setApiDetailsModalOpen(true);
+                    }
+                }, onUpdateClient: (clientUuid) => {
+                    const client = props.apiClientsByUuid.get(clientUuid);
+                    if (client) {
+                        setApiUpdateTargetUuid(clientUuid);
+                        setApiUpdateName(client.name ?? '');
+                        setApiUpdateError(undefined);
+                        setApiUpdateModalOpen(true);
+                    }
+                }, onDeleteClient: (clientUuid) => {
+                    setApiDeleteTargetUuid(clientUuid);
+                    setApiDeleteError(undefined);
+                    setApiDeleteModalOpen(true);
+                }, onCreate: () => {
+                    setApiCreateName('');
+                    setApiCreatePermissions([]);
+                    setApiCreateError(undefined);
+                    setApiCreateModalOpen(true);
+                }, onOpenDocs: openDocs }), apiCreateModalOpen && (_jsx(Modal, { open: apiCreateModalOpen, modalHeading: safeTranslate(t, 'apiclients:create.heading.input', 'Create API client'), primaryButtonText: safeTranslate(t, 'apiclients:create.buttons.primary', 'Create'), secondaryButtonText: safeTranslate(t, 'apiclients:create.buttons.secondary', 'Cancel'), primaryButtonDisabled: apiCreateSaving, onRequestClose: () => setApiCreateModalOpen(false), onRequestSubmit: () => {
+                    void (async () => {
+                        setApiCreateSaving(true);
+                        setApiCreateError(undefined);
+                        try {
+                            const name = apiCreateName.trim();
+                            if (!isApiClientNameValid(name)) {
+                                setApiCreateError(safeTranslate(t, 'apiclients:create.error.generic', 'Please enter a valid name (letters, digits, dashes, underscores).'));
+                                return;
+                            }
+                            const response = await props.onCreateApiClient(name, apiCreatePermissions);
+                            setApiCreateResponse({
+                                clientId: response.clientId,
+                                clientSecret: response.clientSecret,
+                                clientName: name,
+                            });
+                            setApiCreateModalOpen(false);
+                            setApiCreateResponseOpen(true);
+                        }
+                        catch (error) {
+                            setApiCreateError(error instanceof Error ? error.message : 'Create failed');
+                        }
+                        finally {
+                            setApiCreateSaving(false);
+                        }
+                    })();
+                }, size: 'sm', id: 'c4-create-api-client-modal', children: _jsx(Stack, { gap: 6, children: _jsx(Form, { children: _jsxs(Stack, { gap: 6, children: [_jsx(TextInput, { id: 'c4-api-client-name-create', labelText: safeTranslate(t, 'apiclients:create.fields.name.label', 'Name'), maxLength: 50, value: apiCreateName, helperText: safeTranslate(t, 'apiclients:create.fields.name.helperText', ''), onChange: (e) => setApiCreateName(e.currentTarget.value), invalid: Boolean(apiCreateError), invalidText: apiCreateError, disabled: apiCreateSaving }), _jsxs(Stack, { gap: 2, children: [_jsx("h3", { children: safeTranslate(t, 'apiclients:create.fields.scopes.label', 'Scopes') }), _jsx("p", { children: renderInlineLink0(safeTranslate(t, 'apiclients:create.fields.scopes.helperText', 'Select scopes for this client.'), (label) => docsUrl ? (_jsx(Link, { size: 'sm', href: docsUrl, onClick: (e) => {
+                                                    e.preventDefault();
+                                                    openDocs();
+                                                }, children: label })) : (_jsx("span", { children: label }))) })] }), _jsx(Stack, { gap: 4, children: apiClientAvailableScopes.map((group, groupIndex) => {
+                                        const groupValues = group.scopes.map((s) => s.value);
+                                        const selectedCount = groupValues.filter((v) => apiCreatePermissions.includes(v)).length;
+                                        const allSelected = selectedCount === groupValues.length;
+                                        const indeterminate = selectedCount > 0 && !allSelected;
+                                        return (_jsx(FormGroup, { legendText: '', children: _jsxs(Stack, { gap: 3, children: [_jsx(Checkbox, { id: `c4-api-scope-group-${groupIndex}`, labelText: group.label, checked: allSelected, indeterminate: indeterminate, onChange: () => {
+                                                            setApiCreatePermissions((current) => {
+                                                                const currentSet = new Set(current);
+                                                                const isAllSelected = groupValues.every((v) => currentSet.has(v));
+                                                                if (isAllSelected) {
+                                                                    groupValues.forEach((v) => currentSet.delete(v));
+                                                                }
+                                                                else {
+                                                                    groupValues.forEach((v) => currentSet.add(v));
+                                                                }
+                                                                return Array.from(currentSet);
+                                                            });
+                                                        }, disabled: apiCreateSaving }), _jsx("div", { style: { marginLeft: 'var(--cds-spacing-06)' }, children: _jsx(Stack, { gap: 3, children: group.scopes.map((scope) => {
+                                                                const checked = apiCreatePermissions.includes(scope.value);
+                                                                return (_jsx(Checkbox, { id: `c4-api-scope-${scope.value}`, labelText: scope.label, checked: checked, onChange: () => {
+                                                                        setApiCreatePermissions((current) => checked
+                                                                            ? current.filter((v) => v !== scope.value)
+                                                                            : [...current, scope.value]);
+                                                                    }, disabled: apiCreateSaving }, scope.value));
+                                                            }) }) })] }) }, `${group.label}-${groupIndex}`));
+                                    }) })] }) }) }) })), apiCreateResponseOpen && apiCreateResponse ? (_jsx(C4ClusterClientCredentialsModal, { isOpen: apiCreateResponseOpen, heading: safeTranslate(t, 'apiclients:create.heading.response', 'API client credentials'), onRequestClose: () => setApiCreateResponseOpen(false), notificationText: safeTranslate(t, 'apiclients:completed.notificationText', 'Save these credentials now.'), description: _jsx("span", { children: renderInlineLink0(safeTranslate(t, 'apiclients:completed.description', 'You can use these credentials to access the Console API.'), (label) => docsUrl ? (_jsx(Link, { size: 'sm', href: docsUrl, onClick: (e) => {
+                            e.preventDefault();
+                            openDocs();
+                        }, children: label })) : (_jsx("span", { children: label }))) }), variants: (() => {
+                    const apiBaseUrl = normalizeUrlBase(apiUrls.apiBaseUrl);
+                    const loginBaseUrl = normalizeUrlBase(apiUrls.loginBaseUrl);
+                    const oauthTokenUrl = joinUrl(loginBaseUrl, '/oauth/token');
+                    const audience = toAudienceFromApiBaseUrl(apiBaseUrl);
+                    const envVars = `export CAMUNDA_CONSOLE_CLIENT_ID='${apiCreateResponse.clientId}'\nexport CAMUNDA_CONSOLE_CLIENT_SECRET='${apiCreateResponse.clientSecret}'\nexport CAMUNDA_OAUTH_URL='${oauthTokenUrl}'\nexport CAMUNDA_CONSOLE_BASE_URL='${apiBaseUrl}'\nexport CAMUNDA_CONSOLE_OAUTH_AUDIENCE='${audience}'`;
+                    const curl = `#!/bin/sh\ncurl --header "Content-Type: application/json" --request POST --data '{"grant_type":"client_credentials", "audience":"${audience}", "client_id":"${apiCreateResponse.clientId}", "client_secret":"${apiCreateResponse.clientSecret}"}' ${oauthTokenUrl}`;
+                    return [
+                        {
+                            key: 'envvars',
+                            tabTitle: safeTranslate(t, 'apiclients:completed.tabs.envvars.title', 'Environment variables'),
+                            description: safeTranslate(t, 'apiclients:completed.tabs.envvars.description', ''),
+                            type: 'codesnippet',
+                            codesnippet: envVars,
+                            download: {
+                                onClick: () => {
+                                    downloadTextFile({
+                                        fileName: `CamundaCloudMgmtAPI-Client-${apiCreateResponse.clientName}.sh`,
+                                        content: envVars,
+                                        mimeType: 'text/x-shellscript',
+                                    });
+                                },
+                                label: safeTranslate(t, 'apiclients:completed.button', 'Download'),
+                            },
+                        },
+                        {
+                            key: 'curl',
+                            tabTitle: safeTranslate(t, 'apiclients:completed.tabs.curl.title', 'cURL'),
+                            description: safeTranslate(t, 'apiclients:completed.tabs.curl.description', ''),
+                            type: 'codesnippet',
+                            codesnippet: curl,
+                            download: {
+                                onClick: () => {
+                                    downloadTextFile({
+                                        fileName: `CamundaCloudMgmtAPI-Client-${apiCreateResponse.clientName}.sh`,
+                                        content: curl,
+                                        mimeType: 'text/x-shellscript',
+                                    });
+                                },
+                                label: safeTranslate(t, 'apiclients:completed.button', 'Download'),
+                            },
+                        },
+                    ];
+                })() })) : null, apiUpdateModalOpen && apiUpdateTargetUuid ? (_jsx(Modal, { open: apiUpdateModalOpen, modalHeading: safeTranslate(t, 'apiclients:update.heading', 'Update API client'), primaryButtonText: safeTranslate(t, 'apiclients:update.buttons.primary', 'Save'), secondaryButtonText: safeTranslate(t, 'apiclients:update.buttons.secondary', 'Cancel'), primaryButtonDisabled: apiUpdateSaving, onRequestClose: () => setApiUpdateModalOpen(false), onRequestSubmit: () => {
+                    void (async () => {
+                        setApiUpdateSaving(true);
+                        setApiUpdateError(undefined);
+                        try {
+                            const name = apiUpdateName.trim();
+                            if (!isApiClientNameValid(name)) {
+                                setApiUpdateError(safeTranslate(t, 'apiclients:update.error.generic', 'Please enter a valid name.'));
+                                return;
+                            }
+                            await props.onUpdateApiClient(apiUpdateTargetUuid, name);
+                            setApiUpdateModalOpen(false);
+                        }
+                        catch (error) {
+                            setApiUpdateError(error instanceof Error ? error.message : 'Update failed');
+                        }
+                        finally {
+                            setApiUpdateSaving(false);
+                        }
+                    })();
+                }, size: 'sm', id: 'c4-update-api-client-modal', children: _jsx(Stack, { gap: 6, children: _jsx(TextInput, { id: 'c4-api-client-name-update', labelText: safeTranslate(t, 'apiclients:update.fields.name.label', 'Name'), maxLength: 50, value: apiUpdateName, helperText: safeTranslate(t, 'apiclients:update.fields.name.helperText', ''), onChange: (e) => setApiUpdateName(e.currentTarget.value), invalid: Boolean(apiUpdateError), invalidText: apiUpdateError, disabled: apiUpdateSaving }) }) })) : null, apiDeleteModalOpen && apiDeleteTargetUuid ? (_jsx(Modal, { open: apiDeleteModalOpen, modalHeading: safeTranslate(t, 'apiclients:delete.heading', 'Delete API client'), primaryButtonText: safeTranslate(t, 'apiclients:delete.buttons.primary', 'Delete'), secondaryButtonText: safeTranslate(t, 'apiclients:delete.buttons.secondary', 'Cancel'), danger: true, primaryButtonDisabled: apiDeleteSaving, onRequestClose: () => setApiDeleteModalOpen(false), onRequestSubmit: () => {
+                    void (async () => {
+                        setApiDeleteSaving(true);
+                        setApiDeleteError(undefined);
+                        try {
+                            await props.onDeleteApiClient(apiDeleteTargetUuid);
+                            setApiDeleteModalOpen(false);
+                        }
+                        catch (error) {
+                            setApiDeleteError(error instanceof Error ? error.message : 'Delete failed');
+                        }
+                        finally {
+                            setApiDeleteSaving(false);
+                        }
+                    })();
+                }, size: 'sm', id: 'c4-delete-api-client-modal', children: _jsxs(Stack, { gap: 6, children: [_jsx("p", { children: safeTranslate(t, 'apiclients:delete.description', 'This action cannot be undone.') }), apiDeleteError ? (_jsx("p", { style: { color: 'var(--cds-text-error)' }, children: apiDeleteError })) : null] }) })) : null, apiDetailsModalOpen && apiDetailsTargetUuid ? (_jsx(Modal, { passiveModal: true, open: apiDetailsModalOpen, onRequestClose: () => setApiDetailsModalOpen(false), modalLabel: safeTranslate(t, 'apiclients:details.heading', 'API client details'), modalHeading: props.apiClientsByUuid.get(apiDetailsTargetUuid)?.name ?? '', size: 'md', id: 'c4-details-api-client-modal', children: (() => {
+                    const client = props.apiClientsByUuid.get(apiDetailsTargetUuid);
+                    if (!client) {
+                        return null;
+                    }
+                    const scopes = mapPermissionsToScopeStrings(client.permissions ?? [], t);
+                    const details = [
+                        {
+                            id: 'client-name',
+                            label: safeTranslate(t, 'apiclients:details.fields.name', 'Name'),
+                            value: client.name,
+                        },
+                        {
+                            id: 'client-id',
+                            label: safeTranslate(t, 'apiclients:details.fields.clientId', 'Client ID'),
+                            value: client.clientId,
+                        },
+                        {
+                            id: 'cluster-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.clusterScopes', 'Cluster scopes'),
+                            value: scopes.clusterScopes,
+                        },
+                        {
+                            id: 'zeebe-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.zeebeScopes', 'Zeebe scopes'),
+                            value: scopes.zeebeScopes,
+                        },
+                        {
+                            id: 'byom-client-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.byomClientScopes', 'BYOM client scopes'),
+                            value: scopes.byomClientScopes,
+                        },
+                        {
+                            id: 'modeler-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.modelerScopes', 'Modeler scopes'),
+                            value: scopes.modelerScopes,
+                        },
+                        {
+                            id: 'whitelist-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.ipWhiteListScopes', 'IP whitelist scopes'),
+                            value: scopes.ipWhiteListScopes,
+                        },
+                        {
+                            id: 'secret-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.secretScopes', 'Secret scopes'),
+                            value: scopes.secretsScopes,
+                        },
+                        {
+                            id: 'hotBackups-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.hotBackupScopes', 'Hot backup scopes'),
+                            value: scopes.hotBackupScopes,
+                        },
+                        {
+                            id: 'member-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.memberScopes', 'Member scopes'),
+                            value: scopes.memberScopes,
+                        },
+                        {
+                            id: 'activity-scopes',
+                            label: safeTranslate(t, 'apiclients:details.fields.activityScopes', 'Activity scopes'),
+                            value: scopes.activityScopes,
+                        },
+                        {
+                            id: 'createdAt',
+                            label: safeTranslate(t, 'apiclients:details.fields.createdAt', 'Created at'),
+                            value: client.created
+                                ? new Date(client.created).toLocaleDateString()
+                                : '-',
+                        },
+                        {
+                            id: 'createdBy',
+                            label: safeTranslate(t, 'apiclients:details.fields.createdBy', 'Created by'),
+                            value: client.createdBy ?? '',
+                        },
+                        {
+                            id: 'last-used',
+                            label: safeTranslate(t, 'apiclients:details.fields.lastUsed', 'Last used'),
+                            value: client.lastUsed
+                                ? new Date(client.lastUsed).toLocaleDateString()
+                                : '-',
+                        },
+                    ];
+                    const filtered = details
+                        .filter((d) => showIpWhitelistColumn ? true : d.id !== 'whitelist-scopes')
+                        .filter((d) => showHotBackupColumn ? true : d.id !== 'hotBackups-scopes');
+                    return (_jsx(StructuredListWrapper, { isCondensed: true, children: _jsx(StructuredListBody, { children: filtered.map((detail) => (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { head: true, children: detail.label }), _jsx(StructuredListCell, { children: detail.value })] }, detail.id))) }) }));
+                })() })) : null] }));
+};