diff --git a/ui/changelog.d/scans-filter-actions.fixed.md b/ui/changelog.d/scans-filter-actions.fixed.md new file mode 100644 index 0000000000..3220d59a8e --- /dev/null +++ b/ui/changelog.d/scans-filter-actions.fixed.md @@ -0,0 +1 @@ +Scans page filter widths and action button styling, with Launch Scan and Import Findings grouped beside the tabs and sized consistently with Configure Mutelist diff --git a/ui/components/scans/import-findings-modal.tsx b/ui/components/scans/import-findings-modal.tsx index c367829ea2..2016a50641 100644 --- a/ui/components/scans/import-findings-modal.tsx +++ b/ui/components/scans/import-findings-modal.tsx @@ -223,10 +223,9 @@ export function ImportFindingsModal() { <> diff --git a/ui/components/scans/scans-filter-bar.tsx b/ui/components/scans/scans-filter-bar.tsx index de4539651f..f46a29c07a 100644 --- a/ui/components/scans/scans-filter-bar.tsx +++ b/ui/components/scans/scans-filter-bar.tsx @@ -31,7 +31,7 @@ interface ScansFilterBarProps { onScanStatusChange: (value: string) => void; } -const filterItemClass = "w-full md:w-[calc(50%-0.375rem)] xl:w-60"; +const filterItemClass = "w-full sm:max-w-[240px] sm:min-w-[180px] sm:flex-1"; export function ScansFilterBar({ providers, @@ -67,33 +67,37 @@ export function ScansFilterBar({ {showScheduleTypeFilter && ( - +
+ +
)} {showStatusFilter && ( - +
+ +
)} ); diff --git a/ui/components/scans/scans-page-shell.test.tsx b/ui/components/scans/scans-page-shell.test.tsx index 8d67c0d9da..6809cf087b 100644 --- a/ui/components/scans/scans-page-shell.test.tsx +++ b/ui/components/scans/scans-page-shell.test.tsx @@ -336,26 +336,35 @@ describe("ScansPageShell", () => { expect(screen.queryByRole("alert")).not.toBeInTheDocument(); }); - it("keeps launch scan with filters and mutelist with tabs", () => { - vi.stubEnv("UI_CLOUD_ENABLED", "false"); + it("keeps launch scan, import findings, and mutelist with tabs", () => { + // Given + vi.stubEnv("UI_CLOUD_ENABLED", "true"); + // When render( - +
Scans table
, ); - expect( - screen.getByRole("group", { name: /scan filters and actions/i }), - ).toContainElement(screen.getByRole("button", { name: /launch scan/i })); - expect( - screen.getByRole("group", { name: /scan filters and actions/i }), - ).not.toContainElement( - screen.getByRole("link", { name: /configure mutelist/i }), + // Then + const tabs = screen.getByRole("group", { name: /scan tabs/i }); + expect(tabs).toContainElement( + screen.getByRole("button", { name: /launch scan/i }), ); - expect(screen.getByRole("group", { name: /scan tabs/i })).toContainElement( + expect(tabs).toContainElement( + screen.getByRole("button", { name: /import findings/i }), + ); + expect(tabs).toContainElement( screen.getByRole("link", { name: /configure mutelist/i }), ); + expect( + screen.getByRole("group", { name: /scan filters/i }), + ).toContainElement(screen.getByText("Shared scan filters")); }); it("shows the active scans count in the in progress tab", () => { diff --git a/ui/components/scans/scans-page-shell.tsx b/ui/components/scans/scans-page-shell.tsx index 1575c026fc..fc597c95bf 100644 --- a/ui/components/scans/scans-page-shell.tsx +++ b/ui/components/scans/scans-page-shell.tsx @@ -135,8 +135,8 @@ export function ScansPageShell({ )}
- - - {isCloudEnvironment && hasManageIngestionsPermission && ( - - )}
{isCloudEnvironment && } @@ -174,10 +160,10 @@ export function ScansPageShell({
{Object.values(SCAN_JOBS_TAB).map((tab) => ( @@ -186,7 +172,19 @@ export function ScansPageShell({ ))} -
+
+ + {isCloudEnvironment && hasManageIngestionsPermission && ( + + )}
diff --git a/ui/tests/scans/evidence/scans-controls-desktop.png b/ui/tests/scans/evidence/scans-controls-desktop.png new file mode 100644 index 0000000000..d7c7733db3 Binary files /dev/null and b/ui/tests/scans/evidence/scans-controls-desktop.png differ diff --git a/ui/tests/scans/evidence/scans-controls-mobile.png b/ui/tests/scans/evidence/scans-controls-mobile.png new file mode 100644 index 0000000000..a530865052 Binary files /dev/null and b/ui/tests/scans/evidence/scans-controls-mobile.png differ diff --git a/ui/tests/scans/evidence/scans-controls-tablet.png b/ui/tests/scans/evidence/scans-controls-tablet.png new file mode 100644 index 0000000000..36b6013b8e Binary files /dev/null and b/ui/tests/scans/evidence/scans-controls-tablet.png differ diff --git a/ui/tests/scans/scans-page.ts b/ui/tests/scans/scans-page.ts index 667aaaed85..e75c2d3508 100644 --- a/ui/tests/scans/scans-page.ts +++ b/ui/tests/scans/scans-page.ts @@ -27,10 +27,10 @@ export class ScansPage extends BasePage { // The sidebar exposes its own icon-button labeled "Launch Scan" // (aria-label, wrapped in a Tooltip), so scoping by accessible name // alone hits a strict-mode duplicate. Scope to the page-shell's - // filters-and-actions group, which only contains the visible-text + // tabs-and-actions group, which only contains the visible-text // Launch Scan button. this.launchScanButton = page - .getByRole("group", { name: /scan filters and actions/i }) + .getByRole("group", { name: /scan tabs/i }) .getByRole("button", { name: /^Launch Scan$/i }); this.launchScanDialog = page.getByRole("dialog"); // The modal renders the providers picker as the shared MultiSelect-based diff --git a/ui/tests/scans/scans.md b/ui/tests/scans/scans.md index 5baef3a42d..c2dae769ce 100644 --- a/ui/tests/scans/scans.md +++ b/ui/tests/scans/scans.md @@ -27,7 +27,7 @@ ### Flow Steps 1. Navigate to Scans page -2. Click "Launch Scan" to open the launch scan modal +2. Click "Launch Scan" beside the scan tabs to open the launch scan modal 3. Open the Cloud Account selector and choose the entry whose text contains E2E_AWS_PROVIDER_ACCOUNT_ID 4. Optionally fill Scan Note 5. Click "Launch Scan" in the modal @@ -46,6 +46,7 @@ - Scans page loads correctly - Launch Scan modal opens correctly +- The page-level "Launch Scan" button is located in the "Scan tabs" group, distinct from the sidebar action - Cloud Account select is available and lists the configured provider UID - "Launch Scan" button is rendered and enabled when form is valid - Success toast message: "The scan was launched successfully."