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

Use PF Chip and ChipGroup components

Browse Source
This commit is contained in:
Marliana Lara
2020-02-11 12:50:25 -05:00
parent 5d2912605f
commit ca85020b26
21 changed files with 195 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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/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';

3
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)`

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

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

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 />', () => {

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/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';

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

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/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';