bulk select for service accounts

Author: kiprasmel

src/app/settings/service-accounts/ButtonGroup.tsx

@@ -1,13 +1,13 @@
 import { DeleteServiceAccountAlert } from "./DeleteAlert";
-import { useServiceAccountSelectorContext } from "./SelectorContext";
+import { useServiceAccountDataTableContext } from "./ServiceAccountDataTableContext";
 
 export function ServiceAccountsButtonGroup() {
-	const { selectedServiceAccounts } = useServiceAccountSelectorContext();
+	const { selectedRowCount } = useServiceAccountDataTableContext();
 	return (
 		<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">
 			<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${
-				selectedServiceAccounts?.length
-			} Service Account${selectedServiceAccounts?.length > 1 ? "s" : ""} selected`}</div>
+				selectedRowCount
+			} Service Account${selectedRowCount > 1 ? "s" : ""} selected`}</div>
 			<DeleteServiceAccountAlert />
 		</div>
 	);

src/app/settings/service-accounts/DeleteAlert.tsx

@@ -6,14 +6,16 @@ import {
 } from "@zenml-io/react-component-library/components/client";
 import { Button } from "@zenml-io/react-component-library/components/server";
 import { useState } from "react";
-import { useServiceAccountSelectorContext } from "./SelectorContext";
+import { useBulkDeleteServiceAccounts } from "./bulk";
+import { useServiceAccountDataTableContext } from "./ServiceAccountDataTableContext";
 
 export function DeleteServiceAccountAlert() {
 	const [isOpen, setIsOpen] = useState(false);
-	const { bulkDeleteServiceAccounts, selectedServiceAccounts } = useServiceAccountSelectorContext();
+	const { bulkDelete } = useBulkDeleteServiceAccounts();
+	const { selectedRowIDs } = useServiceAccountDataTableContext();
 
 	async function handleDelete() {
-		await bulkDeleteServiceAccounts(selectedServiceAccounts);
+		await bulkDelete(selectedRowIDs);
 		setIsOpen(false);
 	}
 
@@ -31,7 +33,7 @@ export function DeleteServiceAccountAlert() {
 				</Button>
 			</AlertDialogTrigger>
 			<DeleteAlertContent
-				title={`Delete Service Account${selectedServiceAccounts.length >= 2 ? "s" : ""}`}
+				title={`Delete Service Account${selectedRowIDs.length >= 2 ? "s" : ""}`}
 				handleDelete={handleDelete}
 			>
 				<DeleteAlertContentBody>

src/app/settings/service-accounts/Dropdown.tsx

@@ -9,7 +9,7 @@ import {
 	DropdownMenuTrigger
 } from "@zenml-io/react-component-library";
 import { ElementRef, useRef, useState } from "react";
-import { useServiceAccountSelectorContext } from "./SelectorContext";
+import { useBulkDeleteServiceAccounts } from "./bulk";
 
 export default function ServiceAccountsDropdown({
 	serviceAccountId
@@ -18,7 +18,7 @@ export default function ServiceAccountsDropdown({
 }) {
 	const [dropdownOpen, setDropdownOpen] = useState(false);
 	const [hasOpenDialog, setHasOpenDialog] = useState(false);
-	const { bulkDeleteServiceAccounts } = useServiceAccountSelectorContext();
+	const { bulkDelete } = useBulkDeleteServiceAccounts();
 
 	const dropdownTriggerRef = useRef<ElementRef<typeof AlertDialogTrigger> | null>(null);
 	const focusRef = useRef<HTMLElement | null>(null);
@@ -28,7 +28,7 @@ export default function ServiceAccountsDropdown({
 	}
 
 	async function handleDelete() {
-		await bulkDeleteServiceAccounts([serviceAccountId]);
+		await bulkDelete([serviceAccountId]);
 		handleDialogItemOpenChange(false);
 	}
 

src/app/settings/service-accounts/Selector.tsx

@@ -0,0 +1,7 @@
+import { createDataTableConsumerContext } from "@/components/table/DataTableConsumerContext";
+
+export const {
+	Context: ServiceAccountDataTableContext,
+	ContextProvider: ServiceAccountDataTableContextProvider,
+	useContext: useServiceAccountDataTableContext
+} = createDataTableConsumerContext();

src/app/settings/service-accounts/SelectorContext.tsx

@@ -10,9 +10,9 @@ import { ServiceAccountsButtonGroup } from "./ButtonGroup";
 import { getServiceAccountColumns } from "./columns";
 import ServiceAccountFallback from "./Fallback";
 import {
-	ServiceAccountsSelectorProvider,
-	useServiceAccountSelectorContext
-} from "./SelectorContext";
+	ServiceAccountDataTableContextProvider,
+	useServiceAccountDataTableContext
+} from "./ServiceAccountDataTableContext";
 import { useServiceAccountOverviewSearchParams } from "./service";
 import { AddServiceAccountDialog } from "./AddServiceAccount";
 
@@ -41,7 +41,7 @@ export default function ServiceAccountsTable() {
 		return <ServiceAccountFallback />;
 	}
 	return (
-		<ServiceAccountsSelectorProvider>
+		<ServiceAccountDataTableContextProvider>
 			<Header />
 			<div className="flex flex-col items-center gap-5">
 				<div className="w-full">
@@ -59,17 +59,17 @@ export default function ServiceAccountsTable() {
 					<Skeleton className="h-[36px] w-[300px]" />
 				)}
 			</div>
-		</ServiceAccountsSelectorProvider>
+		</ServiceAccountDataTableContextProvider>
 	);
 }
 
 function Header() {
 	const queryParams = useServiceAccountOverviewSearchParams();
-	const { selectedServiceAccounts } = useServiceAccountSelectorContext();
+	const { selectedRowCount } = useServiceAccountDataTableContext();
 
 	return (
 		<div className="flex flex-wrap items-center justify-between gap-2">
-			{selectedServiceAccounts.length ? (
+			{selectedRowCount ? (
 				<ServiceAccountsButtonGroup />
 			) : (
 				<div className="flex items-center gap-2">

src/app/settings/service-accounts/ServiceAccountDataTableContext.tsx

@@ -6,7 +6,7 @@ import {
 import { Button } from "@zenml-io/react-component-library/components/server";
 import { useState } from "react";
 import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
-import { useBulkDeleteApiKeys } from "@/data/service-accounts/bulk-delete-api-keys";
+import { useBulkDeleteApiKeys } from "./bulk";
 
 type Props = {
 	serviceAccountId: string;

src/app/settings/service-accounts/Table.tsx

@@ -1,4 +1,4 @@
-import { useApiKeyDataTableContext } from "@/app/settings/service-accounts/[service-account-id]/ApiKeyDataTableContext";
+import { useApiKeyDataTableContext } from "./ApiKeyDataTableContext";
 import { createUseBulkDelete } from "@/lib/bulk-delete";
 import { serviceAccountQueryKeys } from "@/data/service-accounts";
 import { useDeleteApiKey } from "@/data/service-accounts/delete-api-key";

src/app/settings/service-accounts/[service-account-id]/DeleteApiKeyDialog.tsx

@@ -0,0 +1,13 @@
+import { createUseBulkDelete } from "@/lib/bulk-delete";
+import { useDeleteServiceAccount } from "../../../data/service-accounts/delete-service-account";
+import { serviceAccountQueryKeys } from "../../../data/service-accounts";
+import { useServiceAccountDataTableContext } from "./ServiceAccountDataTableContext";
+
+export const useBulkDeleteServiceAccounts = createUseBulkDelete({
+	useMutation: useDeleteServiceAccount,
+	useQueryKeys: () => ({
+		all: serviceAccountQueryKeys.serviceAccountsKey
+	}),
+	getParams: (serviceAccountId: string) => serviceAccountId,
+	useDataTableContext: useServiceAccountDataTableContext
+});

src/app/settings/service-accounts/[service-account-id]/bulk.ts

@@ -5,19 +5,32 @@ import { ColumnDef } from "@tanstack/react-table";
 import { Link } from "react-router-dom";
 import ToggleActiveServiceAccount from "./ToggleServiceAccount";
 import ServiceAccountsDropdown from "./Dropdown";
-import { ServiceAccountsSelector } from "./Selector";
+import { Checkbox } from "@zenml-io/react-component-library";
 
 export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
 	return [
 		{
 			id: "check",
-			header: "",
+			header: ({ table }) => (
+				<Checkbox
+					id="check-all"
+					checked={table.getIsAllRowsSelected()}
+					onCheckedChange={(state) =>
+						table.toggleAllRowsSelected(state === "indeterminate" ? true : state)
+					}
+				/>
+			),
 			meta: {
 				width: "1%"
 			},
-			accessorFn: (row) => row.id,
 			cell: ({ row }) => {
-				return <ServiceAccountsSelector id={row.original.id} />;
+				return (
+					<Checkbox
+						id={`check-${row.id}`}
+						checked={row.getIsSelected()}
+						onCheckedChange={row.getToggleSelectedHandler()}
+					/>
+				);
 			}
 		},
 		{