External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-21 02:47:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

switch all tabbed screens to use TabbedCardHeader

Browse Source
This commit is contained in:
Keith Grant
2019-12-16 15:13:10 -08:00
parent 41c9ea3c07
commit cde39413c9
21 changed files with 46 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
awx/ui_next/src/components/Card/CardBody.jsx
View File

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

1
awx/ui_next/src/components/Card/TabbedCardHeader.js
View File

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

1
awx/ui_next/src/components/Card/index.js
View File

@@ -1,2 +1 @@
export { default as CardBody } from './CardBody';
export { default as TabbedCardHeader } from './TabbedCardHeader'; export { default as TabbedCardHeader } from './TabbedCardHeader';

19
awx/ui_next/src/screens/Host/Host.jsx
View File

@@ -2,12 +2,8 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
import { import { Card, PageSection } from '@patternfly/react-core';
Card, import { TabbedCardHeader } from '@components/Card';
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
@@ -18,13 +14,6 @@ import HostGroups from './HostGroups';
import HostCompletedJobs from './HostCompletedJobs'; import HostCompletedJobs from './HostCompletedJobs';
import { HostsAPI } from '@api'; 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 { class Host extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -89,7 +78,7 @@ class Host extends Component {
]; ];
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs <RoutedTabs
match={match} match={match}
history={history} history={history}
@@ -97,7 +86,7 @@ class Host extends Component {
tabsArray={tabsArray} tabsArray={tabsArray}
/> />
<CardCloseButton linkTo="/hosts" /> <CardCloseButton linkTo="/hosts" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

2
awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
View File

@@ -46,7 +46,7 @@ function HostDetail({ host, i18n }) {
} }
return ( return (
<CardBody css="padding-top: 20px"> <CardBody>
<DetailList gutter="sm"> <DetailList gutter="sm">
<Detail label={i18n._(t`Name`)} value={name} /> <Detail label={i18n._(t`Name`)} value={name} />
<Detail label={i18n._(t`Description`)} value={description} /> <Detail label={i18n._(t`Description`)} value={description} />

2
awx/ui_next/src/screens/Inventory/Inventory.jsx
View File

@@ -52,7 +52,7 @@ function Inventory({ history, i18n, location, match, setBreadcrumb }) {
]; ];
let cardHeader = hasContentLoading ? null : ( let cardHeader = hasContentLoading ? null : (
<TabbedCardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} /> <RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" /> <CardCloseButton linkTo="/inventories" />
</TabbedCardHeader> </TabbedCardHeader>

2
awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { CardBody } from '@components/Card'; import { CardBody } from '@patternfly/react-core';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { ChipGroup, Chip } from '@components/Chip'; import { ChipGroup, Chip } from '@components/Chip';
import { VariablesDetail } from '@components/CodeMirrorInput'; import { VariablesDetail } from '@components/CodeMirrorInput';

7
awx/ui_next/src/screens/Inventory/SmartInventory.jsx
View File

@@ -1,8 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; 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 { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
import { TabbedCardHeader } from '@components/Card';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
@@ -74,10 +75,10 @@ class SmartInventory extends Component {
]; ];
let cardHeader = hasContentLoading ? null : ( let cardHeader = hasContentLoading ? null : (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} /> <RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" /> <CardCloseButton linkTo="/inventories" />
</CardHeader> </TabbedCardHeader>
); );
if (location.pathname.endsWith('edit')) { if (location.pathname.endsWith('edit')) {

19
awx/ui_next/src/screens/Job/Job.jsx
View File

@@ -2,13 +2,9 @@ import React, { Component } from 'react';
import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom'; import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import styled from 'styled-components'; import { Card, PageSection } from '@patternfly/react-core';
import {
Card,
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import { JobsAPI } from '@api'; import { JobsAPI } from '@api';
import { TabbedCardHeader } from '@components/Card';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
@@ -17,13 +13,6 @@ import JobDetail from './JobDetail';
import JobOutput from './JobOutput'; import JobOutput from './JobOutput';
import { JOB_TYPE_URL_SEGMENTS } from '../../constants'; 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 { class Job extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -81,10 +70,10 @@ class Job extends Component {
]; ];
let cardHeader = ( let cardHeader = (
<CardHeader> <TabbedCardHeader>
<RoutedTabs match={match} history={history} tabsArray={tabsArray} /> <RoutedTabs match={match} history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/jobs" /> <CardCloseButton linkTo="/jobs" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

19
awx/ui_next/src/screens/Organization/Organization.jsx
View File

@@ -2,13 +2,9 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
import { import { Card, PageSection } from '@patternfly/react-core';
Card,
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import { TabbedCardHeader } from '@components/Card';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import NotificationList from '@components/NotificationList/NotificationList'; import NotificationList from '@components/NotificationList/NotificationList';
@@ -18,13 +14,6 @@ import OrganizationEdit from './OrganizationEdit';
import OrganizationTeams from './OrganizationTeams'; import OrganizationTeams from './OrganizationTeams';
import { OrganizationsAPI } from '@api'; 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 { class Organization extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -141,7 +130,7 @@ class Organization extends Component {
} }
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs <RoutedTabs
match={match} match={match}
history={history} history={history}
@@ -149,7 +138,7 @@ class Organization extends Component {
tabsArray={tabsArray} tabsArray={tabsArray}
/> />
<CardCloseButton linkTo="/organizations" /> <CardCloseButton linkTo="/organizations" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

19
awx/ui_next/src/screens/Project/Project.jsx
View File

@@ -2,12 +2,8 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
import { import { Card, PageSection } from '@patternfly/react-core';
Card, import { TabbedCardHeader } from '@components/Card';
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
@@ -19,13 +15,6 @@ import ProjectJobTemplates from './ProjectJobTemplates';
import ProjectSchedules from './ProjectSchedules'; import ProjectSchedules from './ProjectSchedules';
import { OrganizationsAPI, ProjectsAPI } from '@api'; 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 { class Project extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -161,7 +150,7 @@ class Project extends Component {
}); });
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs <RoutedTabs
match={match} match={match}
history={history} history={history}
@@ -169,7 +158,7 @@ class Project extends Component {
tabsArray={tabsArray} tabsArray={tabsArray}
/> />
<CardCloseButton linkTo="/projects" /> <CardCloseButton linkTo="/projects" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

2
awx/ui_next/src/screens/Project/ProjectAdd/ProjectAdd.jsx
View File

@@ -44,7 +44,7 @@ function ProjectAdd({ history, i18n }) {
return ( return (
<PageSection> <PageSection>
<Card> <Card>
<CardHeader css="text-align: right"> <CardHeader className="at-u-textRight">
<Tooltip content={i18n._(t`Close`)} position="top"> <Tooltip content={i18n._(t`Close`)} position="top">
<CardCloseButton onClick={handleCancel} /> <CardCloseButton onClick={handleCancel} />
</Tooltip> </Tooltip>

2
awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
View File

@@ -89,7 +89,7 @@ function ProjectDetail({ project, i18n }) {
} }
return ( return (
<CardBody css="padding-top: 20px"> <CardBody>
<DetailList gutter="sm"> <DetailList gutter="sm">
<Detail <Detail
label={i18n._(t`Name`)} label={i18n._(t`Name`)}

2
awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx
View File

@@ -41,7 +41,7 @@ function ProjectEdit({ project, history, i18n }) {
return ( return (
<Card> <Card>
<CardHeader css="text-align: right"> <CardHeader className="at-u-textRight">
<Tooltip content={i18n._(t`Close`)} position="top"> <Tooltip content={i18n._(t`Close`)} position="top">
<CardCloseButton onClick={handleCancel} /> <CardCloseButton onClick={handleCancel} />
</Tooltip> </Tooltip>

19
awx/ui_next/src/screens/Team/Team.jsx
View File

@@ -2,26 +2,15 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
import { import { Card, PageSection } from '@patternfly/react-core';
Card,
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import { TabbedCardHeader } from '@components/Card';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import TeamDetail from './TeamDetail'; import TeamDetail from './TeamDetail';
import TeamEdit from './TeamEdit'; import TeamEdit from './TeamEdit';
import { TeamsAPI } from '@api'; 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 { class Team extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -81,7 +70,7 @@ class Team extends Component {
]; ];
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs <RoutedTabs
match={match} match={match}
history={history} history={history}
@@ -89,7 +78,7 @@ class Team extends Component {
tabsArray={tabsArray} tabsArray={tabsArray}
/> />
<CardCloseButton linkTo="/teams" /> <CardCloseButton linkTo="/teams" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

2
awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
View File

@@ -195,7 +195,7 @@ class JobTemplateDetail extends Component {
return ( return (
isInitialized && ( isInitialized && (
<CardBody css="padding-top: 20px;"> <CardBody>
<DetailList gutter="sm"> <DetailList gutter="sm">
<Detail <Detail
label={i18n._(t`Name`)} label={i18n._(t`Name`)}

7
awx/ui_next/src/screens/Template/Template.jsx
View File

@@ -1,8 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; 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 { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
import { TabbedCardHeader } from '@components/Card';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import NotificationList from '@components/NotificationList'; import NotificationList from '@components/NotificationList';
@@ -121,10 +122,10 @@ class Template extends Component {
}); });
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} /> <RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" /> <CardCloseButton linkTo="/templates" />
</CardHeader> </TabbedCardHeader>
); );
if (location.pathname.endsWith('edit')) { if (location.pathname.endsWith('edit')) {

7
awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
View File

@@ -1,8 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; 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 { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
import { TabbedCardHeader } from '@components/Card';
import AppendBody from '@components/AppendBody'; import AppendBody from '@components/AppendBody';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
@@ -65,10 +66,10 @@ class WorkflowJobTemplate extends Component {
}); });
let cardHeader = hasContentLoading ? null : ( let cardHeader = hasContentLoading ? null : (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} /> <RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" /> <CardCloseButton linkTo="/templates" />
</CardHeader> </TabbedCardHeader>
); );
if (location.pathname.endsWith('edit')) { if (location.pathname.endsWith('edit')) {

2
awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
View File

@@ -8,7 +8,7 @@ import { DetailList } from '@components/DetailList';
class WorkflowJobTemplateDetail extends Component { class WorkflowJobTemplateDetail extends Component {
render() { render() {
return ( return (
<CardBody css="padding-top: 20px;"> <CardBody>
<DetailList gutter="sm" /> <DetailList gutter="sm" />
</CardBody> </CardBody>
); );

19
awx/ui_next/src/screens/User/User.jsx
View File

@@ -2,12 +2,8 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom'; import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
import { import { Card, PageSection } from '@patternfly/react-core';
Card, import { TabbedCardHeader } from '@components/Card';
CardHeader as PFCardHeader,
PageSection,
} from '@patternfly/react-core';
import styled from 'styled-components';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs'; import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
@@ -18,13 +14,6 @@ import UserTeams from './UserTeams';
import UserTokens from './UserTokens'; import UserTokens from './UserTokens';
import { UsersAPI } from '@api'; 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 { class User extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -90,7 +79,7 @@ class User extends Component {
]; ];
let cardHeader = ( let cardHeader = (
<CardHeader style={{ padding: 0 }}> <TabbedCardHeader>
<RoutedTabs <RoutedTabs
match={match} match={match}
history={history} history={history}
@@ -98,7 +87,7 @@ class User extends Component {
tabsArray={tabsArray} tabsArray={tabsArray}
/> />
<CardCloseButton linkTo="/users" /> <CardCloseButton linkTo="/users" />
</CardHeader> </TabbedCardHeader>
); );
if (!isInitialized) { if (!isInitialized) {

2
awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
View File

@@ -41,7 +41,7 @@ function UserAdd({ history, i18n }) {
return ( return (
<PageSection> <PageSection>
<Card> <Card>
<CardHeader css="text-align: right"> <CardHeader className="at-u-textRight">
<Tooltip content={i18n._(t`Close`)} position="top"> <Tooltip content={i18n._(t`Close`)} position="top">
<CardCloseButton onClick={handleCancel} /> <CardCloseButton onClick={handleCancel} />
</Tooltip> </Tooltip>