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

Merge pull request #5897 from marshmalien/remove-card-style-overrides

Browse Source 
Remove PF style overrides Pt. 1

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-02-13 20:03:36 +00:00
committed by GitHub
parent f4e09eee80 ca85020b26
commit ef3ab29649
45 changed files with 240 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
awx/ui_next/src/app.scss
View File

@@ -3,41 +3,6 @@
height: 100%; height: 100%;
} }
//
// sidebar overrides
//
.pf-c-page__sidebar {
--pf-c-page__sidebar--md--Width: 255px;
.pf-c-nav {
overflow-y: auto;
.pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--MarginTop: 8px;
}
.pf-c-nav__simple-list .pf-c-nav__link {
--pf-c-nav__simple-list-link--PaddingBottom: 6px;
--pf-c-nav__simple-list-link--PaddingTop: 6px;
}
.pf-c-nav__section-title {
--pf-c-nav__section-title--PaddingLeft: 24px;
}
.pf-c-nav__link {
display: flex;
align-items: center;
padding-right: 64px;
}
}
}
// //
// data list overrides // data list overrides
// //
@@ -87,102 +52,6 @@
} }
} }
//
// pf modal overrides
//
.awx-c-modal.pf-c-modal-box {
margin: 0;
padding: 24px;
width: 600px;
.pf-c-modal-box__body {
overflow: auto;
}
.pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
margin-right: 20px;
}
}
.pf-c-modal-box__footer {
--pf-c-modal-box__footer--PaddingTop: 20px;
--pf-c-modal-box__footer--PaddingRight: 20px;
--pf-c-modal-box__footer--PaddingBottom: 20px;
--pf-c-modal-box__footer--PaddingLeft: 20px;
--pf-c-modal-box__footer--MarginTop: 24px;
justify-content: flex-end;
}
.pf-c-modal-box__header {
--pf-c-modal-box__header--PaddingTop: 10px;
--pf-c-modal-box__header--PaddingRight: 0;
--pf-c-modal-box__header--PaddingBottom: 0;
--pf-c-modal-box__header--PaddingLeft: 20px;
}
.pf-c-modal-box__body {
--pf-c-modal-box__body--PaddingLeft: 20px;
--pf-c-modal-box__body--PaddingRight: 20px;
--pf-c-modal-box__body--PaddingBottom: 5px;
}
//
// pf tooltip overrides
//
.pf-c-tooltip__content {
--pf-c-tooltip__content--PaddingTop: 0.71rem;
--pf-c-tooltip__content--PaddingRight: 0.71rem;
--pf-c-tooltip__content--PaddingBottom: 0.71rem;
--pf-c-tooltip__content--PaddingLeft: 0.71rem;
}
// higher specificity needed to override PF styles added dynamically to page
.pf-c-tooltip .pf-c-tooltip__content {
text-align: left;
}
//
// pf empty state overrides
//
.pf-c-empty-state {
align-self: center;
}
//
// assorted custom component styles
// note that these should be given a consistent prefix
// and bem style, as well as moved into component-based scss files
//
.awx-c-card {
position: relative;
}
//
// PF Alert notification component overrides
//
.pf-c-alert__title {
--pf-c-alert__title--PaddingTop: 20px;
--pf-c-alert__title--PaddingRight: 20px;
--pf-c-alert__title--PaddingBottom: 20px;
--pf-c-alert__title--PaddingLeft: 20px;
}
.pf-c-alert__description {
--pf-c-alert__description--PaddingRight: 20px;
--pf-c-alert__description--PaddingBottom: 20px;
--pf-c-alert__description--PaddingLeft: 20px;
}
.pf-c-alert {
position: absolute;
width: 100%;
z-index: 20;
}
// //
// AlertModal styles // AlertModal styles
// //
@@ -246,11 +115,3 @@
color: var(--pf-global--success-color--200); color: var(--pf-global--success-color--200);
} }
} }
//
// LoginModal overrides
//
.pf-m-error p.pf-c-form__helper-text {
color: var(--pf-global--danger-color--100);
}

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

