Merge pull request #1816 from hypothesis/disable-reply-for-anon-users

Apply login-prompt UX to reply action if user not logged in

src/sidebar/components/annotation-action-bar.js

 import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
+import uiConstants from '../ui-constants';
 import useStore from '../store/use-store';
 import { isShareable, shareURI } from '../util/annotation-sharing';
 import { isPrivate, permits } from '../util/permissions';
@@ -22,7 +23,9 @@ function AnnotationActionBar({
 }) {
   const userProfile = useStore(store => store.profile());
   const annotationGroup = useStore(store => store.getGroup(annotation.group));
+  const isLoggedIn = useStore(store => store.isLoggedIn());
 
+  const openSidebarPanel = useStore(store => store.openSidebarPanel);
   // Is the current user allowed to take the given `action` on this annotation?
   const userIsAuthorizedTo = action => {
     return permits(annotation.permissions, action, userProfile.userid);
@@ -73,13 +76,21 @@ function AnnotationActionBar({
       .catch(err => flash.error(err.message, 'Flagging annotation failed'));
   };
 
+  const onReplyClick = () => {
+    if (!isLoggedIn) {
+      openSidebarPanel(uiConstants.PANEL_LOGIN_PROMPT);
+      return;
+    }
+    onReply();
+  };
+
   return (
     <div className="annotation-action-bar">
       {showEditAction && <Button icon="edit" title="Edit" onClick={onEdit} />}
       {showDeleteAction && (
         <Button icon="trash" title="Delete" onClick={onDelete} />
       )}
-      <Button icon="reply" title="Reply" onClick={onReply} />
+      <Button icon="reply" title="Reply" onClick={onReplyClick} />
       {showShareAction && (
         <AnnotationShareControl
           annotation={annotation}

src/sidebar/components/test/annotation-action-bar-test.js

@@ -5,6 +5,7 @@ import { act } from 'preact/test-utils';
 import AnnotationActionBar from '../annotation-action-bar';
 import { $imports } from '../annotation-action-bar';
 import * as fixtures from '../../test/annotation-fixtures';
+import uiConstants from '../../ui-constants';
 
 import { checkAccessibility } from '../../../test-util/accessibility';
 import mockImportedComponents from '../../../test-util/mock-imported-components';
@@ -81,6 +82,8 @@ describe('AnnotationActionBar', () => {
     fakeStore = {
       createDraft: sinon.stub(),
       getGroup: sinon.stub().returns({}),
+      isLoggedIn: sinon.stub(),
+      openSidebarPanel: sinon.stub(),
       profile: sinon.stub().returns(fakeUserProfile),
       updateFlagStatus: sinon.stub(),
     };
@@ -198,14 +201,33 @@ describe('AnnotationActionBar', () => {
       assert.isTrue(getButton(wrapper, 'reply').exists());
     });
 
-    it('invokes `onReply` callback when reply button clicked', () => {
-      const button = getButton(createComponent(), 'reply');
+    describe('when clicked', () => {
+      it('shows login prompt if user is not logged in', () => {
+        fakeStore.isLoggedIn.returns(false);
+        const button = getButton(createComponent(), 'reply');
 
-      act(() => {
-        button.props().onClick();
+        act(() => {
+          button.props().onClick();
+        });
+
+        assert.calledWith(
+          fakeStore.openSidebarPanel,
+          uiConstants.PANEL_LOGIN_PROMPT
+        );
+        assert.notCalled(fakeOnReply);
       });
 
-      assert.calledOnce(fakeOnReply);
+      it('invokes `onReply` callback if user is logged in', () => {
+        fakeStore.isLoggedIn.returns(true);
+        const button = getButton(createComponent(), 'reply');
+
+        act(() => {
+          button.props().onClick();
+        });
+
+        assert.calledOnce(fakeOnReply);
+        assert.notCalled(fakeStore.openSidebarPanel);
+      });
     });
   });