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

Remove our implementation of Chip and ChipGroup in favor of PatternFly's component

Browse Source
This commit is contained in:
Marliana Lara
2019-11-12 12:44:56 -05:00
parent 1564dfc80f
commit 7cc0041aa8
19 changed files with 437 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,7 +93,6 @@ class SelectResourceStep extends React.Component {
label={selectedLabel} label={selectedLabel}
onRemove={onRowClick} onRemove={onRowClick}
selected={selectedResourceRows} selected={selectedResourceRows}
showOverflowAfter={5}
/> />
)} )}
<PaginatedDataList <PaginatedDataList

1
awx/ui_next/src/components/AddRole/SelectRoleStep.jsx
View File

@@ -33,7 +33,6 @@ class RolesStep extends React.Component {
isReadOnly isReadOnly
label={selectedListLabel || i18n._(t`Selected`)} label={selectedListLabel || i18n._(t`Selected`)}
selected={selectedResourceRows} selected={selectedResourceRows}
showOverflowAfter={5}
/> />
)} )}
</div> </div>

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

@@ -4,17 +4,14 @@ import styled from 'styled-components';
Chip.displayName = 'PFChip'; Chip.displayName = 'PFChip';
export default styled(Chip)` export default styled(Chip)`
--pf-c-chip--m-read-only--PaddingTop: 3px; --pf-c-chip--m-read-only--PaddingTop: 3px;
--pf-c-chip--m-read-only--PaddingRight: 8px;
--pf-c-chip--m-read-only--PaddingBottom: 3px; --pf-c-chip--m-read-only--PaddingBottom: 3px;
--pf-c-chip--m-read-only--PaddingLeft: 8px; --pf-c-chip--m-read-only--PaddingLeft: 8px;
--pf-c-chip--m-read-only--PaddingRight: 8px;
& > .pf-c-button { .pf-c-button {
padding: 3px 8px; --pf-c-button--PaddingTop: 3px;
--pf-c-button--PaddingBottom: 3px;
--pf-c-button--PaddingLeft: 8px;
--pf-c-button--PaddingRight: 8px;
} }
${props =>
props.isOverflowChip &&
`
padding: 0;
`}
`; `;

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

@@ -5,6 +5,6 @@ import Chip from './Chip';
describe('Chip', () => { describe('Chip', () => {
test('renders the expected content', () => { test('renders the expected content', () => {
const wrapper = mount(<Chip />); const wrapper = mount(<Chip />);
expect(wrapper).toHaveLength(1); expect(wrapper).toMatchSnapshot();
}); });
}); });

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

@@ -1,46 +1,14 @@
import React, { useState } from 'react'; import { ChipGroup } from '@patternfly/react-core';
import { number } from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Chip from './Chip';
const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
const [isExpanded, setIsExpanded] = useState(!showOverflowAfter);
const toggleIsOpen = () => setIsExpanded(!isExpanded);
const mappedChildren = React.Children.map(children, c =>
React.cloneElement(c, { component: 'li' })
);
const showOverflowToggle =
showOverflowAfter && children.length > showOverflowAfter;
const numToShow = isExpanded
? children.length
: Math.min(showOverflowAfter, children.length);
const expandedText = 'Show Less';
const collapsedText = `${children.length - showOverflowAfter} more`;
return (
<ul className={`pf-c-chip-group ${className}`} {...props}>
{!showOverflowAfter ? mappedChildren : mappedChildren.slice(0, numToShow)}
{showOverflowAfter && showOverflowToggle && (
<Chip isOverflowChip onClick={toggleIsOpen} component="li">
{isExpanded ? expandedText : collapsedText}
</Chip>
)}
</ul>
);
};
ChipGroup.propTypes = {
showOverflowAfter: number,
};
ChipGroup.defaultProps = {
showOverflowAfter: null,
};
export default styled(ChipGroup)` export default styled(ChipGroup)`
--pf-c-chip-group--c-chip--MarginRight: 10px; --pf-c-chip-group--c-chip--MarginRight: 10px;
--pf-c-chip-group--c-chip--MarginBottom: 10px; --pf-c-chip-group--c-chip--MarginBottom: 10px;
> .pf-c-chip.pf-m-overflow button { > .pf-c-chip.pf-m-overflow .pf-c-button {
padding: 3px 8px; --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;
} }
`; `;

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