@@ -30,6 +30,7 @@ export default ({ variant, children, ...props }) => {
props.isOpen = Boolean(isOpen); props.isOpen = Boolean(isOpen);
return ( return (
<Modal <Modal
isLarge
className={`awx-c-modal${variant && className={`awx-c-modal${variant &&
` at-c-alertModal at-c-alertModal--${variant}`}`} ` at-c-alertModal at-c-alertModal--${variant}`}`}
{...props} {...props}

8
awx/ui_next/src/components/Breadcrumbs/Breadcrumbs.jsx
View File

@@ -5,7 +5,7 @@ import {
PageSectionVariants, PageSectionVariants,
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
BreadcrumbHeading as PFBreadcrumbHeading, BreadcrumbHeading,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Link, Route, withRouter } from 'react-router-dom'; import { Link, Route, withRouter } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
@@ -15,12 +15,6 @@ const PageSection = styled(PFPageSection)`
padding-bottom: 10px; padding-bottom: 10px;
`; `;
const BreadcrumbHeading = styled(PFBreadcrumbHeading)`
--pf-c-breadcrumb__heading--FontSize: 20px;
line-height: 24px;
flex: 100%;
`;
const Breadcrumbs = ({ breadcrumbConfig }) => { const Breadcrumbs = ({ breadcrumbConfig }) => {
const { light } = PageSectionVariants; const { light } = PageSectionVariants;

17
awx/ui_next/src/components/Chip/Chip.jsx
View File

@@ -1,17 +0,0 @@
import { Chip } from '@patternfly/react-core';
import styled from 'styled-components';
Chip.displayName = 'PFChip';
export default styled(Chip)`
--pf-c-chip--m-read-only--PaddingTop: 3px;
--pf-c-chip--m-read-only--PaddingBottom: 3px;
--pf-c-chip--m-read-only--PaddingLeft: 8px;
--pf-c-chip--m-read-only--PaddingRight: 8px;
.pf-c-button {
--pf-c-button--PaddingTop: 3px;
--pf-c-button--PaddingBottom: 3px;
--pf-c-button--PaddingLeft: 8px;
--pf-c-button--PaddingRight: 8px;
}
`;

10
awx/ui_next/src/components/Chip/Chip.test.jsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import Chip from './Chip';
describe('Chip', () => {
test('renders the expected content', () => {
const wrapper = mount(<Chip />);
expect(wrapper).toMatchSnapshot();
});
});

14
awx/ui_next/src/components/Chip/ChipGroup.jsx
View File

@@ -1,14 +0,0 @@
import { ChipGroup } from '@patternfly/react-core';
import styled from 'styled-components';
export default styled(ChipGroup)`
--pf-c-chip-group--c-chip--MarginRight: 10px;
--pf-c-chip-group--c-chip--MarginBottom: 10px;
> .pf-c-chip.pf-m-overflow .pf-c-button {
--pf-c-button--PaddingTop: 3px;
--pf-c-button--PaddingBottom: 3px;
--pf-c-chip--m-overflow--c-button--PaddingLeft: 8px;
--pf-c-chip--m-overflow--c-button--PaddingRight: 8px;
}
`;

10
awx/ui_next/src/components/Chip/ChipGroup.test.jsx
View File

@@ -1,10 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import { ChipGroup } from '.';
describe('<ChipGroup />', () => {
test('renders the expected content', () => {
const wrapper = mount(<ChipGroup />);
expect(wrapper).toMatchSnapshot();
});
});

171
awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap
View File

@@ -1,171 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Chip renders the expected content 1`] = `
<Chip>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Chip-sc-1rzr8oo-0",
"isStatic": true,
"lastClassName": "iczEeI",
"rules": Array [
"--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}",
],
},
"displayName": "Chip",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Chip-sc-1rzr8oo-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<PFChip
className="Chip-sc-1rzr8oo-0 iczEeI"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"className": "Chip-sc-1rzr8oo-0 iczEeI",
}
}
consumerContext={null}
>
<Chip
className="Chip-sc-1rzr8oo-0 iczEeI"
closeBtnAriaLabel="close"
component="div"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top"
>
<GenerateId
prefix="pf-random-id-"
>
<div
className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
>
<span
className="pf-c-chip__text"
id="pf-random-id-0"
/>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close"
id="remove_pf-random-id-0"
onClick={[Function]}
>
<Component
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
variant="plain"
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "close",
"aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
"children": <TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "",
"id": "remove_pf-random-id-0",
"onClick": [Function],
"variant": "plain",
}
}
consumerContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
>
<Button
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
>
<button
aria-disabled={null}
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="pf-c-button pf-m-plain"
disabled={false}
id="remove_pf-random-id-0"
onClick={[Function]}
tabIndex={null}
type="button"
>
<TimesCircleIcon
aria-hidden="true"
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 512 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
transform=""
/>
</svg>
</TimesCircleIcon>
</button>
</Button>
</ComponentWithOuia>
</Component>
</ChipButton>
</div>
</GenerateId>
</Chip>
</ComponentWithOuia>
</PFChip>
</StyledComponent>
</Chip>
`;

40
awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap
View File

@@ -1,40 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ChipGroup /> renders the expected content 1`] = `
<ChipGroup>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "ChipGroup-sc-10zu8t0-0",
"isStatic": true,
"lastClassName": "bwbBYO",
"rules": Array [
"--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}",
],
},
"displayName": "ChipGroup",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "ChipGroup-sc-10zu8t0-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<ChipGroup
className="ChipGroup-sc-10zu8t0-0 bwbBYO"
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={3}
withToolbar={false}
/>
</StyledComponent>
</ChipGroup>
`;

3
awx/ui_next/src/components/Chip/index.js
View File

@@ -1,3 +0,0 @@
export { default as ChipGroup } from './ChipGroup';
export { default as Chip } from './Chip';
export { default as CredentialChip } from './CredentialChip';

2
awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx
View File

@@ -10,7 +10,7 @@ import {
import { CubesIcon } from '@patternfly/react-icons'; import { CubesIcon } from '@patternfly/react-icons';
const ContentEmpty = ({ i18n, title = '', message = '' }) => ( const ContentEmpty = ({ i18n, title = '', message = '' }) => (
<EmptyState> <EmptyState variant="full">
<EmptyStateIcon icon={CubesIcon} /> <EmptyStateIcon icon={CubesIcon} />
<Title size="lg">{title || i18n._(t`No items found.`)}</Title> <Title size="lg">{title || i18n._(t`No items found.`)}</Title>
<EmptyStateBody>{message}</EmptyStateBody> <EmptyStateBody>{message}</EmptyStateBody>

2
awx/ui_next/src/components/ContentError/ContentError.jsx
View File

@@ -39,7 +39,7 @@ function ContentError({ error, children, isNotFound, i18n }) {
{is401 ? ( {is401 ? (
<Redirect to="/login" /> <Redirect to="/login" />
) : ( ) : (
<EmptyState> <EmptyState variant="full">
<EmptyStateIcon icon={ExclamationTriangleIcon} /> <EmptyStateIcon icon={ExclamationTriangleIcon} />
<Title size="lg"> <Title size="lg">
{is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)} {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)}

2
awx/ui_next/src/components/ContentLoading/ContentLoading.jsx
View File

@@ -5,7 +5,7 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
// TODO: Better loading state - skeleton lines / spinner, etc. // TODO: Better loading state - skeleton lines / spinner, etc.
const ContentLoading = ({ className, i18n }) => ( const ContentLoading = ({ className, i18n }) => (
<EmptyState className={className}> <EmptyState variant="full" className={className}>
<EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody> <EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody>
</EmptyState> </EmptyState>
); );

2
awx/ui_next/src/components/Chip/CredentialChip.jsx → awx/ui_next/src/components/CredentialChip/CredentialChip.jsx
View File

@@ -3,8 +3,8 @@ import { shape } from 'prop-types';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import Chip from './Chip';
import { Credential } from '@types'; import { Credential } from '@types';
import { Chip } from '@patternfly/react-core';
function CredentialChip({ credential, i18n, ...props }) { function CredentialChip({ credential, i18n, ...props }) {
let type; let type;

0
awx/ui_next/src/components/Chip/CredentialChip.test.jsx → awx/ui_next/src/components/CredentialChip/CredentialChip.test.jsx
View File

1
awx/ui_next/src/components/CredentialChip/index.js Normal file
View File

@@ -0,0 +1 @@
export { default } from './CredentialChip';

9
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@@ -13,6 +13,8 @@ import { SearchIcon } from '@patternfly/react-icons';
import { import {
Button, Button,
ButtonVariant, ButtonVariant,
Chip,
ChipGroup,
InputGroup as PFInputGroup, InputGroup as PFInputGroup,
Modal, Modal,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@@ -21,7 +23,6 @@ import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import reducer, { initReducer } from './shared/reducer'; import reducer, { initReducer } from './shared/reducer';
import { ChipGroup, Chip } from '../Chip';
import { QSConfig } from '@types'; import { QSConfig } from '@types';
const SearchButton = styled(Button)` const SearchButton = styled(Button)`
@@ -139,7 +140,7 @@ function Lookup(props) {
</ChipHolder> </ChipHolder>
</InputGroup> </InputGroup>
<Modal <Modal
className="awx-c-modal" isLarge
title={i18n._(t`Select ${header || i18n._(t`Items`)}`)} title={i18n._(t`Select ${header || i18n._(t`Items`)}`)}
isOpen={isModalOpen} isOpen={isModalOpen}
onClose={closeModal} onClose={closeModal}
@@ -148,9 +149,7 @@ function Lookup(props) {
key="select" key="select"
variant="primary" variant="primary"
onClick={save} onClick={save}
style={ isDisabled={required && selectedItems.length === 0}
required && selectedItems.length === 0 ? { display: 'none' } : {}
}
> >
{i18n._(t`Select`)} {i18n._(t`Select`)}
</Button>, </Button>,

2
awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
View File

@@ -7,7 +7,7 @@ import { FormGroup, ToolbarItem } from '@patternfly/react-core';
import { CredentialsAPI, CredentialTypesAPI } from '@api'; import { CredentialsAPI, CredentialTypesAPI } from '@api';
import AnsibleSelect from '@components/AnsibleSelect'; import AnsibleSelect from '@components/AnsibleSelect';
import { FieldTooltip } from '@components/FormField'; import { FieldTooltip } from '@components/FormField';
import { CredentialChip } from '@components/Chip'; import CredentialChip from '@components/CredentialChip';
import VerticalSeperator from '@components/VerticalSeparator'; import VerticalSeperator from '@components/VerticalSeparator';
import { getQSConfig, parseQueryString } from '@util/qs'; import { getQSConfig, parseQueryString } from '@util/qs';
import Lookup from './Lookup'; import Lookup from './Lookup';

2
awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx
View File

@@ -27,7 +27,7 @@ export default function PaginatedDataListItem({ item }) {
<DataListItemRow> <DataListItemRow>
<DataListItemCells <DataListItemCells
dataListCells={[ dataListCells={[
<DataListCell key="team-name"> <DataListCell key="name">
<DetailWrapper> <DetailWrapper>
<Link to={{ pathname: item.url }}> <Link to={{ pathname: item.url }}>
<b id={`items-list-item-${item.id}`}>{item.name}</b> <b id={`items-list-item-${item.id}`}>{item.name}</b>

3
awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
View File

@@ -3,6 +3,8 @@ import { func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Chip,
ChipGroup,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells as PFDataListItemCells, DataListItemCells as PFDataListItemCells,
@@ -14,7 +16,6 @@ import {
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { ChipGroup, Chip } from '@components/Chip';
import { DetailList, Detail } from '@components/DetailList'; import { DetailList, Detail } from '@components/DetailList';
import { AccessRecord } from '@types'; import { AccessRecord } from '@types';

12
awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
View File

@@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog" role="dialog"
> >
<button <button
@@ -154,7 +154,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
className="awx-c-modal at-c-alertModal at-c-alertModal--danger" className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
hideTitle={false} hideTitle={false}
isFooterLeftAligned={false} isFooterLeftAligned={false}
isLarge={false} isLarge={true}
isOpen={true} isOpen={true}
isSmall={false} isSmall={false}
onClose={[Function]} onClose={[Function]}
@@ -174,7 +174,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog" role="dialog"
> >
<button <button
@@ -274,7 +274,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
hideTitle={false} hideTitle={false}
id="pf-modal-0" id="pf-modal-0"
isFooterLeftAligned={false} isFooterLeftAligned={false}
isLarge={false} isLarge={true}
isOpen={true} isOpen={true}
isSmall={false} isSmall={false}
onClose={[Function]} onClose={[Function]}
@@ -303,7 +303,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<ModalBox <ModalBox
className="awx-c-modal at-c-alertModal at-c-alertModal--danger" className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
id="pf-modal-0" id="pf-modal-0"
isLarge={false} isLarge={true}
isSmall={false} isSmall={false}
style={Object {}} style={Object {}}
title="Remove {0} Access" title="Remove {0} Access"
@@ -312,7 +312,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
role="dialog" role="dialog"
style={Object {}} style={Object {}}
> >

392
awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
View File

@@ -86,16 +86,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef <ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5} numChips={5}
withToolbar={false}
> >
<ForwardRef <Unknown
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
> >
Member Member
</ForwardRef> </Unknown>
</ForwardRef> </ChipGroup>
} }
/> />
</ForwardRef> </ForwardRef>
@@ -142,16 +147,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef <ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5} numChips={5}
withToolbar={false}
> >
<ForwardRef <Unknown
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
> >
Member Member
</ForwardRef> </Unknown>
</ForwardRef> </ChipGroup>
} }
/> />
</ForwardRef> </ForwardRef>
@@ -221,16 +231,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef <ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5} numChips={5}
withToolbar={false}
> >
<ForwardRef <Unknown
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
> >
Member Member
</ForwardRef> </Unknown>
</ForwardRef> </ChipGroup>
} }
/> />
</ForwardRef> </ForwardRef>
@@ -561,16 +576,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef <ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5} numChips={5}
withToolbar={false}
> >
<ForwardRef <Unknown
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
> >
Member Member
</ForwardRef> </Unknown>
</ForwardRef> </ChipGroup>
} }
> >
<Detail__DetailName <Detail__DetailName
@@ -680,243 +700,175 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-pf-content={true} data-pf-content={true}
> >
<ChipGroup <ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5} numChips={5}
withToolbar={false}
> >
<StyledComponent <ul
forwardedComponent={ className="pf-c-chip-group"
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "ChipGroup-sc-10zu8t0-0",
"isStatic": true,
"lastClassName": "bwbBYO",
"rules": Array [
"--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}",
],
},
"displayName": "ChipGroup",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "ChipGroup-sc-10zu8t0-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
numChips={5}
> >
<ChipGroup <InnerChipGroup
className="ChipGroup-sc-10zu8t0-0 bwbBYO" className=""
collapsedText="\${remaining} more" collapsedText="\${remaining} more"
defaultIsOpen={false} defaultIsOpen={false}
expandedText="Show Less" expandedText="Show Less"
isOpen={false}
numChips={5} numChips={5}
onToggleCollapse={[Function]}
withToolbar={false} withToolbar={false}
> >
<ul <Component
className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO" component="li"
isReadOnly={false}
key=".$3"
onClick={[Function]}
> >
<InnerChipGroup <ComponentWithOuia
className="ChipGroup-sc-10zu8t0-0 bwbBYO" component={[Function]}
collapsedText="\${remaining} more" componentProps={
defaultIsOpen={false} Object {
expandedText="Show Less" "children": "Member",
isOpen={false} "component": "li",
numChips={5} "isReadOnly": false,
onToggleCollapse={[Function]} "onClick": [Function],
withToolbar={false} }
}
consumerContext={null}
> >
<Chip <Chip
className=""
closeBtnAriaLabel="close"
component="li" component="li"
isOverflowChip={false}
isReadOnly={false} isReadOnly={false}
key=".$3"
onClick={[Function]} onClick={[Function]}
> ouiaContext={
<StyledComponent Object {
component="li" "isOuia": false,
forwardedComponent={ "ouiaId": null,
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Chip-sc-1rzr8oo-0",
"isStatic": true,
"lastClassName": "iczEeI",
"rules": Array [
"--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}",
],
},
"displayName": "Chip",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Chip-sc-1rzr8oo-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
} }
forwardedRef={null} }
isReadOnly={false} tooltipPosition="top"
onClick={[Function]} >
<GenerateId
prefix="pf-random-id-"
> >
<PFChip <li
className="Chip-sc-1rzr8oo-0 iczEeI" className="pf-c-chip"
component="li"
isReadOnly={false}
onClick={[Function]}
> >
<ComponentWithOuia <span
component={[Function]} className="pf-c-chip__text"
componentProps={ id="pf-random-id-0"
Object {
"children": "Member",
"className": "Chip-sc-1rzr8oo-0 iczEeI",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
> >
<Chip Member
className="Chip-sc-1rzr8oo-0 iczEeI" </span>
closeBtnAriaLabel="close" <ChipButton
component="li" aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
isOverflowChip={false} ariaLabel="close"
isReadOnly={false} id="remove_pf-random-id-0"
onClick={[Function]}
>
<Component
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
id="remove_pf-random-id-0"
onClick={[Function]} onClick={[Function]}
ouiaContext={ variant="plain"
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top"
> >
<GenerateId <ComponentWithOuia
prefix="pf-random-id-" component={[Function]}
componentProps={
Object {
"aria-label": "close",
"aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
"children": <TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "",
"id": "remove_pf-random-id-0",
"onClick": [Function],
"variant": "plain",
}
}
consumerContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
> >
<li <Button
className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI" aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
> >
<span <button
className="pf-c-chip__text" aria-disabled={null}
id="pf-random-id-0" aria-label="close"
>
Member
</span>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close" className="pf-c-button pf-m-plain"
disabled={false}
id="remove_pf-random-id-0" id="remove_pf-random-id-0"
onClick={[Function]} onClick={[Function]}
tabIndex={null}
type="button"
> >
<Component <TimesCircleIcon
aria-label="close" aria-hidden="true"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" color="currentColor"
className="" noVerticalAlign={false}
id="remove_pf-random-id-0" size="sm"
onClick={[Function]} title={null}
variant="plain"
> >
<ComponentWithOuia <svg
component={[Function]} aria-hidden="true"
componentProps={ aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object { Object {
"aria-label": "close", "verticalAlign": "-0.125em",
"aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
"children": <TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
/>,
"className": "",
"id": "remove_pf-random-id-0",
"onClick": [Function],
"variant": "plain",
}
}
consumerContext={
Object {
"isOuia": false,
"ouiaId": null,
} }
} }
viewBox="0 0 512 512"
width="1em"
> >
<Button <path
aria-label="close" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" transform=""
className="" />
id="remove_pf-random-id-0" </svg>
onClick={[Function]} </TimesCircleIcon>
ouiaContext={ </button>
Object { </Button>
"isOuia": false, </ComponentWithOuia>
"ouiaId": null, </Component>
} </ChipButton>
} </li>
variant="plain" </GenerateId>
>
<button
aria-disabled={null}
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="pf-c-button pf-m-plain"
disabled={false}
id="remove_pf-random-id-0"
onClick={[Function]}
tabIndex={null}
type="button"
>
<TimesCircleIcon
aria-hidden="true"
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 512 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
transform=""
/>
</svg>
</TimesCircleIcon>
</button>
</Button>
</ComponentWithOuia>
</Component>
</ChipButton>
</li>
</GenerateId>
</Chip>
</ComponentWithOuia>
</PFChip>
</StyledComponent>
</Chip> </Chip>
</InnerChipGroup> </ComponentWithOuia>
</ul> </Component>
</ChipGroup> </InnerChipGroup>
</StyledComponent> </ul>
</ChipGroup> </ChipGroup>
</dd> </dd>
</TextListItem> </TextListItem>

8
awx/ui_next/src/components/SelectedList/SelectedList.jsx
View File

@@ -1,8 +1,12 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Split as PFSplit, SplitItem } from '@patternfly/react-core'; import {
Chip,
ChipGroup,
Split as PFSplit,
SplitItem,
} from '@patternfly/react-core';
import styled from 'styled-components'; import styled from 'styled-components';
import { ChipGroup, Chip } from '../Chip';
import VerticalSeparator from '../VerticalSeparator'; import VerticalSeparator from '../VerticalSeparator';
const Split = styled(PFSplit)` const Split = styled(PFSplit)`

3
awx/ui_next/src/components/SelectedList/SelectedList.test.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { ChipGroup } from '../Chip'; import { ChipGroup } from '@patternfly/react-core';
import SelectedList from './SelectedList'; import SelectedList from './SelectedList';
describe('<SelectedList />', () => { describe('<SelectedList />', () => {

2
awx/ui_next/src/components/Sparkline/StatusIcon.jsx
View File

@@ -75,7 +75,7 @@ const SkippedBottom = styled.div`
const StatusIcon = ({ status, ...props }) => { const StatusIcon = ({ status, ...props }) => {
return ( return (
<div className="at-c-statusIcon" {...props}> <div {...props}>
{status === 'running' && <RunningJob />} {status === 'running' && <RunningJob />}
{(status === 'new' || {(status === 'new' ||
status === 'pending' || status === 'pending' ||

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

@@ -63,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response && contentError.response.status === 404 && ( {contentError.response && contentError.response.status === 404 && (
<span> <span>
@@ -79,7 +79,7 @@ function Credential({ i18n, setBreadcrumb }) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

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

@@ -117,7 +117,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response && contentError.response.status === 404 && ( {contentError.response && contentError.response.status === 404 && (
<span> <span>
@@ -141,7 +141,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
); );
return ( return (
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
{redirect} {redirect}

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

@@ -92,7 +92,7 @@ function Inventory({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -108,7 +108,7 @@ function Inventory({ i18n, setBreadcrumb }) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

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

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } 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 { Button } from '@patternfly/react-core'; import { Button, Chip, ChipGroup } from '@patternfly/react-core';
import { CardBody, CardActionsRow } from '@components/Card'; import { CardBody, CardActionsRow } from '@components/Card';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { ChipGroup, Chip } from '@components/Chip';
import { VariablesDetail } from '@components/CodeMirrorInput'; import { VariablesDetail } from '@components/CodeMirrorInput';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';

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

@@ -88,7 +88,7 @@ class SmartInventory extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -105,7 +105,7 @@ class SmartInventory extends Component {
} }
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

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

@@ -26,7 +26,7 @@ function InventoryGroupForm({
}; };
return ( return (
<Card className="awx-c-card"> <Card>
<CardBody> <CardBody>
<Formik initialValues={initialValues} onSubmit={handleSubmit}> <Formik initialValues={initialValues} onSubmit={handleSubmit}>
{formik => ( {formik => (

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

@@ -83,7 +83,7 @@ class Job extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>

11
awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
View File

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } 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 { Button } from '@patternfly/react-core'; import { Button, Chip, ChipGroup } from '@patternfly/react-core';
import styled from 'styled-components'; import styled from 'styled-components';
import AlertModal from '@components/AlertModal'; import AlertModal from '@components/AlertModal';
import { DetailList, Detail } from '@components/DetailList'; import { DetailList, Detail } from '@components/DetailList';
import { CardBody, CardActionsRow } from '@components/Card'; import { CardBody, CardActionsRow } from '@components/Card';
import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; import CredentialChip from '@components/CredentialChip';
import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput'; import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';
@@ -34,10 +34,9 @@ const VariablesInput = styled(_VariablesInput)`
const StatusDetailValue = styled.div` const StatusDetailValue = styled.div`
align-items: center; align-items: center;
display: inline-flex; display: inline-grid;
.at-c-statusIcon { grid-gap: 10px;
margin-right: 10px; grid-template-columns: auto auto;
}
`; `;
const VERBOSITY = { const VERBOSITY = {

7
awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx
View File

@@ -26,10 +26,9 @@ const Modal = styled(PFModal)`
const HostNameDetailValue = styled.div` const HostNameDetailValue = styled.div`
align-items: center; align-items: center;
display: inline-flex; display: inline-grid;
.at-c-statusIcon { grid-gap: 10px;
margin-right: 10px; grid-template-columns: auto auto;
}
`; `;
const Tabs = styled(PFTabs)` const Tabs = styled(PFTabs)`

2
awx/ui_next/src/screens/Job/JobTypeRedirect.jsx
View File

@@ -54,7 +54,7 @@ class JobTypeRedirect extends Component {
if (error) { if (error) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{error === NOT_FOUND ? ( {error === NOT_FOUND ? (
<ContentError isNotFound> <ContentError isNotFound>
<Link to="/jobs">{i18n._(`View all Jobs`)}</Link> <Link to="/jobs">{i18n._(`View all Jobs`)}</Link>

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

@@ -5,7 +5,7 @@ import ContentError from '@components/ContentError';
function NotFound() { function NotFound() {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError isNotFound /> <ContentError isNotFound />
</Card> </Card>
</PageSection> </PageSection>

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

@@ -147,7 +147,7 @@ class Organization extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -165,7 +165,7 @@ class Organization extends Component {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

3
awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
View File

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react';
import { Link, useHistory, useRouteMatch } from 'react-router-dom'; import { Link, useHistory, useRouteMatch } 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 { Button } from '@patternfly/react-core'; import { Button, Chip, ChipGroup } from '@patternfly/react-core';
import { OrganizationsAPI } from '@api'; import { OrganizationsAPI } from '@api';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { CardBody, CardActionsRow } from '@components/Card'; import { CardBody, CardActionsRow } from '@components/Card';
import { ChipGroup, Chip } from '@components/Chip';
import AlertModal from '@components/AlertModal'; import AlertModal from '@components/AlertModal';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading'; import ContentLoading from '@components/ContentLoading';

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

@@ -167,7 +167,7 @@ class Project extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -183,7 +183,7 @@ class Project extends Component {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect from="/projects/:id" to="/projects/:id/details" exact /> <Redirect from="/projects/:id" to="/projects/:id/details" exact />

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

@@ -12,7 +12,7 @@ import ContentLoading from '@components/ContentLoading';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';
import { CredentialChip } from '@components/Chip'; import CredentialChip from '@components/CredentialChip';
import { ProjectsAPI } from '@api'; import { ProjectsAPI } from '@api';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';

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

@@ -59,7 +59,7 @@ function Team({ i18n, setBreadcrumb }) {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -75,7 +75,7 @@ function Team({ i18n, setBreadcrumb }) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect from="/teams/:id" to="/teams/:id/details" exact /> <Redirect from="/teams/:id" to="/teams/:id/details" exact />

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

@@ -3,6 +3,8 @@ import { Link, useHistory, useParams } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Button, Button,
Chip,
ChipGroup,
TextList, TextList,
TextListItem, TextListItem,
TextListItemVariants, TextListItemVariants,
@@ -15,7 +17,7 @@ import AlertModal from '@components/AlertModal';
import { CardBody, CardActionsRow } from '@components/Card'; import { CardBody, CardActionsRow } from '@components/Card';
import ContentError from '@components/ContentError'; import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading'; import ContentLoading from '@components/ContentLoading';
import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; import CredentialChip from '@components/CredentialChip';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';

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

@@ -135,7 +135,7 @@ class Template extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -150,7 +150,7 @@ class Template extends Component {
} }
return ( return (
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

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

@@ -79,7 +79,7 @@ class WorkflowJobTemplate extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -94,7 +94,7 @@ class WorkflowJobTemplate extends Component {
} }
return ( return (
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect <Redirect

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

@@ -96,7 +96,7 @@ class User extends Component {
if (!hasContentLoading && contentError) { if (!hasContentLoading && contentError) {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
<ContentError error={contentError}> <ContentError error={contentError}>
{contentError.response.status === 404 && ( {contentError.response.status === 404 && (
<span> <span>
@@ -112,7 +112,7 @@ class User extends Component {
return ( return (
<PageSection> <PageSection>
<Card className="awx-c-card"> <Card>
{cardHeader} {cardHeader}
<Switch> <Switch>
<Redirect from="/users/:id" to="/users/:id/details" exact /> <Redirect from="/users/:id" to="/users/:id/details" exact />