Add toggle button to focus-mode-header

Minor change to the component to add a button that enables or disables the focused mode for the focusedUser passed into the settings object.

scripts/gulp/live-reload-server.js

@@ -97,6 +97,16 @@ function LiveReloadServer(port, config) {
             window.hypothesisConfig = function () {
               return {
                 liveReloadServer: 'ws://' + appHost + ':${port}',
+                // Force into focused user mode
+
+                // Example focused user mode
+                // focus: {
+                //   user: {
+                //     username: 'foo',
+                //     authority: 'lms',
+                //     displayName: 'Foo Bar',
+                //   }
+                // },
 
                 // Open the sidebar when the page loads
                 openSidebar: true,

src/annotator/config/index.js

@@ -24,6 +24,7 @@ function configFrom(window_) {
       'enableExperimentalNewNoteButton'
     ),
     group: settings.group,
+    focus: settings.hostPageSetting('focus'),
     theme: settings.hostPageSetting('theme'),
     usernameUrl: settings.hostPageSetting('usernameUrl'),
     onLayoutChange: settings.hostPageSetting('onLayoutChange'),

src/sidebar/components/focused-mode-header.js

 'use strict';
 
 const { createElement } = require('preact');
-const propTypes = require('prop-types');
 
-const { withServices } = require('../util/service-context');
+const useStore = require('../store/use-store');
 
-function FocusedModeHeader({ settings }) {
+function FocusedModeHeader() {
+  const store = useStore(store => ({
+    actions: {
+      setFocusModeFocused: store.setFocusModeFocused,
+    },
+    selectors: {
+      focusModeFocused: store.focusModeFocused,
+      focusModeUserPrettyName: store.focusModeUserPrettyName,
+    },
+  }));
+
+  const toggleFocusedMode = () => {
+    store.actions.setFocusModeFocused(!store.selectors.focusModeFocused());
+  };
+
+  const buttonText = () => {
+    if (store.selectors.focusModeFocused()) {
+      return `Annotations by ${store.selectors.focusModeUserPrettyName()}`;
+    } else {
+      return 'All annotations';
+    }
+  };
 
   return (
     <div className="focused-mode-header">
-      Showing annotations by{' '}
-      <span className="focused-mode-header__user">{settings.focusedUser}</span>
+      <button
+        onClick={toggleFocusedMode}
+        className="primary-action-btn primary-action-btn--short"
+        title={`Toggle to show annotations only by ${store.selectors.focusModeUserPrettyName()}`}
+      >
+        {buttonText()}
+      </button>
     </div>
   );
 }
-FocusedModeHeader.propTypes = {
-  // Injected services.
-  settings: propTypes.object.isRequired,
-};
 
-FocusedModeHeader.injectedProps = ['settings'];
+FocusedModeHeader.propTypes = {};
 
-module.exports = withServices(FocusedModeHeader);
+module.exports = FocusedModeHeader;

src/sidebar/components/sidebar-content.js

@@ -126,7 +126,7 @@ function SidebarContentController(
   );
 
   this.showFocusedHeader = () => {
-    return store.getState().focusedMode;
+    return store.focusModeEnabled();
   };
 
   this.showSelectedTabs = function() {
@@ -136,7 +136,7 @@ function SidebarContentController(
       store.getState().filterQuery
     ) {
       return false;
-    } else if (store.getState().focusedMode) {
+    } else if (store.focusModeFocused()) {
       return false;
     } else {
       return true;

src/sidebar/components/test/focused-mode-header-test.js

+'use strict';
+
+const { shallow } = require('enzyme');
+const { createElement } = require('preact');
+
+const FocusedModeHeader = require('../focused-mode-header');
+
+describe('FocusedModeHeader', function() {
+  let fakeStore;
+  function createComponent() {
+    return shallow(<FocusedModeHeader />);
+  }
+
+  beforeEach(function() {
+    fakeStore = {
+      selection: {
+        focusMode: {
+          enabled: true,
+          focused: true,
+        },
+      },
+      focusModeFocused: sinon.stub().returns(false),
+      focusModeUserPrettyName: sinon.stub().returns('Fake User'),
+      setFocusModeFocused: sinon.stub(),
+    };
+    FocusedModeHeader.$imports.$mock({
+      '../store/use-store': callback => callback(fakeStore),
+    });
+  });
+
+  afterEach(() => {
+    FocusedModeHeader.$imports.$restore();
+  });
+
+  it('creates the component', () => {
+    const wrapper = createComponent();
+    assert.include(wrapper.text(), 'All annotations');
+  });
+
+  it("sets the button's text to the user's name when focused", () => {
+    fakeStore.focusModeFocused = sinon.stub().returns(true);
+    const wrapper = createComponent();
+    assert.include(wrapper.text(), 'Annotations by Fake User');
+  });
+
+  describe('clicking the button shall toggle the focused mode', function() {
+    it('when focused is false, toggle to true', () => {
+      const wrapper = createComponent();
+      wrapper.find('button').simulate('click');
+      assert.calledWith(fakeStore.setFocusModeFocused, true);
+    });
+
+    it('when focused is true, toggle to false', () => {
+      fakeStore.focusModeFocused = sinon.stub().returns(true);
+      const wrapper = createComponent();
+      wrapper.find('button').simulate('click');
+      assert.calledWith(fakeStore.setFocusModeFocused, false);
+    });
+  });
+});

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

@@ -158,6 +158,17 @@ describe('sidebar.components.sidebar-content', function() {
     });
   });
 
+  describe('showFocusedHeader', () => {
+    it('returns true if focus mode is enabled', () => {
+      store.focusModeEnabled = sinon.stub().returns(true);
+      assert.isTrue(ctrl.showFocusedHeader());
+    });
+    it('returns false if focus mode is not enabled', () => {
+      store.focusModeEnabled = sinon.stub().returns(false);
+      assert.isFalse(ctrl.showFocusedHeader());
+    });
+  });
+
   function connectFrameAndPerformInitialFetch() {
     setFrames([{ uri: 'https://a-page.com' }]);
     $scope.$digest();

src/sidebar/host-config.js

@@ -10,9 +10,6 @@ function hostPageConfig(window) {
   const configJSON = queryString.parse(window.location.search).config;
   const config = JSON.parse(configJSON || '{}');
 
-  // temp: hack to force user
-  config.focusedUser = 'kyle';
-
   // Known configuration parameters which we will import from the host page.
   // Note that since the host page is untrusted code, the filtering needs to
   // be done here.
@@ -42,7 +39,7 @@ function hostPageConfig(window) {
     'enableExperimentalNewNoteButton',
 
     // Forces the sidebar to filter annotations to a single user.
-    'focusedUser',
+    'focus',
 
     // Fetch config from a parent frame.
     'requestConfigFromFrame',

src/sidebar/services/root-thread.js

@@ -39,7 +39,7 @@ const sortFns = {
  * The root thread is then displayed by viewer.html
  */
 // @ngInject
-function RootThread($rootScope, settings, store, searchFilter, viewFilter) {
+function RootThread($rootScope, store, searchFilter, viewFilter) {
   /**
    * Build the root conversation thread from the given UI state.
    *
@@ -48,21 +48,31 @@ function RootThread($rootScope, settings, store, searchFilter, viewFilter) {
    */
   function buildRootThread(state) {
     const sortFn = sortFns[state.sortKey];
-
+    const shouldFilterThread = () => {
+      // is there a query or focused truthy value from the config?
+      return state.filterQuery || store.focusModeFocused();
+    };
     let filterFn;
-    if (state.filterQuery || state.focusedMode) {
+    if (shouldFilterThread()) {
+      const userFilter = {}; // optional user filter object for focused mode
+      // look for a unique username, if present, add it to the user filter
+      const focusedUsername = store.focusModeUsername(); // may be null if no focused user
+      if (focusedUsername) {
+        // focused user found, add it to the filter object
+        userFilter.user = focusedUsername;
+      }
       const filters = searchFilter.generateFacetedFilter(
         state.filterQuery,
-        settings.focusedUser
+        userFilter
       );
+
       filterFn = function(annot) {
         return viewFilter.filter([annot], filters).length > 0;
       };
     }
 
     let threadFilterFn;
-    const hasFilters = state.filterQuery || state.focusedMode;
-    if (state.isSidebar && !hasFilters) {
+    if (state.isSidebar && !shouldFilterThread()) {
       threadFilterFn = function(thread) {
         if (!thread.annotation) {
           return false;

src/sidebar/services/search-filter.js

@@ -127,9 +127,12 @@ function toObject(searchtext) {
  * facet.
  *
  * @param {string} searchtext
+ * @param {object} focusFilters - Map of the filter objects keyed to array values.
+ *  Currently, only the `user` filter key is supported.
+ *
  * @return {Object}
  */
-function generateFacetedFilter(searchtext, focusedUser) {
+function generateFacetedFilter(searchtext, focusFilters = {}) {
   let terms;
   const any = [];
   const quote = [];
@@ -138,8 +141,7 @@ function generateFacetedFilter(searchtext, focusedUser) {
   const tag = [];
   const text = [];
   const uri = [];
-  const user = focusedUser ? [focusedUser] : [];
-
+  const user = focusFilters.user ? [focusFilters.user] : [];
   if (searchtext) {
     terms = tokenize(searchtext);
     for (const term of terms) {

src/sidebar/services/test/root-thread-test.js

@@ -28,6 +28,7 @@ describe('rootThread', function() {
   let fakeStore;
   let fakeBuildThread;
   let fakeSearchFilter;
+  let fakeSettings;
   let fakeViewFilter;
 
   let $rootScope;
@@ -65,6 +66,8 @@ describe('rootThread', function() {
       getDraftIfNotEmpty: sinon.stub().returns(null),
       removeDraft: sinon.stub(),
       createAnnotation: sinon.stub(),
+      focusModeFocused: sinon.stub().returns(false),
+      focusModeUsername: sinon.stub().returns({}),
     };
 
     fakeBuildThread = sinon.stub().returns(fixtures.emptyThread);
@@ -73,6 +76,8 @@ describe('rootThread', function() {
       generateFacetedFilter: sinon.stub(),
     };
 
+    fakeSettings = {};
+
     fakeViewFilter = {
       filter: sinon.stub(),
     };
@@ -81,6 +86,7 @@ describe('rootThread', function() {
       .module('app', [])
       .value('store', fakeStore)
       .value('searchFilter', fakeSearchFilter)
+      .value('settings', fakeSettings)
       .value('viewFilter', fakeViewFilter)
       .service('rootThread', rootThreadFactory);
 
@@ -340,6 +346,26 @@ describe('rootThread', function() {
     });
   });
 
+  describe('when the focus user is present', () => {
+    it("generates a thread filter focused on the user's annotations", () => {
+      fakeBuildThread.reset();
+      const filters = [{ user: { terms: ['acct:bill@localhost'] } }];
+      const annotation = annotationFixtures.defaultAnnotation();
+      fakeSearchFilter.generateFacetedFilter.returns(filters);
+      fakeStore.focusModeFocused = sinon.stub().returns(true);
+      rootThread.thread(fakeStore.state);
+      const filterFn = fakeBuildThread.args[0][1].filterFn;
+
+      fakeViewFilter.filter.returns([annotation]);
+      assert.isTrue(filterFn(annotation));
+      assert.calledWith(
+        fakeViewFilter.filter,
+        sinon.match([annotation]),
+        filters
+      );
+    });
+  });
+
   context('when annotation events occur', function() {
     const annot = annotationFixtures.defaultAnnotation();
 

src/sidebar/services/test/search-filter-test.js

@@ -185,5 +185,23 @@ describe('sidebar.search-filter', () => {
         }
       });
     });
+
+    it('filters to a focused user', () => {
+      const filter = searchFilter.generateFacetedFilter(null, {
+        user: 'fakeusername',
+      });
+      // Remove empty facets.
+      Object.keys(filter).forEach(k => {
+        if (filter[k].terms.length === 0) {
+          delete filter[k];
+        }
+      });
+      assert.deepEqual(filter, {
+        user: {
+          operator: 'or',
+          terms: ['fakeusername'],
+        },
+      });
+    });
   });
 });

src/sidebar/store/modules/selection.js

@@ -113,7 +113,12 @@ function init(settings) {
 
     selectedTab: TAB_DEFAULT,
 
-    focusedMode: !!settings.focusedUser,
+    focusMode: {
+      enabled: settings.hasOwnProperty('focus'), // readonly
+      focused: true,
+      // Copy over the focus confg from settings object
+      config: { ...(settings.focus ? settings.focus : {}) },
+    },
 
     // Key by which annotations are currently sorted.
     sortKey: TAB_SORTKEY_DEFAULT[TAB_DEFAULT],
@@ -148,6 +153,15 @@ const update = {
     return { focusedAnnotationMap: action.focused };
   },
 
+  SET_FOCUS_MODE_FOCUSED: function(state, action) {
+    return {
+      focusMode: {
+        ...state.focusMode,
+        focused: action.focused,
+      },
+    };
+  },
+
   SET_FORCE_VISIBLE: function(state, action) {
     return { forceVisible: action.forceVisible };
   },
@@ -309,6 +323,16 @@ function setFilterQuery(query) {
   };
 }
 
+/**
+ * Set the focused to only show annotations by the focused user.
+ */
+function setFocusModeFocused(focused) {
+  return {
+    type: actions.SET_FOCUS_MODE_FOCUSED,
+    focused,
+  };
+}
+
 /** Sets the sort key for the annotation list. */
 function setSortKey(key) {
   return {
@@ -355,6 +379,55 @@ const getFirstSelectedAnnotationId = createSelector(
 function filterQuery(state) {
   return state.filterQuery;
 }
+/**
+ * Returns the on/off state of the focus mode. This can be toggled on or off to
+ * filter to the focused user.
+ *
+ * @return {boolean}
+ */
+function focusModeFocused(state) {
+  return state.focusMode.enabled && state.focusMode.focused;
+}
+/**
+ * Returns the value of the focus mode from the config.
+ *
+ * @return {boolean}
+ */
+function focusModeEnabled(state) {
+  return state.focusMode.enabled;
+}
+
+/**
+ * Returns the username of the focused mode or null if none is found.
+ *
+ * @return {object}
+ */
+function focusModeUsername(state) {
+  if (state.focusMode.config.user && state.focusMode.config.user.username) {
+    return state.focusMode.config.user.username;
+  }
+  return null;
+}
+
+/**
+ * Returns the display name for a user or the username
+ * if display name is not present. If both are missing
+ * then this returns an empty string.
+ *
+ * @return {string}
+ */
+function focusModeUserPrettyName(state) {
+  const user = state.focusMode.config.user;
+  if (!user) {
+    return '';
+  } else if (user.displayName) {
+    return user.displayName;
+  } else if (user.username) {
+    return user.username;
+  } else {
+    return '';
+  }
+}
 
 module.exports = {
   init: init,
@@ -369,6 +442,7 @@ module.exports = {
     selectTab: selectTab,
     setCollapsed: setCollapsed,
     setFilterQuery: setFilterQuery,
+    setFocusModeFocused: setFocusModeFocused,
     setForceVisible: setForceVisible,
     setSortKey: setSortKey,
     toggleSelectedAnnotations: toggleSelectedAnnotations,
@@ -377,6 +451,10 @@ module.exports = {
   selectors: {
     hasSelectedAnnotations,
     filterQuery,
+    focusModeFocused,
+    focusModeEnabled,
+    focusModeUsername,
+    focusModeUserPrettyName,
     isAnnotationSelected,
     getFirstSelectedAnnotationId,
   },

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

@@ -186,6 +186,84 @@ describe('store/modules/selection', () => {
     });
   });
 
+  describe('setFocusModeFocused()', function() {
+    it('sets the focus mode to enabled', function() {
+      store.setFocusModeFocused(true);
+      assert.equal(store.getState().focusMode.focused, true);
+    });
+
+    it('sets the focus mode to not enabled', function() {
+      store = createStore([selection], [{ focus: { user: {} } }]);
+      store.setFocusModeFocused(false);
+      assert.equal(store.getState().focusMode.focused, false);
+    });
+  });
+
+  describe('focusModeEnabled()', function() {
+    it('should be true when the focus setting is present', function() {
+      store = createStore([selection], [{ focus: { user: {} } }]);
+      assert.equal(store.focusModeEnabled(), true);
+    });
+    it('should be false when the focus setting is not present', function() {
+      assert.equal(store.focusModeEnabled(), false);
+    });
+  });
+
+  describe('focusModeFocused()', function() {
+    it('should return true by default when focus mode is enabled', function() {
+      store = createStore([selection], [{ focus: { user: {} } }]);
+      assert.equal(store.getState().focusMode.enabled, true);
+      assert.equal(store.getState().focusMode.focused, true);
+      assert.equal(store.focusModeFocused(), true);
+    });
+    it('should return false by default when focus mode is not enabled', function() {
+      assert.equal(store.getState().focusMode.enabled, false);
+      assert.equal(store.getState().focusMode.focused, true);
+      assert.equal(store.focusModeFocused(), false);
+    });
+  });
+
+  describe('focusModeUserPrettyName()', function() {
+    it('should return false by default when focus mode is not enabled', function() {
+      store = createStore(
+        [selection],
+        [{ focus: { user: { displayName: 'FakeDisplayName' } } }]
+      );
+      assert.equal(store.focusModeUserPrettyName(), 'FakeDisplayName');
+    });
+    it('should the username when displayName is missing', function() {
+      store = createStore(
+        [selection],
+        [{ focus: { user: { username: 'FakeUserName' } } }]
+      );
+      assert.equal(store.focusModeUserPrettyName(), 'FakeUserName');
+    });
+    it('should an return empty string when user object has no names', function() {
+      store = createStore([selection], [{ focus: { user: {} } }]);
+      assert.equal(store.focusModeUserPrettyName(), '');
+    });
+    it('should an return empty string when there is no focus object', function() {
+      assert.equal(store.focusModeUserPrettyName(), '');
+    });
+  });
+
+  describe('focusModeUsername()', function() {
+    it('should return the user name when present', function() {
+      store = createStore(
+        [selection],
+        [{ focus: { user: { username: 'FakeUserName' } } }]
+      );
+      assert.equal(store.focusModeUsername(), 'FakeUserName');
+    });
+    it('should return null when the username is not present', function() {
+      store = createStore([selection], [{ focus: { user: {} } }]);
+      assert.isNull(store.focusModeUsername());
+    });
+    it('should return null when the user object is not present', function() {
+      assert.isNull(store.focusModeUsername());
+    });
+  });
+
   describe('highlightAnnotations()', function() {
     it('sets the highlighted annotations', function() {
       store.highlightAnnotations(['id1', 'id2']);

src/styles/sidebar/components/focused-mode-header.scss

 .focused-mode-header {
-  padding: 5px;
-  .focused-mode-header__user {
-    font-weight: 800;
+  margin-bottom: 10px;
+  button {
+    width: 100%;
+    height: 24px;
+    margin-right: 10px;
+    &:focus {
+      outline: none;
+    }
   }
 }