From cde39413c92b8929a82f98366262ed71c2ac69e4 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Mon, 16 Dec 2019 15:13:10 -0800 Subject: [PATCH] switch all tabbed screens to use TabbedCardHeader --- awx/ui_next/src/components/Card/CardBody.jsx | 9 --------- .../src/components/Card/TabbedCardHeader.js | 1 + awx/ui_next/src/components/Card/index.js | 1 - awx/ui_next/src/screens/Host/Host.jsx | 19 ++++--------------- .../screens/Host/HostDetail/HostDetail.jsx | 2 +- .../src/screens/Inventory/Inventory.jsx | 2 +- .../InventoryDetail/InventoryDetail.jsx | 2 +- .../src/screens/Inventory/SmartInventory.jsx | 7 ++++--- awx/ui_next/src/screens/Job/Job.jsx | 19 ++++--------------- .../src/screens/Organization/Organization.jsx | 19 ++++--------------- awx/ui_next/src/screens/Project/Project.jsx | 19 ++++--------------- .../screens/Project/ProjectAdd/ProjectAdd.jsx | 2 +- .../Project/ProjectDetail/ProjectDetail.jsx | 2 +- .../Project/ProjectEdit/ProjectEdit.jsx | 2 +- awx/ui_next/src/screens/Team/Team.jsx | 19 ++++--------------- .../JobTemplateDetail/JobTemplateDetail.jsx | 2 +- awx/ui_next/src/screens/Template/Template.jsx | 7 ++++--- .../screens/Template/WorkflowJobTemplate.jsx | 7 ++++--- .../WorkflowJobTemplateDetail.jsx | 2 +- awx/ui_next/src/screens/User/User.jsx | 19 ++++--------------- .../src/screens/User/UserAdd/UserAdd.jsx | 2 +- 21 files changed, 46 insertions(+), 118 deletions(-) delete mode 100644 awx/ui_next/src/components/Card/CardBody.jsx diff --git a/awx/ui_next/src/components/Card/CardBody.jsx b/awx/ui_next/src/components/Card/CardBody.jsx deleted file mode 100644 index 43120cd17d..0000000000 --- a/awx/ui_next/src/components/Card/CardBody.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; -import { CardBody as PFCardBody } from '@patternfly/react-core'; - -const CardBody = styled(PFCardBody)` - padding-top: 20px; -`; -PFCardBody.displayName = 'PFCardBody'; - -export default CardBody; diff --git a/awx/ui_next/src/components/Card/TabbedCardHeader.js b/awx/ui_next/src/components/Card/TabbedCardHeader.js index 0a86d11a59..3878449307 100644 --- a/awx/ui_next/src/components/Card/TabbedCardHeader.js +++ b/awx/ui_next/src/components/Card/TabbedCardHeader.js @@ -5,6 +5,7 @@ const TabbedCardHeader = styled(CardHeader)` --pf-c-card--first-child--PaddingTop: 0; --pf-c-card--child--PaddingLeft: 0; --pf-c-card--child--PaddingRight: 0; + --pf-c-card__header--not-last-child--PaddingBottom: 24px; position: relative; `; diff --git a/awx/ui_next/src/components/Card/index.js b/awx/ui_next/src/components/Card/index.js index 617e65871f..6d197d5600 100644 --- a/awx/ui_next/src/components/Card/index.js +++ b/awx/ui_next/src/components/Card/index.js @@ -1,2 +1 @@ -export { default as CardBody } from './CardBody'; export { default as TabbedCardHeader } from './TabbedCardHeader'; diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx index 20cd4aad0c..0601e661a8 100644 --- a/awx/ui_next/src/screens/Host/Host.jsx +++ b/awx/ui_next/src/screens/Host/Host.jsx @@ -2,12 +2,8 @@ import React, { Component } from 'react'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; -import styled from 'styled-components'; +import { Card, PageSection } from '@patternfly/react-core'; +import { TabbedCardHeader } from '@components/Card'; import CardCloseButton from '@components/CardCloseButton'; import RoutedTabs from '@components/RoutedTabs'; import ContentError from '@components/ContentError'; @@ -18,13 +14,6 @@ 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); @@ -89,7 +78,7 @@ class Host extends Component { ]; let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx index 479d28211f..e9e18c3c4f 100644 --- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx +++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx @@ -46,7 +46,7 @@ function HostDetail({ host, i18n }) { } return ( - + diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx index 03fd08d3fe..e632610660 100644 --- a/awx/ui_next/src/screens/Inventory/Inventory.jsx +++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx @@ -52,7 +52,7 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) { ]; let cardHeader = hasContentLoading ? null : ( - + diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx index 60ccec382f..dffff1881c 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx +++ b/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 '@components/Card'; +import { CardBody } from '@patternfly/react-core'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { ChipGroup, Chip } from '@components/Chip'; import { VariablesDetail } from '@components/CodeMirrorInput'; diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx index 2acd518b2c..7328f79361 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import { t } from '@lingui/macro'; import { withI18n } from '@lingui/react'; -import { Card, CardHeader, PageSection } from '@patternfly/react-core'; +import { Card, PageSection } from '@patternfly/react-core'; import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom'; +import { TabbedCardHeader } from '@components/Card'; import CardCloseButton from '@components/CardCloseButton'; import ContentError from '@components/ContentError'; import RoutedTabs from '@components/RoutedTabs'; @@ -74,10 +75,10 @@ class SmartInventory extends Component { ]; let cardHeader = hasContentLoading ? null : ( - + - + ); if (location.pathname.endsWith('edit')) { diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx index 2178bfc2cf..51032d7553 100644 --- a/awx/ui_next/src/screens/Job/Job.jsx +++ b/awx/ui_next/src/screens/Job/Job.jsx @@ -2,13 +2,9 @@ import React, { Component } from 'react'; import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import styled from 'styled-components'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; +import { Card, PageSection } from '@patternfly/react-core'; import { JobsAPI } from '@api'; +import { TabbedCardHeader } from '@components/Card'; import ContentError from '@components/ContentError'; import CardCloseButton from '@components/CardCloseButton'; import RoutedTabs from '@components/RoutedTabs'; @@ -17,13 +13,6 @@ 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); @@ -81,10 +70,10 @@ class Job extends Component { ]; let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx index 3e7dfaa0af..66679cced5 100644 --- a/awx/ui_next/src/screens/Organization/Organization.jsx +++ b/awx/ui_next/src/screens/Organization/Organization.jsx @@ -2,13 +2,9 @@ import React, { Component } from 'react'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; -import styled from 'styled-components'; +import { Card, PageSection } from '@patternfly/react-core'; import CardCloseButton from '@components/CardCloseButton'; +import { TabbedCardHeader } from '@components/Card'; import RoutedTabs from '@components/RoutedTabs'; import ContentError from '@components/ContentError'; import NotificationList from '@components/NotificationList/NotificationList'; @@ -18,13 +14,6 @@ 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); @@ -141,7 +130,7 @@ class Organization extends Component { } let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx index a410edd562..1215586ea2 100644 --- a/awx/ui_next/src/screens/Project/Project.jsx +++ b/awx/ui_next/src/screens/Project/Project.jsx @@ -2,12 +2,8 @@ import React, { Component } from 'react'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; -import styled from 'styled-components'; +import { Card, PageSection } from '@patternfly/react-core'; +import { TabbedCardHeader } from '@components/Card'; import CardCloseButton from '@components/CardCloseButton'; import RoutedTabs from '@components/RoutedTabs'; import ContentError from '@components/ContentError'; @@ -19,13 +15,6 @@ 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); @@ -161,7 +150,7 @@ class Project extends Component { }); let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx index 5eeb4eeb45..7048170166 100644 --- a/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx +++ b/awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx @@ -44,7 +44,7 @@ function ProjectAdd({ history, i18n }) { return ( - + diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx index 25548e0a2e..855c7097ab 100644 --- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx +++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx @@ -89,7 +89,7 @@ function ProjectDetail({ project, i18n }) { } return ( - + - + diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx index 9aabb7b1dd..f44d71c366 100644 --- a/awx/ui_next/src/screens/Team/Team.jsx +++ b/awx/ui_next/src/screens/Team/Team.jsx @@ -2,26 +2,15 @@ import React, { Component } from 'react'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; -import styled from 'styled-components'; +import { Card, PageSection } from '@patternfly/react-core'; import CardCloseButton from '@components/CardCloseButton'; +import { TabbedCardHeader } from '@components/Card'; import RoutedTabs from '@components/RoutedTabs'; import ContentError from '@components/ContentError'; import TeamDetail from './TeamDetail'; import TeamEdit from './TeamEdit'; import { TeamsAPI } 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 Team extends Component { constructor(props) { super(props); @@ -81,7 +70,7 @@ class Team extends Component { ]; let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index fbd5d9e1bf..6d9b9d09dc 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -195,7 +195,7 @@ class JobTemplateDetail extends Component { return ( isInitialized && ( - + + - + ); if (location.pathname.endsWith('edit')) { diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx index 30371f1dd1..fadeb5878c 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import { t } from '@lingui/macro'; import { withI18n } from '@lingui/react'; -import { Card, CardHeader, PageSection } from '@patternfly/react-core'; +import { Card, PageSection } from '@patternfly/react-core'; import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom'; +import { TabbedCardHeader } from '@components/Card'; import AppendBody from '@components/AppendBody'; import CardCloseButton from '@components/CardCloseButton'; import ContentError from '@components/ContentError'; @@ -65,10 +66,10 @@ class WorkflowJobTemplate extends Component { }); let cardHeader = hasContentLoading ? null : ( - + - + ); if (location.pathname.endsWith('edit')) { diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx index a1a6c7cd58..3cd04bf305 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx @@ -8,7 +8,7 @@ import { DetailList } from '@components/DetailList'; class WorkflowJobTemplateDetail extends Component { render() { return ( - + ); diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx index c4ee4c5fb8..697976cd55 100644 --- a/awx/ui_next/src/screens/User/User.jsx +++ b/awx/ui_next/src/screens/User/User.jsx @@ -2,12 +2,8 @@ import React, { Component } from 'react'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; -import { - Card, - CardHeader as PFCardHeader, - PageSection, -} from '@patternfly/react-core'; -import styled from 'styled-components'; +import { Card, PageSection } from '@patternfly/react-core'; +import { TabbedCardHeader } from '@components/Card'; import CardCloseButton from '@components/CardCloseButton'; import RoutedTabs from '@components/RoutedTabs'; import ContentError from '@components/ContentError'; @@ -18,13 +14,6 @@ import UserTeams from './UserTeams'; import UserTokens from './UserTokens'; import { UsersAPI } 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 User extends Component { constructor(props) { super(props); @@ -90,7 +79,7 @@ class User extends Component { ]; let cardHeader = ( - + - + ); if (!isInitialized) { diff --git a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx index 4b9587086e..3112db6c8b 100644 --- a/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx +++ b/awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx @@ -41,7 +41,7 @@ function UserAdd({ history, i18n }) { return ( - +