Bulk action button

This commit is contained in:
Matt Aitken
2025-06-26 17:56:14 +01:00
parent 1b19697ad3
commit 4ee3204456
2 changed files with 70 additions and 11 deletions
@@ -0,0 +1,48 @@
export function ListCheckedIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.85001 3.82759L4.09139 5.06897L6.16035 3"
stroke="currentColor"
strokeWidth="1.65517"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.85001 8.82759L4.09139 10.069L6.16035 8"
stroke="currentColor"
strokeWidth="1.65517"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2.85001 13.8276L4.09139 15.069L6.16035 13"
stroke="currentColor"
strokeWidth="1.65517"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 4H15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 9H15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9 14H15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
@@ -67,6 +67,8 @@ import {
import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
import { useSearchParams } from "~/hooks/useSearchParam";
import { CreateBulkActionInspector } from "../resources.orgs.$organizationId.projects.$projectId.environments.$environmentId.runs.bulkaction";
import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
import { Badge } from "~/components/primitives/Badge";
export const meta: MetaFunction = () => {
return [
@@ -196,17 +198,26 @@ export default function Page() {
rootOnlyDefault={rootOnlyDefault}
/>
<div className="flex items-center justify-end gap-x-2">
<LinkButton
variant="tertiary/small"
to={v3CreateBulkActionPath(
organization,
project,
environment,
filters
)}
>
Bulk action
</LinkButton>
{!isShowingBulkActionInspector && (
<LinkButton
variant="tertiary/small"
to={v3CreateBulkActionPath(
organization,
project,
environment,
filters
)}
LeadingIcon={ListCheckedIcon}
className={selectedItems.size > 0 ? "pr-1" : undefined}
>
<span className="flex items-center gap-x-1">
<span>Bulk action</span>
{selectedItems.size > 0 && (
<Badge variant="rounded">{selectedItems.size}</Badge>
)}
</span>
</LinkButton>
)}
<ListPagination list={list} />
</div>
</div>