only allow delete button with term+selection

Author: shakyShane

special-pages/pages/history/app/components/Header.js

@@ -42,7 +42,21 @@ function Controls({ term, range }) {
     /**
      * Aria labels + title text is derived from the current result set.
      */
-    const ariaDisabled = useComputed(() => (results.value.items.length === 0 ? 'true' : 'false'));
+    const ariaDisabled = useComputed(() => {
+        const hasResults = results.value.items.length > 0;
+        const hasTerm = term.value !== null && term.value.trim() !== '';
+        const hasSelections = selected.value.size > 0;
+
+        // always disabled when there are no results
+        if (!hasResults) return true;
+
+        // disabled if a search term is there, but no selections where made
+        if (hasTerm && !hasSelections) return true;
+
+        // otherwise, it's not disabled
+        return false;
+    });
+
     const title = useComputed(() => (results.value.items.length === 0 ? t('delete_none') : ''));
 
     /**

special-pages/pages/history/integration-tests/history-selections.spec.js

@@ -142,11 +142,21 @@ test.describe('history selections', () => {
         await hp.clicksDeleteInHeader({ action: 'delete' });
         await hp.didDeleteSelection([0]);
     });
-    test('`deleteAll` button text changes when a query is present', async ({ page }, workerInfo) => {
+    test('`delete` in header respects selection after search', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+        await hp.types('2');
+        await hp.waitForRowCount(2);
+        await hp.selectsRowIndex(0);
+        await hp.selectsRowIndexWithShift(1);
+        await hp.clicksDeleteInHeader({ action: 'delete' });
+        await hp.didDeleteSelection([0, 1]);
+    });
+    test('`delete` in header is disabled for searches (no selections)', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
         await hp.types('example.com');
-        await hp.deleteAllButtonReflectsSelection();
+        await hp.deleteButtonIsDisabled();
     });
     test('removes all selections with ESC key', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);

special-pages/pages/history/integration-tests/history.page.js

@@ -434,6 +434,11 @@ export class HistoryTestPage {
         await page.locator('header').getByRole('button', { name: 'Delete', exact: true }).click();
     }
 
+    async deleteButtonIsDisabled() {
+        const { page } = this;
+        await expect(page.locator('header').getByRole('button', { name: 'Delete', exact: true })).toHaveAttribute('aria-disabled', 'true');
+    }
+
     async pressesEscape() {
         const { page } = this;
         const main = page.locator('body');
@@ -501,6 +506,14 @@ export class HistoryTestPage {
         expect(rowCount).toBe(count);
     }
 
+    /**
+     * @param {number} count
+     */
+    async waitForRowCount(count) {
+        const { page } = this;
+        await page.waitForFunction((count) => document.querySelector('main')?.querySelectorAll('[aria-selected]').length === count, count);
+    }
+
     sidebar() {
         return this.page.locator('aside');
     }