Disable other filter controls when a selection is active

When a selection exists, it replaces other filters rather than being combined
with them. Disable the other filter controls in the UI in this case to make it
more obvious how the filters are being applied.

src/sidebar/components/search/FilterControls.tsx

@@ -38,6 +38,8 @@ type FilterToggleProps = {
   setActive: (active: boolean) => void;
 
   testId?: string;
+
+  disabled?: boolean;
 };
 
 /**
@@ -48,6 +50,7 @@ function FilterToggle({
   icon: IconComponent,
   description,
   active,
+  disabled = false,
   setActive,
   testId,
 }: FilterToggleProps) {
@@ -60,7 +63,9 @@ function FilterToggle({
         'font-medium rounded-lg py-1': true,
         'text-grey-7 bg-grey-2': !active,
         'text-grey-1 bg-grey-7': active,
+        'opacity-50': disabled,
       })}
+      disabled={disabled}
       onClick={() => setActive(!active)}
       pressed={active}
       variant="custom"
@@ -169,6 +174,8 @@ export default function FilterControls({
             label={`By ${focusFilters.user.display}`}
             description={`Show annotations by ${focusFilters.user.display}`}
             active={focusActive.has('user')}
+            // When a selection exists, it replaces other filters.
+            disabled={hasSelection}
             setActive={() => store.toggleFocusMode({ key: 'user' })}
             testId="user-focus-toggle"
           />
@@ -179,6 +186,7 @@ export default function FilterControls({
             label={`Pages ${focusFilters.page.display}`}
             description={`Show annotations on pages ${focusFilters.page.display}`}
             active={focusActive.has('page')}
+            disabled={hasSelection}
             setActive={() => store.toggleFocusMode({ key: 'page' })}
             testId="page-focus-toggle"
           />
@@ -189,6 +197,7 @@ export default function FilterControls({
             label="Selected chapter"
             description="Show annotations on selected book chapter(s)"
             active={focusActive.has('cfi')}
+            disabled={hasSelection}
             setActive={() => store.toggleFocusMode({ key: 'cfi' })}
             testId="cfi-focus-toggle"
           />

src/sidebar/components/search/SearchField.tsx

@@ -19,6 +19,9 @@ export type SearchFieldProps = {
 
   onClearSearch: () => void;
 
+  /** Disable input editing or submitting the search field. */
+  disabled?: boolean;
+
   /** Callback for when the current filter query changes */
   onSearch: (value: string) => void;
 
@@ -38,6 +41,7 @@ export type SearchFieldProps = {
  */
 export default function SearchField({
   classes,
+  disabled = false,
   inputRef,
   onClearSearch,
   onKeyDown,
@@ -84,18 +88,24 @@ export default function SearchField({
       className={classnames('space-y-3', classes)}
     >
       <InputGroup>
-        <IconButton icon={SearchIcon} title="Search" type="submit" />
+        <IconButton
+          icon={SearchIcon}
+          title="Search"
+          type="submit"
+          disabled={disabled}
+        />
         <Input
           aria-label="Search annotations"
           classes={classnames(
-            'text-base p-1.5',
+            'p-1.5',
             'transition-[max-width] duration-300 ease-out',
+            'disabled:text-grey-6',
           )}
           data-testid="search-input"
           dir="auto"
           name="query"
           placeholder={(isLoading && 'Loading…') || 'Search annotations…'}
-          disabled={isLoading}
+          disabled={disabled || isLoading}
           elementRef={input}
           value={pendingQuery || ''}
           onInput={(e: Event) =>
@@ -109,6 +119,7 @@ export default function SearchField({
             data-testid="clear-button"
             title="Clear search"
             onClick={onClearSearch}
+            disabled={disabled}
           />
         )}
       </InputGroup>

src/sidebar/components/search/SearchPanel.tsx

@@ -10,6 +10,7 @@ export default function SearchPanel() {
   const store = useSidebarStore();
   const filterQuery = store.filterQuery();
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const hasSelection = store.hasSelectedAnnotations();
 
   const clearSearch = () => {
     store.closeSidebarPanel('searchAnnotations');
@@ -33,6 +34,9 @@ export default function SearchPanel() {
             <SearchField
               inputRef={inputRef}
               classes="grow"
+              // Disable the input when there is a selection, as the selection
+              // replaces any other filters.
+              disabled={hasSelection}
               query={filterQuery || null}
               onClearSearch={clearSearch}
               onSearch={store.setFilterQuery}

src/sidebar/components/search/test/FilterControls-test.js

@@ -36,6 +36,10 @@ describe('FilterControls', () => {
       this.update();
     }
 
+    disabled() {
+      return this.button.exists() && this.button.prop('disabled');
+    }
+
     exists() {
       return this.button.exists();
     }
@@ -144,4 +148,36 @@ describe('FilterControls', () => {
       assert.isFalse(toggle.isActive());
     });
   });
+
+  it('disables focus filter controls if there is a selection', () => {
+    // Enable all the focus toggles.
+    fakeStore.getFocusFilters.returns({
+      user: {
+        display: 'John Smith',
+      },
+      cfi: {
+        display: 'Chapter 1',
+      },
+      page: {
+        display: '10-30',
+      },
+    });
+    const toggles = ['cfi', 'page', 'user'];
+    fakeStore.getFocusActive.returns(new Set(toggles));
+
+    // Add a selection. The focus controls should be disabled.
+    fakeStore.selectedAnnotations.returns([{ id: '123' }]);
+    const wrapper = createComponent();
+
+    const toggleButtons = toggles.map(
+      name => new ToggleButtonWrapper(wrapper, `${name}-focus-toggle`),
+    );
+    assert.isTrue(toggleButtons.every(button => button.disabled()));
+
+    // Clear the selection, the focus toggles should be enabled.
+    fakeStore.selectedAnnotations.returns([]);
+    wrapper.setProps({});
+    toggleButtons.forEach(tb => tb.update());
+    assert.isFalse(toggleButtons.some(button => button.disabled()));
+  });
 });

src/sidebar/components/search/test/SearchField-test.js

@@ -148,6 +148,22 @@ describe('SearchField', () => {
     assert.calledOnce(onClearSearch);
   });
 
+  [true, false].forEach(disabled => {
+    it('disables controls if `disabled` prop is true', () => {
+      // Set a non-empty query so that clear button is shown.
+      const query = 'some query';
+      const wrapper = createSearchField({ disabled, query });
+
+      assert.equal(wrapper.find('input').prop('disabled'), disabled);
+
+      // Both clear and search buttons should be disabled.
+      assert.deepEqual(
+        wrapper.find('button').map(btn => btn.prop('disabled')),
+        [disabled, disabled],
+      );
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility([

src/sidebar/components/search/test/SearchPanel-test.js

@@ -8,9 +8,10 @@ describe('SearchPanel', () => {
 
   beforeEach(() => {
     fakeStore = {
-      setFilterQuery: sinon.stub(),
-      filterQuery: sinon.stub().returns(null),
       closeSidebarPanel: sinon.stub(),
+      filterQuery: sinon.stub().returns(null),
+      hasSelectedAnnotations: sinon.stub().returns(false),
+      setFilterQuery: sinon.stub(),
     };
 
     $imports.$mock(mockImportedComponents());
@@ -61,4 +62,12 @@ describe('SearchPanel', () => {
 
     assert.calledWith(fakeStore.setFilterQuery, 'foo');
   });
+
+  [true, false].forEach(hasSelection => {
+    it('disables search field when there is a selection', () => {
+      fakeStore.hasSelectedAnnotations.returns(hasSelection);
+      const wrapper = createSearchPanel();
+      assert.equal(wrapper.find('SearchField').prop('disabled'), hasSelection);
+    });
+  });
 });