Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-21 22:39:41 +02:00
Code Issues Releases Activity

refactor(app): migrate configmap and secret form sections [EE-6233] (#10528)

Browse source 
* refactor(app): migrate configmap and secret form sections [EE-6233]
This commit is contained in:
Ali 2024-01-03 09:07:11 +13:00 • committed by GitHub
parent 391b85da41
commit 7a2412b1be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 631 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

94
app/react/kubernetes/applications/components/ConfigurationsFormSection/ConfigurationKey.tsx Normal file
View file

@ -0,0 +1,94 @@
import clsx from 'clsx';
import { RotateCw, List } from 'lucide-react';
import { FormikErrors } from 'formik';
import { InputGroup } from '@@/form-components/InputGroup';
import { Button } from '@@/buttons';
import { FormError } from '@@/form-components/FormError';
import { isArrayErrorType } from '@@/form-components/formikUtils';
import { ConfigurationOverrideKey } from './types';
type Props = {
value: ConfigurationOverrideKey;
onChange: (value: ConfigurationOverrideKey) => void;
configurationIndex: number;
keyIndex: number;
overrideKeysErrors?:
| string
| string[]
| FormikErrors<ConfigurationOverrideKey>[];
dataCyType: 'config' | 'secret';
};
export function ConfigurationData({
value,
onChange,
overrideKeysErrors,
configurationIndex,
keyIndex,
dataCyType,
}: Props) {
// rule out the error (from formik) being of type string
const overriddenKeyError = isArrayErrorType(overrideKeysErrors)
? overrideKeysErrors[keyIndex]
: undefined;
return (
<div className="flex items-start gap-x-2 gap-y-2 flex-wrap">
<InputGroup size="small" className="min-w-[250px]">
<InputGroup.Addon>Key</InputGroup.Addon>
<InputGroup.Input type="text" value={value.key} disabled />
</InputGroup>
<InputGroup size="small">
<InputGroup.ButtonWrapper>
<Button
color="light"
size="medium"
className={clsx('!ml-0', { active: value.type === 'ENVIRONMENT' })}
onClick={() =>
onChange({
...value,
path: '',
type: 'ENVIRONMENT',
})
}
icon={RotateCw}
data-cy={`k8sAppCreate-${dataCyType}AutoButton_${configurationIndex}_${keyIndex}`}
>
Environment
</Button>
<Button
color="light"
size="medium"
className={clsx('!ml-0 mr-1', {
active: value.type === 'FILESYSTEM',
})}
onClick={() => onChange({ ...value, path: '', type: 'FILESYSTEM' })}
icon={List}
data-cy={`k8sAppCreate-${dataCyType}OverrideButton_${configurationIndex}_${keyIndex}`}
>
File system
</Button>
</InputGroup.ButtonWrapper>
</InputGroup>
{value.type === 'FILESYSTEM' && (
<div>
<InputGroup size="small" className="min-w-[250px]">
<InputGroup.Addon required>Path on disk</InputGroup.Addon>
<InputGroup.Input
type="text"
value={value.path}
placeholder="e.g. /etc/myapp/conf.d"
onChange={(e) => onChange({ ...value, path: e.target.value })}
data-cy={`k8sAppCreate-${dataCyType}PathOnDiskInput_${configurationIndex}_${keyIndex}`}
/>
</InputGroup>
{overriddenKeyError?.path && (
<FormError>{overriddenKeyError.path}</FormError>
)}
</div>
)}
</div>
);
}