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

Remove tab and button style overrides

Browse Source
This commit is contained in:
Marliana Lara 2020-02-20 18:50:05 -05:00
parent 2a8679234a
commit f2e1e71302
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
35 changed files with 154 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
View File

@ -85,7 +85,6 @@ class SelectResourceStep extends React.Component {
return (
<Fragment>
{isLoading && <div>{i18n._(t`Loading...`)}</div>}
{isInitialized && (
<Fragment>
<div>
@ -102,6 +101,7 @@ class SelectResourceStep extends React.Component {
/>
)}
<PaginatedDataList
hasContentLoading={isLoading}
items={resources}
itemCount={count}
qsConfig={this.qsConfig}

7
awx/ui_next/src/components/Card/CardActionsRow.jsx
View File

@ -3,13 +3,8 @@ import { CardActions } from '@patternfly/react-core';
import styled from 'styled-components';
const CardActionsWrapper = styled.div`
display: flex;
justify-content: flex-end;
margin-top: 20px;
& > .pf-c-card__actions > :not(:first-child) {
margin-left: 0.5rem;
}
--pf-c-card__actions--PaddingLeft: 0;
`;
function CardActionsRow({ children }) {

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

@ -7,7 +7,7 @@ const TabbedCardHeader = styled(CardHeader)`
--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;
display: flex;
`;
export default TabbedCardHeader;

12
awx/ui_next/src/components/CardCloseButton/CardCloseButton.jsx
View File

@ -1,24 +1,16 @@
import React from 'react';
import { string } from 'prop-types';
import { Link as RRLink } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { Button } from '@patternfly/react-core';
import { TimesIcon } from '@patternfly/react-icons';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
const Link = styled(RRLink)`
position: absolute;
top: 5px;
right: 4px;
color: var(--pf-c-button--m-plain--Color);
`;
function CardCloseButton({ linkTo, i18n, i18nHash, ...props }) {
if (linkTo) {
return (
<Link
className="pf-c-button"
className="pf-c-button pf-m-plain"
aria-label={i18n._(t`Close`)}
title={i18n._(t`Close`)}
to={linkTo}

10
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -81,8 +81,8 @@ class DataListToolbar extends React.Component {
<Sort qsConfig={qsConfig} columns={sortColumns} onSort={onSort} />
</DataToolbarItem>
</DataToolbarToggleGroup>
<DataToolbarGroup>
{showExpandCollapse && (
{showExpandCollapse && (
<DataToolbarGroup>
<Fragment>
<DataToolbarItem>
<ExpandCollapse
@ -92,9 +92,9 @@ class DataListToolbar extends React.Component {
/>
</DataToolbarItem>
</Fragment>
)}
</DataToolbarGroup>
<DataToolbarGroup css="margin-left: auto">
</DataToolbarGroup>
)}
<DataToolbarGroup>
{additionalControls.map(control => (
<DataToolbarItem key={control.key}>{control}</DataToolbarItem>
))}

21
awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
View File

@ -1,27 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
const ActionGroup = styled(PFActionGroup)`
display: flex;
justify-content: flex-end;
--pf-c-form__group--m-action--MarginTop: 0;
grid-column: 1 / -1;
margin-right: calc(var(--pf-c-form__actions--MarginRight) * -1);
.pf-c-form__actions {
& > button {
margin: 0;
}
& > :not(:first-child) {
margin-left: 24px;
}
}
`;
import { ActionGroup, Button } from '@patternfly/react-core';
const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
<ActionGroup>

16
awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
View File

@ -1,19 +1,9 @@
import React from 'react';
import { string, func } from 'prop-types';
import { Link } from 'react-router-dom';
import { Button as PFButton, Tooltip } from '@patternfly/react-core';
import { PlusIcon } from '@patternfly/react-icons';
import { Button, Tooltip } from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
const Button = styled(PFButton)`
&& {
background-color: #5cb85c;
padding: 5px 8px;
--pf-global--FontSize--md: 14px;
}
`;
function ToolbarAddButton({ linkTo, onClick, i18n }) {
if (!linkTo && !onClick) {
@ -30,14 +20,14 @@ function ToolbarAddButton({ linkTo, onClick, i18n }) {
variant="primary"
aria-label={i18n._(t`Add`)}
>
<PlusIcon />
{i18n._(t`Add`)}
</Button>
</Tooltip>
);
}
return (
<Button variant="primary" aria-label={i18n._(t`Add`)} onClick={onClick}>
<PlusIcon />
{i18n._(t`Add`)}
</Button>
);
}

25
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
View File

@ -9,27 +9,10 @@ import {
checkPropTypes,
} from 'prop-types';
import { Button, Tooltip } from '@patternfly/react-core';
import { TrashAltIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import AlertModal from '../AlertModal';
const DeleteButton = styled(Button)`
padding: 5px 8px;
&:hover {
background-color: #d9534f;
color: white;
}
&[disabled] {
color: var(--pf-c-button--m-plain--Color);
pointer-events: initial;
cursor: not-allowed;
}
`;
const requireNameOrUsername = props => {
const { name, username } = props;
if (!name && !username) {
@ -149,14 +132,14 @@ class ToolbarDeleteButton extends React.Component {
<Fragment>
<Tooltip content={this.renderTooltip()} position="top">
<div>
<DeleteButton
variant="plain"
<Button
variant="danger"
aria-label={i18n._(t`Delete`)}
onClick={this.handleConfirmDelete}
isDisabled={isDisabled}
>
<TrashAltIcon />
</DeleteButton>
{i18n._(t`Delete`)}
</Button>
</div>
</Tooltip>
{isModalOpen && (

4
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
View File

@ -39,7 +39,9 @@ describe('<ToolbarDeleteButton />', () => {
);
wrapper.find('ToolbarDeleteButton').setState({ isModalOpen: true });
wrapper.update();
wrapper.find('button.pf-m-danger').simulate('click');
wrapper
.find('ModalBoxFooter button[aria-label="confirm delete"]')
.simulate('click');
expect(onDelete).toHaveBeenCalled();
expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen')).toBe(
false

134
awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap
View File

@ -97,121 +97,51 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
zIndex={9999}
>
<div>
<ToolbarDeleteButton__DeleteButton
<Component
aria-label="Delete"
isDisabled={true}
onClick={[Function]}
variant="plain"
variant="danger"
>
<StyledComponent
aria-label="Delete"
forwardedComponent={
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0",
"isStatic": true,
"lastClassName": "bQjfFG",
"rules": Array [
"padding:5px 8px;&:hover{background-color:#d9534f;color:white;}&[disabled]{color:var(--pf-c-button--m-plain--Color);pointer-events:initial;cursor:not-allowed;}",
],
},
"displayName": "ToolbarDeleteButton__DeleteButton",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
"aria-label": "Delete",
"children": "Delete",
"isDisabled": true,
"onClick": [Function],
"variant": "danger",
}
}
forwardedRef={null}
isDisabled={true}
onClick={[Function]}
variant="plain"
consumerContext={null}
>
<Component
<Button
aria-label="Delete"
className="ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
isDisabled={true}
onClick={[Function]}
variant="plain"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Delete",
"children": <TrashAltIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG",
"isDisabled": true,
"onClick": [Function],
"variant": "plain",
}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
consumerContext={null}
}
variant="danger"
>
<button
aria-disabled={null}
aria-label="Delete"
className="pf-c-button pf-m-danger"
disabled={true}
onClick={[Function]}
tabIndex={null}
type="button"
>
<Button
aria-label="Delete"
className="ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
isDisabled={true}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
>
<button
aria-disabled={null}
aria-label="Delete"
className="pf-c-button pf-m-plain ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
disabled={true}
onClick={[Function]}
tabIndex={null}
type="button"
>
<TrashAltIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 448 512"
width="1em"
>
<path
d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
transform=""
/>
</svg>
</TrashAltIcon>
</button>
</Button>
</ComponentWithOuia>
</Component>
</StyledComponent>
</ToolbarDeleteButton__DeleteButton>
Delete
</button>
</Button>
</ComponentWithOuia>
</Component>
</div>
<Portal
containerInfo={

35
awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
View File

@ -1,40 +1,7 @@
import React from 'react';
import { shape, string, number, arrayOf, node, oneOfType } from 'prop-types';
import { Tab, Tabs as PFTabs } from '@patternfly/react-core';
import { Tab, Tabs } from '@patternfly/react-core';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
const Tabs = styled(PFTabs)`
--pf-c-tabs__button--PaddingLeft: 20px;
--pf-c-tabs__button--PaddingRight: 20px;
.pf-c-tabs__list {
li:first-of-type .pf-c-tabs__button {
&::before {
border-left: none;
}
&::after {
margin-left: 0;
}
}
}
.pf-c-tabs__item.pf-m-current .pf-c-tabs__button {
font-weight: bold;
}
&:not(.pf-c-tabs__item)::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
border: solid var(--pf-c-tabs__item--BorderColor);
border-width: var(--pf-c-tabs__item--BorderWidth) 0
var(--pf-c-tabs__item--BorderWidth) 0;
}
`;
function RoutedTabs(props) {
const { tabsArray } = props;

1
awx/ui_next/src/components/Search/Search.jsx
View File

@ -204,7 +204,6 @@ class Search extends React.Component {
}
isOpen={isSearchDropdownOpen}
dropdownItems={searchDropdownItems}
style={{ width: '100%', maxWidth: '100px' }}
/>
) : (
<NoOptionDropdown>{searchColumnName}</NoOptionDropdown>

1
awx/ui_next/src/components/Sort/Sort.jsx
View File

@ -135,7 +135,6 @@ class Sort extends React.Component {
onSelect={this.handleDropdownSelect}
direction={up}
isOpen={isSortDropdownOpen}
style={{ width: '100%', maxWidth: '100px' }}
toggle={
<DropdownToggle
id="awx-sort"

6
awx/ui_next/src/screens/Credential/Credential.jsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, PageSection, CardActions } from '@patternfly/react-core';
import {
Switch,
useParams,
@ -60,7 +60,9 @@ function Credential({ i18n, setBreadcrumb }) {
let cardHeader = hasContentLoading ? null : (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/credentials" />
<CardActions>
<CardCloseButton linkTo="/credentials" />
</CardActions>
</TabbedCardHeader>
);

6
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
View File

@ -119,15 +119,15 @@ function CredentialList({ i18n }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd
? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={handleDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Credentials`)}
/>,
...(canAdd
? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
: []),
]}
/>
)}

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

@ -9,7 +9,7 @@ import {
useRouteMatch,
useLocation,
} from 'react-router-dom';
import { Card } from '@patternfly/react-core';
import { Card, CardActions } from '@patternfly/react-core';
import { CaretLeftIcon } from '@patternfly/react-icons';
import { TabbedCardHeader } from '@components/Card';
@ -103,7 +103,9 @@ function Host({ inventory, i18n, setBreadcrumb }) {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo={hostListUrl} />
<CardActions>
<CardCloseButton linkTo={hostListUrl} />
</CardActions>
</TabbedCardHeader>
);

6
awx/ui_next/src/screens/Host/HostList/HostList.jsx
View File

@ -134,15 +134,15 @@ function HostList({ i18n }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd
? [<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={handleHostDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Hosts`)}
/>,
...(canAdd
? [<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
: []),
]}
/>
)}

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

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import {
Switch,
Route,
@ -66,7 +66,9 @@ function Inventory({ i18n, setBreadcrumb }) {
let cardHeader = hasContentLoading ? null : (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" />
<CardActions>
<CardCloseButton linkTo="/inventories" />
</CardActions>
</TabbedCardHeader>
);

11
awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
View File

@ -10,8 +10,8 @@ import {
useLocation,
useParams,
} from 'react-router-dom';
import { CardActions } from '@patternfly/react-core';
import { CaretLeftIcon } from '@patternfly/react-icons';
import { GroupsAPI } from '@api';
import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs';
import ContentError from '@components/ContentError';
@ -19,6 +19,7 @@ import ContentLoading from '@components/ContentLoading';
import { TabbedCardHeader } from '@components/Card';
import InventoryGroupEdit from '../InventoryGroupEdit/InventoryGroupEdit';
import InventoryGroupDetail from '../InventoryGroupDetail/InventoryGroupDetail';
import { GroupsAPI } from '@api';
function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
const [inventoryGroup, setInventoryGroup] = useState(null);
@ -109,9 +110,11 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton
linkTo={`/inventories/inventory/${inventory.id}/groups`}
/>
<CardActions>
<CardCloseButton
linkTo={`/inventories/inventory/${inventory.id}/groups`}
/>
</CardActions>
</TabbedCardHeader>
);
}

45
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
View File

@ -1,5 +1,4 @@
import React, { useState, useEffect } from 'react';
import { TrashAltIcon } from '@patternfly/react-icons';
import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -12,7 +11,6 @@ import DataListToolbar from '@components/DataListToolbar';
import PaginatedDataList, {
ToolbarAddButton,
} from '@components/PaginatedDataList';
import styled from 'styled-components';
import InventoryGroupItem from './InventoryGroupItem';
import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
@ -22,21 +20,6 @@ const QS_CONFIG = getQSConfig('group', {
order_by: 'name',
});
const DeleteButton = styled(Button)`
padding: 5px 8px;
&:hover {
background-color: #d9534f;
color: white;
}
&[disabled] {
color: var(--pf-c-button--m-plain--Color);
pointer-events: initial;
cursor: not-allowed;
}
`;
function cannotDelete(item) {
return !item.summary_fields.user_capabilities.delete;
}
@ -224,20 +207,6 @@ function InventoryGroupsList({ i18n, location, match }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
<Tooltip content={renderTooltip()} position="top" key="delete">
<div>
<DeleteButton
variant="plain"
aria-label={i18n._(t`Delete`)}
onClick={toggleModal}
isDisabled={
selected.length === 0 || selected.some(cannotDelete)
}
>
<TrashAltIcon />
</DeleteButton>
</div>
</Tooltip>,
...(canAdd
? [
<ToolbarAddButton
@ -246,6 +215,20 @@ function InventoryGroupsList({ i18n, location, match }) {
/>,
]
: []),
<Tooltip content={renderTooltip()} position="top" key="delete">
<div>
<Button
variant="danger"
aria-label={i18n._(t`Delete`)}
onClick={toggleModal}
isDisabled={
selected.length === 0 || selected.some(cannotDelete)
}
>
{i18n._(t`Delete`)}
</Button>
</div>
</Tooltip>,
]}
/>
)}

12
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
View File

@ -159,12 +159,6 @@ function InventoryHostList({ i18n, location, match }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
<ToolbarDeleteButton
key="delete"
onDelete={handleDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Hosts`)}
/>,
...(canAdd
? [
<ToolbarAddButton
@ -173,6 +167,12 @@ function InventoryHostList({ i18n, location, match }) {
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={handleDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Hosts`)}
/>,
]}
/>
)}

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

@ -202,13 +202,13 @@ class InventoriesList extends Component {
onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd ? [addButton] : []),
<ToolbarDeleteButton
key="delete"
onDelete={this.handleInventoryDelete}
itemsToDelete={selected}
pluralizedItemName="Inventories"
/>,
...(canAdd ? [addButton] : []),
]}
/>
)}

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

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, 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';
@ -77,7 +77,9 @@ class SmartInventory extends Component {
let cardHeader = hasContentLoading ? null : (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/inventories" />
<CardActions>
<CardCloseButton linkTo="/inventories" />
</CardActions>
</TabbedCardHeader>
);

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

@ -2,7 +2,7 @@ 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 { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import { JobsAPI } from '@api';
import { TabbedCardHeader } from '@components/Card';
import ContentError from '@components/ContentError';
@ -74,7 +74,9 @@ class Job extends Component {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/jobs" />
<CardActions>
<CardCloseButton linkTo="/jobs" />
</CardActions>
</TabbedCardHeader>
);

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

@ -2,7 +2,7 @@ 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, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import CardCloseButton from '@components/CardCloseButton';
import { TabbedCardHeader } from '@components/Card';
import RoutedTabs from '@components/RoutedTabs';
@ -132,7 +132,9 @@ class Organization extends Component {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/organizations" />
<CardActions>
<CardCloseButton linkTo="/organizations" />
</CardActions>
</TabbedCardHeader>
);

6
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
View File

@ -140,15 +140,15 @@ function OrganizationsList({ i18n }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd
? [<ToolbarAddButton key="add" linkTo={addUrl} />]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={handleOrgDelete}
itemsToDelete={selected}
pluralizedItemName="Organizations"
/>,
...(canAdd
? [<ToolbarAddButton key="add" linkTo={addUrl} />]
: []),
]}
/>
)}

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

@ -2,7 +2,7 @@ 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, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import { TabbedCardHeader } from '@components/Card';
import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs';
@ -152,7 +152,9 @@ class Project extends Component {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/projects" />
<CardActions>
<CardCloseButton linkTo="/projects" />
</CardActions>
</TabbedCardHeader>
);

12
awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
View File

@ -200,12 +200,6 @@ class ProjectsList extends Component {
onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
<ToolbarDeleteButton
key="delete"
onDelete={this.handleProjectDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Projects`)}
/>,
...(canAdd
? [
<ToolbarAddButton
@ -214,6 +208,12 @@ class ProjectsList extends Component {
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={this.handleProjectDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Projects`)}
/>,
]}
/>
)}

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

