diff --git a/urbackupserver/www2/src/components/StatusRowMenu.tsx b/urbackupserver/www2/src/components/StatusRowMenu.tsx new file mode 100644 index 00000000..22d21e06 --- /dev/null +++ b/urbackupserver/www2/src/components/StatusRowMenu.tsx @@ -0,0 +1,45 @@ +import { + Menu, + MenuButton, + MenuItem, + MenuList, + MenuPopover, + MenuTrigger, +} from "@fluentui/react-components"; +import { MoreHorizontal24Filled } from "@fluentui/react-icons"; +import { StatusClientItem } from "../api/urbackupserver"; +import { useMutation, useQueryClient } from "react-query"; +import { urbackupServer } from "../App"; + +export function StatusRowMenu({ id }: { id: StatusClientItem["id"] }) { + const queryClient = useQueryClient(); + + const removeClientMutation = useMutation(urbackupServer.removeClient, { + onSuccess: () => { + queryClient.invalidateQueries("status"); + }, + }); + + const removeClient = () => { + removeClientMutation.mutate(id); + }; + + return ( +
+ ); +} diff --git a/urbackupserver/www2/src/pages/Status.tsx b/urbackupserver/www2/src/pages/Status.tsx index 796c2a6a..241cd412 100644 --- a/urbackupserver/www2/src/pages/Status.tsx +++ b/urbackupserver/www2/src/pages/Status.tsx @@ -21,19 +21,20 @@ import { urbackupServer } from "../App"; import { chunk } from "../utils/chunk"; import { registerIcons } from "@fluentui/react-experiments/lib/Styling"; import { - ArrowNext20Regular, - ArrowPrevious20Regular, - ChevronLeft20Regular, - ChevronRight20Regular, + ArrowNext20Filled, + ArrowPrevious20Filled, + ChevronLeft20Filled, + ChevronRight20Filled, } from "@fluentui/react-icons"; +import { StatusRowMenu } from "../components/StatusRowMenu"; // Register icons used in Pagination @fluentui/react-experiments. See https://github.com/microsoft/fluentui/wiki/Using-icons#registering-custom-icons. registerIcons({ icons: { - CaretSolidLeft: