mirror of
https://github.com/ansible/awx.git
synced 2026-02-17 03:00:04 -03:30
Merge pull request #157 from keithjgrant/145-org-teams-empty-state
Org teams empty state
This commit is contained in:
@@ -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