External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-20 20:50:06 -03:30
Code Issues Packages Projects Releases Wiki Activity

prefix content error and loading booleans with 'has'

Browse Source
This commit is contained in:
Jake McDermott
2019-06-20 14:37:46 -04:00
parent b21e491075
commit 36d2d03bc7
14 changed files with 125 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/PaginatedDataList/PaginatedDataList.jsx
View File

@@ -72,8 +72,8 @@ class PaginatedDataList extends React.Component {
render () { render () {
const [orderBy, sortOrder] = this.getSortOrder(); const [orderBy, sortOrder] = this.getSortOrder();
const { const {
contentError, hasContentError,
contentLoading, hasContentLoading,
emptyStateControls, emptyStateControls,
items, items,
itemCount, itemCount,
@@ -98,9 +98,9 @@ class PaginatedDataList extends React.Component {
const emptyContentTitle = i18n._(t`No ${itemDisplayNamePlural} Found `); const emptyContentTitle = i18n._(t`No ${itemDisplayNamePlural} Found `);
let Content; let Content;
if (contentLoading && items.length <= 0) { if (hasContentLoading && items.length <= 0) {
Content = (<ContentLoading />); Content = (<ContentLoading />);
} else if (contentError) { } else if (hasContentError) {
Content = (<ContentError />); Content = (<ContentError />);
} else if (items.length <= 0) { } else if (items.length <= 0) {
Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />); Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
@@ -173,13 +173,13 @@ PaginatedDataList.propTypes = {
})), })),
showPageSizeOptions: PropTypes.bool, showPageSizeOptions: PropTypes.bool,
renderToolbar: PropTypes.func, renderToolbar: PropTypes.func,
contentLoading: PropTypes.bool, hasContentLoading: PropTypes.bool,
contentError: PropTypes.bool, hasContentError: PropTypes.bool,
}; };
PaginatedDataList.defaultProps = { PaginatedDataList.defaultProps = {
contentLoading: false, hasContentLoading: false,
contentError: false, hasContentError: false,
toolbarColumns: [], toolbarColumns: [],
itemName: 'item', itemName: 'item',
itemNamePlural: '', itemNamePlural: '',

16
src/screens/Job/Job.jsx
View File

@@ -19,8 +19,8 @@ export class Job extends Component {
this.state = { this.state = {
job: null, job: null,
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
isInitialized: false isInitialized: false
}; };
@@ -46,15 +46,15 @@ export class Job extends Component {
} = this.props; } = this.props;
const id = parseInt(match.params.id, 10); const id = parseInt(match.params.id, 10);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const { data } = await JobsAPI.readDetail(id); const { data } = await JobsAPI.readDetail(id);
setBreadcrumb(data); setBreadcrumb(data);
this.setState({ job: data }); this.setState({ job: data });
} catch (error) { } catch (error) {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -67,8 +67,8 @@ export class Job extends Component {
const { const {
job, job,
contentError, hasContentError,
contentLoading, hasContentLoading,
isInitialized isInitialized
} = this.state; } = this.state;
@@ -103,7 +103,7 @@ export class Job extends Component {
cardHeader = null; cardHeader = null;
} }
if (!contentLoading && contentError) { if (!hasContentLoading && hasContentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card className="awx-c-card">

22
src/screens/Organization/Organization.jsx
View File

@@ -22,8 +22,8 @@ class Organization extends Component {
this.state = { this.state = {
organization: null, organization: null,
contentLoading: true, hasContentLoading: true,
contentError: false, hasContentError: false,
isInitialized: false, isInitialized: false,
isNotifAdmin: false, isNotifAdmin: false,
isAuditorOfThisOrg: false, isAuditorOfThisOrg: false,
@@ -52,7 +52,7 @@ class Organization extends Component {
} = this.props; } = this.props;
const id = parseInt(match.params.id, 10); const id = parseInt(match.params.id, 10);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([ const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([
OrganizationsAPI.readDetail(id), OrganizationsAPI.readDetail(id),
@@ -68,9 +68,9 @@ class Organization extends Component {
isAdminOfThisOrg: adminRes.data.results.length > 0 isAdminOfThisOrg: adminRes.data.results.length > 0
}); });
} catch (err) { } catch (err) {
this.setState(({ contentError: true })); this.setState(({ hasContentError: true }));
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -81,15 +81,15 @@ class Organization extends Component {
} = this.props; } = this.props;
const id = parseInt(match.params.id, 10); const id = parseInt(match.params.id, 10);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const { data } = await OrganizationsAPI.readDetail(id); const { data } = await OrganizationsAPI.readDetail(id);
setBreadcrumb(data); setBreadcrumb(data);
this.setState({ organization: data }); this.setState({ organization: data });
} catch (err) { } catch (err) {
this.setState(({ contentError: true })); this.setState(({ hasContentError: true }));
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -104,8 +104,8 @@ class Organization extends Component {
const { const {
organization, organization,
contentError, hasContentError,
contentLoading, hasContentLoading,
isInitialized, isInitialized,
isNotifAdmin, isNotifAdmin,
isAuditorOfThisOrg, isAuditorOfThisOrg,
@@ -163,7 +163,7 @@ class Organization extends Component {
cardHeader = null; cardHeader = null;
} }
if (!contentLoading && contentError) { if (!hasContentLoading && hasContentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card className="awx-c-card">

34
src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
View File

@@ -33,9 +33,9 @@ class OrganizationAccess extends React.Component {
super(props); super(props);
this.state = { this.state = {
accessRecords: [], accessRecords: [],
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
deletionError: false, hasDeletionError: false,
deletionRecord: null, deletionRecord: null,
deletionRole: null, deletionRole: null,
isAddModalOpen: false, isAddModalOpen: false,
@@ -70,7 +70,7 @@ class OrganizationAccess extends React.Component {
const { organization, location } = this.props; const { organization, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search); const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const { const {
data: { data: {
@@ -80,9 +80,9 @@ class OrganizationAccess extends React.Component {
} = await OrganizationsAPI.readAccessList(organization.id, params); } = await OrganizationsAPI.readAccessList(organization.id, params);
this.setState({ itemCount, accessRecords }); this.setState({ itemCount, accessRecords });
} catch (error) { } catch (error) {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -96,7 +96,7 @@ class OrganizationAccess extends React.Component {
handleDeleteErrorClose () { handleDeleteErrorClose () {
this.setState({ this.setState({
deletionError: false, hasDeletionError: false,
deletionRecord: null, deletionRecord: null,
deletionRole: null deletionRole: null
}); });
@@ -116,7 +116,7 @@ class OrganizationAccess extends React.Component {
promise = UsersAPI.disassociateRole(deletionRecord.id, deletionRole.id); promise = UsersAPI.disassociateRole(deletionRecord.id, deletionRole.id);
} }
this.setState({ contentLoading: true }); this.setState({ hasContentLoading: true });
try { try {
await promise.then(this.loadAccessList); await promise.then(this.loadAccessList);
this.setState({ this.setState({
@@ -125,8 +125,8 @@ class OrganizationAccess extends React.Component {
}); });
} catch (error) { } catch (error) {
this.setState({ this.setState({
contentLoading: false, hasContentLoading: false,
deletionError: true hasDeletionError: true
}); });
} }
} }
@@ -148,22 +148,22 @@ class OrganizationAccess extends React.Component {
const { organization, i18n } = this.props; const { organization, i18n } = this.props;
const { const {
accessRecords, accessRecords,
contentError, hasContentError,
contentLoading, hasContentLoading,
deletionRole, deletionRole,
deletionRecord, deletionRecord,
deletionError, hasDeletionError,
itemCount, itemCount,
isAddModalOpen, isAddModalOpen,
} = this.state; } = this.state;
const canEdit = organization.summary_fields.user_capabilities.edit; const canEdit = organization.summary_fields.user_capabilities.edit;
const isDeleteModalOpen = !contentLoading && !deletionError && deletionRole; const isDeleteModalOpen = !hasContentLoading && !hasDeletionError && deletionRole;
return ( return (
<Fragment> <Fragment>
<PaginatedDataList <PaginatedDataList
contentError={contentError} hasContentError={hasContentError}
contentLoading={contentLoading} hasContentLoading={hasContentLoading}
items={accessRecords} items={accessRecords}
itemCount={itemCount} itemCount={itemCount}
itemName="role" itemName="role"
@@ -205,7 +205,7 @@ class OrganizationAccess extends React.Component {
/> />
)} )}
<AlertModal <AlertModal
isOpen={deletionError} isOpen={hasDeletionError}
variant="danger" variant="danger"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}

4
src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
View File

@@ -83,8 +83,8 @@ describe('<OrganizationAccess />', () => {
const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />); const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2); await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results); expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
expect(wrapper.find('OrganizationAccess').state('contentLoading')).toBe(false); expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(false);
expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(false); expect(wrapper.find('OrganizationAccess').state('hasContentError')).toBe(false);
done(); done();
}); });

12
src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap
View File

@@ -34,8 +34,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
} }
> >
<WithI18n <WithI18n
contentError={false} hasContentError={false}
contentLoading={true} hasContentLoading={true}
itemCount={0} itemCount={0}
itemName="role" itemName="role"
items={Array []} items={Array []}
@@ -80,8 +80,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
withHash={true} withHash={true}
> >
<withRouter(PaginatedDataList) <withRouter(PaginatedDataList)
contentError={false} hasContentError={false}
contentLoading={true} hasContentLoading={true}
i18n={"/i18n/"} i18n={"/i18n/"}
itemCount={0} itemCount={0}
itemName="role" itemName="role"
@@ -124,8 +124,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
> >
<Route> <Route>
<PaginatedDataList <PaginatedDataList
contentError={false} hasContentError={false}
contentLoading={true} hasContentLoading={true}
history={"/history/"} history={"/history/"}
i18n={"/i18n/"} i18n={"/i18n/"}
itemCount={0} itemCount={0}

18
src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
View File

@@ -20,8 +20,8 @@ class OrganizationDetail extends Component {
super(props); super(props);
this.state = { this.state = {
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
instanceGroups: [], instanceGroups: [],
}; };
this.loadInstanceGroups = this.loadInstanceGroups.bind(this); this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
@@ -34,21 +34,21 @@ class OrganizationDetail extends Component {
async loadInstanceGroups () { async loadInstanceGroups () {
const { match: { params: { id } } } = this.props; const { match: { params: { id } } } = this.props;
this.setState({ contentLoading: true }); this.setState({ hasContentLoading: true });
try { try {
const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id); const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id);
this.setState({ instanceGroups: [...results] }); this.setState({ instanceGroups: [...results] });
} catch (err) { } catch (err) {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
render () { render () {
const { const {
contentLoading, hasContentLoading,
contentError, hasContentError,
instanceGroups, instanceGroups,
} = this.state; } = this.state;
@@ -66,11 +66,11 @@ class OrganizationDetail extends Component {
i18n i18n
} = this.props; } = this.props;
if (contentLoading) { if (hasContentLoading) {
return (<ContentLoading />); return (<ContentLoading />);
} }
if (contentError) { if (hasContentError) {
return (<ContentError />); return (<ContentError />);
} }

30
src/screens/Organization/OrganizationList/OrganizationList.jsx
View File

@@ -30,9 +30,9 @@ class OrganizationsList extends Component {
super(props); super(props);
this.state = { this.state = {
contentLoading: true, hasContentLoading: true,
contentError: false, hasContentError: false,
deletionError: false, hasDeletionError: false,
organizations: [], organizations: [],
selected: [], selected: [],
itemCount: 0, itemCount: 0,
@@ -75,17 +75,17 @@ class OrganizationsList extends Component {
} }
handleDeleteErrorClose () { handleDeleteErrorClose () {
this.setState({ deletionError: false }); this.setState({ hasDeletionError: false });
} }
async handleOrgDelete () { async handleOrgDelete () {
const { selected } = this.state; const { selected } = this.state;
this.setState({ contentLoading: true, deletionError: false }); this.setState({ hasContentLoading: true, hasDeletionError: false });
try { try {
await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id))); await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
} catch (err) { } catch (err) {
this.setState({ deletionError: true }); this.setState({ hasDeletionError: true });
} finally { } finally {
await this.loadOrganizations(); await this.loadOrganizations();
} }
@@ -108,7 +108,7 @@ class OrganizationsList extends Component {
optionsPromise, optionsPromise,
]); ]);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const [{ data: { count, results } }, { data: { actions } }] = await promises; const [{ data: { count, results } }, { data: { actions } }] = await promises;
this.setState({ this.setState({
@@ -118,9 +118,9 @@ class OrganizationsList extends Component {
selected: [], selected: [],
}); });
} catch (err) { } catch (err) {
this.setState(({ contentError: true })); this.setState(({ hasContentError: true }));
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -131,9 +131,9 @@ class OrganizationsList extends Component {
const { const {
actions, actions,
itemCount, itemCount,
contentError, hasContentError,
contentLoading, hasContentLoading,
deletionError, hasDeletionError,
selected, selected,
organizations, organizations,
} = this.state; } = this.state;
@@ -147,8 +147,8 @@ class OrganizationsList extends Component {
<PageSection variant={medium}> <PageSection variant={medium}>
<Card> <Card>
<PaginatedDataList <PaginatedDataList
contentError={contentError} hasContentError={hasContentError}
contentLoading={contentLoading} hasContentLoading={hasContentLoading}
items={organizations} items={organizations}
itemCount={itemCount} itemCount={itemCount}
itemName="organization" itemName="organization"
@@ -194,7 +194,7 @@ class OrganizationsList extends Component {
</Card> </Card>
</PageSection> </PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={hasDeletionError}
variant="danger" variant="danger"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}

18
src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
View File

@@ -26,8 +26,8 @@ class OrganizationNotifications extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
toggleError: false, toggleError: false,
toggleLoading: false, toggleLoading: false,
itemCount: 0, itemCount: 0,
@@ -55,7 +55,7 @@ class OrganizationNotifications extends Component {
const { id, location } = this.props; const { id, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search); const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const { const {
data: { data: {
@@ -86,9 +86,9 @@ class OrganizationNotifications extends Component {
errorTemplateIds: errorTemplates.results.map(e => e.id), errorTemplateIds: errorTemplates.results.map(e => e.id),
}); });
} catch { } catch {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
@@ -138,8 +138,8 @@ class OrganizationNotifications extends Component {
render () { render () {
const { canToggleNotifications, i18n } = this.props; const { canToggleNotifications, i18n } = this.props;
const { const {
contentError, hasContentError,
contentLoading, hasContentLoading,
toggleError, toggleError,
toggleLoading, toggleLoading,
itemCount, itemCount,
@@ -151,8 +151,8 @@ class OrganizationNotifications extends Component {
return ( return (
<Fragment> <Fragment>
<PaginatedDataList <PaginatedDataList
contentError={contentError} hasContentError={hasContentError}
contentLoading={contentLoading} hasContentLoading={hasContentLoading}
items={notifications} items={notifications}
itemCount={itemCount} itemCount={itemCount}
itemName="notification" itemName="notification"

12
src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

@@ -39,8 +39,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
> >
<WithI18n <WithI18n
contentError={false} hasContentError={false}
contentLoading={false} hasContentLoading={false}
itemCount={2} itemCount={2}
itemName="notification" itemName="notification"
items={ items={
@@ -101,8 +101,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
withHash={true} withHash={true}
> >
<withRouter(PaginatedDataList) <withRouter(PaginatedDataList)
contentError={false} hasContentError={false}
contentLoading={false} hasContentLoading={false}
i18n={"/i18n/"} i18n={"/i18n/"}
itemCount={2} itemCount={2}
itemName="notification" itemName="notification"
@@ -161,8 +161,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
> >
<Route> <Route>
<PaginatedDataList <PaginatedDataList
contentError={false} hasContentError={false}
contentLoading={false} hasContentLoading={false}
history={"/history/"} history={"/history/"}
i18n={"/i18n/"} i18n={"/i18n/"}
itemCount={2} itemCount={2}

16
src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
View File

@@ -19,8 +19,8 @@ class OrganizationTeams extends React.Component {
this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this); this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);
this.state = { this.state = {
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
itemCount: 0, itemCount: 0,
teams: [], teams: [],
}; };
@@ -41,7 +41,7 @@ class OrganizationTeams extends React.Component {
const { id, location } = this.props; const { id, location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search); const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ contentLoading: true, contentError: false }); this.setState({ hasContentLoading: true, hasContentError: false });
try { try {
const { const {
data: { count = 0, results = [] }, data: { count = 0, results = [] },
@@ -51,18 +51,18 @@ class OrganizationTeams extends React.Component {
teams: results, teams: results,
}); });
} catch { } catch {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
render () { render () {
const { contentError, contentLoading, teams, itemCount } = this.state; const { hasContentError, hasContentLoading, teams, itemCount } = this.state;
return ( return (
<PaginatedDataList <PaginatedDataList
contentError={contentError} hasContentError={hasContentError}
contentLoading={contentLoading} hasContentLoading={hasContentLoading}
items={teams} items={teams}
itemCount={itemCount} itemCount={itemCount}
itemName="team" itemName="team"

14
src/screens/Template/Template.jsx
View File

@@ -13,8 +13,8 @@ class Template extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = { this.state = {
contentError: false, hasContentError: false,
contentLoading: true, hasContentLoading: true,
template: {} template: {}
}; };
this.readTemplate = this.readTemplate.bind(this); this.readTemplate = this.readTemplate.bind(this);
@@ -32,15 +32,15 @@ class Template extends Component {
setBreadcrumb(data); setBreadcrumb(data);
this.setState({ template: data }); this.setState({ template: data });
} catch { } catch {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
render () { render () {
const { match, i18n, history } = this.props; const { match, i18n, history } = this.props;
const { contentLoading, template, contentError } = this.state; const { hasContentLoading, template, hasContentError } = this.state;
const tabsArray = [ const tabsArray = [
{ name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 }, { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
@@ -50,7 +50,7 @@ class Template extends Component {
{ name: i18n._(t`Completed Jobs`), link: '/home', id: 4 }, { name: i18n._(t`Completed Jobs`), link: '/home', id: 4 },
{ name: i18n._(t`Survey`), link: '/home', id: 5 } { name: i18n._(t`Survey`), link: '/home', id: 5 }
]; ];
const cardHeader = (contentLoading ? null const cardHeader = (hasContentLoading ? null
: ( : (
<CardHeader style={{ padding: 0 }}> <CardHeader style={{ padding: 0 }}>
<RoutedTabs <RoutedTabs
@@ -62,7 +62,7 @@ class Template extends Component {
) )
); );
if (!contentLoading && contentError) { if (!hasContentLoading && hasContentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card className="awx-c-card">

30
src/screens/Template/TemplateList/TemplateList.jsx
View File

@@ -36,9 +36,9 @@ class TemplatesList extends Component {
super(props); super(props);
this.state = { this.state = {
contentLoading: true, hasContentLoading: true,
contentError: false, hasContentError: false,
deletionError: false, hasDeletionError: false,
selected: [], selected: [],
templates: [], templates: [],
itemCount: 0, itemCount: 0,
@@ -62,7 +62,7 @@ class TemplatesList extends Component {
} }
handleDeleteErrorClose () { handleDeleteErrorClose () {
this.setState({ deletionError: false }); this.setState({ hasDeletionError: false });
} }
handleSelectAll (isSelected) { handleSelectAll (isSelected) {
@@ -83,7 +83,7 @@ class TemplatesList extends Component {
async handleTemplateDelete () { async handleTemplateDelete () {
const { selected } = this.state; const { selected } = this.state;
this.setState({ contentLoading: true, deletionError: false }); this.setState({ hasContentLoading: true, hasDeletionError: false });
try { try {
await Promise.all(selected.map(({ type, id }) => { await Promise.all(selected.map(({ type, id }) => {
let deletePromise; let deletePromise;
@@ -95,7 +95,7 @@ class TemplatesList extends Component {
return deletePromise; return deletePromise;
})); }));
} catch (err) { } catch (err) {
this.setState({ deletionError: true }); this.setState({ hasDeletionError: true });
} finally { } finally {
await this.loadTemplates(); await this.loadTemplates();
} }
@@ -105,7 +105,7 @@ class TemplatesList extends Component {
const { location } = this.props; const { location } = this.props;
const params = parseNamespacedQueryString(QS_CONFIG, location.search); const params = parseNamespacedQueryString(QS_CONFIG, location.search);
this.setState({ contentError: false, contentLoading: true }); this.setState({ hasContentError: false, hasContentLoading: true });
try { try {
const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params); const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
this.setState({ this.setState({
@@ -114,17 +114,17 @@ class TemplatesList extends Component {
selected: [], selected: [],
}); });
} catch (err) { } catch (err) {
this.setState({ contentError: true }); this.setState({ hasContentError: true });
} finally { } finally {
this.setState({ contentLoading: false }); this.setState({ hasContentLoading: false });
} }
} }
render () { render () {
const { const {
contentError, hasContentError,
contentLoading, hasContentLoading,
deletionError, hasDeletionError,
templates, templates,
itemCount, itemCount,
selected, selected,
@@ -139,8 +139,8 @@ class TemplatesList extends Component {
<PageSection variant={medium}> <PageSection variant={medium}>
<Card> <Card>
<PaginatedDataList <PaginatedDataList
contentError={contentError} hasContentError={hasContentError}
contentLoading={contentLoading} hasContentLoading={hasContentLoading}
items={templates} items={templates}
itemCount={itemCount} itemCount={itemCount}
itemName={i18n._(t`Template`)} itemName={i18n._(t`Template`)}
@@ -180,7 +180,7 @@ class TemplatesList extends Component {
/> />
</Card> </Card>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={hasDeletionError}
variant="danger" variant="danger"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}

8
src/screens/Template/TemplateList/TemplatesList.test.jsx
View File

@@ -92,16 +92,16 @@ describe('<TemplatesList />', () => {
test('Templates are retrieved from the api and the components finishes loading', async (done) => { test('Templates are retrieved from the api and the components finishes loading', async (done) => {
const loadTemplates = jest.spyOn(_TemplatesList.prototype, 'loadTemplates'); const loadTemplates = jest.spyOn(_TemplatesList.prototype, 'loadTemplates');
const wrapper = mountWithContexts(<TemplatesList />); const wrapper = mountWithContexts(<TemplatesList />);
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === true); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('hasContentLoading') === true);
expect(loadTemplates).toHaveBeenCalled(); expect(loadTemplates).toHaveBeenCalled();
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('hasContentLoading') === false);
done(); done();
}); });
test('handleSelect is called when a template list item is selected', async (done) => { test('handleSelect is called when a template list item is selected', async (done) => {
const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect'); const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect');
const wrapper = mountWithContexts(<TemplatesList />); const wrapper = mountWithContexts(<TemplatesList />);
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('hasContentLoading') === false);
wrapper.find('DataListCheck#select-jobTemplate-1').props().onChange(); wrapper.find('DataListCheck#select-jobTemplate-1').props().onChange();
expect(handleSelect).toBeCalled(); expect(handleSelect).toBeCalled();
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 1); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 1);
@@ -111,7 +111,7 @@ describe('<TemplatesList />', () => {
test('handleSelectAll is called when a template list item is selected', async (done) => { test('handleSelectAll is called when a template list item is selected', async (done) => {
const handleSelectAll = jest.spyOn(_TemplatesList.prototype, 'handleSelectAll'); const handleSelectAll = jest.spyOn(_TemplatesList.prototype, 'handleSelectAll');
const wrapper = mountWithContexts(<TemplatesList />); const wrapper = mountWithContexts(<TemplatesList />);
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('hasContentLoading') === false);
wrapper.find('Checkbox#select-all').props().onChange(true); wrapper.find('Checkbox#select-all').props().onChange(true);
expect(handleSelectAll).toBeCalled(); expect(handleSelectAll).toBeCalled();
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 5); await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 5);