portainer/app/react/docker/containers/CreateView/ResourcesTab/SecurityOptField.tsx

59 lines
1.5 KiB
TypeScript

import { FormikErrors } from 'formik';
import { array, SchemaOf, string } from 'yup';
import { FormError } from '@@/form-components/FormError';
import { InputList, ItemProps } from '@@/form-components/InputList';
import { InputLabeled } from '@@/form-components/Input/InputLabeled';
export type Values = Array<string>;
export function SecurityOptField({
values,
onChange,
errors,
}: {
values: Values;
onChange: (value: Values) => void;
errors?: FormikErrors<string>[];
}) {
return (
<InputList
value={values}
onChange={onChange}
item={Item}
addLabel="Add security-opt"
label="SecurityOpt"
errors={errors}
itemBuilder={() => ''}
data-cy="docker-container-securityopts"
/>
);
}
function Item({ item, onChange, error, index }: ItemProps<string>) {
return (
<div className="w-full">
<div className="flex w-full gap-4">
<InputLabeled
value={item}
onChange={(e) => onChange(e.target.value)}
label="Security Option"
placeholder="e.g. seccomp=unconfined"
className="w-full"
size="small"
data-cy={`docker-container-securityopt-name_${index}`}
/>
</div>
{error && (
<FormError>
{typeof error === 'string' ? error : Object.values(error)[0]}
</FormError>
)}
</div>
);
}
export function securityOptValidation(): SchemaOf<Values> {
return array(string().required('Security option is required'));
}