feat(content-drive): browse scopes for All, site root and System Host (#37426)

core-web/apps/dotcms-ui-e2e/src/pages/contentDrive.page.ts

@@ -28,9 +28,14 @@ export class ContentDrivePage {
     readonly currentSiteHostname: Locator;
     readonly listTitles: Locator;
     readonly treeNodeLabels: Locator;
+    readonly allSiteContentRow: Locator;
+    readonly systemHostRow: Locator;
     readonly searchField: Locator;
-    readonly uploadIndicator: Locator;
-    readonly uploadProgress: Locator;
+    readonly statusToast: Locator;
+    readonly statusToastSummary: Locator;
+    readonly scopeBar: Locator;
+    readonly scopeBarSummary: Locator;
+    readonly scopeBarToggle: Locator;
     readonly toasts: Locator;
 
     constructor(private page: Page) {
@@ -45,9 +50,21 @@ export class ContentDrivePage {
         this.currentSiteHostname = this.sidebar.getByTestId('tree-node-label').first();
         this.listTitles = page.getByTestId('item-title-text');
         this.treeNodeLabels = this.sidebar.getByTestId('tree-node-label');
-        // The toolbar's in-flight indicator, and the position it shows when a run reports one.
-        this.uploadIndicator = page.getByTestId('action-execution-indicator');
-        this.uploadProgress = page.getByTestId('action-execution-progress');
+        // The two entries that are not part of the hierarchy. They carry their own testids and no
+        // `tree-node-label`, which is why `currentSiteHostname` above still finds the site row.
+        this.allSiteContentRow = this.sidebar.getByTestId('all-site-content');
+        this.systemHostRow = this.sidebar.getByTestId('system-host');
+        // A run in flight is reported by the status toast, not by the toolbar. The toolbar used to
+        // draw an indicator at the end of the filter row (`action-execution-indicator`); that markup
+        // is gone, so anything still looking for it is asserting on a testid that cannot appear.
+        this.statusToast = page.getByTestId('dot-status-toast');
+        this.statusToastSummary = page.getByTestId('status-toast-summary');
+        // The bar above the listing: what is being shown, and the one control that changes it.
+        // Its slot is always in the DOM and opens by height, so visibility is the question to ask
+        // rather than presence.
+        this.scopeBar = page.getByTestId('scope-bar');
+        this.scopeBarSummary = page.getByTestId('scope-bar-summary');
+        this.scopeBarToggle = page.getByTestId('scope-bar-toggle');
         this.toasts = page.locator('.p-toast-message');
     }
 
@@ -291,10 +308,86 @@ export class ContentDrivePage {
      * learns the rules changed; without the indicator the batch looks finished when it is not.
      */
     async expectHandedToBackground() {
-        await expect(this.toasts.filter({ hasText: 'in the background' }).first()).toBeVisible({
+        // One surface says both halves now. The status toast carries the in-flight wording, which
+        // for a backgrounded batch is the sentence that tells the author the batch is theirs to
+        // leave — so its presence is the indicator, and there is no second element to check.
+        // It used to be two: a wide advisory toast plus the toolbar's indicator, which meant a
+        // backgrounded upload announced itself twice.
+        await expect(this.statusToastSummary.filter({ hasText: 'in the background' })).toBeVisible({
             timeout: OUTCOME_TIMEOUT
         });
-        await expect(this.uploadIndicator).toBeVisible();
+    }
+
+    /** What the status toast is saying right now, if anything. */
+    async expectStatusToastContaining(text: string) {
+        await expect(this.statusToastSummary.filter({ hasText: text }).first()).toBeVisible({
+            timeout: OUTCOME_TIMEOUT
+        });
+    }
+
+    /**
+     * The status toast has stopped reporting.
+     *
+     * A run that never clears its toast leaves the portlet claiming work is in flight forever, and
+     * the toast is sticky precisely so it cannot time itself out -- which makes it the store's job
+     * to end it, and therefore worth asserting.
+     */
+    async expectStatusToastGone() {
+        await expect(this.statusToastSummary).toHaveCount(0, { timeout: OUTCOME_TIMEOUT });
+    }
+
+    /**
+     * Clicks the listing's rows-per-page control.
+     *
+     * Used to prove the status toast is not sitting on top of it. This control is at the bottom
+     * centre of the viewport, which is exactly where the toast renders, and it is always present
+     * and enabled -- unlike the next-page button, which depends on how much the folder holds.
+     *
+     * Playwright fails a click that an overlay intercepts, naming the element in the way, so the
+     * assertion is the click itself.
+     */
+    async openRowsPerPage() {
+        await this.page.getByRole('combobox', { name: 'Rows per page' }).click({ timeout: 5000 });
+    }
+
+    /** Whether the scope bar is open, which is a question about height rather than presence. */
+    async scopeBarIsOpen(): Promise<boolean> {
+        const slot = this.page.getByTestId('scope-bar-slot');
+        const box = await slot.boundingBox();
+
+        return (box?.height ?? 0) > 0;
+    }
+
+    /** Flips the System Host toggle and waits for the listing it re-requests. */
+    async toggleSystemHostInScopeBar() {
+        const listing = this.page.waitForResponse(
+            (response) => response.url().includes('/v1/drive/search') && response.ok()
+        );
+        await this.scopeBarToggle.click();
+        await listing;
+    }
+
+    /** Opens the New menu and returns the labels it offers. */
+    async openNewMenu(): Promise<string[]> {
+        await this.toolbar.getByTestId('add-new-button').click();
+        const items = this.page.getByRole('menuitem');
+        await expect(items.first()).toBeVisible({ timeout: 10000 });
+
+        return items.allInnerTexts();
+    }
+
+    /**
+     * The path the folder dialog says a new folder will land on.
+     *
+     * Read rather than asserted here because the wrong value is not a missing element: the builder
+     * used to paste a location that is not a folder path straight after the hostname, so the field
+     * was populated and confidently wrong.
+     */
+    async folderDialogPath(): Promise<string> {
+        const path = this.page.getByTestId('folder-path-preview');
+        await expect(path).toBeVisible({ timeout: 10000 });
+
+        return (await path.innerText()).trim();
     }
 
     /** A message the author can read, whatever severity it arrived with. */
@@ -374,6 +467,50 @@ export class ContentDrivePage {
     async expectNoSingleFileWarning() {
         await expect(this.page.locator('.p-toast-message-warn')).toHaveCount(0);
     }
+
+    /** Selects the All Site Content entry and waits for the listing it triggers. */
+    async selectAllSiteContent() {
+        await this.selectSidebarEntry(this.allSiteContentRow);
+    }
+
+    /** Selects the System Host entry and waits for the listing it triggers. */
+    async selectSystemHost() {
+        await this.selectSidebarEntry(this.systemHostRow);
+    }
+
+    /**
+     * Clicks a sidebar entry and waits for the listing request the click sets off.
+     *
+     * Armed before the click, not after: the response can land first, and then a wait registered
+     * afterwards never resolves.
+     */
+    private async selectSidebarEntry(row: Locator) {
+        const listing = this.page.waitForResponse(
+            (response) => response.url().includes('/v1/drive/search') && response.ok()
+        );
+        await row.click();
+        await listing;
+    }
+
+    /**
+     * Asserts which sidebar entry reads as the current one.
+     *
+     * `aria-current` rather than a class: the rows announce selection to assistive tech through
+     * it, so asserting on it checks the thing that actually has to be right.
+     */
+    async expectSelectedEntry(entry: 'all' | 'system-host' | 'neither') {
+        const row = entry === 'system-host' ? this.systemHostRow : this.allSiteContentRow;
+        await expect(row).toHaveAttribute('aria-current', entry === 'neither' ? /^$/ : 'true', {
+            timeout: entry === 'neither' ? 2000 : undefined
+        });
+    }
+
+    /** Whether an entry currently announces itself as the selected one. */
+    async isEntrySelected(entry: 'all' | 'system-host') {
+        const row = entry === 'system-host' ? this.systemHostRow : this.allSiteContentRow;
+
+        return (await row.getAttribute('aria-current')) === 'true';
+    }
 }
 
 /** A tiny in-memory PNG, so the tests carry no fixture files. */