@datalayer/core/lib/views/secrets/SecretNew.js

[](https://datalayer.io)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useEffect, useState } from 'react';
import { PageHeader, FormControl, Button, TextInput, Textarea, Select, } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCache, useNavigate, useToast } from '../../hooks';
import { useRunStore } from '../../state';
export const SecretNew = () => {
    const runStore = useRunStore();
    const navigate = useNavigate();
    const { useCreateSecret } = useCache();
    const createSecretMutation = useCreateSecret();
    const { enqueueToast } = useToast();
    const [formValues, setFormValues] = useState({
        variant: 'generic',
        value: undefined,
        name: undefined,
        description: undefined,
    });
    const [validationResult, setValidationResult] = useState({
        variant: undefined,
        value: undefined,
        name: undefined,
        description: undefined,
    });
    const secretVariantChanged = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            variant: event.target.value,
        }));
    };
    const secretValueChanged = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            value: event.target.value,
        }));
    };
    const secretNameChanged = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            name: event.target.value,
        }));
    };
    const secretDescriptionChanged = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            description: event.target.value,
        }));
    };
    useEffect(() => {
        setValidationResult({
            ...validationResult,
            name: formValues.name === undefined
                ? undefined
                : formValues.name.length > 2
                    ? true
                    : false,
            description: formValues.description === undefined
                ? undefined
                : formValues.description.length > 2
                    ? true
                    : false,
            value: formValues.value === undefined
                ? undefined
                : formValues.value.length > 0 && formValues.value.length < 4096
                    ? true
                    : false,
        });
    }, [formValues]);
    const submitCreate = () => {
        runStore.layout().showBackdrop('Creating an secret...');
        createSecretMutation.mutate({
            variant: formValues.variant,
            name: formValues.name,
            description: formValues.description,
            value: btoa(formValues.value),
        }, {
            onSuccess: (resp) => {
                if (resp.success) {
                    enqueueToast(resp.message, { variant: 'success' });
                    navigate(`/settings/iam/secrets`);
                }
            },
            onSettled: () => {
                runStore.layout().hideBackdrop();
            },
        });
    };
    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
                                    !validationResult.name ||
                                    !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
                                    e.preventDefault();
                                    submitCreate();
                                }, children: "Create a secret" })] }) }) })] }));
};
export default SecretNew;