mirror of
https://github.com/portainer/portainer.git
synced 2025-07-24 15:59:41 +02:00
fix(service): service related UI issues [EE-4062] (#7943)
This commit is contained in:
parent
93866644c6
commit
a2f734051c
18 changed files with 136 additions and 98 deletions
|
@ -13,8 +13,9 @@ export interface Props {
|
|||
checked: boolean;
|
||||
id: string;
|
||||
name: string;
|
||||
onChange(checked: boolean): void;
|
||||
onChange(checked: boolean, index?: number): void;
|
||||
|
||||
index?: number;
|
||||
className?: string;
|
||||
dataCy?: string;
|
||||
disabled?: boolean;
|
||||
|
@ -28,6 +29,7 @@ export function Switch({
|
|||
disabled,
|
||||
dataCy,
|
||||
onChange,
|
||||
index,
|
||||
featureId,
|
||||
className,
|
||||
}: Props) {
|
||||
|
@ -47,7 +49,7 @@ export function Switch({
|
|||
id={id}
|
||||
checked={checked}
|
||||
disabled={disabled || limitedToBE}
|
||||
onChange={({ target: { checked } }) => onChange(checked)}
|
||||
onChange={({ target: { checked } }) => onChange(checked, index)}
|
||||
/>
|
||||
<span className="slider round before:content-['']" data-cy={dataCy} />
|
||||
</label>
|
||||
|
|
|
@ -7,6 +7,7 @@ function renderDefault({
|
|||
checked = false,
|
||||
label = 'label',
|
||||
onChange = jest.fn(),
|
||||
index,
|
||||
}: Partial<Props> = {}) {
|
||||
return render(
|
||||
<SwitchField
|
||||
|
@ -14,6 +15,7 @@ function renderDefault({
|
|||
name={name}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
index={index}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -33,5 +35,17 @@ test('clicking should emit on-change with the opposite value', async () => {
|
|||
const switchElem = await findByRole('checkbox');
|
||||
fireEvent.click(switchElem);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(!checked);
|
||||
expect(onChange).toHaveBeenCalledWith(!checked, undefined);
|
||||
});
|
||||
|
||||
test('clicking should emit on-change with the opposite value and index', async () => {
|
||||
const onChange = jest.fn();
|
||||
const checked = true;
|
||||
const index = 3;
|
||||
const { findByRole } = renderDefault({ onChange, checked, index });
|
||||
|
||||
const switchElem = await findByRole('checkbox');
|
||||
fireEvent.click(switchElem);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(!checked, index);
|
||||
});
|
||||
|
|
|
@ -11,8 +11,9 @@ import { Switch } from './Switch';
|
|||
export interface Props {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange(value: boolean): void;
|
||||
onChange(value: boolean, index?: number): void;
|
||||
|
||||
index?: number;
|
||||
name?: string;
|
||||
tooltip?: ComponentProps<typeof Tooltip>['message'];
|
||||
setTooltipHtmlMessage?: ComponentProps<typeof Tooltip>['setHtmlMessage'];
|
||||
|
@ -28,6 +29,7 @@ export function SwitchField({
|
|||
tooltip,
|
||||
checked,
|
||||
label,
|
||||
index,
|
||||
name,
|
||||
labelClass,
|
||||
fieldClass,
|
||||
|
@ -57,6 +59,7 @@ export function SwitchField({
|
|||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={onChange}
|
||||
index={index}
|
||||
featureId={featureId}
|
||||
dataCy={dataCy}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue