mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 01:57:35 -03:30
Merge pull request #5309 from marshmalien/remove-awx-pf-chip
Swap our Chip & ChipGroup components out for PatternFly components Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
commit
755ffc9844
@ -93,7 +93,6 @@ class SelectResourceStep extends React.Component {
|
||||
label={selectedLabel}
|
||||
onRemove={onRowClick}
|
||||
selected={selectedResourceRows}
|
||||
showOverflowAfter={5}
|
||||
/>
|
||||
)}
|
||||
<PaginatedDataList
|
||||
|
||||
@ -33,7 +33,6 @@ class RolesStep extends React.Component {
|
||||
isReadOnly
|
||||
label={selectedListLabel || i18n._(t`Selected`)}
|
||||
selected={selectedResourceRows}
|
||||
showOverflowAfter={5}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -4,17 +4,14 @@ 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--PaddingRight: 8px;
|
||||
--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 {
|
||||
padding: 3px 8px;
|
||||
.pf-c-button {
|
||||
--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;
|
||||
`}
|
||||
`;
|
||||
|
||||
@ -5,6 +5,6 @@ import Chip from './Chip';
|
||||
describe('Chip', () => {
|
||||
test('renders the expected content', () => {
|
||||
const wrapper = mount(<Chip />);
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,46 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { number } from 'prop-types';
|
||||
import { ChipGroup } from '@patternfly/react-core';
|
||||
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)`
|
||||
--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.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;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,74 +1,10 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
||||
import { ChipGroup, Chip } from '.';
|
||||
import { mount } from 'enzyme';
|
||||
import { ChipGroup } from '.';
|
||||
|
||||
describe('<ChipGroup />', () => {
|
||||
test('should render all chips', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<ChipGroup>
|
||||
<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);
|
||||
test('renders the expected content', () => {
|
||||
const wrapper = mount(<ChipGroup />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@ import { toTitleCase } from '@util/strings';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import Chip from './Chip';
|
||||
import { Credential } from '../../types';
|
||||
import { Credential } from '@types';
|
||||
|
||||
function CredentialChip({ credential, i18n, ...props }) {
|
||||
let type;
|
||||
|
||||
171
awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap
Normal file
171
awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap
Normal 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>
|
||||
`;
|
||||
@ -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>
|
||||
`;
|
||||
@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { parseQueryString } from '@util/qs';
|
||||
import { ChipGroup, Chip } from '@components/Chip';
|
||||
import { ChipGroup as _ChipGroup, Chip } from '@components/Chip';
|
||||
import VerticalSeparator from '@components/VerticalSeparator';
|
||||
|
||||
const FilterTagsRow = styled.div`
|
||||
@ -24,6 +24,12 @@ const FilterLabel = styled.span`
|
||||
padding-right: 20px;
|
||||
`;
|
||||
|
||||
const ChipGroup = styled(_ChipGroup)`
|
||||
li.pf-m-overflow {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
// remove non-default query params so they don't show up as filter tags
|
||||
const filterDefaultParams = (paramsArr, config) => {
|
||||
const defaultParamsKeys = Object.keys(config.defaultParams);
|
||||
@ -66,7 +72,7 @@ const FilterTags = ({
|
||||
<ResultCount>{i18n._(t`${itemCount} results`)}</ResultCount>
|
||||
<VerticalSeparator />
|
||||
<FilterLabel>{i18n._(t`Active Filters:`)}</FilterLabel>
|
||||
<ChipGroup>
|
||||
<ChipGroup defaultIsOpen>
|
||||
{queryParamsArr.map(({ key, label, value }) => (
|
||||
<Chip
|
||||
className="searchTagChip"
|
||||
|
||||
@ -49,6 +49,7 @@ const InputGroup = styled(PFInputGroup)`
|
||||
const ChipHolder = styled.div`
|
||||
--pf-c-form-control--BorderTopColor: 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-bottom-right-radius: 3px;
|
||||
`;
|
||||
@ -240,7 +241,7 @@ class Lookup extends React.Component {
|
||||
const canDelete = !required || (multiple && value.length > 1);
|
||||
const chips = () => {
|
||||
return selectCategoryOptions && selectCategoryOptions.length > 0 ? (
|
||||
<ChipGroup>
|
||||
<ChipGroup defaultIsOpen numChips={5}>
|
||||
{(multiple ? value : [value]).map(chip => (
|
||||
<CredentialChip
|
||||
key={chip.id}
|
||||
@ -251,7 +252,7 @@ class Lookup extends React.Component {
|
||||
))}
|
||||
</ChipGroup>
|
||||
) : (
|
||||
<ChipGroup>
|
||||
<ChipGroup defaultIsOpen numChips={5}>
|
||||
{(multiple ? value : [value]).map(chip => (
|
||||
<Chip
|
||||
key={chip.id}
|
||||
@ -350,7 +351,6 @@ class Lookup extends React.Component {
|
||||
<SelectedList
|
||||
label={i18n._(t`Selected`)}
|
||||
selected={selectCategoryOptions ? value : lookupSelectedItems}
|
||||
showOverflowAfter={5}
|
||||
onRemove={this.toggleSelected}
|
||||
isReadOnly={!canDelete}
|
||||
isCredentialList={
|
||||
|
||||
@ -70,8 +70,8 @@ describe('<MultiCredentialsLookup />', () => {
|
||||
});
|
||||
|
||||
test('onChange is called when you click to remove a credential from input', async () => {
|
||||
const chip = wrapper.find('PFChip');
|
||||
const button = chip.at(1).find('Button');
|
||||
const chip = wrapper.find('PFChip').find({ isOverflowChip: false });
|
||||
const button = chip.at(1).find('ChipButton');
|
||||
expect(chip).toHaveLength(4);
|
||||
button.prop('onClick')();
|
||||
expect(onChange).toBeCalledWith([
|
||||
|
||||
@ -206,7 +206,7 @@ class MultiSelect extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div css="margin: 10px">
|
||||
<ChipGroup>
|
||||
<ChipGroup defaultIsOpen numChips={5}>
|
||||
{value.map(item => (
|
||||
<Chip
|
||||
key={item.id}
|
||||
|
||||
@ -110,7 +110,9 @@ class ResourceAccessListItem extends React.Component {
|
||||
<Detail
|
||||
label={i18n._(t`User Roles`)}
|
||||
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
|
||||
label={i18n._(t`Team Roles`)}
|
||||
value={
|
||||
<ChipGroup>{teamRoles.map(this.renderChip)}</ChipGroup>
|
||||
<ChipGroup numChips={5}>
|
||||
{teamRoles.map(this.renderChip)}
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -84,7 +84,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef>
|
||||
<ForwardRef
|
||||
numChips={5}
|
||||
>
|
||||
<ForwardRef
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
@ -138,7 +140,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef>
|
||||
<ForwardRef
|
||||
numChips={5}
|
||||
>
|
||||
<ForwardRef
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
@ -215,7 +219,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef>
|
||||
<ForwardRef
|
||||
numChips={5}
|
||||
>
|
||||
<ForwardRef
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
@ -543,7 +549,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef>
|
||||
<ForwardRef
|
||||
numChips={5}
|
||||
>
|
||||
<ForwardRef
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
@ -649,7 +657,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
className="Detail__DetailValue-sc-16ypsyv-1 yHlYM"
|
||||
data-pf-content={true}
|
||||
>
|
||||
<ChipGroup>
|
||||
<ChipGroup
|
||||
numChips={5}
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
@ -658,9 +668,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ChipGroup-sc-10zu8t0-0",
|
||||
"isStatic": true,
|
||||
"lastClassName": "ldAQsx",
|
||||
"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 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",
|
||||
@ -674,199 +684,214 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
numChips={5}
|
||||
>
|
||||
<ChipGroup
|
||||
className="ChipGroup-sc-10zu8t0-0 ldAQsx"
|
||||
showOverflowAfter={null}
|
||||
className="ChipGroup-sc-10zu8t0-0 bwbBYO"
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ul
|
||||
className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 ldAQsx"
|
||||
className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO"
|
||||
>
|
||||
<Chip
|
||||
component="li"
|
||||
isReadOnly={false}
|
||||
key=".$3"
|
||||
onClick={[Function]}
|
||||
<InnerChipGroup
|
||||
className="ChipGroup-sc-10zu8t0-0 bwbBYO"
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
isOpen={false}
|
||||
numChips={5}
|
||||
onToggleCollapse={[Function]}
|
||||
withToolbar={false}
|
||||
>
|
||||
<StyledComponent
|
||||
<Chip
|
||||
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}
|
||||
key=".$3"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<PFChip
|
||||
className="Chip-sc-1rzr8oo-0 dgUGLg"
|
||||
<StyledComponent
|
||||
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}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<ComponentWithOuia
|
||||
component={[Function]}
|
||||
componentProps={
|
||||
Object {
|
||||
"children": "Member",
|
||||
"className": "Chip-sc-1rzr8oo-0 dgUGLg",
|
||||
"component": "li",
|
||||
"isReadOnly": false,
|
||||
"onClick": [Function],
|
||||
}
|
||||
}
|
||||
consumerContext={null}
|
||||
<PFChip
|
||||
className="Chip-sc-1rzr8oo-0 iczEeI"
|
||||
component="li"
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Chip
|
||||
className="Chip-sc-1rzr8oo-0 dgUGLg"
|
||||
closeBtnAriaLabel="close"
|
||||
component="li"
|
||||
isOverflowChip={false}
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
ouiaContext={
|
||||
<ComponentWithOuia
|
||||
component={[Function]}
|
||||
componentProps={
|
||||
Object {
|
||||
"isOuia": false,
|
||||
"ouiaId": null,
|
||||
"children": "Member",
|
||||
"className": "Chip-sc-1rzr8oo-0 iczEeI",
|
||||
"component": "li",
|
||||
"isReadOnly": false,
|
||||
"onClick": [Function],
|
||||
}
|
||||
}
|
||||
tooltipPosition="top"
|
||||
consumerContext={null}
|
||||
>
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
<Chip
|
||||
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
|
||||
className="pf-c-chip Chip-sc-1rzr8oo-0 dgUGLg"
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
>
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
<li
|
||||
className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
|
||||
>
|
||||
Member
|
||||
</span>
|
||||
<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"
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
>
|
||||
Member
|
||||
</span>
|
||||
<ChipButton
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className=""
|
||||
ariaLabel="close"
|
||||
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,
|
||||
}
|
||||
}
|
||||
<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"
|
||||
>
|
||||
<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={
|
||||
<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,
|
||||
}
|
||||
}
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
<Button
|
||||
aria-label="close"
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
className=""
|
||||
id="remove_pf-random-id-0"
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
ouiaContext={
|
||||
Object {
|
||||
"isOuia": false,
|
||||
"ouiaId": null,
|
||||
}
|
||||
}
|
||||
variant="plain"
|
||||
>
|
||||
<TimesCircleIcon
|
||||
aria-hidden="true"
|
||||
color="currentColor"
|
||||
noVerticalAlign={false}
|
||||
size="sm"
|
||||
title={null}
|
||||
<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"
|
||||
>
|
||||
<svg
|
||||
<TimesCircleIcon
|
||||
aria-hidden="true"
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
color="currentColor"
|
||||
noVerticalAlign={false}
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</InnerChipGroup>
|
||||
</ul>
|
||||
</ChipGroup>
|
||||
</StyledComponent>
|
||||
|
||||
@ -23,7 +23,6 @@ class SelectedList extends Component {
|
||||
const {
|
||||
label,
|
||||
selected,
|
||||
showOverflowAfter,
|
||||
onRemove,
|
||||
displayKey,
|
||||
isReadOnly,
|
||||
@ -54,7 +53,7 @@ class SelectedList extends Component {
|
||||
<SplitLabelItem>{label}</SplitLabelItem>
|
||||
<VerticalSeparator />
|
||||
<SplitItem>
|
||||
<ChipGroup showOverflowAfter={showOverflowAfter}>{chips}</ChipGroup>
|
||||
<ChipGroup numChips={5}>{chips}</ChipGroup>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
);
|
||||
@ -66,7 +65,6 @@ SelectedList.propTypes = {
|
||||
label: PropTypes.string,
|
||||
onRemove: PropTypes.func,
|
||||
selected: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
showOverflowAfter: PropTypes.number,
|
||||
isReadOnly: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -74,7 +72,6 @@ SelectedList.defaultProps = {
|
||||
displayKey: 'name',
|
||||
label: 'Selected',
|
||||
onRemove: () => null,
|
||||
showOverflowAfter: 5,
|
||||
isReadOnly: false,
|
||||
};
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@ describe('<SelectedList />', () => {
|
||||
<SelectedList
|
||||
label="Selectedeeee"
|
||||
selected={mockSelected}
|
||||
showOverflowAfter={5}
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
);
|
||||
@ -27,16 +26,11 @@ describe('<SelectedList />', () => {
|
||||
|
||||
test('showOverflow should set showOverflow on ChipGroup', () => {
|
||||
const wrapper = mount(
|
||||
<SelectedList
|
||||
label="Selected"
|
||||
selected={[]}
|
||||
showOverflowAfter={5}
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
<SelectedList label="Selected" selected={[]} onRemove={() => {}} />
|
||||
);
|
||||
const chipGroup = wrapper.find(ChipGroup);
|
||||
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', () => {
|
||||
@ -51,7 +45,6 @@ describe('<SelectedList />', () => {
|
||||
<SelectedList
|
||||
label="Selected"
|
||||
selected={mockSelected}
|
||||
showOverflowAfter={3}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -217,7 +217,7 @@ function JobDetail({ job, i18n, history }) {
|
||||
fullWidth
|
||||
label={i18n._(t`Credentials`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{credentials.map(c => (
|
||||
<CredentialChip key={c.id} credential={c} isReadOnly />
|
||||
))}
|
||||
@ -230,7 +230,7 @@ function JobDetail({ job, i18n, history }) {
|
||||
fullWidth
|
||||
label={i18n._(t`Labels`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{labels.results.map(l => (
|
||||
<Chip key={l.id} isReadOnly>
|
||||
{l.name}
|
||||
|
||||
@ -99,7 +99,7 @@ class OrganizationDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Instance Groups`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{instanceGroups.map(ig => (
|
||||
<Chip key={ig.id} isReadOnly>
|
||||
{ig.name}
|
||||
|
||||
@ -273,7 +273,7 @@ class JobTemplateDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Credentials`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{summary_fields.credentials.map(c => (
|
||||
<CredentialChip key={c.id} credential={c} isReadOnly />
|
||||
))}
|
||||
@ -286,7 +286,7 @@ class JobTemplateDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Labels`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{summary_fields.labels.results.map(l => (
|
||||
<Chip key={l.id} isReadOnly>
|
||||
{l.name}
|
||||
@ -301,7 +301,7 @@ class JobTemplateDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Instance Groups`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{instanceGroups.map(ig => (
|
||||
<Chip key={ig.id} isReadOnly>
|
||||
{ig.name}
|
||||
@ -316,7 +316,7 @@ class JobTemplateDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Job tags`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{job_tags.split(',').map(jobTag => (
|
||||
<Chip key={jobTag} isReadOnly>
|
||||
{jobTag}
|
||||
@ -331,7 +331,7 @@ class JobTemplateDetail extends Component {
|
||||
fullWidth
|
||||
label={i18n._(t`Skip tags`)}
|
||||
value={
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
<ChipGroup numChips={5}>
|
||||
{skip_tags.split(',').map(skipTag => (
|
||||
<Chip key={skipTag} isReadOnly>
|
||||
{skipTag}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user