switch to our CardBody component on all screens, for consistent padding/spacing

awx/ui_next/src/app.scss

@@ -156,13 +156,6 @@
 // and bem style, as well as moved into component-based scss files
 //
 
-.at-c-listCardBody {
-  --pf-c-card__footer--PaddingX: 0;
-  --pf-c-card__footer--PaddingY: 0;
-  --pf-c-card__body--PaddingX: 0;
-  --pf-c-card__body--PaddingY: 0;
-}
-
 .awx-c-card {
   position: relative;
 }

awx/ui_next/src/components/Card/CardBody.jsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { CardBody } from '@patternfly/react-core';
+
+const TabbedCardBody = styled(CardBody)`
+  padding-top: var(--pf-c-card--first-child--PaddingTop);
+`;
+CardBody.displayName = 'PFCardBody';
+
+export default TabbedCardBody;

awx/ui_next/src/components/Card/TabbedCardHeader.js

@@ -6,6 +6,7 @@ const TabbedCardHeader = styled(CardHeader)`
   --pf-c-card--child--PaddingLeft: 0;
   --pf-c-card--child--PaddingRight: 0;
   --pf-c-card__header--not-last-child--PaddingBottom: 24px;
+  --pf-c-card__header--not-last-child--PaddingBottom: 0;
   position: relative;
 `;
 

awx/ui_next/src/components/Card/index.js

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as TabbedCardHeader } from './TabbedCardHeader';
+export { default as CardBody } from './CardBody';

awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
-import { PageSection, Card, CardBody } from '@patternfly/react-core';
+import { PageSection, Card } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import { HostsAPI } from '@api';
 import { Config } from '@contexts/Config';
 import HostForm from '../shared';

