mirror of https://github.com/portainer/portainer
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import { Plus, ChevronDown } from 'lucide-react';
|
|
import { ComponentProps, PropsWithChildren } from 'react';
|
|
import { Menu, MenuButton, MenuItem, MenuPopover } from '@reach/menu-button';
|
|
import { positionRight } from '@reach/popover';
|
|
|
|
import { Authorized } from '@/react/hooks/useUser';
|
|
|
|
import { Widget } from '@@/Widget';
|
|
import { Button, ButtonGroup } from '@@/buttons';
|
|
import { ButtonWithRef } from '@@/buttons/Button';
|
|
|
|
/**
|
|
* used for wrapping widget in the service item view
|
|
*/
|
|
export function ServiceWidget({
|
|
titleIcon,
|
|
title,
|
|
children,
|
|
onAdd,
|
|
hasChanges,
|
|
onReset,
|
|
onSubmit,
|
|
labelForAddButton,
|
|
isValid,
|
|
}: PropsWithChildren<{
|
|
titleIcon: ComponentProps<typeof Widget.Title>['icon'];
|
|
title: string;
|
|
onAdd(): void;
|
|
hasChanges: boolean;
|
|
onReset(all?: boolean): void;
|
|
onSubmit(): void;
|
|
labelForAddButton: string;
|
|
isValid?: boolean;
|
|
}>) {
|
|
return (
|
|
<Widget aria-label={title}>
|
|
<Widget.Title icon={titleIcon} title={title}>
|
|
<Authorized authorizations="DockerServiceUpdate">
|
|
<Button
|
|
color="secondary"
|
|
size="small"
|
|
onClick={onAdd}
|
|
icon={Plus}
|
|
data-cy="service-add-button"
|
|
>
|
|
{labelForAddButton}
|
|
</Button>
|
|
</Authorized>
|
|
</Widget.Title>
|
|
|
|
<Widget.Body className="!p-0">{children}</Widget.Body>
|
|
|
|
<Authorized authorizations="DockerServiceUpdate">
|
|
<Widget.Footer>
|
|
<ButtonGroup>
|
|
<Button
|
|
type="button"
|
|
onClick={onSubmit}
|
|
disabled={!hasChanges || !isValid}
|
|
data-cy="service-apply-changes-button"
|
|
>
|
|
Apply changes
|
|
</Button>
|
|
|
|
<Menu>
|
|
<MenuButton
|
|
as={ButtonWithRef}
|
|
size="small"
|
|
color="default"
|
|
icon={ChevronDown}
|
|
data-cy="service-reset-changes-button"
|
|
>
|
|
<span className="sr-only">Toggle Dropdown</span>
|
|
</MenuButton>
|
|
<MenuPopover position={positionRight}>
|
|
<div className="mt-3 bg-white th-highcontrast:bg-black th-dark:bg-black">
|
|
<MenuItem onSelect={() => onReset()}>Reset changes</MenuItem>
|
|
<MenuItem onSelect={() => onReset(true)}>
|
|
Reset all changes
|
|
</MenuItem>
|
|
</div>
|
|
</MenuPopover>
|
|
</Menu>
|
|
</ButtonGroup>
|
|
</Widget.Footer>
|
|
</Authorized>
|
|
</Widget>
|
|
);
|
|
}
|