({
isPending && "pointer-events-none opacity-60",
)}
>
+ {header && {header}
}
{/* Table Toolbar */}
{showToolbar && (
diff --git a/ui/hooks/use-filter-batch.test.ts b/ui/hooks/use-filter-batch.test.ts
index 675316402e..8107b7d357 100644
--- a/ui/hooks/use-filter-batch.test.ts
+++ b/ui/hooks/use-filter-batch.test.ts
@@ -61,6 +61,43 @@ describe("useFilterBatch", () => {
});
expect(result.current.hasChanges).toBe(false);
});
+
+ it("should expose filter[delta]=new under the FilterType.DELTA key so the dropdown shows it selected", async () => {
+ // Given — URL from LinkToFindings uses `filter[delta]` (singular), matching the API.
+ setSearchParams({
+ "filter[status__in]": "FAIL",
+ "filter[delta]": "new",
+ });
+
+ const { FilterType } = await import("@/types/filters");
+
+ // When
+ const { result } = renderHook(() => useFilterBatch());
+
+ // Then — the Delta dropdown reads via getFilterValue(`filter[${FilterType.DELTA}]`).
+ // For the checkbox of "new" to appear checked, that lookup must return ["new"].
+ expect(
+ result.current.getFilterValue(`filter[${FilterType.DELTA}]`),
+ ).toEqual(["new"]);
+ });
+
+ it("should include both filter[status__in] and filter[delta] from the overview deep link", () => {
+ // Given — URL produced by LinkToFindings: /findings?...&filter[status__in]=FAIL&filter[delta]=new
+ setSearchParams({
+ "filter[status__in]": "FAIL",
+ "filter[delta]": "new",
+ });
+
+ // When
+ const { result } = renderHook(() => useFilterBatch());
+
+ // Then — the singular `filter[delta]` key must be captured in pendingFilters
+ // so FindingsFilters can render a chip for it (same as filter[status__in]).
+ expect(result.current.pendingFilters).toEqual({
+ "filter[status__in]": ["FAIL"],
+ "filter[delta]": ["new"],
+ });
+ });
});
// ── Excluded keys ──────────────────────────────────────────────────────────
diff --git a/ui/lib/date-utils.test.ts b/ui/lib/date-utils.test.ts
new file mode 100644
index 0000000000..894506ffd1
--- /dev/null
+++ b/ui/lib/date-utils.test.ts
@@ -0,0 +1,35 @@
+import { format, parseISO } from "date-fns";
+import { describe, expect, it } from "vitest";
+
+import { toLocalDateString } from "./date-utils";
+
+describe("toLocalDateString", () => {
+ it("returns undefined for nullish or empty input", () => {
+ expect(toLocalDateString(undefined)).toBeUndefined();
+ expect(toLocalDateString(null)).toBeUndefined();
+ expect(toLocalDateString("")).toBeUndefined();
+ });
+
+ it("returns undefined for malformed strings", () => {
+ expect(toLocalDateString("not-a-date")).toBeUndefined();
+ });
+
+ it("returns undefined for invalid Date instances", () => {
+ expect(toLocalDateString(new Date("not-a-date"))).toBeUndefined();
+ });
+
+ it("formats an ISO string in the user's local timezone", () => {
+ // Near UTC midnight — the UTC split ("2026-04-19") differs from the local
+ // date for any tz with a positive offset. We pin parity with date-fns so
+ // the assertion holds regardless of where CI runs.
+ const iso = "2026-04-19T23:15:00Z";
+ const expected = format(parseISO(iso), "yyyy-MM-dd");
+
+ expect(toLocalDateString(iso)).toBe(expected);
+ });
+
+ it("formats a Date instance using its local calendar day", () => {
+ const date = new Date(2026, 3, 20, 10, 0, 0); // April 20, 2026 local
+ expect(toLocalDateString(date)).toBe("2026-04-20");
+ });
+});
diff --git a/ui/lib/date-utils.ts b/ui/lib/date-utils.ts
index 40717b4e14..7bce896580 100644
--- a/ui/lib/date-utils.ts
+++ b/ui/lib/date-utils.ts
@@ -1,4 +1,26 @@
-import { formatDistanceToNow } from "date-fns";
+import { format, formatDistanceToNow, parseISO } from "date-fns";
+
+/**
+ * Formats an ISO string or Date into a `yyyy-MM-dd` string in the user's local
+ * timezone. Mirrors the format used by `DateWithTime`, so UI chips/URLs built
+ * with this helper match what the user sees in tables and pickers. Returns
+ * undefined for null, empty, or malformed input so callers can guard on it
+ * (e.g. `isDisabled={!toLocalDateString(x)}`). Do NOT use this for UTC-based
+ * date bucketing (e.g. chart axes partitioned server-side by UTC day) — that
+ * use case needs a separate UTC helper.
+ */
+export function toLocalDateString(
+ value: string | Date | null | undefined,
+): string | undefined {
+ if (!value) return undefined;
+ try {
+ const date = typeof value === "string" ? parseISO(value) : value;
+ if (isNaN(date.getTime())) return undefined;
+ return format(date, "yyyy-MM-dd");
+ } catch {
+ return undefined;
+ }
+}
/**
* Formats a duration in seconds to a human-readable string like "2h 5m 30s".
diff --git a/ui/lib/findings-scan-filters.test.ts b/ui/lib/findings-scan-filters.test.ts
index fcf32b507d..a1e4d4a4e0 100644
--- a/ui/lib/findings-scan-filters.test.ts
+++ b/ui/lib/findings-scan-filters.test.ts
@@ -50,7 +50,7 @@ describe("resolveFindingScanDateFilters", () => {
{
id: "scan-1",
attributes: {
- inserted_at: "2026-04-07T10:00:00Z",
+ completed_at: "2026-04-07T10:00:00Z",
},
},
],
@@ -68,7 +68,7 @@ describe("resolveFindingScanDateFilters", () => {
const loadScan = vi.fn().mockResolvedValue({
id: "scan-2",
attributes: {
- inserted_at: "2026-04-05T08:00:00Z",
+ completed_at: "2026-04-05T08:00:00Z",
},
});
@@ -97,7 +97,7 @@ describe("resolveFindingScanDateFilters", () => {
{
id: "scan-1",
attributes: {
- inserted_at: "2026-04-07T10:00:00Z",
+ completed_at: "2026-04-07T10:00:00Z",
},
},
],
diff --git a/ui/lib/findings-scan-filters.ts b/ui/lib/findings-scan-filters.ts
index dfbb1bc44c..a5984cb141 100644
--- a/ui/lib/findings-scan-filters.ts
+++ b/ui/lib/findings-scan-filters.ts
@@ -1,7 +1,11 @@
interface ScanDateSource {
id: string;
attributes?: {
- inserted_at?: string;
+ // Findings are persisted when the scan finishes, so their `inserted_at`
+ // aligns with the scan's `completed_at` — not the scan's `inserted_at`
+ // (which is when the scan row was first created and can fall on a
+ // different UTC day for scans that cross midnight).
+ completed_at?: string;
};
}
@@ -34,10 +38,10 @@ function hasInsertedAtFilter(filters: Record): boolean {
}
export function buildFindingScanDateFilters(
- scanInsertedAtValues: string[],
+ scanCompletedAtValues: string[],
): Record {
const dates = Array.from(
- new Set(scanInsertedAtValues.map(formatScanDate).filter(Boolean)),
+ new Set(scanCompletedAtValues.map(formatScanDate).filter(Boolean)),
).sort() as string[];
if (dates.length === 0) {
@@ -82,11 +86,11 @@ export async function resolveFindingScanDateFilters({
});
}
- const scanInsertedAtValues = scanIds
- .map((scanId) => scansById.get(scanId)?.attributes?.inserted_at)
- .filter((insertedAt): insertedAt is string => Boolean(insertedAt));
+ const scanCompletedAtValues = scanIds
+ .map((scanId) => scansById.get(scanId)?.attributes?.completed_at)
+ .filter((completedAt): completedAt is string => Boolean(completedAt));
- const dateFilters = buildFindingScanDateFilters(scanInsertedAtValues);
+ const dateFilters = buildFindingScanDateFilters(scanCompletedAtValues);
if (Object.keys(dateFilters).length === 0) {
return filters;
diff --git a/ui/lib/helper-filters.test.ts b/ui/lib/helper-filters.test.ts
index fcff4a85d8..858a95e68f 100644
--- a/ui/lib/helper-filters.test.ts
+++ b/ui/lib/helper-filters.test.ts
@@ -1,16 +1,39 @@
import { describe, expect, it } from "vitest";
+import type { ScanEntity } from "@/types/scans";
+
import {
+ getScanEntityLabel,
hasDateFilter,
hasDateOrScanFilter,
hasHistoricalFindingFilter,
} from "./helper-filters";
+function makeScan(overrides: Partial = {}): ScanEntity {
+ return {
+ id: "scan-1",
+ providerInfo: {
+ provider: "aws",
+ alias: "Production",
+ uid: "123456789012",
+ },
+ attributes: {
+ name: "Nightly scan",
+ completed_at: "2026-04-07T10:00:00Z",
+ },
+ ...overrides,
+ };
+}
+
describe("hasDateOrScanFilter", () => {
it("returns true for scan filters", () => {
expect(hasDateOrScanFilter({ "filter[scan__in]": "scan-1" })).toBe(true);
});
+ it("returns true for exact scan filters", () => {
+ expect(hasDateOrScanFilter({ "filter[scan]": "scan-1" })).toBe(true);
+ });
+
it("returns true for inserted_at filters", () => {
expect(
hasDateOrScanFilter({ "filter[inserted_at__gte]": "2026-04-01" }),
@@ -30,6 +53,43 @@ describe("hasDateFilter", () => {
});
});
+describe("getScanEntityLabel", () => {
+ it("combines provider display name and scan name with a dash", () => {
+ expect(getScanEntityLabel(makeScan())).toBe("AWS - Nightly scan");
+ });
+
+ it("uses the provider type even when the account alias is present", () => {
+ // Guard against regressions where alias/uid leak back into the label.
+ expect(
+ getScanEntityLabel(
+ makeScan({
+ providerInfo: {
+ provider: "azure",
+ alias: "Production",
+ uid: "subscription-xyz",
+ },
+ }),
+ ),
+ ).toBe("Azure - Nightly scan");
+ });
+
+ it("renders the provider display name for non-AWS providers", () => {
+ expect(
+ getScanEntityLabel(makeScan({ providerInfo: { provider: "gcp" } })),
+ ).toBe("Google Cloud - Nightly scan");
+ });
+
+ it("returns only the provider name when the scan name is missing", () => {
+ expect(
+ getScanEntityLabel(
+ makeScan({
+ attributes: { name: "", completed_at: "2026-04-07T10:00:00Z" },
+ }),
+ ),
+ ).toBe("AWS");
+ });
+});
+
describe("hasHistoricalFindingFilter", () => {
it("returns true for inserted_at filters", () => {
expect(
@@ -43,6 +103,10 @@ describe("hasHistoricalFindingFilter", () => {
);
});
+ it("returns true for exact scan filters", () => {
+ expect(hasHistoricalFindingFilter({ "filter[scan]": "scan-1" })).toBe(true);
+ });
+
it("returns false when neither date nor scan filters are active", () => {
expect(
hasHistoricalFindingFilter({ "filter[provider_type__in]": "aws" }),
diff --git a/ui/lib/helper-filters.ts b/ui/lib/helper-filters.ts
index 7280deb53d..ae510bdc83 100644
--- a/ui/lib/helper-filters.ts
+++ b/ui/lib/helper-filters.ts
@@ -1,6 +1,10 @@
import { ProviderProps, ProvidersApiResponse, ScanProps } from "@/types";
import { FilterEntity } from "@/types/filters";
-import { GroupFilterEntity, ProviderConnectionStatus } from "@/types/providers";
+import {
+ getProviderDisplayName,
+ GroupFilterEntity,
+ ProviderConnectionStatus,
+} from "@/types/providers";
import { ScanEntity } from "@/types/scans";
/**
@@ -31,7 +35,10 @@ export const extractFiltersAndQuery = (
*/
export const hasDateOrScanFilter = (searchParams: Record) =>
Object.keys(searchParams).some(
- (key) => key.includes("inserted_at") || key.includes("scan__in"),
+ (key) =>
+ key.includes("inserted_at") ||
+ key.includes("scan__in") ||
+ key === "filter[scan]",
);
/**
@@ -96,6 +103,22 @@ export const isScanEntity = (entity: ScanEntity) => {
return entity && entity.providerInfo && entity.attributes;
};
+/**
+ * Canonical human label for a scan entity: "{Provider name} - {scan name}".
+ * Provider name comes from `getProviderDisplayName` (e.g. "AWS", "Google Cloud"),
+ * never the account alias/uid — those identify the account, not the provider.
+ * Shared by the findings filter chips and the multi-select trigger badge so
+ * both surfaces stay in sync. Returns the provider name alone when the scan
+ * name is empty, or the scan name alone if the provider type doesn't resolve.
+ */
+export function getScanEntityLabel(scan: ScanEntity): string {
+ const providerLabel = getProviderDisplayName(scan.providerInfo.provider);
+ const scanName = scan.attributes.name || "";
+
+ if (providerLabel && scanName) return `${providerLabel} - ${scanName}`;
+ return providerLabel || scanName;
+}
+
/**
* Creates a scan details mapping for filters from completed scans.
* Used to provide detailed information for scan filters in the UI.
diff --git a/ui/types/filters.ts b/ui/types/filters.ts
index ccaf7f2c53..9630318712 100644
--- a/ui/types/filters.ts
+++ b/ui/types/filters.ts
@@ -39,7 +39,9 @@ export enum FilterType {
RESOURCE_TYPE = "resource_type__in",
SEVERITY = "severity__in",
STATUS = "status__in",
- DELTA = "delta__in",
+ // The API only registers `delta` (exact, singular). `delta__in` is silently
+ // dropped, so the dropdown, URL, and backend must all use `delta`.
+ DELTA = "delta",
CATEGORY = "category__in",
RESOURCE_GROUPS = "resource_groups__in",
}
@@ -68,11 +70,13 @@ export type FilterParam =
| "filter[severity__in]"
| "filter[status__in]"
| "filter[delta__in]"
+ | "filter[delta]"
| "filter[region__in]"
| "filter[service__in]"
| "filter[resource_type__in]"
| "filter[category__in]"
| "filter[resource_groups__in]"
+ | "filter[scan]"
| "filter[scan__in]"
| "filter[scan_id]"
| "filter[scan_id__in]"