Refactor `hasAppliedFilter`

Refactor selectors for evaluating `hasAppliedFilter`
to remove cross-module state dependencies.

src/sidebar/components/sidebar-view.js

@@ -39,7 +39,9 @@ function SidebarView({
 
   // Store state values
   const focusedGroupId = useStore(store => store.focusedGroupId());
-  const hasAppliedFilter = useStore(store => store.hasAppliedFilter());
+  const hasAppliedFilter = useStore(store => {
+    return store.hasAppliedFilter() || store.hasSelectedAnnotations();
+  });
   const isLoading = useStore(store => store.isLoading());
   const isLoggedIn = useStore(store => store.isLoggedIn());
 

src/sidebar/components/test/sidebar-view-test.js

@@ -51,6 +51,7 @@ describe('SidebarView', () => {
       focusedGroupId: sinon.stub(),
       hasAppliedFilter: sinon.stub(),
       hasFetchedAnnotations: sinon.stub(),
+      hasSelectedAnnotations: sinon.stub(),
       hasSidebarOpened: sinon.stub(),
       isLoading: sinon.stub().returns(false),
       isLoggedIn: sinon.stub(),
@@ -257,6 +258,14 @@ describe('SidebarView', () => {
 
       assert.isFalse(wrapper.find('SelectionTabs').exists());
     });
+
+    it('does not render tabs if there are selected annotations', () => {
+      fakeStore.hasSelectedAnnotations.returns(true);
+
+      const wrapper = createComponent();
+
+      assert.isFalse(wrapper.find('SelectionTabs').exists());
+    });
   });
 
   it(

src/sidebar/store/modules/filters.js

@@ -182,6 +182,13 @@ const focusState = createSelector(
   }
 );
 
+/**
+ * Are there currently any active (applied) filters?
+ */
+function hasAppliedFilter(state) {
+  return !!state.query || state.focus?.active;
+}
+
 /**
  * Retrieve any applied user filter
  */
@@ -200,6 +207,7 @@ function userFilter(state) {
  * // Selectors
  * @prop {() => string|null} filterQuery
  * @prop {() => FocusState} focusState
+ * @prop {() => boolean} hasAppliedFilter
  * @prop {() => string|null} userFilter
  *
  */
@@ -216,6 +224,7 @@ export default {
   selectors: {
     filterQuery,
     focusState,
+    hasAppliedFilter,
     userFilter,
   },
 };

src/sidebar/store/modules/selection.js

@@ -386,31 +386,6 @@ function sortKeys(state) {
   return sortKeysForTab;
 }
 
-/* Selectors that take root state */
-
-/**
- * Is any sort of filtering currently applied to the list of annotations? This
- * includes a search query, but also if annotations are selected or a user
- * is focused.
- *
- * TODO: FIXME/refactor — this may need to be split into two selectors across
- *   two store modules that calling code needs to combine. It also may be
- *   logic that doesn't belong at all at the store level
- *
- * @type {(state: any) => boolean}
- */
-const hasAppliedFilter = createSelector(
-  rootState => rootState.selection,
-  rootState => rootState.filters,
-  (selection, filters) => {
-    return (
-      !!filters.query ||
-      filters.focus.active ||
-      hasSelectedAnnotations(selection)
-    );
-  }
-);
-
 /**
  * @typedef SelectionStore
  *
@@ -434,9 +409,6 @@ const hasAppliedFilter = createSelector(
  * @prop {() => string} sortKey
  * @prop {() => string[]} sortKeys
  *
- * // Root Selectors
- * @prop {() => boolean} hasAppliedFilter
- *
  */
 
 export default {
@@ -465,8 +437,4 @@ export default {
     sortKey,
     sortKeys,
   },
-
-  rootSelectors: {
-    hasAppliedFilter,
-  },
 };

src/sidebar/store/modules/test/filters-test.js

@@ -112,6 +112,33 @@ describe('sidebar/store/modules/filters', () => {
         assert.isEmpty(focusState.displayName);
       });
     });
+
+    describe('hasAppliedFilter', () => {
+      it('returns true if there is a search query set', () => {
+        store.setFilterQuery('foobar');
+
+        assert.isTrue(store.hasAppliedFilter());
+      });
+
+      it('returns true if user-focused mode is active', () => {
+        store = createStore(
+          [filters],
+          [{ focus: { user: { username: 'somebody' } } }]
+        );
+
+        assert.isTrue(store.hasAppliedFilter());
+      });
+
+      it('returns false if user-focused mode is configured but inactive', () => {
+        store = createStore(
+          [filters],
+          [{ focus: { user: { username: 'somebody' } } }]
+        );
+        store.toggleFocusMode(false);
+
+        assert.isFalse(store.hasAppliedFilter());
+      });
+    });
   });
 
   describe('userFilter', () => {

src/sidebar/store/modules/test/selection-test.js

@@ -58,46 +58,6 @@ describe('sidebar/store/modules/selection', () => {
     });
   });
 
-  describe('hasAppliedFilter', () => {
-    it('returns true if there is a search query set', () => {
-      store.setFilterQuery('foobar');
-
-      assert.isTrue(store.hasAppliedFilter());
-    });
-
-    it('returns true if user-focused mode is active', () => {
-      store = createStore(
-        [filters, selection],
-        [{ focus: { user: { username: 'somebody' } } }]
-      );
-
-      assert.isTrue(store.hasAppliedFilter());
-    });
-
-    it('returns false if user-focused mode is configured but inactive', () => {
-      store = createStore(
-        [filters, selection],
-        [{ focus: { user: { username: 'somebody' } } }]
-      );
-      store.toggleFocusMode(false);
-
-      assert.isFalse(store.hasAppliedFilter());
-    });
-
-    it('returns true if there are selected annotations', () => {
-      store.selectAnnotations([1]);
-
-      assert.isTrue(store.hasAppliedFilter());
-    });
-
-    it('returns false after selection is cleared', () => {
-      store.setFilterQuery('foobar');
-      store.clearSelection();
-
-      assert.isFalse(store.hasAppliedFilter());
-    });
-  });
-
   describe('hasSelectedAnnotations', function () {
     it('returns true if there are any selected annotations', function () {
       store.selectAnnotations([1]);