convert OrganizationList to use PaginatedDataList (#192)

* convert Org list to use PaginatedDataList

* add ToolbarAddButton, ToolbarDeleteButton

* pass full org into OrganizationListItem

__tests__/components/DataListToolbar.test.jsx

@@ -179,47 +179,24 @@ describe('<DataListToolbar />', () => {
     expect(upAlphaIcon.length).toBe(1);
   });
 
-  test('trash can button triggers correct function', () => {
+  test('should render additionalControls', () => {
     const columns = [{ name: 'Name', key: 'name', isSortable: true }];
-    const onOpenDeleteModal = jest.fn();
-    const openDeleteModalButton = 'button[aria-label="Delete"]';
+    const onSearch = jest.fn();
+    const onSort = jest.fn();
+    const onSelectAll = jest.fn();
 
     toolbar = mountWithContexts(
       <DataListToolbar
         columns={columns}
-        onOpenDeleteModal={onOpenDeleteModal}
-        showDelete
-        disableDelete={false}
-      />
-    );
-    toolbar.find(openDeleteModalButton).simulate('click');
-    expect(onOpenDeleteModal).toHaveBeenCalled();
-  });
-
-  test('Tooltip says "Select a row to delete" when trash can icon is disabled', () => {
-    toolbar = mountWithContexts(
-      <DataListToolbar
-        columns={[{ name: 'Name', key: 'name', isSortable: true }]}
-        showDelete
-        deleteTooltip="Select a row to delete"
+        onSearch={onSearch}
+        onSort={onSort}
+        onSelectAll={onSelectAll}
+        additionalControls={[<button key="1" id="test" type="button">click</button>]}
       />
     );
 
-    const toolTip = toolbar.find('.pf-c-tooltip__content');
-    toolTip.simulate('mouseover');
-    expect(toolTip.text()).toBe('Select a row to delete');
-  });
-
-  test('Delete Org tooltip says "Delete" when trash can icon is enabled', () => {
-    toolbar = mountWithContexts(
-      <DataListToolbar
-        columns={[{ name: 'Name', key: 'name', isSortable: true }]}
-        showDelete
-        deleteTooltip="Delete"
-      />
-    );
-    const toolTip = toolbar.find('.pf-c-tooltip__content');
-    toolTip.simulate('mouseover');
-    expect(toolTip.text()).toBe('Delete');
+    const button = toolbar.find('#test');
+    expect(button).toHaveLength(1);
+    expect(button.text()).toEqual('click');
   });
 });

__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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createMemoryHistory } from 'history';
-import { mountWithContexts } from '../enzymeHelpers';
-import { sleep } from '../testUtils';
-import PaginatedDataList from '../../src/components/PaginatedDataList';
+import { mountWithContexts } from '../../enzymeHelpers';
+import { sleep } from '../../testUtils';
+import PaginatedDataList from '../../../src/components/PaginatedDataList';
 
 const mockData = [
   { id: 1, name: 'one', url: '/org/team/1' },

__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>
+`;