Add group out of scope

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

+'use strict';
+
+const {
+  orgName,
+  trackViewGroupActivity,
+} = require('../util/group-list-item-common');
+
+// @ngInject
+function GroupListItemOutOfScopeController(analytics) {
+  // Track whether the group details are expanded.
+  this.isDetailsExpanded = false;
+
+  /**
+   * Toggle the expanded setting on un-selectable groups.
+   */
+  this.toggleGroupDetails = function(event) {
+    event.stopPropagation();
+    this.isDetailsExpanded = !this.isDetailsExpanded;
+  };
+
+  this.orgName = function() {
+    return orgName(this.group);
+  };
+
+  this.trackViewGroupActivity = function() {
+    trackViewGroupActivity(analytics);
+  };
+}
+
+module.exports = {
+  controller: GroupListItemOutOfScopeController,
+  controllerAs: 'vm',
+  bindings: {
+    group: '<',
+  },
+  template: require('../templates/group-list-item-out-of-scope.html'),
+};

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

+'use strict';
+
+const angular = require('angular');
+const proxyquire = require('proxyquire');
+const util = require('../../directive/test/util');
+
+const { events } = require('../../services/analytics');
+
+describe('groupListItemOutOfScope', () => {
+  let fakeAnalytics;
+  let fakeGroupListItemCommon;
+
+  before(() => {
+    fakeGroupListItemCommon = {
+      orgName: sinon.stub(),
+      trackViewGroupActivity: sinon.stub(),
+    };
+
+    // Return groupListItemOutOfScope with groupListItemCommon stubbed out.
+    const groupListItemOutOfScope = proxyquire(
+      '../group-list-item-out-of-scope',
+      {
+        '../util/group-list-item-common': fakeGroupListItemCommon,
+        '@noCallThru': true,
+      }
+    );
+
+    angular
+      .module('app', [])
+      .component('groupListItemOutOfScope', groupListItemOutOfScope);
+  });
+
+  beforeEach(() => {
+    fakeAnalytics = {
+      track: sinon.stub(),
+      events,
+    };
+
+    angular.mock.module('app', { analytics: fakeAnalytics });
+  });
+
+  const createGroupListItemOutOfScope = fakeGroup => {
+    return util.createDirective(document, 'groupListItemOutOfScope', {
+      group: fakeGroup,
+    });
+  };
+
+  it('calls groupListItemCommon.trackViewGroupActivity when trackViewGroupActivity is called', () => {
+    const fakeGroup = { id: 'groupid' };
+
+    const element = createGroupListItemOutOfScope(fakeGroup);
+    element.ctrl.trackViewGroupActivity();
+
+    assert.calledWith(
+      fakeGroupListItemCommon.trackViewGroupActivity,
+      fakeAnalytics
+    );
+  });
+
+  it('returns groupListItemCommon.orgName when orgName is called', () => {
+    const fakeGroup = { id: 'groupid', organization: { name: 'org' } };
+    fakeGroupListItemCommon.orgName
+      .withArgs(fakeGroup)
+      .returns(fakeGroup.organization.name);
+
+    const element = createGroupListItemOutOfScope(fakeGroup);
+    const orgName = element.ctrl.orgName();
+
+    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' };
+
+      const element = createGroupListItemOutOfScope(fakeGroup);
+      const fakeEvent = { stopPropagation: sinon.stub() };
+
+      element.ctrl.toggleGroupDetails(fakeEvent);
+      assert.isTrue(element.ctrl.isDetailsExpanded);
+
+      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);
+    });
+  });
+});

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>

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

+/* The group-list out of scope item. */
+
+.group-list-item-out-of-scope {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.group-list-item-out-of-scope__item {
+  background-color: $gray-lightest;
+  color: $gray-light;
+}
+
+.group-list-item-out-of-scope__icon--unavailable {
+  fill: $gray-light;
+  float: right;
+  height: 20px;
+  width: auto;
+}
+
+.group-list-item-out-of-scope__details {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-weight: 500;
+}
+
+.group-list-item-out-of-scope__details-toggle {
+  font-size: $body1-font-size;
+  font-style: italic;
+  margin: 0;
+  text-decoration: underline;
+}
+
+.group-list-item-out-of-scope__details-unavailable-message {
+  font-size: $body1-font-size;
+  line-height: 1.5;
+  white-space: normal;
+  width: $group-list-width - 60px;
+}
+
+.group-list-item-out-of-scope__details-actions {
+  text-align: right;
+}
+
+.group-list-item-out-of-scope__details-group-page-link {
+  color: inherit;
+  font-size: $body1-font-size;
+  text-decoration: underline;
+  text-transform: uppercase;
+}