Merge pull request #1029 from hypothesis/group-list-item-oos-react

Convert `<group-list-item-out-of-scope>` to React

src/sidebar/components/group-list-item-out-of-scope.js

 'use strict';
 
+const classnames = require('classnames');
+const { Fragment, createElement } = require('preact');
+const { useState } = require('preact/hooks');
+const propTypes = require('prop-types');
+
 const {
   orgName,
   trackViewGroupActivity,
 } = require('../util/group-list-item-common');
 
-// @ngInject
-function GroupListItemOutOfScopeController(analytics) {
-  // Track whether the group details are expanded.
-  this.isDetailsExpanded = false;
+const outOfScopeIcon = (
+  <svg
+    className="svg-icon group-list-item-out-of-scope__icon--unavailable"
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+  >
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+  </svg>
+);
 
-  /**
-   * Toggle the expanded setting on un-selectable groups.
-   */
-  this.toggleGroupDetails = function(event) {
-    event.stopPropagation();
-    this.isDetailsExpanded = !this.isDetailsExpanded;
-  };
+function GroupListItemOutOfScope({ analytics, group }) {
+  const [isExpanded, setExpanded] = useState(false);
 
-  this.orgName = function() {
-    return orgName(this.group);
+  const toggleGroupDetails = event => {
+    event.stopPropagation();
+    setExpanded(!isExpanded);
   };
 
-  this.trackViewGroupActivity = function() {
+  const groupOrgName = orgName(group);
+  const trackViewActivity = event => {
+    event.stopPropagation();
     trackViewGroupActivity(analytics);
   };
+
+  return (
+    <div
+      className="group-list-item__item group-list-item-out-of-scope__item"
+      onClick={toggleGroupDetails}
+      tabIndex="0"
+    >
+      {/* the group icon */}
+      <div className="group-list-item__icon-container">
+        {group.logo && (
+          <img
+            className="group-list-item__icon group-list-item__icon--organization"
+            alt={groupOrgName}
+            src={group.logo}
+          />
+        )}
+      </div>
+      {/* the group name */}
+      <div
+        className={classnames({
+          'group-list-item-out-of-scope__details': true,
+          expanded: isExpanded,
+        })}
+      >
+        {outOfScopeIcon}
+        <a
+          className="group-list-item__name-link"
+          href=""
+          title="This URL cannot be annotated in this group."
+        >
+          {group.name}
+        </a>
+        <br />
+        {/* explanation of why group is not available */}
+        {!isExpanded && (
+          <p className="group-list-item-out-of-scope__details-toggle">
+            Why is this group unavailable?
+          </p>
+        )}
+        {isExpanded && (
+          <Fragment>
+            <p className="group-list-item-out-of-scope__details-unavailable-message">
+              This group has been restricted to selected URLs by its
+              administrators.
+            </p>
+            {group.links.html && (
+              <p className="group-list-item-out-of-scope__details-actions">
+                <a
+                  className="button button--text group-list-item-out-of-scope__details-group-page-link"
+                  href={group.links.html}
+                  target="_blank"
+                  onClick={trackViewActivity}
+                  rel="noopener noreferrer"
+                >
+                  Go to group page
+                </a>
+              </p>
+            )}
+          </Fragment>
+        )}
+      </div>
+    </div>
+  );
 }
 
-module.exports = {
-  controller: GroupListItemOutOfScopeController,
-  controllerAs: 'vm',
-  bindings: {
-    group: '<',
-  },
-  template: require('../templates/group-list-item-out-of-scope.html'),
+GroupListItemOutOfScope.propTypes = {
+  group: propTypes.object,
+
+  analytics: propTypes.object,
 };
+
+GroupListItemOutOfScope.injectedProps = ['analytics'];
+
+module.exports = GroupListItemOutOfScope;

src/sidebar/components/test/group-list-item-out-of-scope-test.js

 'use strict';
 
-const angular = require('angular');
+const { mount } = require('enzyme');
+const preact = require('preact');
+const { createElement } = require('preact');
 const proxyquire = require('proxyquire');
-const util = require('../../directive/test/util');
 
 const { events } = require('../../services/analytics');
 
-describe('groupListItemOutOfScope', () => {
+describe('GroupListItemOutOfScope', () => {
   let fakeAnalytics;
   let fakeGroupListItemCommon;
+  let GroupListItemOutOfScope;
+
+  const fakeGroup = {
+    id: 'groupid',
+    links: {
+      html: 'https://hypothes.is/groups/groupid',
+    },
+    logo: 'dummy://hypothes.is/logo.svg',
+    organization: { name: 'org' },
+  };
+
+  // Click on the item to expand or collapse it.
+  const toggle = wrapper =>
+    wrapper
+      .find('div')
+      .first()
+      .simulate('click');
 
   before(() => {
     fakeGroupListItemCommon = {
@@ -16,18 +34,14 @@ describe('groupListItemOutOfScope', () => {
       trackViewGroupActivity: sinon.stub(),
     };
 
-    // Return groupListItemOutOfScope with groupListItemCommon stubbed out.
-    const groupListItemOutOfScope = proxyquire(
-      '../group-list-item-out-of-scope',
-      {
+    GroupListItemOutOfScope = proxyquire('../group-list-item-out-of-scope', {
+      // Use same instance of Preact module in tests and mocked module.
+      // See https://robertknight.me.uk/posts/browserify-dependency-mocking/
+      preact,
+
       '../util/group-list-item-common': fakeGroupListItemCommon,
       '@noCallThru': true,
-      }
-    );
-
-    angular
-      .module('app', [])
-      .component('groupListItemOutOfScope', groupListItemOutOfScope);
+    });
   });
 
   beforeEach(() => {
@@ -35,21 +49,23 @@ describe('groupListItemOutOfScope', () => {
       track: sinon.stub(),
       events,
     };
-
-    angular.mock.module('app', { analytics: fakeAnalytics });
   });
 
   const createGroupListItemOutOfScope = fakeGroup => {
-    return util.createDirective(document, 'groupListItemOutOfScope', {
-      group: fakeGroup,
-    });
+    return mount(
+      <GroupListItemOutOfScope analytics={fakeAnalytics} group={fakeGroup} />
+    );
   };
 
-  it('calls groupListItemCommon.trackViewGroupActivity when trackViewGroupActivity is called', () => {
-    const fakeGroup = { id: 'groupid' };
+  it('calls trackViewGroupActivity when "Go to group page" link is clicked', () => {
+    const wrapper = createGroupListItemOutOfScope(fakeGroup);
 
-    const element = createGroupListItemOutOfScope(fakeGroup);
-    element.ctrl.trackViewGroupActivity();
+    toggle(wrapper);
+
+    const link = wrapper
+      .find('a')
+      .filterWhere(link => link.text() === 'Go to group page');
+    link.simulate('click');
 
     assert.calledWith(
       fakeGroupListItemCommon.trackViewGroupActivity,
@@ -57,50 +73,35 @@ describe('groupListItemOutOfScope', () => {
     );
   });
 
-  it('returns groupListItemCommon.orgName when orgName is called', () => {
-    const fakeGroup = { id: 'groupid', organization: { name: 'org' } };
+  it('does not show "Go to group page" link if the group has no HTML link', () => {
+    const group = { ...fakeGroup, links: {} };
+    const wrapper = createGroupListItemOutOfScope(group);
+    const link = wrapper
+      .find('a')
+      .filterWhere(link => link.text() === 'Go to group page');
+    assert.isFalse(link.exists());
+  });
+
+  it('sets alt text of logo', () => {
     fakeGroupListItemCommon.orgName
       .withArgs(fakeGroup)
       .returns(fakeGroup.organization.name);
 
-    const element = createGroupListItemOutOfScope(fakeGroup);
-    const orgName = element.ctrl.orgName();
+    const wrapper = createGroupListItemOutOfScope(fakeGroup);
+    const orgName = wrapper.find('img').props().alt;
 
-    assert.calledWith(fakeGroupListItemCommon.orgName, fakeGroup);
     assert.equal(orgName, fakeGroup.organization.name);
   });
 
-  describe('toggleGroupDetails', () => {
-    it('sets the default expanded value to false', () => {
-      const fakeGroup = { id: 'groupid' };
-
-      const element = createGroupListItemOutOfScope(fakeGroup);
-
-      assert.isFalse(element.ctrl.isDetailsExpanded);
-    });
-
-    it('toggles the expanded value', () => {
-      const fakeGroup = { id: 'groupid' };
+  it('toggles expanded state when clicked', () => {
+    const wrapper = createGroupListItemOutOfScope(fakeGroup);
 
-      const element = createGroupListItemOutOfScope(fakeGroup);
-      const fakeEvent = { stopPropagation: sinon.stub() };
+    assert.isFalse(wrapper.exists('.expanded'));
 
-      element.ctrl.toggleGroupDetails(fakeEvent);
-      assert.isTrue(element.ctrl.isDetailsExpanded);
+    toggle(wrapper);
+    assert.isTrue(wrapper.exists('.expanded'));
 
-      element.ctrl.toggleGroupDetails(fakeEvent);
-      assert.isFalse(element.ctrl.isDetailsExpanded);
-    });
-
-    it('stops the event from propagating when toggling', () => {
-      const fakeGroup = { id: 'groupid' };
-
-      const element = createGroupListItemOutOfScope(fakeGroup);
-      const fakeEvent = { stopPropagation: sinon.spy() };
-
-      element.ctrl.toggleGroupDetails(fakeEvent);
-
-      sinon.assert.called(fakeEvent.stopPropagation);
-    });
+    toggle(wrapper);
+    assert.isFalse(wrapper.exists('.expanded'));
   });
 });

src/sidebar/index.js

@@ -30,7 +30,6 @@ document.body.setAttribute('ng-csp', '');
 disableOpenerForExternalLinks(document.body);
 
 const angular = require('angular');
-const wrapReactComponent = require('./util/wrap-react-component');
 
 // autofill-event relies on the existence of window.angular so
 // it must be require'd after angular is first require'd
@@ -39,6 +38,8 @@ require('autofill-event');
 // Enable debugging checks for Preact.
 require('preact/debug');
 
+const wrapReactComponent = require('./util/wrap-react-component');
+
 // Setup Angular integration for Raven
 if (appConfig.raven) {
   raven.angularModule(angular);
@@ -161,7 +162,7 @@ function startAngularApp(config) {
     )
     .component(
       'groupListItemOutOfScope',
-      require('./components/group-list-item-out-of-scope')
+      wrapReactComponent(require('./components/group-list-item-out-of-scope'))
     )
     .component('groupListSection', require('./components/group-list-section'))
     .component('helpLink', require('./components/help-link'))

src/sidebar/templates/group-list-item-out-of-scope.html

-<div
-  class="group-list-item-out-of-scope__item"
-  ng-class="{'group-list-item__item': true, 'is-selected': false}"
-  ng-click="vm.toggleGroupDetails($event)"
-  tabindex="0"
->
-  <!-- the group icon !-->
-  <div class="group-list-item__icon-container">
-    <img
-      class="group-list-item__icon group-list-item__icon--organization"
-      alt="{{ vm.orgName() }}"
-      ng-src="{{ vm.group.logo }}"
-      ng-if="vm.group.logo"
-    />
-  </div>
-  <!-- the group name and share link !-->
-  <div
-    ng-class="{'group-list-item-out-of-scope__details': true, expanded: vm.isDetailsExpanded}"
-  >
-    <svg
-      class="svg-icon group-list-item-out-of-scope__icon--unavailable"
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 24 24"
-    >
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path
-        d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-      />
-    </svg>
-    <a
-      class="group-list-item__name-link"
-      href=""
-      title="Group not annotatable on this domain."
-    >
-      {{vm.group.name}} </a
-    ><br />
-    <p
-      class="group-list-item-out-of-scope__details-toggle"
-      ng-if="!vm.isDetailsExpanded"
-    >
-      Why is this group unavailable?
-    </p>
-    <p
-      class="group-list-item-out-of-scope__details-unavailable-message"
-      ng-if="vm.isDetailsExpanded"
-    >
-      This group has been restricted to selected URLs by its administrators.
-    </p>
-    <p
-      class="group-list-item-out-of-scope__details-actions"
-      ng-if="vm.isDetailsExpanded"
-    >
-      <a
-        class="button button--text group-list-item-out-of-scope__details-group-page-link"
-        href="{{vm.group.links.html}}"
-        target="_blank"
-        ng-click="vm.trackViewGroupActivity()"
-        >Go to group page</a
-      >
-    </p>
-  </div>
-</div>