158 paginated data list (#180)

* working: rename OrganizationTeamsList to PaginatedDataList

* convert org notifications list fully to PaginatedDataList

* update NotificationList tests

* refactor org access to use PaginatedDataList

* update tests for org access refactor; fix pagination & sorting

* restore Add Role functionality to Org roles

* fix displayed text when list of items is empty

* preserve query params when navigating through pagination

* fix bugs after RBAC rebase

* fix lint errors, fix add org access button

__tests__/components/NotificationList.test.jsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '../enzymeHelpers';
-import Notifications, { _Notifications } from '../../src/components/NotificationsList/Notifications.list';
-
-describe('<Notifications />', () => {
-  test('initially renders succesfully', () => {
-    mountWithContexts(
-      <Notifications
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={() => {}}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    );
-  });
-
-  test('fetches notifications on mount', () => {
-    const spy = jest.spyOn(_Notifications.prototype, 'readNotifications');
-    mountWithContexts(
-      <Notifications
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={() => {}}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    );
-    expect(spy).toHaveBeenCalled();
-  });
-
-  test('toggle success calls post', () => {
-    const spy = jest.spyOn(_Notifications.prototype, 'createSuccess');
-    const wrapper = mountWithContexts(
-      <Notifications
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={() => {}}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    ).find('Notifications');
-    wrapper.instance().toggleNotification(1, true, 'success');
-    expect(spy).toHaveBeenCalledWith(1, true);
-  });
-
-  test('post success makes request and updates state properly', async () => {
-    const onCreateSuccess = jest.fn();
-    const wrapper = mountWithContexts(
-      <_Notifications
-        match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
-        location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-        handleHttpError={() => {}}
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={() => {}}
-        onCreateSuccess={onCreateSuccess}
-        canToggleNotifications
-      />
-    ).find('Notifications');
-    wrapper.setState({ successTemplateIds: [44] });
-    await wrapper.instance().createSuccess(44, true);
-    expect(onCreateSuccess).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
-    expect(wrapper.state('successTemplateIds')).not.toContain(44);
-    await wrapper.instance().createSuccess(44, false);
-    expect(onCreateSuccess).toHaveBeenCalledWith(1, { id: 44 });
-    expect(wrapper.state('successTemplateIds')).toContain(44);
-  });
-
-  test('toggle error calls post', () => {
-    const spy = jest.spyOn(_Notifications.prototype, 'createError');
-    const wrapper = mountWithContexts(
-      <Notifications
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={() => {}}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    ).find('Notifications');
-    wrapper.instance().toggleNotification(1, true, 'error');
-    expect(spy).toHaveBeenCalledWith(1, true);
-  });
-
-  test('post error makes request and updates state properly', async () => {
-    const onCreateError = jest.fn();
-    const wrapper = mountWithContexts(
-      <_Notifications
-        match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
-        location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-        handleHttpError={() => {}}
-        onReadError={() => {}}
-        onReadNotifications={() => {}}
-        onReadSuccess={() => {}}
-        onCreateError={onCreateError}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    ).find('Notifications');
-    wrapper.setState({ errorTemplateIds: [44] });
-    await wrapper.instance().createError(44, true);
-    expect(onCreateError).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
-    expect(wrapper.state('errorTemplateIds')).not.toContain(44);
-    await wrapper.instance().createError(44, false);
-    expect(onCreateError).toHaveBeenCalledWith(1, { id: 44 });
-    expect(wrapper.state('errorTemplateIds')).toContain(44);
-  });
-
-  test('fetchNotifications', async () => {
-    const mockQueryParams = {
-      page: 44,
-      page_size: 10,
-      order_by: 'name'
-    };
-    const onReadNotifications = jest.fn().mockResolvedValue({
-      data: {
-        results: [
-          { id: 1, notification_type: 'slack' },
-          { id: 2, notification_type: 'email' },
-          { id: 3, notification_type: 'github' }
-        ]
-      }
-    });
-    const onReadSuccess = jest.fn().mockResolvedValue({
-      data: {
-        results: [
-          { id: 1 }
-        ]
-      }
-    });
-    const onReadError = jest.fn().mockResolvedValue({
-      data: {
-        results: [
-          { id: 2 }
-        ]
-      }
-    });
-    const wrapper = mountWithContexts(
-      <_Notifications
-        match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
-        location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
-        handleHttpError={() => {}}
-        onReadError={onReadError}
-        onReadNotifications={onReadNotifications}
-        onReadSuccess={onReadSuccess}
-        onCreateError={() => {}}
-        onCreateSuccess={() => {}}
-        canToggleNotifications
-      />
-    ).find('Notifications');
-    wrapper.instance().updateUrl = jest.fn();
-    await wrapper.instance().readNotifications(mockQueryParams);
-    expect(onReadNotifications).toHaveBeenCalledWith(1, mockQueryParams);
-    expect(onReadSuccess).toHaveBeenCalledWith(1, {
-      id__in: '1,2,3'
-    });
-    expect(onReadError).toHaveBeenCalledWith(1, {
-      id__in: '1,2,3'
-    });
-    expect(wrapper.state('successTemplateIds')).toContain(1);
-    expect(wrapper.state('errorTemplateIds')).toContain(2);
-  });
-});

__tests__/components/NotificationListItem.test.jsx

@@ -2,38 +2,49 @@ import React from 'react';
 import { mountWithContexts } from '../enzymeHelpers';
 import NotificationListItem from '../../src/components/NotificationsList/NotificationListItem';
 
-describe('<NotificationListItem />', () => {
+describe('<NotificationListItem canToggleNotifications />', () => {
   let wrapper;
-  const toggleNotification = jest.fn();
+  let toggleNotification;
+
+  beforeEach(() => {
+    toggleNotification = jest.fn();
+  });
 
   afterEach(() => {
     if (wrapper) {
       wrapper.unmount();
       wrapper = null;
     }
+    jest.clearAllMocks();
   });
 
   test('initially renders succesfully', () => {
     wrapper = mountWithContexts(
       <NotificationListItem
-        itemId={9000}
+        notification={{
+          id: 9000,
+          name: 'Foo',
+          notification_type: 'slack',
+        }}
         toggleNotification={toggleNotification}
         detailUrl="/foo"
-        notificationType="slack"
         canToggleNotifications
       />
     );
-    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
   });
 
   test('handles success click when toggle is on', () => {
     wrapper = mountWithContexts(
       <NotificationListItem
-        itemId={9000}
+        notification={{
+          id: 9000,
+          name: 'Foo',
+          notification_type: 'slack',
+        }}
         successTurnedOn
         toggleNotification={toggleNotification}
         detailUrl="/foo"
-        notificationType="slack"
         canToggleNotifications
       />
     );
@@ -44,11 +55,14 @@ describe('<NotificationListItem />', () => {
   test('handles success click when toggle is off', () => {
     wrapper = mountWithContexts(
       <NotificationListItem
-        itemId={9000}
+        notification={{
+          id: 9000,
+          name: 'Foo',
+          notification_type: 'slack',
+        }}
         successTurnedOn={false}
         toggleNotification={toggleNotification}
         detailUrl="/foo"
-        notificationType="slack"
         canToggleNotifications
       />
     );
@@ -59,11 +73,14 @@ describe('<NotificationListItem />', () => {
   test('handles error click when toggle is on', () => {
     wrapper = mountWithContexts(
       <NotificationListItem
-        itemId={9000}
+        notification={{
+          id: 9000,
+          name: 'Foo',
+          notification_type: 'slack',
+        }}
         errorTurnedOn
         toggleNotification={toggleNotification}
         detailUrl="/foo"
-        notificationType="slack"
         canToggleNotifications
       />
     );
@@ -74,11 +91,14 @@ describe('<NotificationListItem />', () => {
   test('handles error click when toggle is off', () => {
     wrapper = mountWithContexts(
       <NotificationListItem
-        itemId={9000}
+        notification={{
+          id: 9000,
+          name: 'Foo',
+          notification_type: 'slack',
+        }}
         errorTurnedOn={false}
         toggleNotification={toggleNotification}
         detailUrl="/foo"
-        notificationType="slack"
         canToggleNotifications
       />
     );

__tests__/components/PaginatedDataList.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { mountWithContexts } from '../enzymeHelpers';
+import { sleep } from '../testUtils';
+import PaginatedDataList from '../../src/components/PaginatedDataList';
+
+const mockData = [
+  { id: 1, name: 'one', url: '/org/team/1' },
+  { id: 2, name: 'two', url: '/org/team/2' },
+  { id: 3, name: 'three', url: '/org/team/3' },
+  { id: 4, name: 'four', url: '/org/team/4' },
+  { id: 5, name: 'five', url: '/org/team/5' },
+];
+
+describe('<PaginatedDataList />', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <PaginatedDataList
+        items={mockData}
+        itemCount={7}
+        queryParams={{
+          page: 1,
+          page_size: 5,
+          order_by: 'name',
+        }}
+      />
+    );
+  });
+
+  // should navigate when datalisttoolbar changes sorting
+  test('should navigate when DataListToolbar calls onSort prop', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mountWithContexts(
+      <PaginatedDataList
+        items={mockData}
+        itemCount={7}
+        queryParams={{
+          page: 1,
+          page_size: 5,
+          order_by: 'name',
+        }}
+      />, { context: { router: { history } } }
+    );
+
+    const toolbar = wrapper.find('DataListToolbar');
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    expect(toolbar.prop('sortOrder')).toEqual('ascending');
+    toolbar.prop('onSort')('name', 'descending');
+    expect(history.location.search).toEqual('?order_by=-name');
+    await sleep(0);
+    wrapper.update();
+
+    expect(toolbar.prop('sortedColumnKey')).toEqual('name');
+    // TODO: this assertion required updating queryParams prop. Consider
+    // fixing after #147 is done:
+    // expect(toolbar.prop('sortOrder')).toEqual('descending');
+    toolbar.prop('onSort')('name', 'ascending');
+    expect(history.location.search).toEqual('?order_by=name');
+  });
+
+  test('should navigate to page when Pagination calls onSetPage prop', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mountWithContexts(
+      <PaginatedDataList
+        items={mockData}
+        itemCount={7}
+        queryParams={{
+          page: 1,
+          page_size: 5,
+          order_by: 'name',
+        }}
+      />, { context: { router: { history } } }
+    );
+
+    const pagination = wrapper.find('Pagination');
+    pagination.prop('onSetPage')(2, 5);
+    expect(history.location.search).toEqual('?page=2&page_size=5');
+    wrapper.update();
+    pagination.prop('onSetPage')(1, 25);
+    expect(history.location.search).toEqual('?page=1&page_size=25');
+  });
+});

__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap

@@ -0,0 +1,369 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotificationListItem /> initially renders succesfully 1`] = `
+<NotificationListItem
+  canToggleNotifications={true}
+  detailUrl="/foo"
+  errorTurnedOn={false}
+  notification={
+    Object {
+      "id": 9000,
+      "name": "Foo",
+      "notification_type": "slack",
+    }
+  }
+  successTurnedOn={false}
+  toggleNotification={[MockFunction]}
+>
+  <I18n
+    update={true}
+    withHash={true}
+  >
+    <DataListItem
+      aria-labelledby="items-list-item-9000"
+      className=""
+      isExpanded={false}
+      key="9000"
+    >
+      <li
+        aria-labelledby="items-list-item-9000"
+        className="pf-c-data-list__item"
+      >
+        <DataListCell
+          className=""
+          key=".0"
+          rowid="items-list-item-9000"
+          width={1}
+        >
+          <div
+            className="pf-c-data-list__cell"
+          >
+            <Link
+              replace={false}
+              style={
+                Object {
+                  "marginRight": "1.5em",
+                }
+              }
+              to={
+                Object {
+                  "pathname": "/foo",
+                }
+              }
+            >
+              <a
+                onClick={[Function]}
+                style={
+                  Object {
+                    "marginRight": "1.5em",
+                  }
+                }
+              >
+                <b
+                  id="items-list-item-9000"
+                >
+                  Foo
+                </b>
+              </a>
+            </Link>
+            <Badge
+              className=""
+              isRead={true}
+              style={
+                Object {
+                  "textTransform": "capitalize",
+                }
+              }
+            >
+              <span
+                className="pf-c-badge pf-m-read"
+                style={
+                  Object {
+                    "textTransform": "capitalize",
+                  }
+                }
+              >
+                slack
+              </span>
+            </Badge>
+          </div>
+        </DataListCell>
+        <DataListCell
+          alignRight={true}
+          className=""
+          key=".1"
+          rowid="items-list-item-9000"
+          width={1}
+        >
+          <div
+            alignRight={true}
+            className="pf-c-data-list__cell"
+          >
+            <Switch
+              aria-label="Toggle notification success"
+              className=""
+              id="notification-9000-success-toggle"
+              isChecked={false}
+              isDisabled={false}
+              label="Successful"
+              onChange={[Function]}
+            >
+              <label
+                className="pf-c-switch"
+                htmlFor="notification-9000-success-toggle"
+              >
+                <input
+                  aria-label="Toggle notification success"
+                  checked={false}
+                  className="pf-c-switch__input"
+                  disabled={false}
+                  id="notification-9000-success-toggle"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="pf-c-switch__toggle"
+                />
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-on"
+                >
+                  Successful
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-off"
+                >
+                  Successful
+                </span>
+              </label>
+            </Switch>
+            <Switch
+              aria-label="Toggle notification failure"
+              className=""
+              id="notification-9000-error-toggle"
+              isChecked={false}
+              isDisabled={false}
+              label="Failure"
+              onChange={[Function]}
+            >
+              <label
+                className="pf-c-switch"
+                htmlFor="notification-9000-error-toggle"
+              >
+                <input
+                  aria-label="Toggle notification failure"
+                  checked={false}
+                  className="pf-c-switch__input"
+                  disabled={false}
+                  id="notification-9000-error-toggle"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="pf-c-switch__toggle"
+                />
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-on"
+                >
+                  Failure
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-off"
+                >
+                  Failure
+                </span>
+              </label>
+            </Switch>
+          </div>
+        </DataListCell>
+      </li>
+    </DataListItem>
+  </I18n>
+</NotificationListItem>
+`;
+
+exports[`<NotificationListItem canToggleNotifications /> initially renders succesfully 1`] = `
+<NotificationListItem
+  canToggleNotifications={true}
+  detailUrl="/foo"
+  errorTurnedOn={false}
+  notification={
+    Object {
+      "id": 9000,
+      "name": "Foo",
+      "notification_type": "slack",
+    }
+  }
+  successTurnedOn={false}
+  toggleNotification={[MockFunction]}
+>
+  <I18n
+    update={true}
+    withHash={true}
+  >
+    <DataListItem
+      aria-labelledby="items-list-item-9000"
+      className=""
+      isExpanded={false}
+      key="9000"
+    >
+      <li
+        aria-labelledby="items-list-item-9000"
+        className="pf-c-data-list__item"
+      >
+        <DataListCell
+          className=""
+          key=".0"
+          rowid="items-list-item-9000"
+          width={1}
+        >
+          <div
+            className="pf-c-data-list__cell"
+          >
+            <Link
+              replace={false}
+              style={
+                Object {
+                  "marginRight": "1.5em",
+                }
+              }
+              to={
+                Object {
+                  "pathname": "/foo",
+                }
+              }
+            >
+              <a
+                onClick={[Function]}
+                style={
+                  Object {
+                    "marginRight": "1.5em",
+                  }
+                }
+              >
+                <b>
+                  Foo
+                </b>
+              </a>
+            </Link>
+            <Badge
+              className=""
+              isRead={true}
+              style={
+                Object {
+                  "textTransform": "capitalize",
+                }
+              }
+            >
+              <span
+                className="pf-c-badge pf-m-read"
+                style={
+                  Object {
+                    "textTransform": "capitalize",
+                  }
+                }
+              >
+                slack
+              </span>
+            </Badge>
+          </div>
+        </DataListCell>
+        <DataListCell
+          alignRight={true}
+          className=""
+          key=".1"
+          rowid="items-list-item-9000"
+          width={1}
+        >
+          <div
+            alignRight={true}
+            className="pf-c-data-list__cell"
+          >
+            <Switch
+              aria-label="Toggle notification success"
+              className=""
+              id="notification-9000-success-toggle"
+              isChecked={false}
+              isDisabled={false}
+              label="Successful"
+              onChange={[Function]}
+            >
+              <label
+                className="pf-c-switch"
+                htmlFor="notification-9000-success-toggle"
+              >
+                <input
+                  aria-label="Toggle notification success"
+                  checked={false}
+                  className="pf-c-switch__input"
+                  disabled={false}
+                  id="notification-9000-success-toggle"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="pf-c-switch__toggle"
+                />
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-on"
+                >
+                  Successful
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-off"
+                >
+                  Successful
+                </span>
+              </label>
+            </Switch>
+            <Switch
+              aria-label="Toggle notification failure"
+              className=""
+              id="notification-9000-error-toggle"
+              isChecked={false}
+              isDisabled={false}
+              label="Failure"
+              onChange={[Function]}
+            >
+              <label
+                className="pf-c-switch"
+                htmlFor="notification-9000-error-toggle"
+              >
+                <input
+                  aria-label="Toggle notification failure"
+                  checked={false}
+                  className="pf-c-switch__input"
+                  disabled={false}
+                  id="notification-9000-error-toggle"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="pf-c-switch__toggle"
+                />
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-on"
+                >
+                  Failure
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="pf-c-switch__label pf-m-off"
+                >
+                  Failure
+                </span>
+              </label>
+            </Switch>
+          </div>
+        </DataListCell>
+      </li>
+    </DataListItem>
+  </I18n>
+</NotificationListItem>
+`;