mirror of https://github.com/portainer/portainer
refactor(app): migrate env var form section [EE-6232] (#10499)
* refactor(app): migrate env var form section [EE-6232] * allow undoing delete in inputlistpull/10528/head
parent
6228314e3c
commit
488393007f
@ -0,0 +1,59 @@
|
||||
import { FormError } from '../FormError';
|
||||
import { InputLabeled } from '../Input/InputLabeled';
|
||||
import { ItemProps } from '../InputList';
|
||||
|
||||
import { EnvVar } from './types';
|
||||
|
||||
export function EnvironmentVariableItem({
|
||||
item,
|
||||
onChange,
|
||||
disabled,
|
||||
error,
|
||||
readOnly,
|
||||
index,
|
||||
}: ItemProps<EnvVar>) {
|
||||
return (
|
||||
<div className="relative flex w-full flex-col">
|
||||
<div className="flex w-full items-start gap-2">
|
||||
<div className="w-1/2">
|
||||
<InputLabeled
|
||||
className="w-full"
|
||||
label="name"
|
||||
required
|
||||
value={item.name}
|
||||
onChange={(e) => handleChange({ name: e.target.value })}
|
||||
disabled={disabled}
|
||||
needsDeletion={item.needsDeletion}
|
||||
readOnly={readOnly}
|
||||
placeholder="e.g. FOO"
|
||||
size="small"
|
||||
id={`env-name${index}`}
|
||||
/>
|
||||
{error && (
|
||||
<div>
|
||||
<FormError className="mt-1 !mb-0">
|
||||
{Object.values(error)[0]}
|
||||
</FormError>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<InputLabeled
|
||||
className="w-1/2"
|
||||
label="value"
|
||||
value={item.value}
|
||||
onChange={(e) => handleChange({ value: e.target.value })}
|
||||
disabled={disabled}
|
||||
needsDeletion={item.needsDeletion}
|
||||
readOnly={readOnly}
|
||||
placeholder="e.g. bar"
|
||||
size="small"
|
||||
id={`env-value${index}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function handleChange(partial: Partial<EnvVar>) {
|
||||
onChange({ ...item, ...partial });
|
||||
}
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
export interface EnvVar {
|
||||
name: string;
|
||||
value?: string;
|
||||
needsDeletion?: boolean;
|
||||
}
|
||||
|
||||
export type Value = Array<EnvVar>;
|
||||
|
@ -0,0 +1,26 @@
|
||||
import { SchemaOf, array, bool, object, string } from 'yup';
|
||||
|
||||
import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
|
||||
import { buildUniquenessTest } from '@@/form-components/validate-unique';
|
||||
|
||||
export function kubeEnvVarValidationSchema(): SchemaOf<EnvVar[]> {
|
||||
return array(
|
||||
object({
|
||||
name: string()
|
||||
.required('Name is required')
|
||||
.matches(
|
||||
/^[a-zA-Z][a-zA-Z0-9_.-]*$/,
|
||||
`This field must consist of alphabetic characters, digits, '_', '-', or '.', and must not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.`
|
||||
),
|
||||
value: string().default(''),
|
||||
needsDeletion: bool().default(false),
|
||||
})
|
||||
).test(
|
||||
'unique',
|
||||
'This environment variable is already defined.',
|
||||
buildUniquenessTest(
|
||||
() => 'This environment variable is already defined.',
|
||||
'name'
|
||||
)
|
||||
);
|
||||
}
|
Loading…
Reference in new issue