External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03: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
Show Stats 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--child--PaddingLeft: 0;
--pf-c-card--child--PaddingRight: 0;
--pf-c-card__header--not-last-child--PaddingBottom: 24px;
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';

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 { 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 = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs
match={match}
history={history}
@ -97,7 +86,7 @@ class Host extends Component {
tabsArray={tabsArray}
/>
<CardCloseButton linkTo="/hosts" />
</CardHeader>
</TabbedCardHeader>
);
if (!isInitialized) {

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

@ -46,7 +46,7 @@ function HostDetail({ host, i18n }) {
}
return (
<CardBody css="padding-top: 20px">
<CardBody>
<DetailList gutter="sm">
<Detail label={i18n._(t`Name`)} value={name} />
<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 : (
<TabbedCardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" />
</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 { 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';

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

@ -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 : (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" />
</CardHeader>
</TabbedCardHeader>
);
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 { 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 = (
<CardHeader>
<TabbedCardHeader>
<RoutedTabs match={match} history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/jobs" />
</CardHeader>
</TabbedCardHeader>
);
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 { 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 = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs
match={match}
history={history}
@ -149,7 +138,7 @@ class Organization extends Component {
tabsArray={tabsArray}
/>
<CardCloseButton linkTo="/organizations" />
</CardHeader>
</TabbedCardHeader>
);
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 { 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 = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs
match={match}
history={history}
@ -169,7 +158,7 @@ class Project extends Component {
tabsArray={tabsArray}
/>
<CardCloseButton linkTo="/projects" />
</CardHeader>
</TabbedCardHeader>
);
if (!isInitialized) {

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

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

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

@ -89,7 +89,7 @@ function ProjectDetail({ project, i18n }) {
}
return (
<CardBody css="padding-top: 20px">
<CardBody>
<DetailList gutter="sm">
<Detail
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 (
<Card>
<CardHeader css="text-align: right">
<CardHeader className="at-u-textRight">
<Tooltip content={i18n._(t`Close`)} position="top">
<CardCloseButton onClick={handleCancel} />
</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 { 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 = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs
match={match}
history={history}
@ -89,7 +78,7 @@ class Team extends Component {
tabsArray={tabsArray}
/>
<CardCloseButton linkTo="/teams" />
</CardHeader>
</TabbedCardHeader>
);
if (!isInitialized) {

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

@ -195,7 +195,7 @@ class JobTemplateDetail extends Component {
return (
isInitialized && (
<CardBody css="padding-top: 20px;">
<CardBody>
<DetailList gutter="sm">
<Detail
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 { 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 NotificationList from '@components/NotificationList';
@ -121,10 +122,10 @@ class Template extends Component {
});
let cardHeader = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" />
</CardHeader>
</TabbedCardHeader>
);
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 { 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 : (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs history={history} tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" />
</CardHeader>
</TabbedCardHeader>
);
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 {
render() {
return (
<CardBody css="padding-top: 20px;">
<CardBody>
<DetailList gutter="sm" />
</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 { 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 = (
<CardHeader style={{ padding: 0 }}>
<TabbedCardHeader>
<RoutedTabs
match={match}
history={history}
@ -98,7 +87,7 @@ class User extends Component {
tabsArray={tabsArray}
/>
<CardCloseButton linkTo="/users" />
</CardHeader>
</TabbedCardHeader>
);
if (!isInitialized) {

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

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