awx/ui_next/src/screens/Host/HostCompletedJobs/HostCompletedJobs.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class HostCompletedJobs extends Component {
   render() {

awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx

@@ -4,7 +4,8 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { Host } from '@types';
-import { Button, CardBody } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { VariablesDetail } from '@components/CodeMirrorInput';
 

awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 import { HostsAPI } from '@api';
 import { Config } from '@contexts/Config';

awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class HostFacts extends Component {
   render() {

awx/ui_next/src/screens/Host/HostGroups/HostGroups.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class HostGroups extends Component {
   render() {

awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx

@@ -2,14 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { withI18n } from '@lingui/react';
 import { withRouter } from 'react-router-dom';
 import { t } from '@lingui/macro';
-import {
-  PageSection,
-  Card,
-  CardHeader,
-  CardBody,
-  Tooltip,
-} from '@patternfly/react-core';
-
+import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 

awx/ui_next/src/screens/Inventory/InventoryCompletedJobs/InventoryCompletedJobs.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class InventoryCompletedJobs extends Component {
   render() {

awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { ChipGroup, Chip } from '@components/Chip';
 import { VariablesDetail } from '@components/CodeMirrorInput';
@@ -13,7 +13,7 @@ import { Inventory } from '../../../types';
 
 function InventoryDetail({ inventory, i18n }) {
   const [instanceGroups, setInstanceGroups] = useState([]);
-  const [hasContentLoading, setHasContentLoading] = useState(false);
+  const [hasContentLoading, setHasContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
 
   useEffect(() => {

awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx

@@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { withI18n } from '@lingui/react';
 import { withRouter } from 'react-router-dom';
 import { t } from '@lingui/macro';
-import { CardHeader, CardBody, Tooltip } from '@patternfly/react-core';
+import { CardHeader, Tooltip } from '@patternfly/react-core';
 import { object } from 'prop-types';
 
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import { InventoriesAPI, CredentialTypesAPI } from '@api';
 import ContentLoading from '@components/ContentLoading';

awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { t } from '@lingui/macro';
 
-import { CardBody, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import { VariablesDetail } from '@components/CodeMirrorInput';
+import { CardBody } from '@components/Card';
 import ErrorDetail from '@components/ErrorDetail';
 import AlertModal from '@components/AlertModal';
 

awx/ui_next/src/screens/Inventory/InventoryHostAdd/InventoryHostAdd.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import InventoryHostForm from '../shared/InventoryHostForm';
 import { InventoriesAPI } from '@api';
 

awx/ui_next/src/screens/Inventory/InventorySources/InventorySources.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class InventorySources extends Component {
   render() {

awx/ui_next/src/screens/Inventory/SmartInventoryCompletedJobs/SmartInventoryCompletedJobs.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class SmartInventoryCompletedJobs extends Component {
   render() {

awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class SmartInventoryDetail extends Component {
   render() {

awx/ui_next/src/screens/Inventory/SmartInventoryHosts/SmartInventoryHosts.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class SmartInventoryHosts extends Component {
   render() {

awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { Formik } from 'formik';
-import { Form, Card, CardBody } from '@patternfly/react-core';
+import { Form, Card } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 
+import { CardBody } from '@components/Card';
 import FormRow from '@components/FormRow';
 import FormField from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';

awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx

@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import styled from 'styled-components';
 
 import AlertModal from '@components/AlertModal';
 import { DetailList, Detail } from '@components/DetailList';
+import { CardBody } from '@components/Card';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput';
 import ErrorDetail from '@components/ErrorDetail';

awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx

@@ -8,7 +8,7 @@ import {
 } from 'react-virtualized';
 
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 import { JobsAPI } from '@api';
 import ContentError from '@components/ContentError';

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -3,16 +3,11 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  PageSection,
-  Card,
-  CardHeader,
-  CardBody,
-  Tooltip,
-} from '@patternfly/react-core';
+import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
 
 import { OrganizationsAPI } from '@api';
 import { Config } from '@contexts/Config';
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import OrganizationForm from '../shared/OrganizationForm';
 

awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { Link, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { OrganizationsAPI } from '@api';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
+import { CardBody } from '@components/Card';
 import { ChipGroup, Chip } from '@components/Chip';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';

awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import { CardBody } from '@patternfly/react-core';
-
+import { CardBody } from '@components/Card';
 import { OrganizationsAPI } from '@api';
 import { Config } from '@contexts/Config';
 

awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx

@@ -5,12 +5,12 @@ import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
   Card as _Card,
-  CardBody,
   CardHeader,
   PageSection,
   Tooltip,
 } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
+import { CardBody } from '@components/Card';
 import ProjectForm from '../shared/ProjectForm';
 import { ProjectsAPI } from '@api';
 

awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx

@@ -5,7 +5,8 @@ import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import { Project } from '@types';
 import { Config } from '@contexts/Config';
-import { Button, CardBody, List, ListItem } from '@patternfly/react-core';
+import { Button, List, ListItem } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { CredentialChip } from '@components/Chip';
 import { toTitleCase } from '@util/strings';

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx

@@ -3,16 +3,14 @@ import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import {
-  Card as _Card,
-  CardBody,
-  CardHeader,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Card as _Card, CardHeader, Tooltip } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import ProjectForm from '../shared/ProjectForm';
 import { ProjectsAPI } from '@api';
 
+// TODO: we are doing this in multiple add/edit screens -- move to
+// common component?
 const Card = styled(_Card)`
   --pf-c-card--child--PaddingLeft: 0;
   --pf-c-card--child--PaddingRight: 0;

awx/ui_next/src/screens/Project/ProjectJobTemplates/ProjectJobTemplates.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class ProjectJobTemplates extends Component {
   render() {

awx/ui_next/src/screens/Project/ProjectSchedules/ProjectSchedules.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class ProjectSchedules extends Component {
   render() {

awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx

@@ -2,16 +2,11 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  PageSection,
-  Card,
-  CardHeader,
-  CardBody,
-  Tooltip,
-} from '@patternfly/react-core';
+import { PageSection, Card, CardHeader, Tooltip } from '@patternfly/react-core';
 
 import { TeamsAPI } from '@api';
 import { Config } from '@contexts/Config';
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 
 import TeamForm from '../shared/TeamForm';

awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx

@@ -2,16 +2,12 @@ import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
 
+import { CardBody } from '@components/Card';
 import { DetailList, Detail } from '@components/DetailList';
 import { formatDateString } from '@util/dates';
 
-const CardBody = styled(PFCardBody)`
-  padding-top: 20px;
-`;
-
 class TeamDetail extends Component {
   render() {
     const {

awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 import { TeamsAPI } from '@api';
 import { Config } from '@contexts/Config';

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx

@@ -2,13 +2,8 @@ import React, { useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  PageSection,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Card, CardHeader, PageSection, Tooltip } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import {
-  CardBody,
   Button,
   TextList,
   TextListItem,
@@ -12,6 +11,7 @@ import {
 import styled from 'styled-components';
 import { t } from '@lingui/macro';
 
+import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import LaunchButton from '@components/LaunchButton';
 import ContentLoading from '@components/ContentLoading';

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -1,7 +1,7 @@
 /* eslint react/no-unused-state: 0 */
 import React, { Component } from 'react';
 import { withRouter, Redirect } from 'react-router-dom';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import { JobTemplatesAPI, ProjectsAPI } from '@api';

awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
-import { CardBody } from '@patternfly/react-core';
-
+import { CardBody } from '@components/Card';
 import { DetailList } from '@components/DetailList';
 
 class WorkflowJobTemplateDetail extends Component {

awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx

@@ -5,11 +5,11 @@ import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
   Card as _Card,
-  CardBody,
   CardHeader,
   PageSection,
   Tooltip,
 } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import UserForm from '../shared/UserForm';
 import { UsersAPI } from '@api';

awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx

@@ -2,16 +2,12 @@ import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
-import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
 
+import { CardBody } from '@components/Card';
 import { DetailList, Detail } from '@components/DetailList';
 import { formatDateString } from '@util/dates';
 
-const CardBody = styled(PFCardBody)`
-  padding-top: 20px;
-`;
-
 class UserDetail extends Component {
   render() {
     const {

awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 import UserForm from '../shared/UserForm';
 import { UsersAPI } from '@api';
 

awx/ui_next/src/screens/User/UserOrganizations/UserOrganizations.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class UserAdd extends Component {
   render() {

awx/ui_next/src/screens/User/UserTeams/UserTeams.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class UserAdd extends Component {
   render() {

awx/ui_next/src/screens/User/UserTokens/UserTokens.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CardBody } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
 
 class UserAdd extends Component {
   render() {