mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 23:51:09 +03:00
Merge pull request #283 from jakemcdermott/has
prefix content error and loading booleans with 'has'
This commit is contained in:
commit
30709d1ab2
@ -72,8 +72,8 @@ class PaginatedDataList extends React.Component {
|
||||
render () {
|
||||
const [orderBy, sortOrder] = this.getSortOrder();
|
||||
const {
|
||||
contentError,
|
||||
contentLoading,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
emptyStateControls,
|
||||
items,
|
||||
itemCount,
|
||||
@ -98,9 +98,9 @@ class PaginatedDataList extends React.Component {
|
||||
const emptyContentTitle = i18n._(t`No ${itemDisplayNamePlural} Found `);
|
||||
|
||||
let Content;
|
||||
if (contentLoading && items.length <= 0) {
|
||||
if (hasContentLoading && items.length <= 0) {
|
||||
Content = (<ContentLoading />);
|
||||
} else if (contentError) {
|
||||
} else if (hasContentError) {
|
||||
Content = (<ContentError />);
|
||||
} else if (items.length <= 0) {
|
||||
Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
|
||||
@ -173,13 +173,13 @@ PaginatedDataList.propTypes = {
|
||||
})),
|
||||
showPageSizeOptions: PropTypes.bool,
|
||||
renderToolbar: PropTypes.func,
|
||||
contentLoading: PropTypes.bool,
|
||||
contentError: PropTypes.bool,
|
||||
hasContentLoading: PropTypes.bool,
|
||||
hasContentError: PropTypes.bool,
|
||||
};
|
||||
|
||||
PaginatedDataList.defaultProps = {
|
||||
contentLoading: false,
|
||||
contentError: false,
|
||||
hasContentLoading: false,
|
||||
hasContentError: false,
|
||||
toolbarColumns: [],
|
||||
itemName: 'item',
|
||||
itemNamePlural: '',
|
||||
|
@ -19,8 +19,8 @@ export class Job extends Component {
|
||||
|
||||
this.state = {
|
||||
job: null,
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
isInitialized: false
|
||||
};
|
||||
|
||||
@ -46,15 +46,15 @@ export class Job extends Component {
|
||||
} = this.props;
|
||||
const id = parseInt(match.params.id, 10);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const { data } = await JobsAPI.readDetail(id);
|
||||
setBreadcrumb(data);
|
||||
this.setState({ job: data });
|
||||
} catch (error) {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,8 +67,8 @@ export class Job extends Component {
|
||||
|
||||
const {
|
||||
job,
|
||||
contentError,
|
||||
contentLoading,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
isInitialized
|
||||
} = this.state;
|
||||
|
||||
@ -103,7 +103,7 @@ export class Job extends Component {
|
||||
cardHeader = null;
|
||||
}
|
||||
|
||||
if (!contentLoading && contentError) {
|
||||
if (!hasContentLoading && hasContentError) {
|
||||
return (
|
||||
<PageSection>
|
||||
<Card className="awx-c-card">
|
||||
|
@ -22,8 +22,8 @@ class Organization extends Component {
|
||||
|
||||
this.state = {
|
||||
organization: null,
|
||||
contentLoading: true,
|
||||
contentError: false,
|
||||
hasContentLoading: true,
|
||||
hasContentError: false,
|
||||
isInitialized: false,
|
||||
isNotifAdmin: false,
|
||||
isAuditorOfThisOrg: false,
|
||||
@ -52,7 +52,7 @@ class Organization extends Component {
|
||||
} = this.props;
|
||||
const id = parseInt(match.params.id, 10);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([
|
||||
OrganizationsAPI.readDetail(id),
|
||||
@ -68,9 +68,9 @@ class Organization extends Component {
|
||||
isAdminOfThisOrg: adminRes.data.results.length > 0
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState(({ contentError: true }));
|
||||
this.setState(({ hasContentError: true }));
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,15 +81,15 @@ class Organization extends Component {
|
||||
} = this.props;
|
||||
const id = parseInt(match.params.id, 10);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const { data } = await OrganizationsAPI.readDetail(id);
|
||||
setBreadcrumb(data);
|
||||
this.setState({ organization: data });
|
||||
} catch (err) {
|
||||
this.setState(({ contentError: true }));
|
||||
this.setState(({ hasContentError: true }));
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,8 +104,8 @@ class Organization extends Component {
|
||||
|
||||
const {
|
||||
organization,
|
||||
contentError,
|
||||
contentLoading,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
isInitialized,
|
||||
isNotifAdmin,
|
||||
isAuditorOfThisOrg,
|
||||
@ -163,7 +163,7 @@ class Organization extends Component {
|
||||
cardHeader = null;
|
||||
}
|
||||
|
||||
if (!contentLoading && contentError) {
|
||||
if (!hasContentLoading && hasContentError) {
|
||||
return (
|
||||
<PageSection>
|
||||
<Card className="awx-c-card">
|
||||
|
@ -33,9 +33,9 @@ class OrganizationAccess extends React.Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
accessRecords: [],
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
deletionError: false,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
hasDeletionError: false,
|
||||
deletionRecord: null,
|
||||
deletionRole: null,
|
||||
isAddModalOpen: false,
|
||||
@ -70,7 +70,7 @@ class OrganizationAccess extends React.Component {
|
||||
const { organization, location } = this.props;
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const {
|
||||
data: {
|
||||
@ -80,9 +80,9 @@ class OrganizationAccess extends React.Component {
|
||||
} = await OrganizationsAPI.readAccessList(organization.id, params);
|
||||
this.setState({ itemCount, accessRecords });
|
||||
} catch (error) {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@ class OrganizationAccess extends React.Component {
|
||||
|
||||
handleDeleteErrorClose () {
|
||||
this.setState({
|
||||
deletionError: false,
|
||||
hasDeletionError: false,
|
||||
deletionRecord: null,
|
||||
deletionRole: null
|
||||
});
|
||||
@ -116,7 +116,7 @@ class OrganizationAccess extends React.Component {
|
||||
promise = UsersAPI.disassociateRole(deletionRecord.id, deletionRole.id);
|
||||
}
|
||||
|
||||
this.setState({ contentLoading: true });
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
await promise.then(this.loadAccessList);
|
||||
this.setState({
|
||||
@ -125,8 +125,8 @@ class OrganizationAccess extends React.Component {
|
||||
});
|
||||
} catch (error) {
|
||||
this.setState({
|
||||
contentLoading: false,
|
||||
deletionError: true
|
||||
hasContentLoading: false,
|
||||
hasDeletionError: true
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -148,22 +148,22 @@ class OrganizationAccess extends React.Component {
|
||||
const { organization, i18n } = this.props;
|
||||
const {
|
||||
accessRecords,
|
||||
contentError,
|
||||
contentLoading,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
deletionRole,
|
||||
deletionRecord,
|
||||
deletionError,
|
||||
hasDeletionError,
|
||||
itemCount,
|
||||
isAddModalOpen,
|
||||
} = this.state;
|
||||
const canEdit = organization.summary_fields.user_capabilities.edit;
|
||||
const isDeleteModalOpen = !contentLoading && !deletionError && deletionRole;
|
||||
const isDeleteModalOpen = !hasContentLoading && !hasDeletionError && deletionRole;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
contentLoading={contentLoading}
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={accessRecords}
|
||||
itemCount={itemCount}
|
||||
itemName="role"
|
||||
@ -205,7 +205,7 @@ class OrganizationAccess extends React.Component {
|
||||
/>
|
||||
)}
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
isOpen={hasDeletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
|
@ -83,8 +83,8 @@ describe('<OrganizationAccess />', () => {
|
||||
const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />);
|
||||
await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
|
||||
expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
|
||||
expect(wrapper.find('OrganizationAccess').state('contentLoading')).toBe(false);
|
||||
expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(false);
|
||||
expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(false);
|
||||
expect(wrapper.find('OrganizationAccess').state('hasContentError')).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
|
@ -34,8 +34,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
|
||||
}
|
||||
>
|
||||
<WithI18n
|
||||
contentError={false}
|
||||
contentLoading={true}
|
||||
hasContentError={false}
|
||||
hasContentLoading={true}
|
||||
itemCount={0}
|
||||
itemName="role"
|
||||
items={Array []}
|
||||
@ -80,8 +80,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
|
||||
withHash={true}
|
||||
>
|
||||
<withRouter(PaginatedDataList)
|
||||
contentError={false}
|
||||
contentLoading={true}
|
||||
hasContentError={false}
|
||||
hasContentLoading={true}
|
||||
i18n={"/i18n/"}
|
||||
itemCount={0}
|
||||
itemName="role"
|
||||
@ -124,8 +124,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
|
||||
>
|
||||
<Route>
|
||||
<PaginatedDataList
|
||||
contentError={false}
|
||||
contentLoading={true}
|
||||
hasContentError={false}
|
||||
hasContentLoading={true}
|
||||
history={"/history/"}
|
||||
i18n={"/i18n/"}
|
||||
itemCount={0}
|
||||
|
@ -20,8 +20,8 @@ class OrganizationDetail extends Component {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
instanceGroups: [],
|
||||
};
|
||||
this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
|
||||
@ -34,21 +34,21 @@ class OrganizationDetail extends Component {
|
||||
async loadInstanceGroups () {
|
||||
const { match: { params: { id } } } = this.props;
|
||||
|
||||
this.setState({ contentLoading: true });
|
||||
this.setState({ hasContentLoading: true });
|
||||
try {
|
||||
const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id);
|
||||
this.setState({ instanceGroups: [...results] });
|
||||
} catch (err) {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
contentLoading,
|
||||
contentError,
|
||||
hasContentLoading,
|
||||
hasContentError,
|
||||
instanceGroups,
|
||||
} = this.state;
|
||||
|
||||
@ -66,11 +66,11 @@ class OrganizationDetail extends Component {
|
||||
i18n
|
||||
} = this.props;
|
||||
|
||||
if (contentLoading) {
|
||||
if (hasContentLoading) {
|
||||
return (<ContentLoading />);
|
||||
}
|
||||
|
||||
if (contentError) {
|
||||
if (hasContentError) {
|
||||
return (<ContentError />);
|
||||
}
|
||||
|
||||
|
@ -30,9 +30,9 @@ class OrganizationsList extends Component {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
contentLoading: true,
|
||||
contentError: false,
|
||||
deletionError: false,
|
||||
hasContentLoading: true,
|
||||
hasContentError: false,
|
||||
hasDeletionError: false,
|
||||
organizations: [],
|
||||
selected: [],
|
||||
itemCount: 0,
|
||||
@ -75,17 +75,17 @@ class OrganizationsList extends Component {
|
||||
}
|
||||
|
||||
handleDeleteErrorClose () {
|
||||
this.setState({ deletionError: false });
|
||||
this.setState({ hasDeletionError: false });
|
||||
}
|
||||
|
||||
async handleOrgDelete () {
|
||||
const { selected } = this.state;
|
||||
|
||||
this.setState({ contentLoading: true, deletionError: false });
|
||||
this.setState({ hasContentLoading: true, hasDeletionError: false });
|
||||
try {
|
||||
await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: true });
|
||||
this.setState({ hasDeletionError: true });
|
||||
} finally {
|
||||
await this.loadOrganizations();
|
||||
}
|
||||
@ -108,7 +108,7 @@ class OrganizationsList extends Component {
|
||||
optionsPromise,
|
||||
]);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const [{ data: { count, results } }, { data: { actions } }] = await promises;
|
||||
this.setState({
|
||||
@ -118,9 +118,9 @@ class OrganizationsList extends Component {
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState(({ contentError: true }));
|
||||
this.setState(({ hasContentError: true }));
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,9 +131,9 @@ class OrganizationsList extends Component {
|
||||
const {
|
||||
actions,
|
||||
itemCount,
|
||||
contentError,
|
||||
contentLoading,
|
||||
deletionError,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
hasDeletionError,
|
||||
selected,
|
||||
organizations,
|
||||
} = this.state;
|
||||
@ -147,8 +147,8 @@ class OrganizationsList extends Component {
|
||||
<PageSection variant={medium}>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
contentLoading={contentLoading}
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={organizations}
|
||||
itemCount={itemCount}
|
||||
itemName="organization"
|
||||
@ -194,7 +194,7 @@ class OrganizationsList extends Component {
|
||||
</Card>
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
isOpen={hasDeletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
|
@ -26,8 +26,8 @@ class OrganizationNotifications extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
toggleError: false,
|
||||
toggleLoading: false,
|
||||
itemCount: 0,
|
||||
@ -55,7 +55,7 @@ class OrganizationNotifications extends Component {
|
||||
const { id, location } = this.props;
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const {
|
||||
data: {
|
||||
@ -86,9 +86,9 @@ class OrganizationNotifications extends Component {
|
||||
errorTemplateIds: errorTemplates.results.map(e => e.id),
|
||||
});
|
||||
} catch {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,8 +138,8 @@ class OrganizationNotifications extends Component {
|
||||
render () {
|
||||
const { canToggleNotifications, i18n } = this.props;
|
||||
const {
|
||||
contentError,
|
||||
contentLoading,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
toggleError,
|
||||
toggleLoading,
|
||||
itemCount,
|
||||
@ -151,8 +151,8 @@ class OrganizationNotifications extends Component {
|
||||
return (
|
||||
<Fragment>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
contentLoading={contentLoading}
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={notifications}
|
||||
itemCount={itemCount}
|
||||
itemName="notification"
|
||||
|
@ -39,8 +39,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
}
|
||||
>
|
||||
<WithI18n
|
||||
contentError={false}
|
||||
contentLoading={false}
|
||||
hasContentError={false}
|
||||
hasContentLoading={false}
|
||||
itemCount={2}
|
||||
itemName="notification"
|
||||
items={
|
||||
@ -101,8 +101,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
withHash={true}
|
||||
>
|
||||
<withRouter(PaginatedDataList)
|
||||
contentError={false}
|
||||
contentLoading={false}
|
||||
hasContentError={false}
|
||||
hasContentLoading={false}
|
||||
i18n={"/i18n/"}
|
||||
itemCount={2}
|
||||
itemName="notification"
|
||||
@ -161,8 +161,8 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
>
|
||||
<Route>
|
||||
<PaginatedDataList
|
||||
contentError={false}
|
||||
contentLoading={false}
|
||||
hasContentError={false}
|
||||
hasContentLoading={false}
|
||||
history={"/history/"}
|
||||
i18n={"/i18n/"}
|
||||
itemCount={2}
|
||||
|
@ -19,8 +19,8 @@ class OrganizationTeams extends React.Component {
|
||||
this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);
|
||||
|
||||
this.state = {
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
itemCount: 0,
|
||||
teams: [],
|
||||
};
|
||||
@ -41,7 +41,7 @@ class OrganizationTeams extends React.Component {
|
||||
const { id, location } = this.props;
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
this.setState({ contentLoading: true, contentError: false });
|
||||
this.setState({ hasContentLoading: true, hasContentError: false });
|
||||
try {
|
||||
const {
|
||||
data: { count = 0, results = [] },
|
||||
@ -51,18 +51,18 @@ class OrganizationTeams extends React.Component {
|
||||
teams: results,
|
||||
});
|
||||
} catch {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { contentError, contentLoading, teams, itemCount } = this.state;
|
||||
const { hasContentError, hasContentLoading, teams, itemCount } = this.state;
|
||||
return (
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
contentLoading={contentLoading}
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={teams}
|
||||
itemCount={itemCount}
|
||||
itemName="team"
|
||||
|
@ -13,8 +13,8 @@ class Template extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
contentError: false,
|
||||
contentLoading: true,
|
||||
hasContentError: false,
|
||||
hasContentLoading: true,
|
||||
template: {}
|
||||
};
|
||||
this.readTemplate = this.readTemplate.bind(this);
|
||||
@ -32,15 +32,15 @@ class Template extends Component {
|
||||
setBreadcrumb(data);
|
||||
this.setState({ template: data });
|
||||
} catch {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { match, i18n, history } = this.props;
|
||||
const { contentLoading, template, contentError } = this.state;
|
||||
const { hasContentLoading, template, hasContentError } = this.state;
|
||||
|
||||
const tabsArray = [
|
||||
{ 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`Survey`), link: '/home', id: 5 }
|
||||
];
|
||||
const cardHeader = (contentLoading ? null
|
||||
const cardHeader = (hasContentLoading ? null
|
||||
: (
|
||||
<CardHeader style={{ padding: 0 }}>
|
||||
<RoutedTabs
|
||||
@ -62,7 +62,7 @@ class Template extends Component {
|
||||
)
|
||||
);
|
||||
|
||||
if (!contentLoading && contentError) {
|
||||
if (!hasContentLoading && hasContentError) {
|
||||
return (
|
||||
<PageSection>
|
||||
<Card className="awx-c-card">
|
||||
|
@ -36,9 +36,9 @@ class TemplatesList extends Component {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
contentLoading: true,
|
||||
contentError: false,
|
||||
deletionError: false,
|
||||
hasContentLoading: true,
|
||||
hasContentError: false,
|
||||
hasDeletionError: false,
|
||||
selected: [],
|
||||
templates: [],
|
||||
itemCount: 0,
|
||||
@ -62,7 +62,7 @@ class TemplatesList extends Component {
|
||||
}
|
||||
|
||||
handleDeleteErrorClose () {
|
||||
this.setState({ deletionError: false });
|
||||
this.setState({ hasDeletionError: false });
|
||||
}
|
||||
|
||||
handleSelectAll (isSelected) {
|
||||
@ -83,7 +83,7 @@ class TemplatesList extends Component {
|
||||
async handleTemplateDelete () {
|
||||
const { selected } = this.state;
|
||||
|
||||
this.setState({ contentLoading: true, deletionError: false });
|
||||
this.setState({ hasContentLoading: true, hasDeletionError: false });
|
||||
try {
|
||||
await Promise.all(selected.map(({ type, id }) => {
|
||||
let deletePromise;
|
||||
@ -95,7 +95,7 @@ class TemplatesList extends Component {
|
||||
return deletePromise;
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setState({ deletionError: true });
|
||||
this.setState({ hasDeletionError: true });
|
||||
} finally {
|
||||
await this.loadTemplates();
|
||||
}
|
||||
@ -105,7 +105,7 @@ class TemplatesList extends Component {
|
||||
const { location } = this.props;
|
||||
const params = parseNamespacedQueryString(QS_CONFIG, location.search);
|
||||
|
||||
this.setState({ contentError: false, contentLoading: true });
|
||||
this.setState({ hasContentError: false, hasContentLoading: true });
|
||||
try {
|
||||
const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
|
||||
this.setState({
|
||||
@ -114,17 +114,17 @@ class TemplatesList extends Component {
|
||||
selected: [],
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ contentError: true });
|
||||
this.setState({ hasContentError: true });
|
||||
} finally {
|
||||
this.setState({ contentLoading: false });
|
||||
this.setState({ hasContentLoading: false });
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
contentError,
|
||||
contentLoading,
|
||||
deletionError,
|
||||
hasContentError,
|
||||
hasContentLoading,
|
||||
hasDeletionError,
|
||||
templates,
|
||||
itemCount,
|
||||
selected,
|
||||
@ -139,8 +139,8 @@ class TemplatesList extends Component {
|
||||
<PageSection variant={medium}>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
contentLoading={contentLoading}
|
||||
hasContentError={hasContentError}
|
||||
hasContentLoading={hasContentLoading}
|
||||
items={templates}
|
||||
itemCount={itemCount}
|
||||
itemName={i18n._(t`Template`)}
|
||||
@ -180,7 +180,7 @@ class TemplatesList extends Component {
|
||||
/>
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
isOpen={hasDeletionError}
|
||||
variant="danger"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
|
@ -92,16 +92,16 @@ describe('<TemplatesList />', () => {
|
||||
test('Templates are retrieved from the api and the components finishes loading', async (done) => {
|
||||
const loadTemplates = jest.spyOn(_TemplatesList.prototype, 'loadTemplates');
|
||||
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();
|
||||
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('contentLoading') === false);
|
||||
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('hasContentLoading') === false);
|
||||
done();
|
||||
});
|
||||
|
||||
test('handleSelect is called when a template list item is selected', async (done) => {
|
||||
const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect');
|
||||
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();
|
||||
expect(handleSelect).toBeCalled();
|
||||
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) => {
|
||||
const handleSelectAll = jest.spyOn(_TemplatesList.prototype, 'handleSelectAll');
|
||||
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);
|
||||
expect(handleSelectAll).toBeCalled();
|
||||
await waitForElement(wrapper, 'TemplatesList', (el) => el.state('selected').length === 5);
|
||||
|
Loading…
Reference in New Issue
Block a user