convert OrganizationList to use PaginatedDataList (#192)

* convert Org list to use PaginatedDataList

* add ToolbarAddButton, ToolbarDeleteButton

* pass full org into OrganizationListItem

__tests__/components/PaginatedDataList/DeleteToolbarButton.test.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { mountWithContexts } from '../../enzymeHelpers';
+import { ToolbarDeleteButton } from '../../../src/components/PaginatedDataList';
+
+const itemA = {
+  id: 1,
+  name: 'Foo',
+  summary_fields: { user_capabilities: { delete: true } },
+};
+const itemB = {
+  id: 1,
+  name: 'Foo',
+  summary_fields: { user_capabilities: { delete: false } },
+};
+
+describe('<ToolbarDeleteButton />', () => {
+  test('should render button', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton
+        onDelete={() => {}}
+        itemsToDelete={[]}
+      />
+    );
+    expect(wrapper.find('button')).toHaveLength(1);
+    expect(wrapper.find('ToolbarDeleteButton')).toMatchSnapshot();
+  });
+
+  test('should open confirmation modal', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton
+        onDelete={() => {}}
+        itemsToDelete={[itemA]}
+      />
+    );
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen'))
+      .toBe(true);
+    wrapper.update();
+    expect(wrapper.find('Modal')).toHaveLength(1);
+  });
+
+  test('should invoke onDelete prop', () => {
+    const onDelete = jest.fn();
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton
+        onDelete={onDelete}
+        itemsToDelete={[itemA]}
+      />
+    );
+    wrapper.find('ToolbarDeleteButton').setState({ isModalOpen: true });
+    wrapper.find('button.pf-m-danger').simulate('click');
+    expect(onDelete).toHaveBeenCalled();
+    expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen')).toBe(false);
+  });
+
+  test('should disable button when no delete permissions', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton
+        onDelete={() => {}}
+        itemsToDelete={[itemB]}
+      />
+    );
+    expect(wrapper.find('button[disabled]')).toHaveLength(1);
+  });
+
+  test('should render tooltip', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton
+        onDelete={() => {}}
+        itemsToDelete={[itemA]}
+      />
+    );
+    expect(wrapper.find('Tooltip')).toHaveLength(1);
+    expect(wrapper.find('Tooltip').prop('content')).toEqual('Delete');
+  });
+});

__tests__/components/PaginatedDataList/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/PaginatedDataList/ToolbarAddButton.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { mountWithContexts } from '../../enzymeHelpers';
+import { ToolbarAddButton } from '../../../src/components/PaginatedDataList';
+
+describe('<ToolbarAddButton />', () => {
+  test('should render button', () => {
+    const onClick = jest.fn();
+    const wrapper = mountWithContexts(
+      <ToolbarAddButton onClick={onClick} />
+    );
+    const button = wrapper.find('button');
+    expect(button).toHaveLength(1);
+    button.simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test('should render link', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarAddButton linkTo="/foo" />
+    );
+    const link = wrapper.find('Link');
+    expect(link).toHaveLength(1);
+    expect(link.prop('to')).toBe('/foo');
+  });
+});

__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ToolbarDeleteButton /> should render button 1`] = `
+<ToolbarDeleteButton
+  itemName="item"
+  itemsToDelete={Array []}
+  onDelete={[Function]}
+>
+  <I18n
+    update={true}
+    withHash={true}
+  >
+    <Tooltip
+      appendTo={[Function]}
+      className={null}
+      content="Select a row to delete"
+      enableFlip={true}
+      entryDelay={500}
+      exitDelay={500}
+      maxWidth="18.75rem"
+      position="left"
+      trigger="mouseenter focus"
+      zIndex={9999}
+    >
+      <Tippy
+        animateFill={false}
+        appendTo={[Function]}
+        content={
+          <div
+            className="pf-c-tooltip"
+            role="tooltip"
+          >
+            <TooltipArrow
+              className={null}
+            />
+            <TooltipContent
+              className={null}
+            >
+              Select a row to delete
+            </TooltipContent>
+          </div>
+        }
+        delay={
+          Array [
+            500,
+            500,
+          ]
+        }
+        distance={15}
+        flip={true}
+        lazy={true}
+        maxWidth="18.75rem"
+        onCreate={[Function]}
+        performance={true}
+        placement="left"
+        popperOptions={
+          Object {
+            "modifiers": Object {
+              "hide": Object {
+                "enabled": true,
+              },
+              "preventOverflow": Object {
+                "enabled": true,
+              },
+            },
+          }
+        }
+        theme="pf-tippy"
+        trigger="mouseenter focus"
+        zIndex={9999}
+      >
+        <Button
+          aria-label="Delete"
+          className="awx-ToolBarBtn"
+          component="button"
+          isActive={false}
+          isBlock={false}
+          isDisabled={true}
+          isFocus={false}
+          isHover={false}
+          onClick={[Function]}
+          type="button"
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Delete"
+            className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn"
+            disabled={true}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <TrashAltIcon
+              className="awx-ToolBarTrashCanIcon"
+              color="currentColor"
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="awx-ToolBarTrashCanIcon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+                  transform=""
+                />
+              </svg>
+            </TrashAltIcon>
+          </button>
+        </Button>
+        <Portal
+          containerInfo={
+            <div>
+              <div
+                class="pf-c-tooltip"
+                role="tooltip"
+              >
+                <div
+                  class="pf-c-tooltip__arrow"
+                />
+                <div
+                  class="pf-c-tooltip__content"
+                >
+                  Select a row to delete
+                </div>
+              </div>
+            </div>
+          }
+        >
+          <div
+            className="pf-c-tooltip"
+            role="tooltip"
+          >
+            <TooltipArrow
+              className={null}
+            >
+              <div
+                className="pf-c-tooltip__arrow"
+              />
+            </TooltipArrow>
+            <TooltipContent
+              className={null}
+            >
+              <div
+                className="pf-c-tooltip__content"
+              >
+                Select a row to delete
+              </div>
+            </TooltipContent>
+          </div>
+        </Portal>
+      </Tippy>
+    </Tooltip>
+  </I18n>
+</ToolbarDeleteButton>
+`;