Merge pull request #1072 from hypothesis/add-error-message-controller

Add sidebar-content-error react component

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

+'use strict';
+
+const { Fragment, createElement } = require('preact');
+const propTypes = require('prop-types');
+
+/**
+ * An error message to display in the sidebar.
+ */
+function SidebarContentError({
+  loggedOutErrorMessage,
+  loggedInErrorMessage,
+  onLoginRequest,
+  isLoggedIn,
+}) {
+  return (
+    <div className="annotation-unavailable-message">
+      <div className="annotation-unavailable-message__icon" />
+      <p className="annotation-unavailable-message__label">
+        {!isLoggedIn ? (
+          <Fragment>
+            {loggedOutErrorMessage}
+            <br />
+            You may need to{' '}
+            <a
+              className="loggedout-message__link"
+              href=""
+              onClick={onLoginRequest}
+            >
+              log in{' '}
+            </a>
+            to see it.
+          </Fragment>
+        ) : (
+          <span>{loggedInErrorMessage}</span>
+        )}
+      </p>
+    </div>
+  );
+}
+
+SidebarContentError.propTypes = {
+  /* A short error message to be displayed when logged out along with a login prompt. */
+  loggedOutErrorMessage: propTypes.string,
+  /* A detailed error message explaining why the error message happened when logged in. */
+  loggedInErrorMessage: propTypes.string,
+  /* A function that will launch the login flow for the user. */
+  onLoginRequest: propTypes.func.isRequired,
+  /* A boolean indicating whether the user is logged in or not. */
+  isLoggedIn: propTypes.bool,
+};
+
+module.exports = SidebarContentError;

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

+'use strict';
+
+const { shallow } = require('enzyme');
+const { createElement } = require('preact');
+
+const SidebarContentError = require('../sidebar-content-error');
+
+describe('SidebarContentError', () => {
+  const createSidebarContentError = (
+    loggedOutErrorMessage,
+    loggedInErrorMessage,
+    isLoggedIn
+  ) => {
+    return shallow(
+      <SidebarContentError
+        loggedOutErrorMessage={loggedOutErrorMessage}
+        loggedInErrorMessage={loggedInErrorMessage}
+        onLoginRequest={sinon.stub()}
+        isLoggedIn={isLoggedIn}
+      />
+    );
+  };
+
+  it('shows error you may need to login to view message when logged out', () => {
+    const isLoggedIn = false;
+    const loggedOutErrorMessage = 'This annotation is not available.';
+    const loggedInErrorMessage =
+      'You do not have permission to view this annotation.';
+
+    const wrapper = createSidebarContentError(
+      loggedOutErrorMessage,
+      loggedInErrorMessage,
+      isLoggedIn
+    );
+
+    const errorText = wrapper
+      .find('p')
+      .first()
+      .text();
+    assert.equal(
+      errorText,
+      loggedOutErrorMessage + 'You may need to log in to see it.'
+    );
+  });
+
+  it('shows detailed error message when logged in', () => {
+    const isLoggedIn = true;
+    const loggedOutErrorMessage = 'This annotation is not available.';
+    const loggedInErrorMessage =
+      'You do not have permission to view this annotation.';
+
+    const wrapper = createSidebarContentError(
+      loggedOutErrorMessage,
+      loggedInErrorMessage,
+      isLoggedIn
+    );
+
+    const errorText = wrapper
+      .find('p')
+      .first()
+      .text();
+
+    assert.equal(errorText, loggedInErrorMessage);
+  });
+});

src/sidebar/index.js

@@ -175,6 +175,10 @@ function startAngularApp(config) {
     .component('searchStatusBar', require('./components/search-status-bar'))
     .component('selectionTabs', require('./components/selection-tabs'))
     .component('sidebarContent', require('./components/sidebar-content'))
+    .component(
+      'sidebarContentError',
+      wrapReactComponent(require('./components/sidebar-content-error'))
+    )
     .component('sidebarTutorial', require('./components/sidebar-tutorial'))
     .component('shareDialog', require('./components/share-dialog'))
     .component('sortDropdown', require('./components/sort-dropdown'))

src/sidebar/templates/sidebar-content.html

@@ -21,22 +21,16 @@
   total-notes="vm.totalNotes">
 </search-status-bar>
 
-<div class="annotation-unavailable-message"
-    ng-if="vm.selectedAnnotationUnavailable()">
-  <div class="annotation-unavailable-message__icon"></div>
-  <p class="annotation-unavailable-message__label">
-    <span ng-if="vm.auth.status === 'logged-out'">
-      This annotation is not available.
-      <br>
-      You may need to
-      <a class="loggedout-message__link" href="" ng-click="vm.onLogin()">log in</a>
-      to see it.
-    </span>
-    <span ng-if="vm.auth.status === 'logged-in'">
-      You do not have permission to view this annotation.
-    </span>
-  </p>
-</div>
+<sidebar-content-error
+  class="sidebar-content-error"
+  logged-out-error-message="'This annotation is not available.'"
+  logged-in-error-message="'You do not have permission to view this annotation.'"
+  on-login-request="vm.onLogin()"
+  is-logged-in="vm.auth.status === 'logged-in'"
+  ng-if="vm.selectedAnnotationUnavailable()"
+>
+</sidebar-content-error>
+
 <thread-list
   on-change-collapsed="vm.setCollapsed(id, collapsed)"
   on-clear-selection="vm.clearSelection()"