@ -9,7 +9,7 @@ import {
useLocation,
useParams,
} from 'react-router-dom';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import CardCloseButton from '@components/CardCloseButton';
import { TabbedCardHeader } from '@components/Card';
import RoutedTabs from '@components/RoutedTabs';
@ -48,7 +48,9 @@ function Team({ i18n, setBreadcrumb }) {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/teams" />
<CardActions>
<CardCloseButton linkTo="/teams" />
</CardActions>
</TabbedCardHeader>
);

12
awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
View File

@ -187,12 +187,6 @@ class TeamsList extends Component {
onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
<ToolbarDeleteButton
key="delete"
onDelete={this.handleTeamDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Teams`)}
/>,
...(canAdd
? [
<ToolbarAddButton
@ -201,6 +195,12 @@ class TeamsList extends Component {
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={this.handleTeamDelete}
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Teams`)}
/>,
]}
/>
)}

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

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, 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';
@ -124,7 +124,9 @@ class Template extends Component {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" />
<CardActions>
<CardCloseButton linkTo="/templates" />
</CardActions>
</TabbedCardHeader>
);

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

@ -213,13 +213,13 @@ function TemplateList({ i18n }) {
onSelectAll={handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAddJT || canAddWFJT ? [addButton] : []),
<ToolbarDeleteButton
key="delete"
onDelete={handleTemplateDelete}
itemsToDelete={selected}
pluralizedItemName="Templates"
/>,
...(canAddJT || canAddWFJT ? [addButton] : []),
]}
/>
)}

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

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react';
import { Card, PageSection } from '@patternfly/react-core';
import { Card, CardActions, 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';
@ -90,7 +90,9 @@ class WorkflowJobTemplate extends Component {
let cardHeader = hasContentLoading ? null : (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/templates" />
<CardActions>
<CardCloseButton linkTo="/templates" />
</CardActions>
</TabbedCardHeader>
);

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

@ -2,7 +2,7 @@ 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, PageSection } from '@patternfly/react-core';
import { Card, CardActions, PageSection } from '@patternfly/react-core';
import { TabbedCardHeader } from '@components/Card';
import CardCloseButton from '@components/CardCloseButton';
import RoutedTabs from '@components/RoutedTabs';
@ -81,7 +81,9 @@ class User extends Component {
let cardHeader = (
<TabbedCardHeader>
<RoutedTabs tabsArray={tabsArray} />
<CardCloseButton linkTo="/users" />
<CardActions>
<CardCloseButton linkTo="/users" />
</CardActions>
</TabbedCardHeader>
);

12
awx/ui_next/src/screens/User/UserList/UserList.jsx
View File

@ -191,12 +191,6 @@ class UsersList extends Component {
onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[
<ToolbarDeleteButton
key="delete"
onDelete={this.handleUserDelete}
itemsToDelete={selected}
pluralizedItemName="Users"
/>,
...(canAdd
? [
<ToolbarAddButton
@ -205,6 +199,12 @@ class UsersList extends Component {
/>,
]
: []),
<ToolbarDeleteButton
key="delete"
onDelete={this.handleUserDelete}
itemsToDelete={selected}
pluralizedItemName="Users"
/>,
]}
/>
)}