mirror of
https://github.com/ansible/awx.git
synced 2026-03-13 23:17:32 -02:30
Merge pull request #157 from keithjgrant/145-org-teams-empty-state
Org teams empty state
This commit is contained in:
Keith Grant
GitHub
@@ -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';
|
||||
|
||||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
import { sleep } from '../../../testUtils';
|
||||
|
||||
describe('<OrganizationForm />', () => {
|
||||
let api;
|
||||
|
||||
@@ -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: 'boo',
|
||||
url: '/foo/bar/'
|
||||
}
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
describe('<OrganizationTeamsList />', () => {
|
||||
@@ -23,85 +24,81 @@ describe('<OrganizationTeamsList />', () => {
|
||||
<I18nProvider>
|
||||
<MemoryRouter>
|
||||
<OrganizationTeamsList
|
||||
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '1' } }}
|
||||
location={{ search: '', pathname: '/organizations/1/teams' }}
|
||||
onReadTeamsList={() => {}}
|
||||
removeRole={() => {}}
|
||||
teams={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
}}
|
||||
/>
|
||||
</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();
|
||||
// should navigate when datalisttoolbar changes sorting
|
||||
test('should navigate when DataListToolbar calls onSort prop', async () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
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) => {
|
||||
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('should navigate to page when Pagination calls onSetPage prop', () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
});
|
||||
|
||||
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>
|
||||
<Router history={history}>
|
||||
<I18nProvider>
|
||||
<OrganizationTeamsList
|
||||
match={{ path: '/organizations/:id', url: '/organizations/1', params: { id: '0' } }}
|
||||
location={{ search: '', pathname: '/organizations/1/teams' }}
|
||||
onReadTeamsList={() => ({ data: { count: 1, results: mockData } })}
|
||||
teams={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
}}
|
||||
/>
|
||||
</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 });
|
||||
</I18nProvider>
|
||||
</Router>
|
||||
);
|
||||
|
||||
const pagination = wrapper.find('Pagination');
|
||||
pagination.prop('onSetPage')(2, 5);
|
||||
expect(history.location.search).toEqual('?page=2&page_size=5');
|
||||
wrapper.update();
|
||||
pagination.prop('onSetPage')(1, 25);
|
||||
expect(history.location.search).toEqual('?page=1&page_size=25');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,45 +1,135 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
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 mockAPITeamsList = {
|
||||
foo: 'bar',
|
||||
const listData = {
|
||||
data: {
|
||||
count: 7,
|
||||
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', () => {
|
||||
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('renders succesfully', () => {
|
||||
shallow(
|
||||
<_OrganizationTeams
|
||||
id={1}
|
||||
searchString=""
|
||||
location={{ search: '', pathname: '/organizations/1/teams' }}
|
||||
api={{
|
||||
readOrganizationTeamsList: jest.fn(),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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>
|
||||
test('should load teams on mount', () => {
|
||||
const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
|
||||
mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationTeams
|
||||
id={1}
|
||||
searchString=""
|
||||
api={{ readOrganizationTeamsList }}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationTeams');
|
||||
const teamsList = await wrapper.instance().readOrganizationTeamsList();
|
||||
expect(teamsList).toEqual(mockAPITeamsList);
|
||||
expect(readOrganizationTeamsList).toHaveBeenCalledWith(1, {
|
||||
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',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
4
__tests__/testUtils.js
Normal file
4
__tests__/testUtils.js
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
/* eslint-disable-next-line import/prefer-default-export */
|
||||
export { sleep };
|
||||
@@ -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',
|
||||
|
||||
43
package-lock.json
generated
43
package-lock.json
generated
@@ -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",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
|
||||
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
|
||||
"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",
|
||||
"warning": "^3.0.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"
|
||||
}
|
||||
}
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^0.4.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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -12,10 +12,7 @@ import DataListToolbar from '../DataListToolbar';
|
||||
import NotificationListItem from './NotificationListItem';
|
||||
import Pagination from '../Pagination';
|
||||
|
||||
import {
|
||||
encodeQueryString,
|
||||
parseQueryString,
|
||||
} from '../../qs';
|
||||
import { 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 };
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
DataList, DataListItem, DataListCell, Text,
|
||||
TextContent, TextVariants
|
||||
DataList,
|
||||
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 {
|
||||
Link
|
||||
} from 'react-router-dom';
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import { withRouter, Link } from 'react-router-dom';
|
||||
|
||||
import Pagination from '../../../components/Pagination';
|
||||
import DataListToolbar from '../../../components/DataListToolbar';
|
||||
|
||||
import {
|
||||
parseQueryString,
|
||||
} from '../../../qs';
|
||||
import { encodeQueryString } 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,
|
||||
page_size,
|
||||
count: 0,
|
||||
sortOrder: 'ascending',
|
||||
sortedColumnKey: 'name',
|
||||
results: [],
|
||||
error: null,
|
||||
};
|
||||
|
||||
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 });
|
||||
getPageCount () {
|
||||
const { itemCount, queryParams: { page_size } } = this.props;
|
||||
return Math.ceil(itemCount / page_size);
|
||||
}
|
||||
|
||||
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;
|
||||
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);
|
||||
this.pushHistoryState({
|
||||
page: pageNumber,
|
||||
page_size: pageSize,
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
this.pushHistoryState({
|
||||
order_by: sortOrder === 'ascending' ? sortedColumnKey : `-${sortedColumnKey}`,
|
||||
});
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
pushHistoryState (params) {
|
||||
const { history } = this.props;
|
||||
const { pathname } = history.location;
|
||||
const qs = encodeQueryString(params);
|
||||
history.push(`${pathname}?${qs}`);
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
results,
|
||||
error,
|
||||
count,
|
||||
page_size,
|
||||
pageCount,
|
||||
page,
|
||||
sortedColumnKey,
|
||||
sortOrder
|
||||
} = this.state;
|
||||
const { teams, itemCount, queryParams } = this.props;
|
||||
const { error } = this.state;
|
||||
return (
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Fragment>
|
||||
{!error && results.length <= 0 && (
|
||||
<h1>Loading...</h1> // TODO: replace with proper loading state
|
||||
)}
|
||||
{error && results.length <= 0 && (
|
||||
{error && (
|
||||
<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}
|
||||
sortOrder={sortOrder}
|
||||
sortedColumnKey={queryParams.sort_by}
|
||||
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}
|
||||
page={page}
|
||||
pageCount={pageCount}
|
||||
page_size={page_size}
|
||||
count={itemCount}
|
||||
page={queryParams.page}
|
||||
pageCount={this.getPageCount()}
|
||||
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);
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -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) {
|
||||
const { api } = this.props;
|
||||
return api.readOrganizationTeamsList(id, params);
|
||||
componentDidMount () {
|
||||
this.readOrganizationTeamsList();
|
||||
}
|
||||
|
||||
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 {
|
||||
location,
|
||||
match,
|
||||
history,
|
||||
} = this.props;
|
||||
const { teams, itemCount, isLoading, isInitialized, error } = this.state;
|
||||
|
||||
if (error) {
|
||||
// TODO: better error state
|
||||
return <div>{error.message}</div>;
|
||||
}
|
||||
|
||||
// TODO: better loading state
|
||||
return (
|
||||
<OrganizationTeamsList
|
||||
onReadTeamsList={this.readOrganizationTeamsList}
|
||||
match={match}
|
||||
location={location}
|
||||
history={history}
|
||||
/>
|
||||
<Fragment>
|
||||
{isLoading && (<div>Loading...</div>)}
|
||||
{isInitialized && (
|
||||
<OrganizationTeamsList
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user