From d5e9716ceb88b6eead76f20c5891a8fa4863b040 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 4 Nov 2019 15:27:47 -0500
Subject: [PATCH] Move CardHeader styled component(s) outside of render
 functions.  Refactors host options calls out to it's own function.

---
 awx/ui_next/src/screens/Host/Host.jsx             | 14 +++++++-------
 .../src/screens/Host/HostList/HostList.jsx        | 15 ++++++++++-----
 awx/ui_next/src/screens/Job/Job.jsx               | 14 +++++++-------
 .../src/screens/Organization/Organization.jsx     | 14 +++++++-------
 awx/ui_next/src/screens/Project/Project.jsx       | 14 +++++++-------
 5 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx
index 6817e332b3..20cd4aad0c 100644
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@@ -18,6 +18,13 @@ import HostGroups from './HostGroups';
 import HostCompletedJobs from './HostCompletedJobs';
 import { HostsAPI } from '@api';
 
+const CardHeader = styled(PFCardHeader)`
+  --pf-c-card--first-child--PaddingTop: 0;
+  --pf-c-card--child--PaddingLeft: 0;
+  --pf-c-card--child--PaddingRight: 0;
+  position: relative;
+`;
+
 class Host extends Component {
   constructor(props) {
     super(props);
@@ -81,13 +88,6 @@ class Host extends Component {
       },
     ];
 
-    const CardHeader = styled(PFCardHeader)`
-      --pf-c-card--first-child--PaddingTop: 0;
-      --pf-c-card--child--PaddingLeft: 0;
-      --pf-c-card--child--PaddingRight: 0;
-      position: relative;
-    `;
-
     let cardHeader = (
       <CardHeader style={{ padding: 0 }}>
         <RoutedTabs
diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
index 1610d57a5a..4886cfc899 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -42,6 +42,7 @@ class HostsList extends Component {
     this.handleSelect = this.handleSelect.bind(this);
     this.handleHostDelete = this.handleHostDelete.bind(this);
     this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
+    this.loadActions = this.loadActions.bind(this);
     this.loadHosts = this.loadHosts.bind(this);
     this.handleHostToggle = this.handleHostToggle.bind(this);
     this.handleHostToggleErrorClose = this.handleHostToggleErrorClose.bind(
@@ -117,11 +118,8 @@ class HostsList extends Component {
     }
   }
 
-  async loadHosts() {
-    const { location } = this.props;
+  async loadActions() {
     const { actions: cachedActions } = this.state;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
     let optionsPromise;
     if (cachedActions) {
       optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
@@ -129,7 +127,14 @@ class HostsList extends Component {
       optionsPromise = HostsAPI.readOptions();
     }
 
-    const promises = Promise.all([HostsAPI.read(params), optionsPromise]);
+    return optionsPromise;
+  }
+
+  async loadHosts() {
+    const { location } = this.props;
+    const params = parseQueryString(QS_CONFIG, location.search);
+
+    const promises = Promise.all([HostsAPI.read(params), this.loadActions()]);
 
     this.setState({ contentError: null, hasContentLoading: true });
     try {
diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index 3f82fbdd75..5719a9a600 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -17,6 +17,13 @@ import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
 import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
 
+const CardHeader = styled(PFCardHeader)`
+  --pf-c-card--first-child--PaddingTop: 0;
+  --pf-c-card--child--PaddingLeft: 0;
+  --pf-c-card--child--PaddingRight: 0;
+  position: relative;
+`;
+
 class Job extends Component {
   constructor(props) {
     super(props);
@@ -73,13 +80,6 @@ class Job extends Component {
       { name: i18n._(t`Details`), link: `${match.url}/details`, id: 1 },
     ];
 
-    const CardHeader = styled(PFCardHeader)`
-      --pf-c-card--first-child--PaddingTop: 0;
-      --pf-c-card--child--PaddingLeft: 0;
-      --pf-c-card--child--PaddingRight: 0;
-      position: relative;
-    `;
-
     let cardHeader = (
       <CardHeader>
         <RoutedTabs match={match} history={history} tabsArray={tabsArray} />
diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx
index 8bbbdbc828..3e7dfaa0af 100644
--- a/awx/ui_next/src/screens/Organization/Organization.jsx
+++ b/awx/ui_next/src/screens/Organization/Organization.jsx
@@ -18,6 +18,13 @@ import OrganizationEdit from './OrganizationEdit';
 import OrganizationTeams from './OrganizationTeams';
 import { OrganizationsAPI } from '@api';
 
+const CardHeader = styled(PFCardHeader)`
+  --pf-c-card--first-child--PaddingTop: 0;
+  --pf-c-card--child--PaddingLeft: 0;
+  --pf-c-card--child--PaddingRight: 0;
+  position: relative;
+`;
+
 class Organization extends Component {
   constructor(props) {
     super(props);
@@ -133,13 +140,6 @@ class Organization extends Component {
       });
     }
 
-    const CardHeader = styled(PFCardHeader)`
-      --pf-c-card--first-child--PaddingTop: 0;
-      --pf-c-card--child--PaddingLeft: 0;
-      --pf-c-card--child--PaddingRight: 0;
-      position: relative;
-    `;
-
     let cardHeader = (
       <CardHeader style={{ padding: 0 }}>
         <RoutedTabs
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index eb0cd3ebce..a410edd562 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -19,6 +19,13 @@ import ProjectJobTemplates from './ProjectJobTemplates';
 import ProjectSchedules from './ProjectSchedules';
 import { OrganizationsAPI, ProjectsAPI } from '@api';
 
+const CardHeader = styled(PFCardHeader)`
+  --pf-c-card--first-child--PaddingTop: 0;
+  --pf-c-card--child--PaddingLeft: 0;
+  --pf-c-card--child--PaddingRight: 0;
+  position: relative;
+`;
+
 class Project extends Component {
   constructor(props) {
     super(props);
@@ -153,13 +160,6 @@ class Project extends Component {
       tab.id = n;
     });
 
-    const CardHeader = styled(PFCardHeader)`
-      --pf-c-card--first-child--PaddingTop: 0;
-      --pf-c-card--child--PaddingLeft: 0;
-      --pf-c-card--child--PaddingRight: 0;
-      position: relative;
-    `;
-
     let cardHeader = (
       <CardHeader style={{ padding: 0 }}>
         <RoutedTabs