history: adding multi-select

Author: shakyShane

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

@@ -8,7 +8,7 @@ import { Empty } from './Empty.js';
 /**
  * @param {object} props
  * @param {import("@preact/signals").Signal<import("../global-state/GlobalStateProvider.js").Results>} props.results
- * @param {import("@preact/signals").Signal<string[]>} props.selected
+ * @param {import("@preact/signals").Signal<number[]>} props.selected
  */
 export function Results({ results, selected }) {
     if (results.value.items.length === 0) {
@@ -23,7 +23,7 @@ export function Results({ results, selected }) {
                 heights={results.value.heights}
                 overscan={OVERSCAN_AMOUNT}
                 renderItem={({ item, cssClassName, style, index }) => {
-                    const isSelected = selected.value.includes(item.id);
+                    const isSelected = selected.value.includes(index);
                     return (
                         <li key={item.id} data-id={item.id} class={cssClassName} style={style}>
                             <Item

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

@@ -1,10 +1,25 @@
 import { h, createContext } from 'preact';
 import { useContext } from 'preact/hooks';
 import { signal, useSignal, useSignalEffect } from '@preact/signals';
+import { useQueryContext } from './QueryProvider.js';
+import { eventToIntention } from '../../../../shared/handlers.js';
+import { usePlatformName } from '../types.js';
+import { useGlobalState } from './GlobalStateProvider.js';
 
-const SelectionContext = createContext({
-    selected: signal(/** @type {string[]} */ ([])),
-});
+/**
+ * @typedef SelectionState
+ * @property {import("@preact/signals").Signal<number[]>} selected
+ */
+
+/**
+ * @typedef {(s: (d: number[]) => number[]) => void} UpdateSelected
+ */
+
+const SelectionContext = createContext(
+    /** @type {SelectionState} */ ({
+        selected: signal(/** @type {number[]} */ ([])),
+    }),
+);
 
 /**
  * Provides a context for the selections
@@ -13,24 +28,96 @@ const SelectionContext = createContext({
  * @param {import("preact").ComponentChild} props.children - The child components that will consume the history service context.
  */
 export function SelectionProvider({ children }) {
-    const selected = useSignal(/** @type {string[]} */ ([]));
+    const selected = useSignal(/** @type {number[]} */ ([]));
+    /** @type {UpdateSelected} */
+    const update = (fn) => {
+        selected.value = fn(selected.value);
+        console.log(selected.value);
+    };
+
+    useResetOnQueryChange(update);
+    useRowClick(update, selected);
+
+    return <SelectionContext.Provider value={{ selected }}>{children}</SelectionContext.Provider>;
+}
+
+/**
+ * @param {UpdateSelected} update
+ */
+function useResetOnQueryChange(update) {
+    const query = useQueryContext();
+    useSignalEffect(() => {
+        const unsubs = [
+            // when anything about the query changes, reset selections
+            query.subscribe(() => {
+                update((prev) => []);
+            }),
+        ];
+
+        return () => {
+            for (const unsub of unsubs) {
+                unsub();
+            }
+        };
+    });
+}
+
+/**
+ * @param {UpdateSelected} update
+ * @param {import("@preact/signals").Signal<number[]>} selected
+ */
+function useRowClick(update, selected) {
+    const platformName = usePlatformName();
+    const { results } = useGlobalState();
+    const lastSelected = useSignal(/** @type {{index: number; id: string}|null} */ (null));
     useSignalEffect(() => {
         function handler(/** @type {MouseEvent} */ event) {
             if (!(event.target instanceof Element)) return;
-            if (event.target.matches('a')) return;
             const itemRow = /** @type {HTMLElement|null} */ (event.target.closest('[data-history-entry][data-index]'));
             const selection = toRowSelection(itemRow);
-            if (selection) {
-                event.preventDefault();
-                event.stopImmediatePropagation();
+            if (!itemRow || !selection) return;
 
-                // MVP for getting the tests to pass. Next PRs will expand functionality
-                selected.value = [selection.id];
+            event.preventDefault();
+            event.stopImmediatePropagation();
+
+            const intention = eventToIntention(event, platformName);
+            const currentSelected = itemRow.getAttribute('aria-selected') === 'true';
+
+            switch (intention) {
+                case 'click': {
+                    // MVP for getting the tests to pass. Next PRs will expand functionality
+                    update((prev) => [selection.index]);
+                    lastSelected.value = selection;
+                    break;
+                }
+                case 'ctrl+click': {
+                    update((prev) => {
+                        const index = prev.indexOf(selection.index);
+                        if (index > -1) {
+                            const next = prev.slice();
+                            next.splice(index, 1);
+                            return next;
+                        }
+                        return prev.concat(selection.index);
+                    });
+                    if (!currentSelected) {
+                        lastSelected.value = selection;
+                    } else {
+                        lastSelected.value = null;
+                    }
+                    break;
+                }
+                case 'shift+click': {
+                    // todo
+                    break;
+                }
             }
         }
         document.addEventListener('click', handler);
+        return () => {
+            document.removeEventListener('click', handler);
+        };
     });
-    return <SelectionContext.Provider value={{ selected }}>{children}</SelectionContext.Provider>;
 }
 
 // Hook for consuming the context

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

@@ -9,4 +9,31 @@ test.describe('history selections', () => {
         await hp.selectsRow(1);
         await hp.selectsRow(2);
     });
+    test('resets selection with new query', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+        await hp.selectsRow(0);
+        await hp.types('example.com');
+        await hp.rowIsNotSelected(0);
+    });
+    test('adds to selection', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+
+        await hp.selectsRow(0);
+        await hp.selectsRowWithCtrl(1);
+
+        await hp.rowIsSelected(0);
+        await hp.rowIsSelected(1);
+    });
+    test('removes from a selection', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+
+        await hp.selectsRow(0);
+        await hp.selectsRowWithCtrl(1);
+        await hp.selectsRowWithCtrl(1);
+        await hp.rowIsSelected(0);
+        await hp.rowIsNotSelected(1);
+    });
 });

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

@@ -343,4 +343,31 @@ export class HistoryTestPage {
         await expect(rows.nth(nth)).toHaveAttribute('aria-selected', 'true');
         await expect(selected).toHaveCount(1);
     }
+
+    /**
+     * @param {number} nth
+     */
+    async rowIsSelected(nth) {
+        const { page } = this;
+        const rows = page.locator('main').locator('[aria-selected]');
+        await expect(rows.nth(nth)).toHaveAttribute('aria-selected', 'true');
+    }
+
+    /**
+     * @param {number} nth
+     */
+    async rowIsNotSelected(nth) {
+        const { page } = this;
+        const rows = page.locator('main').locator('[aria-selected]');
+        await expect(rows.nth(nth)).toHaveAttribute('aria-selected', 'false');
+    }
+
+    /**
+     * @param {number} nth
+     */
+    async selectsRowWithCtrl(nth) {
+        const { page } = this;
+        const rows = page.locator('main').locator('[aria-selected]');
+        await rows.nth(nth).click({ modifiers: ['ControlOrMeta'] });
+    }
 }

special-pages/shared/handlers.js

@@ -12,3 +12,18 @@ export function eventToTarget(event, platformName) {
     }
     return 'same-tab';
 }
+
+/**
+ * @param {MouseEvent} event
+ * @param {ImportMeta['platform']} platformName
+ * @return {'ctrl+click' | 'shift+click' | 'click'}
+ */
+export function eventToIntention(event, platformName) {
+    const isControlClick = platformName === 'macos' ? event.metaKey : event.ctrlKey;
+    if (isControlClick) {
+        return 'ctrl+click';
+    } else if (event.shiftKey) {
+        return 'shift+click';
+    }
+    return 'click';
+}