Add namespacing for query params (#205)

* use qs utils to namespace query params

* refactor Lookup and SelectResource Steps to use PaginatedDataList

* preserve query params when adding new ones

* require namespace for QS Configs

__tests__/components/Lookup.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../enzymeHelpers';
 import Lookup from '../../src/components/Lookup';
 import { _Lookup } from '../../src/components/Lookup/Lookup';
@@ -10,8 +11,8 @@ const mockColumns = [
 describe('<Lookup />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
+      <Lookup
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
@@ -25,8 +26,8 @@ describe('<Lookup />', () => {
 
   test('API response is formatted properly', (done) => {
     const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
+      <Lookup
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
@@ -47,9 +48,9 @@ describe('<Lookup />', () => {
     const spy = jest.spyOn(_Lookup.prototype, 'handleModalToggle');
     const mockSelected = [{ name: 'foo', id: 1 }];
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockSelected}
         onLookupSave={() => { }}
@@ -74,17 +75,22 @@ describe('<Lookup />', () => {
   test('calls "toggleSelected" when a user changes a checkbox', (done) => {
     const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     const mockSelected = [{ name: 'foo', id: 1 }];
+    const data = {
+      results: [
+        { name: 'test instance', id: 1, url: '/foo' }
+      ],
+      count: 1,
+    };
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockSelected}
         onLookupSave={() => { }}
-        getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
+        getItems={() => ({ data })}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     );
     setImmediate(() => {
@@ -99,17 +105,22 @@ describe('<Lookup />', () => {
   test('calls "toggleSelected" when remove icon is clicked', () => {
     const spy = jest.spyOn(_Lookup.prototype, 'toggleSelected');
     mockData = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }];
+    const data = {
+      results: [
+        { name: 'test instance', id: 1, url: '/foo' }
+      ],
+      count: 1,
+    };
     const wrapper = mountWithContexts(
-      <_Lookup
+      <Lookup
         id="search"
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={() => { }}
-        getItems={() => { }}
+        getItems={() => ({ data })}
         columns={mockColumns}
         sortedColumnKey="name"
-        handleHttpError={() => {}}
       />
     );
     const removeIcon = wrapper.find('button[aria-label="close"]').first();
@@ -121,7 +132,7 @@ describe('<Lookup />', () => {
     mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         selected={[]}
@@ -138,7 +149,7 @@ describe('<Lookup />', () => {
     mockData = [];
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         getItems={() => { }}
@@ -166,11 +177,12 @@ describe('<Lookup />', () => {
     const onLookupSaveFn = jest.fn();
     const wrapper = mountWithContexts(
       <Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         name="fooBar"
         value={mockData}
         onLookupSave={onLookupSaveFn}
         getItems={() => { }}
+        sortedColumnKey="name"
       />
     ).find('Lookup');
     wrapper.instance().toggleSelected({
@@ -188,61 +200,31 @@ describe('<Lookup />', () => {
     }], 'fooBar');
   });
 
-  test('onSort sets state and calls getData ', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
+  test('should re-fetch data when URL params change', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/add'],
+    });
+    const getItems = jest.fn();
     const wrapper = mountWithContexts(
       <_Lookup
-        lookup_header="Foo Bar"
+        lookupHeader="Foo Bar"
         onLookupSave={() => { }}
         value={mockData}
         selected={[]}
         columns={mockColumns}
         sortedColumnKey="name"
-        getItems={() => { }}
+        getItems={getItems}
         handleHttpError={() => {}}
+        location={{ history }}
       />
-    ).find('Lookup');
-    wrapper.instance().onSort('id', 'descending');
-    expect(wrapper.state('sortedColumnKey')).toEqual('id');
-    expect(wrapper.state('sortOrder')).toEqual('descending');
-    expect(spy).toHaveBeenCalled();
-  });
+    );
 
-  test('onSearch calls getData (through calling onSort)', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
-    const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
-        onLookupSave={() => { }}
-        value={mockData}
-        selected={[]}
-        columns={mockColumns}
-        sortedColumnKey="name"
-        getItems={() => { }}
-        handleHttpError={() => {}}
-      />
-    ).find('Lookup');
-    wrapper.instance().onSearch();
-    expect(spy).toHaveBeenCalled();
-  });
-
-  test('onSetPage sets state and calls getData ', () => {
-    const spy = jest.spyOn(_Lookup.prototype, 'getData');
-    const wrapper = mountWithContexts(
-      <_Lookup
-        lookup_header="Foo Bar"
-        onLookupSave={() => { }}
-        value={mockData}
-        selected={[]}
-        columns={mockColumns}
-        sortedColumnKey="name"
-        getItems={() => { }}
-        handleHttpError={() => {}}
-      />
-    ).find('Lookup');
-    wrapper.instance().onSetPage(2, 10);
-    expect(wrapper.state('page')).toEqual(2);
-    expect(wrapper.state('page_size')).toEqual(10);
-    expect(spy).toHaveBeenCalled();
+    expect(getItems).toHaveBeenCalledTimes(1);
+    history.push('organizations/add?page=2');
+    wrapper.setProps({
+      location: { history },
+    });
+    wrapper.update();
+    expect(getItems).toHaveBeenCalledTimes(2);
   });
 });

__tests__/components/PaginatedDataList/PaginatedDataList.test.jsx

@@ -12,6 +12,12 @@ const mockData = [
   { id: 5, name: 'five', url: '/org/team/5' },
 ];
 
+const qsConfig = {
+  namespace: 'item',
+  defaultParams: { page: 1, page_size: 5 },
+  integerFields: [],
+};
+
 describe('<PaginatedDataList />', () => {
   afterEach(() => {
     jest.restoreAllMocks();
@@ -27,11 +33,11 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />
     );
   });
 
-  // should navigate when datalisttoolbar changes sorting
   test('should navigate when DataListToolbar calls onSort prop', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/organizations/1/teams'],
@@ -45,6 +51,7 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />, { context: { router: { history } } }
     );
 
@@ -52,7 +59,7 @@ describe('<PaginatedDataList />', () => {
     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');
+    expect(history.location.search).toEqual('?item.order_by=-name');
     await sleep(0);
     wrapper.update();
 
@@ -61,7 +68,7 @@ describe('<PaginatedDataList />', () => {
     // fixing after #147 is done:
     // expect(toolbar.prop('sortOrder')).toEqual('descending');
     toolbar.prop('onSort')('name', 'ascending');
-    expect(history.location.search).toEqual('?order_by=name');
+    expect(history.location.search).toEqual('?item.order_by=name');
   });
 
   test('should navigate to page when Pagination calls onSetPage prop', () => {
@@ -77,14 +84,15 @@ describe('<PaginatedDataList />', () => {
           page_size: 5,
           order_by: 'name',
         }}
+        qsConfig={qsConfig}
       />, { context: { router: { history } } }
     );
 
     const pagination = wrapper.find('Pagination');
     pagination.prop('onSetPage')(2, 5);
-    expect(history.location.search).toEqual('?page=2&page_size=5');
+    expect(history.location.search).toEqual('?item.page=2&item.page_size=5');
     wrapper.update();
     pagination.prop('onSetPage')(1, 25);
-    expect(history.location.search).toEqual('?page=1&page_size=25');
+    expect(history.location.search).toEqual('?item.page=1&item.page_size=25');
   });
 });

__tests__/components/SelectResourceStep.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { createMemoryHistory } from 'history';
 import { shallow } from 'enzyme';
 import { mountWithContexts } from '../enzymeHelpers';
-import SelectResourceStep from '../../src/components/AddRole/SelectResourceStep';
+import { sleep } from '../testUtils';
+import SelectResourceStep, { _SelectResourceStep } from '../../src/components/AddRole/SelectResourceStep';
 
 describe('<SelectResourceStep />', () => {
   const columns = [
@@ -21,13 +23,14 @@ describe('<SelectResourceStep />', () => {
       />
     );
   });
+
   test('fetches resources on mount', async () => {
     const handleSearch = jest.fn().mockResolvedValue({
       data: {
         count: 2,
         results: [
-          { id: 1, username: 'foo' },
-          { id: 2, username: 'bar' }
+          { id: 1, username: 'foo', url: 'item/1' },
+          { id: 2, username: 'bar', url: 'item/2' }
         ]
       }
     });
@@ -46,102 +49,71 @@ describe('<SelectResourceStep />', () => {
       page_size: 5
     });
   });
+
   test('readResourceList properly adds rows to state', async () => {
     const selectedResourceRows = [
-      {
-        id: 1,
-        username: 'foo'
-      }
+      { id: 1, username: 'foo', url: 'item/1' }
     ];
     const handleSearch = jest.fn().mockResolvedValue({
       data: {
         count: 2,
         results: [
-          { id: 1, username: 'foo' },
-          { id: 2, username: 'bar' }
+          { id: 1, username: 'foo', url: 'item/1' },
+          { id: 2, username: 'bar', url: 'item/2' }
         ]
       }
     });
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/access?resource.page=1&resource.order_by=-username'],
+    });
     const wrapper = await mountWithContexts(
-      <SelectResourceStep
+      <_SelectResourceStep
         columns={columns}
         displayKey="username"
         onRowClick={() => {}}
         onSearch={handleSearch}
         selectedResourceRows={selectedResourceRows}
         sortedColumnKey="username"
+        location={history.location}
       />
     ).find('SelectResourceStep');
-    await wrapper.instance().readResourceList({
-      page: 1,
-      order_by: '-username'
-    });
+    await wrapper.instance().readResourceList();
     expect(handleSearch).toHaveBeenCalledWith({
       order_by: '-username',
-      page: 1
+      page: 1,
+      page_size: 5,
     });
     expect(wrapper.state('resources')).toEqual([
-      { id: 1, username: 'foo' },
-      { id: 2, username: 'bar' }
+      { id: 1, username: 'foo', url: 'item/1' },
+      { id: 2, username: 'bar', url: 'item/2' }
     ]);
   });
-  test('handleSetPage calls readResourceList with correct params', () => {
-    const spy = jest.spyOn(SelectResourceStep.prototype, 'readResourceList');
-    const wrapper = mountWithContexts(
-      <SelectResourceStep
-        columns={columns}
-        displayKey="username"
-        onRowClick={() => {}}
-        onSearch={() => {}}
-        selectedResourceRows={[]}
-        sortedColumnKey="username"
-      />
-    ).find('SelectResourceStep');
-    wrapper.setState({ sortOrder: 'descending' });
-    wrapper.instance().handleSetPage(2);
-    expect(spy).toHaveBeenCalledWith({ page: 2, page_size: 5, order_by: '-username' });
-    wrapper.setState({ sortOrder: 'ascending' });
-    wrapper.instance().handleSetPage(2);
-    expect(spy).toHaveBeenCalledWith({ page: 2, page_size: 5, order_by: 'username' });
-  });
-  test('handleSort calls readResourceList with correct params', () => {
-    const spy = jest.spyOn(SelectResourceStep.prototype, 'readResourceList');
-    const wrapper = mountWithContexts(
-      <SelectResourceStep
-        columns={columns}
-        displayKey="username"
-        onRowClick={() => {}}
-        onSearch={() => {}}
-        selectedResourceRows={[]}
-        sortedColumnKey="username"
-      />
-    ).find('SelectResourceStep');
-    wrapper.instance().handleSort('username', 'descending');
-    expect(spy).toHaveBeenCalledWith({ page: 1, page_size: 5, order_by: '-username' });
-    wrapper.instance().handleSort('username', 'ascending');
-    expect(spy).toHaveBeenCalledWith({ page: 1, page_size: 5, order_by: 'username' });
-  });
-  test('clicking on row fires callback with correct params', () => {
+
+  test('clicking on row fires callback with correct params', async () => {
     const handleRowClick = jest.fn();
+    const data = {
+      count: 2,
+      results: [
+        { id: 1, username: 'foo', url: 'item/1' },
+        { id: 2, username: 'bar', url: 'item/2' }
+      ]
+    };
     const wrapper = mountWithContexts(
       <SelectResourceStep
         columns={columns}
         displayKey="username"
         onRowClick={handleRowClick}
-        onSearch={() => {}}
+        onSearch={() => ({ data })}
         selectedResourceRows={[]}
         sortedColumnKey="username"
       />
     );
-    const selectResourceStepWrapper = wrapper.find('SelectResourceStep');
-    selectResourceStepWrapper.setState({
-      resources: [
-        { id: 1, username: 'foo' }
-      ]
-    });
+    await sleep(0);
+    wrapper.update();
     const checkboxListItemWrapper = wrapper.find('CheckboxListItem');
-    expect(checkboxListItemWrapper.length).toBe(1);
-    checkboxListItemWrapper.first().find('input[type="checkbox"]').simulate('change', { target: { checked: true } });
-    expect(handleRowClick).toHaveBeenCalledWith({ id: 1, username: 'foo' });
+    expect(checkboxListItemWrapper.length).toBe(2);
+    checkboxListItemWrapper.first().find('input[type="checkbox"]')
+      .simulate('change', { target: { checked: true } });
+    expect(handleRowClick).toHaveBeenCalledWith(data.results[0]);
   });
 });