Show the shorter version of the empty annotations/notes message when the...

Show the shorter version of the empty annotations/notes message when the sidebar tutorial is displayed
and the new note button is enabled.

Fixes https://github.com/hypothesis/client/issues/610

src/sidebar/components/selection-tabs.js

 'use strict';
 
+var sessionUtil = require('../util/session-util');
 var uiConstants = require('../ui-constants');
 
 module.exports = {
   controllerAs: 'vm',
   //@ngInject
-  controller: function ($element, annotationUI, features, settings) {
+  controller: function ($element, annotationUI, features, session, settings) {
     this.TAB_ANNOTATIONS = uiConstants.TAB_ANNOTATIONS;
     this.TAB_NOTES = uiConstants.TAB_NOTES;
     this.TAB_ORPHANS = uiConstants.TAB_ORPHANS;
@@ -29,6 +30,10 @@ module.exports = {
       return this.selectedTab === this.TAB_NOTES &&
         this.totalNotes === 0;
     };
+
+    this.showSidebarTutorial = function () {
+      return sessionUtil.shouldShowSidebarTutorial(session.state);
+    };
   },
   bindings: {
     isLoading: '<',

src/sidebar/components/sidebar-tutorial.js

 'use strict';
 
+var sessionUtil = require('../util/session-util');
+
 // @ngInject
 function SidebarTutorialController(session, settings) {
   this.cleanOnboardingThemeEnabled = settings.enableCleanOnboardingTheme;
 
   this.showSidebarTutorial = function () {
-    if (session.state.preferences) {
-      if (session.state.preferences.show_sidebar_tutorial) {
-        return true;
-      }
-    }
-    return false;
+    return sessionUtil.shouldShowSidebarTutorial(session.state);
   };
 
   this.dismiss = function () {

src/sidebar/components/test/selection-tabs-test.js

@@ -5,6 +5,17 @@ var angular = require('angular');
 var util = require('../../directive/test/util');
 
 describe('selectionTabs', function () {
+  var fakeSession = {
+    state: {
+      preferences: {
+        show_sidebar_tutorial: false,
+      },
+    },
+  };
+  var fakeSettings = {
+    enableExperimentalNewNoteButton: false,
+  };
+
   before(function () {
     angular.module('app', [])
       .component('selectionTabs', require('../selection-tabs'));
@@ -15,13 +26,11 @@ describe('selectionTabs', function () {
     var fakeFeatures = {
       flagEnabled: sinon.stub().returns(true),
     };
-    var fakeSettings = {
-      enableExperimentalNewNoteButton: true,
-    };
 
     angular.mock.module('app', {
       annotationUI: fakeAnnotationUI,
       features: fakeFeatures,
+      session: fakeSession,
       settings: fakeSettings,
     });
   });
@@ -33,7 +42,6 @@ describe('selectionTabs', function () {
         totalAnnotations: '123',
         totalNotes: '456',
       });
-
       var tabs = elem[0].querySelectorAll('a');
 
       assert.include(tabs[0].textContent, 'Annotations');
@@ -48,8 +56,8 @@ describe('selectionTabs', function () {
         totalAnnotations: '123',
         totalNotes: '456',
       });
-
       var tabs = elem[0].querySelectorAll('a');
+
       assert.isTrue(tabs[0].classList.contains('is-selected'));
     });
 
@@ -59,8 +67,8 @@ describe('selectionTabs', function () {
         totalAnnotations: '123',
         totalNotes: '456',
       });
-
       var tabs = elem[0].querySelectorAll('a');
+
       assert.isTrue(tabs[1].classList.contains('is-selected'));
     });
 
@@ -70,6 +78,7 @@ describe('selectionTabs', function () {
         totalAnnotations: '123',
         totalNotes: '456',
       });
+
       assert.isFalse(elem[0].querySelectorAll('.selection-tabs')[0].classList.contains('selection-tabs--theme-clean'));
     });
 
@@ -87,28 +96,108 @@ describe('selectionTabs', function () {
         totalAnnotations: '123',
         totalNotes: '456',
       });
+
       assert.isTrue(elem[0].querySelectorAll('.selection-tabs')[0].classList.contains('selection-tabs--theme-clean'));
     });
 
-    it('should display the new note button when the notes tab is active', function () {
+    it('should not display the new new note button when the annotations tab is active', function () {
       var elem = util.createDirective(document, 'selectionTabs', {
-        selectedTab: 'note',
+        selectedTab: 'annotation',
         totalAnnotations: '123',
         totalNotes: '456',
       });
       var newNoteElem = elem[0].querySelectorAll('new-note-btn');
-      assert.equal(newNoteElem.length, 1);
+
+      assert.equal(newNoteElem.length, 0);
     });
 
-    it('should not display the new new note button when the annotations tab is active', function () {
+    it('should not display the new note button when the notes tab is active and the new note button is disabled', function () {
       var elem = util.createDirective(document, 'selectionTabs', {
-        selectedTab: 'annotation',
+        selectedTab: 'note',
         totalAnnotations: '123',
         totalNotes: '456',
       });
-
       var newNoteElem = elem[0].querySelectorAll('new-note-btn');
+
       assert.equal(newNoteElem.length, 0);
     });
+
+    it('should display the new note button when the notes tab is active and the new note button is enabled', function () {
+      fakeSettings.enableExperimentalNewNoteButton = true;
+      var elem = util.createDirective(document, 'selectionTabs', {
+        selectedTab: 'note',
+        totalAnnotations: '123',
+        totalNotes: '456',
+      });
+      var newNoteElem = elem[0].querySelectorAll('new-note-btn');
+
+      assert.equal(newNoteElem.length, 1);
+    });
+
+    it('should display the longer version of the no notes message when there are no notes', function () {
+      fakeSession.state.preferences.show_sidebar_tutorial = false;
+      fakeSettings.enableExperimentalNewNoteButton = false;
+
+      var elem = util.createDirective(document, 'selectionTabs', {
+        selectedTab: 'note',
+        totalAnnotations: '10',
+        totalNotes: 0,
+      });
+      var unavailableMsg = elem[0].querySelector('.annotation-unavailable-message__label');
+      var unavailableTutorial = elem[0].querySelector('.annotation-unavailable-message__tutorial');
+      var noteIcon = unavailableTutorial.querySelector('i');
+
+      assert.include(unavailableMsg.textContent, 'There are no page notes in this group.');
+      assert.include(unavailableTutorial.textContent, 'Create one by clicking the');
+      assert.isTrue(noteIcon.classList.contains('h-icon-note'));
+    });
+
+    it('should display the longer version of the no annotations message when there are no annotations', function () {
+      fakeSession.state.preferences.show_sidebar_tutorial = false;
+      fakeSettings.enableExperimentalNewNoteButton = false;
+
+      var elem = util.createDirective(document, 'selectionTabs', {
+        selectedTab: 'annotation',
+        totalAnnotations: 0,
+        totalNotes: '10',
+      });
+      var unavailableMsg = elem[0].querySelector('.annotation-unavailable-message__label');
+      var unavailableTutorial = elem[0].querySelector('.annotation-unavailable-message__tutorial');
+      var noteIcon = unavailableTutorial.querySelector('i');
+
+      assert.include(unavailableMsg.textContent, 'There are no annotations in this group.');
+      assert.include(unavailableTutorial.textContent, 'Create one by selecting some text and clicking the');
+      assert.isTrue(noteIcon.classList.contains('h-icon-annotate'));
+    });
+
+    context('when the sidebar tutorial is displayed', function () {
+      fakeSession.state.preferences.show_sidebar_tutorial = true;
+
+      it('should display the shorter version of the no notes message when there are no notes', function () {
+        var elem = util.createDirective(document, 'selectionTabs', {
+          selectedTab: 'note',
+          totalAnnotations: '10',
+          totalNotes: 0,
+        });
+        var msg = elem[0].querySelector('.annotation-unavailable-message__label');
+
+        assert.include(msg.textContent, 'There are no page notes in this group.');
+        assert.notInclude(msg.textContent, 'Create one by clicking the');
+        assert.notInclude(msg.textContent, 'Create one by selecting some text and clicking the');
+      });
+
+      it('should display the shorter version of the no annotations message when there are no annotations', function () {
+        var elem = util.createDirective(document, 'selectionTabs', {
+          selectedTab: 'annotation',
+          totalAnnotations: 0,
+          totalNotes: '10',
+        });
+        var msg = elem[0].querySelector('.annotation-unavailable-message__label');
+
+        assert.include(msg.textContent, 'There are no annotations in this group.');
+        assert.notInclude(msg.textContent, 'Create one by clicking the');
+        assert.notInclude(msg.textContent, 'Create one by selecting some text and clicking the');
+      });
+    });
   });
 });

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

@@ -45,14 +45,5 @@ describe('SidebarTutorialController', function () {
 
       assert.equal(result, false);
     });
-
-    it('returns false if session.state is {}', function () {
-      var session = {state: {}};
-      var controller = new Controller(session, settings);
-
-      var result = controller.showSidebarTutorial();
-
-      assert.equal(result, false);
-    });
   });
 });

