Merge pull request #136 from jlmitch5/addOrgTeamsList

add org teams list

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+
+import OrganizationTeamsList from '../../../../src/pages/Organizations/components/OrganizationTeamsList';
+
+const mockData = [
+  {
+    id: 1,
+    name: 'boo',
+    url: '/foo/bar/'
+  }
+];
+
+describe('<OrganizationTeamsList />', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('initially renders succesfully', () => {
+    mount(
+      <I18nProvider>
+        <MemoryRouter>
+          <OrganizationTeamsList
+            match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
+            location={{ search: '', pathname: '/organizations/1/teams' }}
+            onReadTeamsList={() => {}}
+            removeRole={() => {}}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+  });
+
+  test('api response data passed to component gets set to state properly', (done) => {
+    const wrapper = mount(
+      <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');
+
+    setImmediate(() => {
+      expect(wrapper.state().results).toEqual(mockData);
+      done();
+    });
+  });
+
+  test('handleSort being passed properly to DataListToolbar component', async (done) => {
+    const handleSort = jest.spyOn(OrganizationTeamsList.prototype, 'handleSort');
+    const wrapper = mount(
+      <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>
+        <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');
+    wrapper.instance().handleSetPage(2, 10);
+    expect(spyQueryParams).toHaveBeenCalled();
+    expect(spyFetch).toHaveBeenCalled();
+    wrapper.setState({ sortOrder: 'descending' });
+    wrapper.instance().handleSetPage(3, 5);
+    expect(spyQueryParams).toHaveBeenCalled();
+    expect(spyFetch).toHaveBeenCalled();
+    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/OrganizationAccess.test.jsx

@@ -8,7 +8,7 @@ const mockAPIAccessList = {
   foo: 'bar',
 };
 
-const mockGetOrganzationAccessList = () => Promise.resolve(mockAPIAccessList);
+const mockGetOrganizationAccessList = () => Promise.resolve(mockAPIAccessList);
 
 const mockResponse = {
   status: 'success',
@@ -25,7 +25,7 @@ describe('<OrganizationAccess />', () => {
           location={{ search: '', pathname: '/organizations/1/access' }}
           params={{}}
           api={{
-            getOrganzationAccessList: jest.fn(),
+            getOrganizationAccessList: jest.fn(),
           }}
         />
       </MemoryRouter>
@@ -40,7 +40,7 @@ describe('<OrganizationAccess />', () => {
           location={{ search: '', pathname: '/organizations/1/access' }}
           params={{}}
           api={{
-            getOrganzationAccessList: mockGetOrganzationAccessList,
+            getOrganizationAccessList: mockGetOrganizationAccessList,
             disassociate: mockRemoveRole
           }}
         />

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+
+import OrganizationTeams from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
+
+const mockAPITeamsList = {
+  foo: 'bar',
+};
+
+const readOrganizationTeamsList = () => Promise.resolve(mockAPITeamsList);
+
+describe('<OrganizationTeams />', () => {
+  test('initially renders succesfully', () => {
+    mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationTeams
+          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
+          location={{ search: '', pathname: '/organizations/1/teams' }}
+          params={{}}
+          api={{
+            readOrganizationTeamsList: jest.fn(),
+          }}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  test('passed methods as props are called appropriately', async () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+        <OrganizationTeams
+          match={{ path: '/organizations/:id/teams', url: '/organizations/1/teams', params: { id: 1 } }}
+          location={{ search: '', pathname: '/organizations/1/teams' }}
+          params={{}}
+          api={{
+            readOrganizationTeamsList
+          }}
+        />
+      </MemoryRouter>
+    ).find('OrganizationTeams');
+    const teamsList = await wrapper.instance().readOrganizationTeamsList();
+    expect(teamsList).toEqual(mockAPITeamsList);
+  });
+});

src/api.js

@@ -64,12 +64,18 @@ class APIClient {
     return this.http.post(API_ORGANIZATIONS, data);
   }
 
-  getOrganzationAccessList (id, params = {}) {
+  getOrganizationAccessList (id, params = {}) {
     const endpoint = `${API_ORGANIZATIONS}${id}/access_list/`;
 
     return this.http.get(endpoint, { params });
   }
 
+  readOrganizationTeamsList (id, params = {}) {
+    const endpoint = `${API_ORGANIZATIONS}${id}/teams/`;
+
+    return this.http.get(endpoint, { params });
+  }
+
   getOrganizationDetails (id) {
     const endpoint = `${API_ORGANIZATIONS}${id}/`;
 

src/pages/Organizations/components/OrganizationTeamsList.jsx

@@ -0,0 +1,216 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  DataList, DataListItem, DataListCell, Text,
+  TextContent, TextVariants
+} from '@patternfly/react-core';
+
+import { I18n, i18nMark } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import {
+  Link
+} from 'react-router-dom';
+
+import Pagination from '../../../components/Pagination';
+import DataListToolbar from '../../../components/DataListToolbar';
+
+import {
+  parseQueryString,
+} from '../../../qs';
+
+const detailWrapperStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'minmax(70px, max-content) minmax(60px, max-content)',
+};
+
+const detailLabelStyle = {
+  fontWeight: '700',
+  lineHeight: '24px',
+  marginRight: '20px',
+};
+
+class OrganizationTeamsList extends React.Component {
+  columns = [
+    { name: i18nMark('Name'), key: 'name', isSortable: true },
+  ];
+
+  defaultParams = {
+    page: 1,
+    page_size: 5,
+    order_by: 'name',
+  };
+
+  constructor (props) {
+    super(props);
+
+    const { page, page_size } = this.readQueryParams();
+
+    this.state = {
+      page,
+      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 () {
+    const queryParams = this.readQueryParams();
+    try {
+      this.readOrganizationTeamsList(queryParams);
+    } catch (error) {
+      this.setState({ error });
+    }
+  }
+
+  handleSetPage (pageNumber, pageSize) {
+    const { sortOrder, sortedColumnKey } = this.state;
+    const page = parseInt(pageNumber, 10);
+    const page_size = parseInt(pageSize, 10);
+    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;
+
+    let order_by = sortedColumnKey;
+
+    if (sortOrder === 'descending') {
+      order_by = `-${order_by}`;
+    }
+
+    const queryParams = this.readQueryParams({ order_by, page_size });
+
+    this.readOrganizationTeamsList(queryParams);
+  }
+
+  readQueryParams (overrides = {}) {
+    const { location } = this.props;
+    const { search } = location;
+
+    const searchParams = parseQueryString(search.substring(1));
+
+    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 {
+      results,
+      error,
+      count,
+      page_size,
+      pageCount,
+      page,
+      sortedColumnKey,
+      sortOrder
+    } = this.state;
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <Fragment>
+            {!error && results.length <= 0 && (
+              <h1>Loading...</h1> // TODO: replace with proper loading state
+            )}
+            {error && results.length <= 0 && (
+              <Fragment>
+                <div>{error.message}</div>
+                {error.response && (
+                  <div>{error.response.data.detail}</div>
+                )}
+              </Fragment> // TODO: replace with proper error handling
+            )}
+            {results.length > 0 && (
+              <Fragment>
+                <DataListToolbar
+                  sortedColumnKey={sortedColumnKey}
+                  sortOrder={sortOrder}
+                  columns={this.columns}
+                  onSearch={() => { }}
+                  onSort={this.handleSort}
+                />
+                <DataList aria-label={i18n._(t`Teams List`)}>
+                  {results.map(({ url, id, name }) => (
+                    <DataListItem aria-labelledby={i18n._(t`teams-list-item`)} key={id}>
+                      <DataListCell>
+                        <TextContent style={detailWrapperStyle}>
+                          <Link to={{ pathname: url }}>
+                            <Text component={TextVariants.h6} style={detailLabelStyle}>{name}</Text>
+                          </Link>
+                        </TextContent>
+                      </DataListCell>
+                    </DataListItem>
+                  ))}
+                </DataList>
+                <Pagination
+                  count={count}
+                  page={page}
+                  pageCount={pageCount}
+                  page_size={page_size}
+                  onSetPage={this.handleSetPage}
+                />
+              </Fragment>
+            )}
+          </Fragment>
+        )}
+      </I18n>
+    );
+  }
+}
+
+OrganizationTeamsList.propTypes = {
+  onReadTeamsList: PropTypes.func.isRequired,
+};
+
+export default OrganizationTeamsList;

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { I18n, i18nMark } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   Switch,
   Route,
@@ -9,7 +9,6 @@ import {
 } from 'react-router-dom';
 import {
   Card,
-  CardBody,
   CardHeader,
   PageSection
 } from '@patternfly/react-core';
@@ -18,6 +17,7 @@ import OrganizationAccess from './OrganizationAccess';
 import OrganizationDetail from './OrganizationDetail';
 import OrganizationEdit from './OrganizationEdit';
 import OrganizationNotifications from './OrganizationNotifications';
+import OrganizationTeams from './OrganizationTeams';
 import Tabs from '../../../../components/Tabs/Tabs';
 import Tab from '../../../../components/Tabs/Tab';
 
@@ -157,7 +157,14 @@ class Organization extends Component {
             />
             <Route
               path="/organizations/:id/teams"
-              render={() => <CardBody><h1><Trans>Teams</Trans></h1></CardBody>}
+              render={() => (
+                <OrganizationTeams
+                  api={api}
+                  match={match}
+                  location={location}
+                  history={history}
+                />
+              )}
             />
             <Route
               path="/organizations/:id/notifications"

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

@@ -11,7 +11,7 @@ class OrganizationAccess extends React.Component {
 
   getOrgAccessList (id, params) {
     const { api } = this.props;
-    return api.getOrganzationAccessList(id, params);
+    return api.getOrganizationAccessList(id, params);
   }
 
   removeRole (url, id) {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import OrganizationTeamsList from '../../components/OrganizationTeamsList';
+
+class OrganizationTeams extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.readOrganizationTeamsList = this.readOrganizationTeamsList.bind(this);
+  }
+
+  readOrganizationTeamsList (id, params) {
+    const { api } = this.props;
+    return api.readOrganizationTeamsList(id, params);
+  }
+
+  render () {
+    const {
+      location,
+      match,
+      history,
+    } = this.props;
+
+    return (
+      <OrganizationTeamsList
+        onReadTeamsList={this.readOrganizationTeamsList}
+        match={match}
+        location={location}
+        history={history}
+      />
+    );
+  }
+}
+
+export default OrganizationTeams;