From 36d2d03bc75d3dbf258bcdf3e03db6c5d7a94b83 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Thu, 20 Jun 2019 14:37:46 -0400
Subject: [PATCH] prefix content error and loading booleans with 'has'

---
 .../PaginatedDataList/PaginatedDataList.jsx   | 16 ++++-----
 src/screens/Job/Job.jsx                       | 16 ++++-----
 src/screens/Organization/Organization.jsx     | 22 ++++++------
 .../OrganizationAccess/OrganizationAccess.jsx | 34 +++++++++----------
 .../OrganizationAccess.test.jsx               |  4 +--
 .../OrganizationAccess.test.jsx.snap          | 12 +++----
 .../OrganizationDetail/OrganizationDetail.jsx | 18 +++++-----
 .../OrganizationList/OrganizationList.jsx     | 30 ++++++++--------
 .../OrganizationNotifications.jsx             | 18 +++++-----
 .../OrganizationNotifications.test.jsx.snap   | 12 +++----
 .../OrganizationTeams/OrganizationTeams.jsx   | 16 ++++-----
 src/screens/Template/Template.jsx             | 14 ++++----
 .../Template/TemplateList/TemplateList.jsx    | 30 ++++++++--------
 .../TemplateList/TemplatesList.test.jsx       |  8 ++---
 14 files changed, 125 insertions(+), 125 deletions(-)

diff --git a/src/components/PaginatedDataList/PaginatedDataList.jsx b/src/components/PaginatedDataList/PaginatedDataList.jsx
index ee59abec79..ab42df512a 100644
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -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: '',
diff --git a/src/screens/Job/Job.jsx b/src/screens/Job/Job.jsx
index 701e3e875c..ea3af16373 100644
--- a/src/screens/Job/Job.jsx
+++ b/src/screens/Job/Job.jsx
@@ -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">
diff --git a/src/screens/Organization/Organization.jsx b/src/screens/Organization/Organization.jsx
index beaf07c270..14d8a44c8f 100644
--- a/src/screens/Organization/Organization.jsx
+++ b/src/screens/Organization/Organization.jsx
@@ -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">
diff --git a/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx b/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
index 3e37914dbb..b46b36cbc4 100644
--- a/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
+++ b/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
@@ -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}
diff --git a/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx b/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
index 0077c7ed55..549aba75b4 100644
--- a/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
+++ b/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
@@ -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();
   });
 
diff --git a/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap b/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap
index 2439871af1..d53e73084e 100644
--- a/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap
+++ b/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap
@@ -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}
diff --git a/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
index 8ceb0acf32..22ab73a71a 100644
--- a/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
+++ b/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
@@ -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 />);
     }
 
diff --git a/src/screens/Organization/OrganizationList/OrganizationList.jsx b/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 3843ef1b66..b5adfd0044 100644
--- a/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -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}
diff --git a/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx b/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
index c5f32bb118..b6e76ef55e 100644
--- a/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
+++ b/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
@@ -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"
diff --git a/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap b/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
index 5ec5eb9634..54295cb524 100644
--- a/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
+++ b/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
@@ -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}
diff --git a/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx b/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
index 38c46dc912..2710f4ce53 100644
--- a/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
+++ b/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
@@ -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"
diff --git a/src/screens/Template/Template.jsx b/src/screens/Template/Template.jsx
index 3312861237..432ad89b35 100644
--- a/src/screens/Template/Template.jsx
+++ b/src/screens/Template/Template.jsx
@@ -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">
diff --git a/src/screens/Template/TemplateList/TemplateList.jsx b/src/screens/Template/TemplateList/TemplateList.jsx
index bbe072afa8..cd5c92d159 100644
--- a/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/src/screens/Template/TemplateList/TemplateList.jsx
@@ -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}
diff --git a/src/screens/Template/TemplateList/TemplatesList.test.jsx b/src/screens/Template/TemplateList/TemplatesList.test.jsx
index ec59b9c17e..6d34913b2f 100644
--- a/src/screens/Template/TemplateList/TemplatesList.test.jsx
+++ b/src/screens/Template/TemplateList/TemplatesList.test.jsx
@@ -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);