Add group section

src/sidebar/components/group-list-section.js

+'use strict';
+
+// @ngInject
+function GroupListSectionController() {
+  this.isSelectable = function(groupId) {
+    const group = this.sectionGroups.find(g => g.id === groupId);
+    return !this.disableOosGroupSelection || group.isScopedToUri;
+  };
+}
+
+module.exports = {
+  controller: GroupListSectionController,
+  controllerAs: 'vm',
+  bindings: {
+    /* The list of groups to be displayed in the group list section. */
+    sectionGroups: '<',
+    /* The string name of the group list section. */
+    heading: '<',
+    /* A boolean indicating whether out of scope group selection should be disabled. */
+    disableOosGroupSelection: '<',
+  },
+  template: require('../templates/group-list-section.html'),
+};

src/sidebar/components/test/group-list-section-test.js

+'use strict';
+
+const angular = require('angular');
+const groupListSection = require('../group-list-section');
+const util = require('../../directive/test/util');
+
+describe('groupListSection', () => {
+  before(() => {
+    angular.module('app', []).component('groupListSection', groupListSection);
+  });
+
+  beforeEach(() => {
+    angular.mock.module('app', {});
+  });
+
+  const createGroupListSection = (
+    fakeSectionGroups,
+    fakeDisableOosGroupSelection
+  ) => {
+    const config = {
+      sectionGroups: fakeSectionGroups,
+    };
+    if (fakeDisableOosGroupSelection !== undefined) {
+      config.disableOosGroupSelection = fakeDisableOosGroupSelection;
+    }
+    return util.createDirective(document, 'groupListSection', config);
+  };
+
+  describe('isSelectable', () => {
+    [
+      {
+        description: 'always returns true if disableOosGroupSelection is false',
+        fakeDisableOosGroupSelection: false,
+        expectedIsSelectable: [true, true],
+      },
+      {
+        description:
+          'always returns true if disableOosGroupSelection is undefined',
+        fakeDisableOosGroupSelection: undefined,
+        expectedIsSelectable: [true, true],
+      },
+      {
+        description:
+          'returns false if disableOosGroupSelection is true and group is out of scope',
+        fakeDisableOosGroupSelection: true,
+        expectedIsSelectable: [true, false],
+      },
+    ].forEach(
+      ({ description, fakeDisableOosGroupSelection, expectedIsSelectable }) => {
+        it(description, () => {
+          const fakeSectionGroups = [
+            { isScopedToUri: true, id: 0 },
+            { isScopedToUri: false, id: 1 },
+          ];
+
+          const element = createGroupListSection(
+            fakeSectionGroups,
+            fakeDisableOosGroupSelection
+          );
+
+          fakeSectionGroups.forEach(g =>
+            assert.equal(
+              element.ctrl.isSelectable(g.id),
+              expectedIsSelectable[g.id]
+            )
+          );
+        });
+      }
+    );
+  });
+});

src/sidebar/templates/group-list-section.html

+<h2 class="group-list-section__heading">
+  {{ vm.heading }}
+</h2>
+<ul class="group-list-section__content">
+  <li
+    class="dropdown-menu__row dropdown-menu__row--no-border dropdown-menu__row--unpadded"
+    ng-repeat="group in vm.sectionGroups track by group.id"
+  >
+    <group-list-item
+      class="group-list-item"
+      group="group"
+      ng-if="vm.isSelectable(group.id)"
+    >
+    </group-list-item>
+
+    <group-list-item-out-of-scope
+      class="group-list-item-out-of-scope"
+      group="group"
+      ng-if="!vm.isSelectable(group.id)"
+    >
+    </group-list-item-out-of-scope>
+  </li>
+</ul>

src/styles/sidebar/components/group-list-section.scss

+/* The groups section. */
+
+.group-list-section__content {
+  border-bottom: solid 1px rgba(0, 0, 0, 0.15);
+}
+
+.group-list-section__heading {
+  color: $gray-light;
+  font-size: $body1-font-size;
+  line-height: 1;
+  margin: 1px 1px 0;
+  padding: 12px 10px 0;
+  text-transform: uppercase;
+}