src/sidebar/templates/selection-tabs.html

@@ -41,17 +41,21 @@
     <p class="annotation-unavailable-message__label">
       There are no page notes in this group.
       <br />
-      Create one by clicking the
-      <i class="help-icon h-icon-note"></i>
-      button.
+      <div ng-if="!vm.enableExperimentalNewNoteButton && !vm.showSidebarTutorial()" class="annotation-unavailable-message__tutorial">
+        Create one by clicking the
+        <i class="help-icon h-icon-note"></i>
+        button.
+      </div>
     </p>
   </div>
   <div ng-if="vm.showAnnotationsUnavailableMessage()"  class="annotation-unavailable-message">
     <p class="annotation-unavailable-message__label">
       There are no annotations in this group.
       <br />
-      Create one by selecting some text and clicking the
-      <i class="help-icon h-icon-annotate"></i> button.
+      <div ng-if="!vm.showSidebarTutorial()" class="annotation-unavailable-message__tutorial">
+        Create one by selecting some text and clicking the
+        <i class="help-icon h-icon-annotate"></i> button.
+      </div>
     </p>
   </div>
 </div>

src/sidebar/util/session-util.js

+'use strict';
+
+/**
+ * Returns true if the sidebar tutorial has to be shown to a user for a given session.
+ */
+function shouldShowSidebarTutorial(sessionState) {
+  if (sessionState.preferences.show_sidebar_tutorial) {
+    return true;
+  }
+  return false;
+}
+
+module.exports = {
+  shouldShowSidebarTutorial: shouldShowSidebarTutorial,
+};

src/sidebar/util/test/session-util-test.js

+'use strict';
+
+var sessionUtil = require('../session-util');
+
+describe('sessionUtil.shouldShowSidebarTutorial', function () {
+  it('shows sidebar tutorial if the settings object has the show_sidebar_tutorial key set', function () {
+    var sessionState = {
+      preferences: {
+        show_sidebar_tutorial: true,
+      },
+    };
+
+    assert.isTrue(sessionUtil.shouldShowSidebarTutorial(sessionState));
+  });
+
+  it('hides sidebar tutorial if the settings object does not have the show_sidebar_tutorial key set', function () {
+    var sessionState = {
+      preferences: {
+        show_sidebar_tutorial: false,
+      },
+    };
+
+    assert.isFalse(sessionUtil.shouldShowSidebarTutorial(sessionState));
+  });
+});