@@ -1,74 +1,10 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils'; import { mount } from 'enzyme';
import { mountWithContexts } from '../../../testUtils/enzymeHelpers'; import { ChipGroup } from '.';
import { ChipGroup, Chip } from '.';
describe('<ChipGroup />', () => { describe('<ChipGroup />', () => {
test('should render all chips', () => { test('renders the expected content', () => {
const wrapper = mountWithContexts( const wrapper = mount(<ChipGroup />);
<ChipGroup> expect(wrapper).toMatchSnapshot();
<Chip>One</Chip>
<Chip>Two</Chip>
<Chip>Three</Chip>
<Chip>Four</Chip>
<Chip>Five</Chip>
<Chip>Six</Chip>
</ChipGroup>
);
expect(wrapper.find(Chip)).toHaveLength(6);
expect(wrapper.find('li')).toHaveLength(6);
});
test('should render show more toggle', () => {
const wrapper = mountWithContexts(
<ChipGroup showOverflowAfter={5}>
<Chip>One</Chip>
<Chip>Two</Chip>
<Chip>Three</Chip>
<Chip>Four</Chip>
<Chip>Five</Chip>
<Chip>Six</Chip>
<Chip>Seven</Chip>
</ChipGroup>
);
expect(wrapper.find(Chip)).toHaveLength(6);
const toggle = wrapper.find(Chip).at(5);
expect(toggle.prop('isOverflowChip')).toBe(true);
expect(toggle.text()).toEqual('2 more');
});
test('should render show less toggle', () => {
const wrapper = mountWithContexts(
<ChipGroup showOverflowAfter={5}>
<Chip>One</Chip>
<Chip>Two</Chip>
<Chip>Three</Chip>
<Chip>Four</Chip>
<Chip>Five</Chip>
<Chip>Six</Chip>
<Chip>Seven</Chip>
</ChipGroup>
);
expect(wrapper.find(Chip)).toHaveLength(6);
const toggle = wrapper.find(Chip).at(5);
expect(toggle.prop('isOverflowChip')).toBe(true);
act(() => {
toggle.prop('onClick')();
});
wrapper.update();
expect(wrapper.find(Chip)).toHaveLength(8);
expect(
wrapper
.find(Chip)
.at(7)
.text()
).toEqual('Show Less');
act(() => {
const toggle2 = wrapper.find(Chip).at(7);
expect(toggle2.prop('isOverflowChip')).toBe(true);
toggle2.prop('onClick')();
});
wrapper.update();
expect(wrapper.find(Chip)).toHaveLength(6);
}); });
}); });

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

