add deleteTerm

Author: shakyShane

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

@@ -42,21 +42,7 @@ function Controls({ term, range }) {
     /**
      * Aria labels + title text is derived from the current result set.
      */
-    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 ariaDisabled = useComputed(() => results.value.items.length === 0);
     const title = useComputed(() => (results.value.items.length === 0 ? t('delete_none') : ''));
 
     /**
@@ -65,10 +51,9 @@ function Controls({ term, range }) {
      * and there are no selections
      */
     const buttonTxt = useComputed(() => {
-        const hasTerm = term.value !== null && term.value.trim() !== '';
         const hasSelections = selected.value.size > 0;
-        const hasRange = range.value !== null;
-        return hasTerm || hasSelections || hasRange ? t('delete_some') : t('delete_all');
+        if (hasSelections) return t('delete_some');
+        return t('delete_all');
     });
 
     /**
@@ -79,12 +64,16 @@ function Controls({ term, range }) {
      * - or fallback to deleting all
      */
     function onClick() {
+        if (ariaDisabled.value === true) return;
         if (selected.value.size > 0) {
             return dispatch({ kind: 'delete-entries-by-index', value: [...selected.value] });
         }
         if (range.value !== null) {
             return dispatch({ kind: 'delete-range', value: range.value });
         }
+        if (term.value !== null && term.value !== '') {
+            return dispatch({ kind: 'delete-term', term: term.value });
+        }
         dispatch({ kind: 'delete-all' });
     }
 

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

@@ -35,7 +35,7 @@ export function SearchForm({ term, domain }) {
      * @param {SubmitEvent} submitEvent
      */
     function submit(submitEvent) {
-        console.log('todo: handle form submit?', submitEvent);
+        console.log('todo: handle a new form submit?', submitEvent);
     }
 
     return (

special-pages/pages/history/app/global-state/HistoryServiceProvider.js

@@ -18,6 +18,7 @@ const HistoryServiceContext = createContext({
  * @typedef {{kind: 'search-commit', params: URLSearchParams}
  * | {kind: 'delete-range'; value: string }
  * | {kind: 'delete-all'; }
+ * | {kind: 'delete-term'; term: string }
  * | {kind: 'delete-entries-by-index'; value: number[] }
  * | {kind: 'open-url'; url: string, target: 'new-tab' | 'new-window' | 'same-tab' }
  * | {kind: 'show-entries-menu'; ids: string[]; indexes: number[] }
@@ -71,6 +72,11 @@ export function HistoryServiceProvider({ service, children }) {
                 service.deleteRange('all').catch(console.error);
                 break;
             }
+            case 'delete-term': {
+                // eslint-disable-next-line promise/prefer-await-to-then
+                service.deleteTerm(action.term).catch(console.error);
+                break;
+            }
             case 'open-url': {
                 service.openUrl(action.url, action.target);
                 break;

special-pages/pages/history/app/history.md

@@ -122,6 +122,27 @@ Response, note: always return the same query I sent:
 }
 ```
 
+### `deleteTerm`
+- Sent to delete a search term
+- Parameters: {@link "History Messages".DeleteTermParams}
+- If the user confirms, respond with `{ action: 'delete' }`
+- otherwise `{ action: 'none' }`
+  - Response: {@link "History Messages".DeleteTermResponse}
+
+**params**
+```json
+{
+  "term": "youtube" 
+}
+```
+
+**response**
+```json
+{
+  "action": "delete" 
+}
+```
+
 ### `title_menu`
 {@link "History Messages".TitleMenuRequest}
 
@@ -191,6 +212,7 @@ Sent when a right-click is issued on a section title (or when the three-dots but
 
 ### `entries_delete`
 {@link "History Messages".EntriesDeleteRequest}
+{@link "History Messages".EntriesDeleteRequest}
 
 Sent when the delete key is pressed on an item, or a group of items
 

special-pages/pages/history/app/history.service.js

@@ -262,12 +262,32 @@ export class HistoryService {
     }
 
     /**
-     * @param {string[]} ids
-     * @param {number[]} indexes
+     * @param {string} term
      */
-    _postDomainSearch(ids, indexes) {
-        const target = this.query.data?.results[indexes[0]];
-        console.log(target);
+    deleteTerm(term) {
+        console.log('📤 [deleteTerm]: ', JSON.stringify({ term }));
+        return (
+            this.history.messaging
+                .request('deleteTerm', { term })
+                // eslint-disable-next-line promise/prefer-await-to-then
+                .then((resp) => {
+                    if (resp.action === 'delete') {
+                        this.query.update((_old) => {
+                            /** @type {QueryData} */
+                            const query = {
+                                lastQueryParams: null,
+                                info: {
+                                    query: { term: '' },
+                                    finished: true,
+                                },
+                                results: [],
+                            };
+                            return query;
+                        });
+                    }
+                    return resp;
+                })
+        );
     }
 }
 

special-pages/pages/history/app/mocks/mock-transport.js

@@ -126,6 +126,18 @@ export function mockTransport() {
                     }
                     return Promise.resolve({ action: 'none' });
                 }
+                case 'deleteTerm': {
+                    console.log('📤 [deleteTerm]: ', JSON.stringify(msg.params));
+                    // prettier-ignore
+                    const lines = [
+                        `deleteTerm: ${JSON.stringify(msg.params)}`,
+                        `To simulate deleting this term, press confirm`
+                    ].join('\n',);
+                    if (confirm(lines)) {
+                        return Promise.resolve({ action: 'delete' });
+                    }
+                    return Promise.resolve({ action: 'none' });
+                }
                 case 'initialSetup': {
                     /** @type {import('../../types/history.ts').InitialSetupResponse} */
                     const initial = {

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

@@ -129,11 +129,11 @@ test.describe('history selections', () => {
         await hp.openPage({});
         await hp.cannotDeleteAllWhenEmpty();
     });
-    test('`deleteAll` button text changes when selections are made', async ({ page }, workerInfo) => {
+    test('`deleteAll` button text changes to `delete` when selections are made', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
         await hp.selectsRowIndex(0);
-        await hp.deleteAllButtonReflectsSelection();
+        await hp.deletesSelection();
     });
     test('`delete` in header respects selection', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
@@ -152,11 +152,11 @@ test.describe('history selections', () => {
         await hp.clicksDeleteInHeader({ action: 'delete' });
         await hp.didDeleteSelection([0, 1]);
     });
-    test('`delete` in header is disabled for searches (no selections)', async ({ page }, workerInfo) => {
+    test('`deleteAll` during search (no selections)', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
         await hp.types('example.com');
-        await hp.deleteButtonIsDisabled();
+        await hp.deletesAllForTerm('example.com');
     });
     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

@@ -276,6 +276,15 @@ export class HistoryTestPage {
         await page.locator('header').getByRole('button', { name: 'Delete', exact: true }).click();
     }
 
+    /**
+     * @param {import('../types/history.ts').DeleteRangeResponse} resp
+     */
+    async clicksDeleteAllInHeader(resp) {
+        const { page } = this;
+        this._withDialogHandling(resp);
+        await page.locator('header').getByRole('button', { name: 'Delete All', exact: true }).click();
+    }
+
     /**
      * @param {import('../types/history.ts').DeleteRangeResponse} resp
      */
@@ -429,14 +438,20 @@ export class HistoryTestPage {
         await expect(page.getByRole('button', { name: 'Delete All', exact: true })).toHaveAttribute('aria-disabled', 'true');
     }
 
-    async deleteAllButtonReflectsSelection() {
+    async deletesSelection() {
         const { page } = this;
         await page.locator('header').getByRole('button', { name: 'Delete', exact: true }).click();
     }
 
-    async deleteButtonIsDisabled() {
+    async deletesAll() {
         const { page } = this;
-        await expect(page.locator('header').getByRole('button', { name: 'Delete', exact: true })).toHaveAttribute('aria-disabled', 'true');
+        await page.locator('header').getByRole('button', { name: 'Delete All', exact: true }).click();
+    }
+
+    async deletesAllForTerm(term) {
+        await this.deletesAll();
+        const calls = await this.mocks.waitForCallCount({ method: 'deleteTerm', count: 1 });
+        expect(calls[0].payload.params).toStrictEqual({ term });
     }
 
     async pressesEscape() {

special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-dark-integration-darwin.png

@@ -120,7 +120,7 @@ test.describe('history', () => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
         await hp.selectsToday();
-        await hp.clicksDeleteInHeader({ action: 'delete' });
+        await hp.clicksDeleteAllInHeader({ action: 'delete' });
         await hp.didDeleteRange('today');
     });
     test('3 dots menu on Section title', async ({ page }, workerInfo) => {

special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-light-integration-darwin.png

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "required": ["term"],
+  "title": "Delete Term Params",
+  "properties": {
+    "term": {
+      "type": "string"
+    }
+  }
+}
+

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

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "required": ["action"],
+  "properties": {
+    "action": {
+      "$ref": "types/action-response.json"
+    }
+  }
+}
+

special-pages/pages/history/messages/deleteTerm.request.json

@@ -49,6 +49,7 @@ export interface HistoryMessages {
   notifications: OpenNotification | ReportInitExceptionNotification | ReportPageExceptionNotification;
   requests:
     | DeleteRangeRequest
+    | DeleteTermRequest
     | EntriesDeleteRequest
     | EntriesMenuRequest
     | GetRangesRequest
@@ -104,6 +105,20 @@ export interface DeleteRangeParams {
 export interface DeleteRangeResponse {
   action: ActionResponse;
 }
+/**
+ * Generated from @see "../messages/deleteTerm.request.json"
+ */
+export interface DeleteTermRequest {
+  method: "deleteTerm";
+  params: DeleteTermParams;
+  result: DeleteTermResponse;
+}
+export interface DeleteTermParams {
+  term: string;
+}
+export interface DeleteTermResponse {
+  action: ActionResponse;
+}
 /**
  * Generated from @see "../messages/entries_delete.request.json"
  */