Convert '<group-list-section>' to React

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);
+const { Fragment, createElement } = require('preact');
+const propTypes = require('prop-types');
+
+const GroupListItem = require('./group-list-item');
+const GroupListItemOutOfScope = require('./group-list-item-out-of-scope');
+
+/**
+ * A labeled section of the groups list.
+ */
+function GroupListSection({ analytics, heading, sectionGroups, store }) {
+  const isSelectable = groupId => {
+    const group = sectionGroups.find(g => g.id === groupId);
     return !group.scopes.enforced || group.isScopedToUri;
   };
+
+  return (
+    <Fragment>
+      <h2 className="group-list-section__heading">{heading}</h2>
+      <ul className="group-list-section__content">
+        {sectionGroups.map(group => (
+          <li
+            className="dropdown-menu__row dropdown-menu__row--no-border dropdown-menu__row--unpadded"
+            key={group.id}
+          >
+            {isSelectable(group.id) ? (
+              <GroupListItem
+                className="group-list-item"
+                group={group}
+                analytics={analytics}
+                store={store}
+              />
+            ) : (
+              <GroupListItemOutOfScope
+                className="group-list-item-out-of-scope"
+                group={group}
+                analytics={analytics}
+              />
+            )}
+          </li>
+        ))}
+      </ul>
+    </Fragment>
+  );
 }
 
-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: '<',
-  },
-  template: require('../templates/group-list-section.html'),
+GroupListSection.propTypes = {
+  /* The list of groups to be displayed in the group list section. */
+  sectionGroups: propTypes.arrayOf(propTypes.object),
+  /* The string name of the group list section. */
+  heading: propTypes.string,
+
+  // TODO - These are only used by child components. It shouldn't be necessary
+  // to pass them down manually.
+  analytics: propTypes.object.isRequired,
+  store: propTypes.object.isRequired,
 };
+
+GroupListSection.injectedProps = ['analytics', 'store'];
+
+module.exports = GroupListSection;

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');
+const { shallow } = require('enzyme');
+const { createElement } = require('preact');
 
-describe('groupListSection', () => {
-  before(() => {
-    angular.module('app', []).component('groupListSection', groupListSection);
-  });
-
-  beforeEach(() => {
-    angular.mock.module('app', {});
-  });
+const GroupListSection = require('../group-list-section');
+const GroupListItem = require('../group-list-item');
+const GroupListItemOutOfScope = require('../group-list-item-out-of-scope');
 
+describe('GroupListSection', () => {
   const createGroupListSection = fakeSectionGroups => {
-    return util.createDirective(document, 'groupListSection', {
+    const props = {
       sectionGroups: fakeSectionGroups,
-    });
+      analytics: {},
+      store: {},
+    };
+    return shallow(<GroupListSection {...props} />);
   };
 
-  describe('isSelectable', () => {
+  describe('group item types', () => {
     [
       {
         description:
-          'returns false if group is out of scope and scope is enforced',
-        scopesEnforced: true,
-        expectedIsSelectable: [true, false],
+          'renders GroupListItem if group is out of scope but scope is not enforced',
+        scopesEnforced: false,
+        expectedIsSelectable: [true, true],
       },
       {
         description:
-          'returns true if group is out of scope but scope is not enforced',
-        scopesEnforced: false,
-        expectedIsSelectable: [true, true],
+          'renders GroupListItemOutOfScope if group is out of scope and scope is enforced',
+        scopesEnforced: true,
+        expectedIsSelectable: [true, false],
       },
     ].forEach(({ description, scopesEnforced, expectedIsSelectable }) => {
       it(description, () => {
@@ -48,14 +46,20 @@ describe('groupListSection', () => {
           },
         ];
 
-        const element = createGroupListSection(fakeSectionGroups);
+        const wrapper = createGroupListSection(fakeSectionGroups);
 
-        fakeSectionGroups.forEach(g =>
-          assert.equal(
-            element.ctrl.isSelectable(g.id),
-            expectedIsSelectable[g.id]
+        const itemTypes = wrapper
+          .findWhere(
+            n =>
+              n.type() === GroupListItem || n.type() === GroupListItemOutOfScope
           )
+          .map(item => item.type().name);
+        const expectedItemTypes = fakeSectionGroups.map(g =>
+          expectedIsSelectable[g.id]
+            ? 'GroupListItem'
+            : 'GroupListItemOutOfScope'
         );
+        assert.deepEqual(itemTypes, expectedItemTypes);
       });
     });
   });

src/sidebar/index.js

@@ -164,7 +164,10 @@ function startAngularApp(config) {
       'groupListItemOutOfScope',
       wrapReactComponent(require('./components/group-list-item-out-of-scope'))
     )
-    .component('groupListSection', require('./components/group-list-section'))
+    .component(
+      'groupListSection',
+      wrapReactComponent(require('./components/group-list-section'))
+    )
     .component('helpLink', require('./components/help-link'))
     .component('helpPanel', require('./components/help-panel'))
     .component('loggedoutMessage', require('./components/loggedout-message'))

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>