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
Ali
11 months ago
committed by
GitHub
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 {
|
export interface EnvVar {
|
||||||
name: string;
|
name: string;
|
||||||
value?: string;
|
value?: string;
|
||||||
|
needsDeletion?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Value = Array<EnvVar>;
|
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