convert OrganizationList to use PaginatedDataList (#192)

* convert Org list to use PaginatedDataList * add ToolbarAddButton, ToolbarDeleteButton * pass full org into OrganizationListItem
2026-02-01 17:48:10 -03:30 · 2019-05-07 09:51:50 -04:00
parent a011896cc0
commit e7ec1c6ef8
18 changed files with 693 additions and 525 deletions
--- a/tests/components/DataListToolbar.test.jsx
+++ b/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');
  });
 });
--- a/tests/components/PaginatedDataList/DeleteToolbarButton.test.jsx
+++ b/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');
+  });
+});
--- a/tests/components/PaginatedDataList/PaginatedDataList.test.jsx
+++ b/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' },
--- a/tests/components/PaginatedDataList/ToolbarAddButton.test.jsx
+++ b/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');
+  });
+});
--- a/tests/components/PaginatedDataList/snapshots/DeleteToolbarButton.test.jsx.snap
+++ b/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>
+`;
--- a/tests/pages/Organizations/components/OrganizationListItem.test.jsx
+++ b/tests/pages/Organizations/components/OrganizationListItem.test.jsx
@@ -9,7 +9,19 @@ describe('<OrganizationListItem />', () => {
    mountWithContexts(
      <I18nProvider>
        <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
-          <OrganizationListItem />
+          <OrganizationListItem
+            organization={{
+              id: 1,
+              name: 'Org',
+              summary_fields: { related_field_counts: {
+                users: 1,
+                teams: 1,
+              } }
+            }}
+            detailUrl="/organization/1"
+            isSelected
+            onSelect={() => {}}
+          />
        </MemoryRouter>
      </I18nProvider>
    );
--- a/tests/pages/Organizations/screens/Organization/snapshots/OrganizationNotifications.test.jsx.snap
+++ b/tests/pages/Organizations/screens/Organization/snapshots/OrganizationNotifications.test.jsx.snap
@@ -109,8 +109,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                >
                  <Route>
                    <PaginatedDataList
-                      additionalControls={null}
+                      additionalControls={Array []}
                      history={"/history/"}
+                      isAllSelected={false}
                      itemCount={2}
                      itemName="notification"
                      itemNamePlural=""
@@ -146,6 +147,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                          "url": "",
                        }
                      }
+                      onSelectAll={null}
                      queryParams={
                        Object {
                          "order_by": "name",
@@ -154,6 +156,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                        }
                      }
                      renderItem={[Function]}
+                      showSelectAll={false}
                      toolbarColumns={
                        Array [
                          Object {
@@ -181,9 +184,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                        withHash={true}
                      >
                        <DataListToolbar
-                          add={null}
-                          addBtnToolTipContent="Add"
-                          addUrl={null}
+                          additionalControls={Array []}
                          columns={
                            Array [
                              Object {
@@ -205,19 +206,14 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                              },
                            ]
                          }
-                          deleteTooltip="Delete"
-                          disableDelete={true}
                          isAllSelected={false}
                          isCompact={false}
                          noLeftMargin={false}
                          onCompact={null}
                          onExpand={null}
-                          onOpenDeleteModal={null}
                          onSearch={[Function]}
                          onSelectAll={null}
                          onSort={[Function]}
-                          showAdd={false}
-                          showDelete={false}
                          showSelectAll={false}
                          sortOrder="ascending"
                          sortedColumnKey="name"
@@ -919,20 +915,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                      </Toolbar>
                                    </div>
                                  </LevelItem>
-                                  <LevelItem
-                                    style={
-                                      Object {
-                                        "display": "flex",
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      style={
-                                        Object {
-                                          "display": "flex",
-                                        }
-                                      }
-                                    />
+                                  <LevelItem>
+                                    <div />
                                  </LevelItem>
                                </div>
                              </Level>
--- a/tests/pages/Organizations/screens/OrganizationsList.test.jsx
+++ b/tests/pages/Organizations/screens/OrganizationsList.test.jsx
@@ -5,9 +5,11 @@ import OrganizationsList, { _OrganizationsList } from '../../../../src/pages/Org

 const mockAPIOrgsList = {
  data: {
+    count: 3,
    results: [{
      name: 'Organization 0',
      id: 1,
+      url: '/organizations/1',
      summary_fields: {
        related_field_counts: {
          teams: 3,
@@ -21,6 +23,7 @@ const mockAPIOrgsList = {
    {
      name: 'Organization 1',
      id: 2,
+      url: '/organizations/2',
      summary_fields: {
        related_field_counts: {
          teams: 2,
@@ -34,6 +37,7 @@ const mockAPIOrgsList = {
    {
      name: 'Organization 2',
      id: 3,
+      url: '/organizations/3',
      summary_fields: {
        related_field_counts: {
          teams: 5,
@@ -50,7 +54,7 @@ const mockAPIOrgsList = {
  warningMsg: 'message'
 };

-describe('<_OrganizationsList />', () => {
+describe('<OrganizationsList />', () => {
  let wrapper;
  let api;

@@ -67,75 +71,42 @@ describe('<_OrganizationsList />', () => {
    );
  });

-  test('Puts 1 selected Org in state when onSelect is called.', () => {
+  test('Puts 1 selected Org in state when handleSelect is called.', () => {
    wrapper = mountWithContexts(
      <OrganizationsList />
    ).find('OrganizationsList');

    wrapper.setState({
-      results: mockAPIOrgsList.data.results
+      organizations: mockAPIOrgsList.data.results,
+      itemCount: 3,
+      isInitialized: true
    });
    wrapper.update();
    expect(wrapper.state('selected').length).toBe(0);
-    wrapper.instance().onSelect(mockAPIOrgsList.data.results.slice(0, 1));
+    wrapper.instance().handleSelect(mockAPIOrgsList.data.results.slice(0, 1));
    expect(wrapper.state('selected').length).toBe(1);
  });

-  test('Puts all Orgs in state when onSelectAll is called.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    ).find('OrganizationsList');
-    wrapper.setState(
-      mockAPIOrgsList.data
-    );
-    expect(wrapper.state('selected').length).toBe(0);
-    wrapper.instance().onSelectAll(true);
-    expect(wrapper.find('OrganizationsList').state().selected.length).toEqual(wrapper.state().results.length);
-  });
-
-  test('selected is > 0 when close modal button is clicked.', () => {
+  test('Puts all Orgs in state when handleSelectAll is called.', () => {
    wrapper = mountWithContexts(
      <OrganizationsList />
    );
-    wrapper.find('OrganizationsList').setState({
-      results: mockAPIOrgsList.data.results,
-      isModalOpen: mockAPIOrgsList.isModalOpen,
-      selected: mockAPIOrgsList.data.results
+    const list = wrapper.find('OrganizationsList');
+    list.setState({
+      organizations: mockAPIOrgsList.data.results,
+      itemCount: 3,
+      isInitialized: true
    });
-    const component = wrapper.find('OrganizationsList');
-    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
+    expect(list.state('selected').length).toBe(0);
+    list.instance().handleSelectAll(true);
    wrapper.update();
-    const button = wrapper.find('ModalBoxCloseButton');
-    button.prop('onClose')();
-    wrapper.update();
-    expect(component.state('isModalOpen')).toBe(false);
-    expect(component.state('selected').length).toBeGreaterThan(0);
-    wrapper.unmount();
-  });
-
-  test('selected is > 0 when cancel modal button is clicked.', () => {
-    wrapper = mountWithContexts(
-      <OrganizationsList />
-    );
-    wrapper.find('OrganizationsList').setState({
-      results: mockAPIOrgsList.data.results,
-      isModalOpen: mockAPIOrgsList.isModalOpen,
-      selected: mockAPIOrgsList.data.results
-    });
-    const component = wrapper.find('OrganizationsList');
-    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
-    wrapper.update();
-    const button = wrapper.find('ModalBoxFooter').find('button').at(1);
-    button.prop('onClick')();
-    wrapper.update();
-    expect(component.state('isModalOpen')).toBe(false);
-    expect(component.state('selected').length).toBeGreaterThan(0);
-    wrapper.unmount();
+    expect(list.state('selected').length)
+      .toEqual(list.state('organizations').length);
  });

  test('api is called to delete Orgs for each org in selected.', () => {
    const fetchOrganizations = jest.fn(() => wrapper.find('OrganizationsList').setState({
-      results: []
+      organizations: []
    }));
    wrapper = mountWithContexts(
      <OrganizationsList
@@ -146,15 +117,13 @@ describe('<_OrganizationsList />', () => {
    );
    const component = wrapper.find('OrganizationsList');
    wrapper.find('OrganizationsList').setState({
-      results: mockAPIOrgsList.data.results,
+      organizations: mockAPIOrgsList.data.results,
+      itemCount: 3,
+      isInitialized: true,
      isModalOpen: mockAPIOrgsList.isModalOpen,
      selected: mockAPIOrgsList.data.results
    });
-    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
-    wrapper.update();
-    const button = wrapper.find('ModalBoxFooter').find('button').at(0);
-    button.simulate('click');
-    wrapper.update();
+    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
    expect(api.destroyOrganization).toHaveBeenCalledTimes(component.state('selected').length);
  });

@@ -167,7 +136,9 @@ describe('<_OrganizationsList />', () => {
      }
    );
    wrapper.find('OrganizationsList').setState({
-      results: mockAPIOrgsList.data.results,
+      organizations: mockAPIOrgsList.data.results,
+      itemCount: 3,
+      isInitialized: true,
      selected: mockAPIOrgsList.data.results.slice(0, 1)
    });
    const component = wrapper.find('OrganizationsList');
@@ -193,27 +164,6 @@ describe('<_OrganizationsList />', () => {
    expect(history.location.search).toBe('?order_by=modified&page=1&page_size=5');
  });

-  test('onSort sends the correct information to fetchOrganizations', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
-    });
-    const fetchOrganizations = jest.spyOn(_OrganizationsList.prototype, 'fetchOrganizations');
-    wrapper = mountWithContexts(
-      <OrganizationsList />, {
-        context: {
-          router: { history }
-        }
-      }
-    );
-    const component = wrapper.find('OrganizationsList');
-    component.instance().onSort('modified', 'ascending');
-    expect(fetchOrganizations).toBeCalledWith({
-      page: 1,
-      page_size: 5,
-      order_by: 'modified'
-    });
-  });
-
  test('error is thrown when org not successfully deleted from api', async () => {
    const history = createMemoryHistory({
      initialEntries: ['organizations?order_by=name&page=1&page_size=5'],
@@ -227,7 +177,9 @@ describe('<_OrganizationsList />', () => {
      }
    );
    await wrapper.setState({
-      results: mockAPIOrgsList.data.results,
+      organizations: mockAPIOrgsList.data.results,
+      itemCount: 3,
+      isInitialized: true,
      selected: [...mockAPIOrgsList.data.results].push({
        name: 'Organization 6',
        id: 'a',