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

@@ -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

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() {
+  async loadActions() {
-    const { location } = this.props;
     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 {

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} />

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

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