@@ -4,7 +4,7 @@ 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 Chip from './Chip';
import { Credential } from '../../types'; import { Credential } from '@types';
function CredentialChip({ credential, i18n, ...props }) { function CredentialChip({ credential, i18n, ...props }) {
let type; let type;

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

@@ -0,0 +1,171 @@
// 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 Normal file
View File

@@ -0,0 +1,40 @@
// 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>
`;

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

@@ -49,6 +49,7 @@ const InputGroup = styled(PFInputGroup)`
const ChipHolder = styled.div` const ChipHolder = styled.div`
--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200); --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200); --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--Height: auto;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
`; `;
@@ -240,7 +241,7 @@ class Lookup extends React.Component {
const canDelete = !required || (multiple && value.length > 1); const canDelete = !required || (multiple && value.length > 1);
const chips = () => { const chips = () => {
return selectCategoryOptions && selectCategoryOptions.length > 0 ? ( return selectCategoryOptions && selectCategoryOptions.length > 0 ? (
<ChipGroup> <ChipGroup defaultIsOpen numChips={5}>
{(multiple ? value : [value]).map(chip => ( {(multiple ? value : [value]).map(chip => (
<CredentialChip <CredentialChip
key={chip.id} key={chip.id}
@@ -251,7 +252,7 @@ class Lookup extends React.Component {
))} ))}
</ChipGroup> </ChipGroup>
) : ( ) : (
<ChipGroup> <ChipGroup defaultIsOpen numChips={5}>
{(multiple ? value : [value]).map(chip => ( {(multiple ? value : [value]).map(chip => (
<Chip <Chip
key={chip.id} key={chip.id}
@@ -350,7 +351,6 @@ class Lookup extends React.Component {
<SelectedList <SelectedList
label={i18n._(t`Selected`)} label={i18n._(t`Selected`)}
selected={selectCategoryOptions ? value : lookupSelectedItems} selected={selectCategoryOptions ? value : lookupSelectedItems}
showOverflowAfter={5}
onRemove={this.toggleSelected} onRemove={this.toggleSelected}
isReadOnly={!canDelete} isReadOnly={!canDelete}
isCredentialList={ isCredentialList={

4
awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
View File

@@ -70,8 +70,8 @@ describe('<MultiCredentialsLookup />', () => {
}); });
test('onChange is called when you click to remove a credential from input', async () => { test('onChange is called when you click to remove a credential from input', async () => {
const chip = wrapper.find('PFChip'); const chip = wrapper.find('PFChip').find({ isOverflowChip: false });
const button = chip.at(1).find('Button'); const button = chip.at(1).find('ChipButton');
expect(chip).toHaveLength(4); expect(chip).toHaveLength(4);
button.prop('onClick')(); button.prop('onClick')();
expect(onChange).toBeCalledWith([ expect(onChange).toBeCalledWith([

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

@@ -206,7 +206,7 @@ class MultiSelect extends Component {
/> />
</div> </div>
<div css="margin: 10px"> <div css="margin: 10px">
<ChipGroup> <ChipGroup defaultIsOpen numChips={5}>
{value.map(item => ( {value.map(item => (
<Chip <Chip
key={item.id} key={item.id}

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

@@ -110,7 +110,9 @@ class ResourceAccessListItem extends React.Component {
<Detail <Detail
label={i18n._(t`User Roles`)} label={i18n._(t`User Roles`)}
value={ value={
<ChipGroup>{userRoles.map(this.renderChip)}</ChipGroup> <ChipGroup numChips={5}>
{userRoles.map(this.renderChip)}
</ChipGroup>
} }
/> />
)} )}
@@ -118,7 +120,9 @@ class ResourceAccessListItem extends React.Component {
<Detail <Detail
label={i18n._(t`Team Roles`)} label={i18n._(t`Team Roles`)}
value={ value={
<ChipGroup>{teamRoles.map(this.renderChip)}</ChipGroup> <ChipGroup numChips={5}>
{teamRoles.map(this.renderChip)}
</ChipGroup>
} }
/> />
)} )}

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

@@ -84,7 +84,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef> <ForwardRef
numChips={5}
>
<ForwardRef <ForwardRef
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
@@ -138,7 +140,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef> <ForwardRef
numChips={5}
>
<ForwardRef <ForwardRef
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
@@ -215,7 +219,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef> <ForwardRef
numChips={5}
>
<ForwardRef <ForwardRef
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
@@ -543,7 +549,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false} fullWidth={false}
label="Team Roles" label="Team Roles"
value={ value={
<ForwardRef> <ForwardRef
numChips={5}
>
<ForwardRef <ForwardRef
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
@@ -649,7 +657,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
className="Detail__DetailValue-sc-16ypsyv-1 yHlYM" className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
data-pf-content={true} data-pf-content={true}
> >
<ChipGroup> <ChipGroup
numChips={5}
>
<StyledComponent <StyledComponent
forwardedComponent={ forwardedComponent={
Object { Object {
@@ -658,9 +668,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "ChipGroup-sc-10zu8t0-0", "componentId": "ChipGroup-sc-10zu8t0-0",
"isStatic": true, "isStatic": true,
"lastClassName": "ldAQsx", "lastClassName": "bwbBYO",
"rules": Array [ "rules": Array [
"--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow button{padding:3px 8px;}", "--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", "displayName": "ChipGroup",
@@ -674,199 +684,214 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
} }
} }
forwardedRef={null} forwardedRef={null}
numChips={5}
> >
<ChipGroup <ChipGroup
className="ChipGroup-sc-10zu8t0-0 ldAQsx" className="ChipGroup-sc-10zu8t0-0 bwbBYO"
showOverflowAfter={null} collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
numChips={5}
withToolbar={false}
> >
<ul <ul
className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 ldAQsx" className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO"
> >
<Chip <InnerChipGroup
component="li" className="ChipGroup-sc-10zu8t0-0 bwbBYO"
isReadOnly={false} collapsedText="\${remaining} more"
key=".$3" defaultIsOpen={false}
onClick={[Function]} expandedText="Show Less"
isOpen={false}
numChips={5}
onToggleCollapse={[Function]}
withToolbar={false}
> >
<StyledComponent <Chip
component="li" component="li"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Chip-sc-1rzr8oo-0",
"isStatic": false,
"lastClassName": "dgUGLg",
"rules": Array [
"--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingRight:8px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;& > .pf-c-button{padding:3px 8px;}",
[Function],
],
},
"displayName": "Chip",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Chip-sc-1rzr8oo-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
isReadOnly={false} isReadOnly={false}
key=".$3"
onClick={[Function]} onClick={[Function]}
> >
<PFChip <StyledComponent
className="Chip-sc-1rzr8oo-0 dgUGLg"
component="li" component="li"
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}
isReadOnly={false} isReadOnly={false}
onClick={[Function]} onClick={[Function]}
> >
<ComponentWithOuia <PFChip
component={[Function]} className="Chip-sc-1rzr8oo-0 iczEeI"
componentProps={ component="li"
Object { isReadOnly={false}
"children": "Member", onClick={[Function]}
"className": "Chip-sc-1rzr8oo-0 dgUGLg",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
> >
<Chip <ComponentWithOuia
className="Chip-sc-1rzr8oo-0 dgUGLg" component={[Function]}
closeBtnAriaLabel="close" componentProps={
component="li"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object { Object {
"isOuia": false, "children": "Member",
"ouiaId": null, "className": "Chip-sc-1rzr8oo-0 iczEeI",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
} }
} }
tooltipPosition="top" consumerContext={null}
> >
<GenerateId <Chip
prefix="pf-random-id-" className="Chip-sc-1rzr8oo-0 iczEeI"
closeBtnAriaLabel="close"
component="li"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top"
> >
<li <GenerateId
className="pf-c-chip Chip-sc-1rzr8oo-0 dgUGLg" prefix="pf-random-id-"
> >
<span <li
className="pf-c-chip__text" className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
id="pf-random-id-0"
> >
Member <span
</span> className="pf-c-chip__text"
<ChipButton id="pf-random-id-0"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" >
ariaLabel="close" Member
id="remove_pf-random-id-0" </span>
onClick={[Function]} <ChipButton
>
<Component
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="" ariaLabel="close"
id="remove_pf-random-id-0" id="remove_pf-random-id-0"
onClick={[Function]} onClick={[Function]}
variant="plain"
> >
<ComponentWithOuia <Component
component={[Function]} aria-label="close"
componentProps={ aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
Object { className=""
"aria-label": "close", id="remove_pf-random-id-0"
"aria-labelledby": "remove_pf-random-id-0 pf-random-id-0", onClick={[Function]}
"children": <TimesCircleIcon variant="plain"
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 <ComponentWithOuia
aria-label="close" component={[Function]}
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" componentProps={
className="" Object {
id="remove_pf-random-id-0" "aria-label": "close",
onClick={[Function]} "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0",
ouiaContext={ "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 { Object {
"isOuia": false, "isOuia": false,
"ouiaId": null, "ouiaId": null,
} }
} }
variant="plain"
> >
<button <Button
aria-disabled={null}
aria-label="close" aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="pf-c-button pf-m-plain" className=""
disabled={false}
id="remove_pf-random-id-0" id="remove_pf-random-id-0"
onClick={[Function]} onClick={[Function]}
tabIndex={null} ouiaContext={
type="button" Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
> >
<TimesCircleIcon <button
aria-hidden="true" aria-disabled={null}
color="currentColor" aria-label="close"
noVerticalAlign={false} aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
size="sm" className="pf-c-button pf-m-plain"
title={null} disabled={false}
id="remove_pf-random-id-0"
onClick={[Function]}
tabIndex={null}
type="button"
> >
<svg <TimesCircleIcon
aria-hidden="true" aria-hidden="true"
aria-labelledby={null} color="currentColor"
fill="currentColor" noVerticalAlign={false}
height="1em" size="sm"
role="img" title={null}
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
> >
<path <svg
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-hidden="true"
transform="" aria-labelledby={null}
/> fill="currentColor"
</svg> height="1em"
</TimesCircleIcon> role="img"
</button> style={
</Button> Object {
</ComponentWithOuia> "verticalAlign": "-0.125em",
</Component> }
</ChipButton> }
</li> viewBox="0 0 512 512"
</GenerateId> width="1em"
</Chip> >
</ComponentWithOuia> <path
</PFChip> 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"
</StyledComponent> transform=""
</Chip> />
</svg>
</TimesCircleIcon>
</button>
</Button>
</ComponentWithOuia>
</Component>
</ChipButton>
</li>
</GenerateId>
</Chip>
</ComponentWithOuia>
</PFChip>
</StyledComponent>
</Chip>
</InnerChipGroup>
</ul> </ul>
</ChipGroup> </ChipGroup>
</StyledComponent> </StyledComponent>

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

@@ -23,7 +23,6 @@ class SelectedList extends Component {
const { const {
label, label,
selected, selected,
showOverflowAfter,
onRemove, onRemove,
displayKey, displayKey,
isReadOnly, isReadOnly,
@@ -54,7 +53,7 @@ class SelectedList extends Component {
<SplitLabelItem>{label}</SplitLabelItem> <SplitLabelItem>{label}</SplitLabelItem>
<VerticalSeparator /> <VerticalSeparator />
<SplitItem> <SplitItem>
<ChipGroup showOverflowAfter={showOverflowAfter}>{chips}</ChipGroup> <ChipGroup numChips={5}>{chips}</ChipGroup>
</SplitItem> </SplitItem>
</Split> </Split>
); );
@@ -66,7 +65,6 @@ SelectedList.propTypes = {
label: PropTypes.string, label: PropTypes.string,
onRemove: PropTypes.func, onRemove: PropTypes.func,
selected: PropTypes.arrayOf(PropTypes.object).isRequired, selected: PropTypes.arrayOf(PropTypes.object).isRequired,
showOverflowAfter: PropTypes.number,
isReadOnly: PropTypes.bool, isReadOnly: PropTypes.bool,
}; };
@@ -74,7 +72,6 @@ SelectedList.defaultProps = {
displayKey: 'name', displayKey: 'name',
label: 'Selected', label: 'Selected',
onRemove: () => null, onRemove: () => null,
showOverflowAfter: 5,
isReadOnly: false, isReadOnly: false,
}; };

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

@@ -19,7 +19,6 @@ describe('<SelectedList />', () => {
<SelectedList <SelectedList
label="Selectedeeee" label="Selectedeeee"
selected={mockSelected} selected={mockSelected}
showOverflowAfter={5}
onRemove={() => {}} onRemove={() => {}}
/> />
); );
@@ -27,16 +26,11 @@ describe('<SelectedList />', () => {
test('showOverflow should set showOverflow on ChipGroup', () => { test('showOverflow should set showOverflow on ChipGroup', () => {
const wrapper = mount( const wrapper = mount(
<SelectedList <SelectedList label="Selected" selected={[]} onRemove={() => {}} />
label="Selected"
selected={[]}
showOverflowAfter={5}
onRemove={() => {}}
/>
); );
const chipGroup = wrapper.find(ChipGroup); const chipGroup = wrapper.find(ChipGroup);
expect(chipGroup).toHaveLength(1); expect(chipGroup).toHaveLength(1);
expect(chipGroup.prop('showOverflowAfter')).toEqual(5); expect(chipGroup.prop('numChips')).toEqual(5);
}); });
test('Clicking remove on chip calls onRemove callback prop with correct params', () => { test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
@@ -51,7 +45,6 @@ describe('<SelectedList />', () => {
<SelectedList <SelectedList
label="Selected" label="Selected"
selected={mockSelected} selected={mockSelected}
showOverflowAfter={3}
onRemove={onRemove} onRemove={onRemove}
/> />
); );

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

@@ -217,7 +217,7 @@ function JobDetail({ job, i18n, history }) {
fullWidth fullWidth
label={i18n._(t`Credentials`)} label={i18n._(t`Credentials`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{credentials.map(c => ( {credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly /> <CredentialChip key={c.id} credential={c} isReadOnly />
))} ))}
@@ -230,7 +230,7 @@ function JobDetail({ job, i18n, history }) {
fullWidth fullWidth
label={i18n._(t`Labels`)} label={i18n._(t`Labels`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{labels.results.map(l => ( {labels.results.map(l => (
<Chip key={l.id} isReadOnly> <Chip key={l.id} isReadOnly>
{l.name} {l.name}

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

@@ -99,7 +99,7 @@ class OrganizationDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Instance Groups`)} label={i18n._(t`Instance Groups`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{instanceGroups.map(ig => ( {instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly> <Chip key={ig.id} isReadOnly>
{ig.name} {ig.name}

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

@@ -273,7 +273,7 @@ class JobTemplateDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Credentials`)} label={i18n._(t`Credentials`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{summary_fields.credentials.map(c => ( {summary_fields.credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly /> <CredentialChip key={c.id} credential={c} isReadOnly />
))} ))}
@@ -286,7 +286,7 @@ class JobTemplateDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Labels`)} label={i18n._(t`Labels`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{summary_fields.labels.results.map(l => ( {summary_fields.labels.results.map(l => (
<Chip key={l.id} isReadOnly> <Chip key={l.id} isReadOnly>
{l.name} {l.name}
@@ -301,7 +301,7 @@ class JobTemplateDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Instance Groups`)} label={i18n._(t`Instance Groups`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{instanceGroups.map(ig => ( {instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly> <Chip key={ig.id} isReadOnly>
{ig.name} {ig.name}
@@ -316,7 +316,7 @@ class JobTemplateDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Job tags`)} label={i18n._(t`Job tags`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{job_tags.split(',').map(jobTag => ( {job_tags.split(',').map(jobTag => (
<Chip key={jobTag} isReadOnly> <Chip key={jobTag} isReadOnly>
{jobTag} {jobTag}
@@ -331,7 +331,7 @@ class JobTemplateDetail extends Component {
fullWidth fullWidth
label={i18n._(t`Skip tags`)} label={i18n._(t`Skip tags`)}
value={ value={
<ChipGroup showOverflowAfter={5}> <ChipGroup numChips={5}>
{skip_tags.split(',').map(skipTag => ( {skip_tags.split(',').map(skipTag => (
<Chip key={skipTag} isReadOnly> <Chip key={skipTag} isReadOnly>
{skipTag} {skipTag}