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

refactor(azure): migrate module to react [EE-2782] (#6689)

Browse source 
* refactor(azure): migrate module to react [EE-2782]

* fix(azure): remove optional chain

* feat(azure): apply new icons in dashboard

* feat(azure): apply new icons in dashboard

* feat(ui): allow single string for breadcrumbs

* refactor(azure/containers): use Table.content

* feat(azure/containers): implement new ui [EE-3538]

* fix(azure/containers): use correct icon

* chore(tests): mock svg as component

* fix(azure): fix tests

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>
This commit is contained in:
Chaim Lev-Ari 2022-07-26 21:44:08 +02:00 • committed by GitHub
parent b059641c80
commit 82b848af0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
97 changed files with 1723 additions and 1430 deletions
Download patch file Download diff file Expand all files Collapse all files

90
app/azure/ContainerInstances/CreateContainerInstanceForm/PortsMappingField.tsx
View file

@ -1,90 +0,0 @@
import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
import { FormError } from '@@/form-components/FormError';
import { InputGroup } from '@@/form-components/InputGroup';
import { InputList } from '@@/form-components/InputList';
import {
InputListError,
ItemProps,
} from '@@/form-components/InputList/InputList';
import styles from './PortsMappingField.module.css';
type Protocol = 'TCP' | 'UDP';
export interface PortMapping {
host: string;
container: string;
protocol: Protocol;
}
interface Props {
value: PortMapping[];
onChange(value: PortMapping[]): void;
errors?: InputListError<PortMapping>[] | string;
}
export function PortsMappingField({ value, onChange, errors }: Props) {
return (
<>
<InputList<PortMapping>
label="Port mapping"
value={value}
onChange={onChange}
addLabel="map additional port"
itemBuilder={() => ({ host: '', container: '', protocol: 'TCP' })}
item={Item}
errors={errors}
/>
{typeof errors === 'string' && (
<div className="form-group col-md-12">
<FormError>{errors}</FormError>
</div>
)}
</>
);
}
function Item({ onChange, item, error }: ItemProps<PortMapping>) {
return (
<div className={styles.item}>
<div className="flex items-center gap-2">
<InputGroup size="small">
<InputGroup.Addon>host</InputGroup.Addon>
<InputGroup.Input
placeholder="e.g. 80"
value={item.host}
onChange={(e) => handleChange('host', e.target.value)}
/>
</InputGroup>
<span className="mx-3">
<i className="fa fa-long-arrow-alt-right" aria-hidden="true" />
</span>
<InputGroup size="small">
<InputGroup.Addon>container</InputGroup.Addon>
<InputGroup.Input
placeholder="e.g. 80"
value={item.container}
onChange={(e) => handleChange('container', e.target.value)}
/>
</InputGroup>
<ButtonSelector<Protocol>
onChange={(value) => handleChange('protocol', value)}
value={item.protocol}
options={[{ value: 'TCP' }, { value: 'UDP' }]}
/>
</div>
{!!error && (
<div className={styles.errors}>
<FormError>{Object.values(error)[0]}</FormError>
</div>
)}
</div>
);
function handleChange(name: string, value: string) {
onChange({ ...item, [name]: value });
}
}