Merge pull request #157 from keithjgrant/145-org-teams-empty-state

Org teams empty state

__tests__/pages/Organizations/components/OrganizationForm.test.jsx

@@ -4,8 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 import { ConfigContext } from '../../../../src/context';
 import OrganizationForm from '../../../../src/pages/Organizations/components/OrganizationForm';
-
+import { sleep } from '../../../testUtils';
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('<OrganizationForm />', () => {
   let api;

__tests__/pages/Organizations/components/OrganizationTeamsList.test.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { I18nProvider } from '@lingui/react';
-
+import { sleep } from '../../../testUtils';
 import OrganizationTeamsList from '../../../../src/pages/Organizations/components/OrganizationTeamsList';
 
 const mockData = [
-  {
+  { id: 1, name: 'one', url: '/org/team/1' },
-    id: 1,
+  { id: 2, name: 'two', url: '/org/team/2' },
-    name: 'boo',
+  { id: 3, name: 'three', url: '/org/team/3' },
-    url: '/foo/bar/'
+  { id: 4, name: 'four', url: '/org/team/4' },
-  }
+  { id: 5, name: 'five', url: '/org/team/5' },
 ];
 
 describe('<OrganizationTeamsList />', () => {
@@ -23,85 +24,81 @@ describe('<OrganizationTeamsList />', () => {
       <I18nProvider>
         <MemoryRouter>
           <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
+            teams={mockData}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
+            itemCount={7}
-            onReadTeamsList={() => {}}
+            queryParams={{
-            removeRole={() => {}}
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
           />
         </MemoryRouter>
       </I18nProvider>
     );
   });
 
-  test('api response data passed to component gets set to state properly', (done) => {
+  // should navigate when datalisttoolbar changes sorting
-    const wrapper = mount(
+  test('should navigate when DataListToolbar calls onSort prop', async () => {
-      <I18nProvider>
+    const history = createMemoryHistory({
-        <MemoryRouter>
+      initialEntries: ['/organizations/1/teams'],
-          <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationTeamsList');
-
-    setImmediate(() => {
-      expect(wrapper.state().results).toEqual(mockData);
-      done();
     });
+    const wrapper = mount(
+      <Router history={history}>
+        <I18nProvider>
+          <OrganizationTeamsList
+            teams={mockData}
+            itemCount={7}
+            queryParams={{
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
+          />
+        </I18nProvider>
+      </Router>
+    );
+
+    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('handleSort being passed properly to DataListToolbar component', async (done) => {
+  test('should navigate to page when Pagination calls onSetPage prop', () => {
-    const handleSort = jest.spyOn(OrganizationTeamsList.prototype, 'handleSort');
+    const history = createMemoryHistory({
-    const wrapper = mount(
+      initialEntries: ['/organizations/1/teams'],
-      <I18nProvider>
-        <MemoryRouter>
-          <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationTeamsList');
-    expect(handleSort).not.toHaveBeenCalled();
-
-    setImmediate(() => {
-      const rendered = wrapper.update();
-      rendered.find('button[aria-label="Sort"]').simulate('click');
-      expect(handleSort).toHaveBeenCalled();
-      done();
     });
-  });
-
-  test('handleSetPage calls readQueryParams and readOrganizationTeamsList ', () => {
-    const spyQueryParams = jest.spyOn(OrganizationTeamsList.prototype, 'readQueryParams');
-    const spyFetch = jest.spyOn(OrganizationTeamsList.prototype, 'readOrganizationTeamsList');
     const wrapper = mount(
-      <I18nProvider>
+      <Router history={history}>
-        <MemoryRouter>
+        <I18nProvider>
           <OrganizationTeamsList
-            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
+            teams={mockData}
-            location={{ search: '', pathname: '/organizations/1/teams' }}
+            itemCount={7}
-            onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
+            queryParams={{
+              page: 1,
+              page_size: 5,
+              order_by: 'name',
+            }}
           />
-        </MemoryRouter>
+        </I18nProvider>
-      </I18nProvider>
+      </Router>
-    ).find('OrganizationTeamsList');
+    );
-    wrapper.instance().handleSetPage(2, 10);
+
-    expect(spyQueryParams).toHaveBeenCalled();
+    const pagination = wrapper.find('Pagination');
-    expect(spyFetch).toHaveBeenCalled();
+    pagination.prop('onSetPage')(2, 5);
-    wrapper.setState({ sortOrder: 'descending' });
+    expect(history.location.search).toEqual('?page=2&page_size=5');
-    wrapper.instance().handleSetPage(3, 5);
+    wrapper.update();
-    expect(spyQueryParams).toHaveBeenCalled();
+    pagination.prop('onSetPage')(1, 25);
-    expect(spyFetch).toHaveBeenCalled();
+    expect(history.location.search).toEqual('?page=1&page_size=25');
-    const queryParamCalls = spyQueryParams.mock.calls;
-    // make sure last two readQueryParams calls
-    // were called with the correct arguments
-    expect(queryParamCalls[queryParamCalls.length - 2][0])
-      .toEqual({ order_by: 'name', page: 2, page_size: 10 });
-    expect(queryParamCalls[queryParamCalls.length - 1][0])
-      .toEqual({ order_by: '-name', page: 3, page_size: 5 });
   });
 });

__tests__/pages/Organizations/screens/Organization/OrganizationTeams.test.jsx

@@ -1,45 +1,135 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+import { createMemoryHistory } from 'history';
+import { sleep } from '../../../../testUtils';
+import OrganizationTeams, { _OrganizationTeams } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
+import OrganizationTeamsList from '../../../../../src/pages/Organizations/components/OrganizationTeamsList';
 
-import OrganizationTeams from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
+const listData = {
-
+  data: {
-const mockAPITeamsList = {
+    count: 7,
-  foo: 'bar',
+    results: [
+      { 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' },
+    ]
+  }
 };
 
-const readOrganizationTeamsList = () => Promise.resolve(mockAPITeamsList);
-
 describe('<OrganizationTeams />', () => {
-  test('initially renders succesfully', () => {
+  test('renders succesfully', () => {
-    mount(
+    shallow(
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+      <_OrganizationTeams
-        <OrganizationTeams
+        id={1}
-          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
+        searchString=""
-          location={{ search: '', pathname: '/organizations/1/teams' }}
+        location={{ search: '', pathname: '/organizations/1/teams' }}
-          params={{}}
+        api={{
-          api={{
+          readOrganizationTeamsList: jest.fn(),
-            readOrganizationTeamsList: jest.fn(),
+        }}
-          }}
+      />
-        />
-      </MemoryRouter>
     );
   });
 
-  test('passed methods as props are called appropriately', async () => {
+  test('should load teams on mount', () => {
-    const wrapper = mount(
+    const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
-      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+    mount(
-        <OrganizationTeams
+      <I18nProvider>
-          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
+        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          location={{ search: '', pathname: '/organizations/1/teams' }}
+          <OrganizationTeams
-          params={{}}
+            id={1}
-          api={{
+            searchString=""
-            readOrganizationTeamsList
+            api={{ readOrganizationTeamsList }}
-          }}
+          />
-        />
+        </MemoryRouter>
-      </MemoryRouter>
+      </I18nProvider>
     ).find('OrganizationTeams');
-    const teamsList = await wrapper.instance().readOrganizationTeamsList();
+    expect(readOrganizationTeamsList).toHaveBeenCalledWith(1, {
-    expect(teamsList).toEqual(mockAPITeamsList);
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+  });
+
+  test('should pass fetched teams to list component', async () => {
+    const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <OrganizationTeams
+            id={1}
+            searchString=""
+            api={{ readOrganizationTeamsList }}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+
+    await sleep(0);
+    wrapper.update();
+
+    const list = wrapper.find('OrganizationTeamsList');
+    expect(list.prop('teams')).toEqual(listData.data.results);
+    expect(list.prop('itemCount')).toEqual(listData.data.count);
+    expect(list.prop('queryParams')).toEqual({
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+  });
+
+  test('should pass queryParams to OrganizationTeamsList', async () => {
+    const page1Data = listData;
+    const page2Data = {
+      data: {
+        count: 7,
+        results: [
+          { id: 6, name: 'six', url: '/org/team/6' },
+          { id: 7, name: 'seven', url: '/org/team/7' },
+        ]
+      }
+    };
+    const readOrganizationTeamsList = jest.fn();
+    readOrganizationTeamsList.mockReturnValueOnce(page1Data);
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mount(
+      <Router history={history}>
+        <I18nProvider>
+          <OrganizationTeams
+            id={1}
+            searchString=""
+            api={{ readOrganizationTeamsList }}
+          />
+        </I18nProvider>
+      </Router>
+    );
+
+    await sleep(0);
+    wrapper.update();
+
+    const list = wrapper.find(OrganizationTeamsList);
+    expect(list.prop('queryParams')).toEqual({
+      page: 1,
+      page_size: 5,
+      order_by: 'name',
+    });
+
+    readOrganizationTeamsList.mockReturnValueOnce(page2Data);
+    history.push('/organizations/1/teams?page=2');
+    wrapper.setProps({ history });
+
+    await sleep(0);
+    wrapper.update();
+    const list2 = wrapper.find(OrganizationTeamsList);
+    expect(list2.prop('queryParams')).toEqual({
+      page: 2,
+      page_size: 5,
+      order_by: 'name',
+    });
   });
 });

__tests__/testUtils.js

@@ -0,0 +1,4 @@
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+/* eslint-disable-next-line import/prefer-default-export */
+export { sleep };

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
   },
   setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js',
   testMatch: [
-    '<rootDir>/__tests__/**/*.{js,jsx}'
+    '<rootDir>/__tests__/**/*.test.{js,jsx}'
   ],
   testEnvironment: 'jsdom',
   testURL: 'http://127.0.0.1:3001',

package-lock.json

@@ -1015,6 +1015,21 @@
         "@babel/plugin-transform-react-jsx-source": "^7.0.0"
       }
     },
+    "@babel/runtime": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
+      "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.1.2.tgz",
@@ -7043,25 +7058,16 @@
       }
     },
     "history": {
-      "version": "4.7.2",
+      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
-      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
       "requires": {
-        "invariant": "^2.2.1",
+        "@babel/runtime": "^7.1.2",
         "loose-envify": "^1.2.0",
         "resolve-pathname": "^2.2.0",
-        "value-equal": "^0.4.0",
+        "tiny-invariant": "^1.0.2",
-        "warning": "^3.0.0"
+        "tiny-warning": "^1.0.0",
-      },
+        "value-equal": "^0.4.0"
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
       }
     },
     "hmac-drbg": {
@@ -14022,6 +14028,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-invariant": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+    },
     "tiny-warning": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",

package.json

@@ -36,6 +36,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
     "file-loader": "^2.0.0",
+    "history": "^4.9.0",
     "jest": "^23.6.0",
     "node-sass": "^4.9.3",
     "react-hot-loader": "^4.3.3",

src/components/NotificationsList/Notifications.list.jsx

@@ -12,10 +12,7 @@ import DataListToolbar from '../DataListToolbar';
 import NotificationListItem from './NotificationListItem';
 import Pagination from '../Pagination';
 
-import {
+import { parseQueryString } from '../../qs';
-  encodeQueryString,
-  parseQueryString,
-} from '../../qs';
 
 class Notifications extends Component {
   columns = [
@@ -55,7 +52,6 @@ class Notifications extends Component {
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSelectAll = this.handleSelectAll.bind(this);
     this.toggleNotification = this.toggleNotification.bind(this);
-    this.updateUrl = this.updateUrl.bind(this);
     this.createError = this.createError.bind(this);
     this.createSuccess = this.createSuccess.bind(this);
     this.readNotifications = this.readNotifications.bind(this);
@@ -120,16 +116,6 @@ class Notifications extends Component {
     this.handleSort(sortedColumnKey, sortOrder);
   }
 
-  updateUrl (queryParams) {
-    const { history, location, match } = this.props;
-    const pathname = match.url;
-    const search = `?${encodeQueryString(queryParams)}`;
-
-    if (search !== location.search) {
-      history.replace({ pathname, search });
-    }
-  }
-
   async createError (id, isCurrentlyOn) {
     const { onCreateError, match } = this.props;
     const postParams = { id };

src/pages/Organizations/components/OrganizationTeamsList.jsx

@@ -1,24 +1,26 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-
 import {
-  DataList, DataListItem, DataListCell, Text,
+  DataList,
-  TextContent, TextVariants
+  DataListItem,
+  DataListCell,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
 } from '@patternfly/react-core';
-
+import { CubesIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
-
+import { withRouter, Link } from 'react-router-dom';
-import {
-  Link
-} from 'react-router-dom';
 
 import Pagination from '../../../components/Pagination';
 import DataListToolbar from '../../../components/DataListToolbar';
 
-import {
+import { encodeQueryString } from '../../../qs';
-  parseQueryString,
-} from '../../../qs';
 
 const detailWrapperStyle = {
   display: 'grid',
@@ -45,125 +47,55 @@ class OrganizationTeamsList extends React.Component {
   constructor (props) {
     super(props);
 
-    const { page, page_size } = this.readQueryParams();
-
     this.state = {
-      page,
+      error: null,
-      page_size,
-      count: 0,
-      sortOrder: 'ascending',
-      sortedColumnKey: 'name',
-      results: [],
     };
 
-    this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSort = this.handleSort.bind(this);
-    this.readQueryParams = this.readQueryParams.bind(this);
   }
 
-  componentDidMount () {
+  getPageCount () {
-    const queryParams = this.readQueryParams();
+    const { itemCount, queryParams: { page_size } } = this.props;
-    try {
+    return Math.ceil(itemCount / page_size);
-      this.readOrganizationTeamsList(queryParams);
+  }
-    } catch (error) {
+
-      this.setState({ error });
+  getSortOrder () {
+    const { queryParams } = this.props;
+    if (queryParams.order_by && queryParams.order_by.startsWith('-')) {
+      return 'descending';
     }
+    return 'ascending';
   }
 
   handleSetPage (pageNumber, pageSize) {
-    const { sortOrder, sortedColumnKey } = this.state;
+    this.pushHistoryState({
-    const page = parseInt(pageNumber, 10);
+      page: pageNumber,
-    const page_size = parseInt(pageSize, 10);
+      page_size: pageSize,
-    let order_by = sortedColumnKey;
+    });
-
-    // Preserve sort order when paginating
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
-    }
-
-    const queryParams = this.readQueryParams({ page, page_size, order_by });
-
-    this.readOrganizationTeamsList(queryParams);
   }
 
   handleSort (sortedColumnKey, sortOrder) {
-    const { page_size } = this.state;
+    this.pushHistoryState({
-
+      order_by: sortOrder === 'ascending' ? sortedColumnKey : `-${sortedColumnKey}`,
-    let order_by = sortedColumnKey;
+    });
-
-    if (sortOrder === 'descending') {
-      order_by = `-${order_by}`;
-    }
-
-    const queryParams = this.readQueryParams({ order_by, page_size });
-
-    this.readOrganizationTeamsList(queryParams);
   }
 
-  readQueryParams (overrides = {}) {
+  pushHistoryState (params) {
-    const { location } = this.props;
+    const { history } = this.props;
-    const { search } = location;
+    const { pathname } = history.location;
-
+    const qs = encodeQueryString(params);
-    const searchParams = parseQueryString(search.substring(1));
+    history.push(`${pathname}?${qs}`);
-
-    return Object.assign({}, this.defaultParams, searchParams, overrides);
-  }
-
-  async readOrganizationTeamsList (queryParams) {
-    const { match, onReadTeamsList } = this.props;
-
-    const { page, page_size, order_by } = queryParams;
-
-    let sortOrder = 'ascending';
-    let sortedColumnKey = order_by;
-
-    if (order_by.startsWith('-')) {
-      sortOrder = 'descending';
-      sortedColumnKey = order_by.substring(1);
-    }
-
-    try {
-      const { data:
-        { count = 0, results = [] }
-      } = await onReadTeamsList(match.params.id, queryParams);
-      const pageCount = Math.ceil(count / page_size);
-
-      const stateToUpdate = {
-        count,
-        page,
-        pageCount,
-        page_size,
-        sortOrder,
-        sortedColumnKey,
-        results
-      };
-
-      this.setState(stateToUpdate);
-    } catch (error) {
-      this.setState({ error });
-    }
   }
 
   render () {
-    const {
+    const { teams, itemCount, queryParams } = this.props;
-      results,
+    const { error } = this.state;
-      error,
-      count,
-      page_size,
-      pageCount,
-      page,
-      sortedColumnKey,
-      sortOrder
-    } = this.state;
     return (
       <I18n>
         {({ i18n }) => (
           <Fragment>
-            {!error && results.length <= 0 && (
+            {error && (
-              <h1>Loading...</h1> // TODO: replace with proper loading state
-            )}
-            {error && results.length <= 0 && (
               <Fragment>
                 <div>{error.message}</div>
                 {error.response && (
@@ -171,17 +103,27 @@ class OrganizationTeamsList extends React.Component {
                 )}
               </Fragment> // TODO: replace with proper error handling
             )}
-            {results.length > 0 && (
+            {teams.length === 0 ? (
+              <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title size="lg">
+                  <Trans>No Teams Found</Trans>
+                </Title>
+                <EmptyStateBody>
+                  <Trans>Please add a team to populate this list</Trans>
+                </EmptyStateBody>
+              </EmptyState>
+            ) : (
               <Fragment>
                 <DataListToolbar
-                  sortedColumnKey={sortedColumnKey}
+                  sortedColumnKey={queryParams.sort_by}
-                  sortOrder={sortOrder}
+                  sortOrder={this.getSortOrder()}
                   columns={this.columns}
                   onSearch={() => { }}
                   onSort={this.handleSort}
                 />
                 <DataList aria-label={i18n._(t`Teams List`)}>
-                  {results.map(({ url, id, name }) => (
+                  {teams.map(({ url, id, name }) => (
                     <DataListItem aria-labelledby={i18n._(t`teams-list-item`)} key={id}>
                       <DataListCell>
                         <TextContent style={detailWrapperStyle}>
@@ -194,10 +136,10 @@ class OrganizationTeamsList extends React.Component {
                   ))}
                 </DataList>
                 <Pagination
-                  count={count}
+                  count={itemCount}
-                  page={page}
+                  page={queryParams.page}
-                  pageCount={pageCount}
+                  pageCount={this.getPageCount()}
-                  page_size={page_size}
+                  page_size={queryParams.page_size}
                   onSetPage={this.handleSetPage}
                 />
               </Fragment>
@@ -209,8 +151,23 @@ class OrganizationTeamsList extends React.Component {
   }
 }
 
+const Item = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  url: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+});
+
+const QueryParams = PropTypes.shape({
+  page: PropTypes.number,
+  page_size: PropTypes.number,
+  order_by: PropTypes.string,
+});
+
 OrganizationTeamsList.propTypes = {
-  onReadTeamsList: PropTypes.func.isRequired,
+  teams: PropTypes.arrayOf(Item).isRequired,
+  itemCount: PropTypes.number.isRequired,
+  queryParams: QueryParams.isRequired
 };
 
-export default OrganizationTeamsList;
+export { OrganizationTeamsList as _OrganizationTeamsList };
+export default withRouter(OrganizationTeamsList);

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -159,10 +159,8 @@ class Organization extends Component {
               path="/organizations/:id/teams"
               render={() => (
                 <OrganizationTeams
+                  id={Number(match.params.id)}
                   api={api}
-                  match={match}
-                  location={location}
-                  history={history}
                 />
               )}
             />

src/pages/Organizations/screens/Organization/OrganizationTeams.jsx

@@ -1,34 +1,102 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 import OrganizationTeamsList from '../../components/OrganizationTeamsList';
+import { parseQueryString } from '../../../../qs';
+
+const DEFAULT_QUERY_PARAMS = {
+  page: 1,
+  page_size: 5,
+  order_by: 'name',
+};
 
 class OrganizationTeams extends React.Component {
   constructor (props) {
     super(props);
 
     this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
+
+    this.state = {
+      isInitialized: false,
+      isLoading: false,
+      error: null,
+      itemCount: 0,
+      teams: [],
+    };
   }
 
-  readOrganizationTeamsList (id, params) {
+  componentDidMount () {
-    const { api } = this.props;
+    this.readOrganizationTeamsList();
-    return api.readOrganizationTeamsList(id, params);
+  }
+
+  componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      this.readOrganizationTeamsList();
+    }
+  }
+
+  getQueryParams () {
+    const { location } = this.props;
+    const searchParams = parseQueryString(location.search.substring(1));
+
+    return {
+      ...DEFAULT_QUERY_PARAMS,
+      ...searchParams,
+    };
+  }
+
+  async readOrganizationTeamsList () {
+    const { api, id } = this.props;
+    const params = this.getQueryParams();
+    this.setState({ isLoading: true });
+    try {
+      const {
+        data: { count = 0, results = [] },
+      } = await api.readOrganizationTeamsList(id, params);
+      this.setState({
+        itemCount: count,
+        teams: results,
+        isLoading: false,
+        isInitialized: true,
+      });
+    } catch (error) {
+      this.setState({
+        error,
+        isLoading: false,
+        isInitialized: true,
+      });
+    }
   }
 
   render () {
-    const {
+    const { teams, itemCount, isLoading, isInitialized, error } = this.state;
-      location,
-      match,
-      history,
-    } = this.props;
 
+    if (error) {
+      // TODO: better error state
+      return <div>{error.message}</div>;
+    }
+
+    // TODO: better loading state
     return (
-      <OrganizationTeamsList
+      <Fragment>
-        onReadTeamsList={this.readOrganizationTeamsList}
+        {isLoading && (<div>Loading...</div>)}
-        match={match}
+        {isInitialized && (
-        location={location}
+          <OrganizationTeamsList
-        history={history}
+            teams={teams}
-      />
+            itemCount={itemCount}
+            queryParams={this.getQueryParams()}
+          />
+        )}
+      </Fragment>
     );
   }
 }
 
-export default OrganizationTeams;
+OrganizationTeams.propTypes = {
+  id: PropTypes.number.isRequired,
+  api: PropTypes.shape().isRequired,
+};
+
+export { OrganizationTeams as _OrganizationTeams };
+export default withRouter(OrganizationTeams);