mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 05:31:22 -03:30
Use PF Chip and ChipGroup components
This commit is contained in:
Marliana Lara
parent
5d2912605f
commit
ca85020b26
@ -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;
|
||||
}
|
||||
`;
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
`;
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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>
|
||||
`;
|
||||
@ -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>
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
export { default as ChipGroup } from './ChipGroup';
|
||||
export { default as Chip } from './Chip';
|
||||
export { default as CredentialChip } from './CredentialChip';
|
||||
@ -3,8 +3,8 @@ import { shape } from 'prop-types';
|
||||
import { toTitleCase } from '@util/strings';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import Chip from './Chip';
|
||||
import { Credential } from '@types';
|
||||
import { Chip } from '@patternfly/react-core';
|
||||
|
||||
function CredentialChip({ credential, i18n, ...props }) {
|
||||
let type;
|
||||
1
awx/ui_next/src/components/CredentialChip/index.js
Normal file
1
awx/ui_next/src/components/CredentialChip/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './CredentialChip';
|
||||
@ -13,6 +13,8 @@ import { SearchIcon } from '@patternfly/react-icons';
|
||||
import {
|
||||
Button,
|
||||
ButtonVariant,
|
||||
Chip,
|
||||
ChipGroup,
|
||||
InputGroup as PFInputGroup,
|
||||
Modal,
|
||||
} from '@patternfly/react-core';
|
||||
@ -21,7 +23,6 @@ import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import reducer, { initReducer } from './shared/reducer';
|
||||
import { ChipGroup, Chip } from '../Chip';
|
||||
import { QSConfig } from '@types';
|
||||
|
||||
const SearchButton = styled(Button)`
|
||||
|
||||
@ -7,7 +7,7 @@ import { FormGroup, ToolbarItem } from '@patternfly/react-core';
|
||||
import { CredentialsAPI, CredentialTypesAPI } from '@api';
|
||||
import AnsibleSelect from '@components/AnsibleSelect';
|
||||
import { FieldTooltip } from '@components/FormField';
|
||||
import { CredentialChip } from '@components/Chip';
|
||||
import CredentialChip from '@components/CredentialChip';
|
||||
import VerticalSeperator from '@components/VerticalSeparator';
|
||||
import { getQSConfig, parseQueryString } from '@util/qs';
|
||||
import Lookup from './Lookup';
|
||||
|
||||
@ -3,6 +3,8 @@ import { func } from 'prop-types';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Chip,
|
||||
ChipGroup,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells as PFDataListItemCells,
|
||||
@ -14,7 +16,6 @@ import {
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ChipGroup, Chip } from '@components/Chip';
|
||||
import { DetailList, Detail } from '@components/DetailList';
|
||||
import { AccessRecord } from '@types';
|
||||
|
||||
|
||||
@ -86,16 +86,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef
|
||||
<ChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ForwardRef
|
||||
<Unknown
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Member
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</Unknown>
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
</ForwardRef>
|
||||
@ -142,16 +147,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef
|
||||
<ChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ForwardRef
|
||||
<Unknown
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Member
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</Unknown>
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
</ForwardRef>
|
||||
@ -221,16 +231,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef
|
||||
<ChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ForwardRef
|
||||
<Unknown
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Member
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</Unknown>
|
||||
</ChipGroup>
|
||||
}
|
||||
/>
|
||||
</ForwardRef>
|
||||
@ -561,16 +576,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
fullWidth={false}
|
||||
label="Team Roles"
|
||||
value={
|
||||
<ForwardRef
|
||||
<ChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ForwardRef
|
||||
<Unknown
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Member
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</Unknown>
|
||||
</ChipGroup>
|
||||
}
|
||||
>
|
||||
<Detail__DetailName
|
||||
@ -680,243 +700,175 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
|
||||
data-pf-content={true}
|
||||
>
|
||||
<ChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
numChips={5}
|
||||
withToolbar={false}
|
||||
>
|
||||
<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}
|
||||
numChips={5}
|
||||
<ul
|
||||
className="pf-c-chip-group"
|
||||
>
|
||||
<ChipGroup
|
||||
className="ChipGroup-sc-10zu8t0-0 bwbBYO"
|
||||
<InnerChipGroup
|
||||
className=""
|
||||
collapsedText="\${remaining} more"
|
||||
defaultIsOpen={false}
|
||||
expandedText="Show Less"
|
||||
isOpen={false}
|
||||
numChips={5}
|
||||
onToggleCollapse={[Function]}
|
||||
withToolbar={false}
|
||||
>
|
||||
<ul
|
||||
className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO"
|
||||
<Component
|
||||
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}
|
||||
<ComponentWithOuia
|
||||
component={[Function]}
|
||||
componentProps={
|
||||
Object {
|
||||
"children": "Member",
|
||||
"component": "li",
|
||||
"isReadOnly": false,
|
||||
"onClick": [Function],
|
||||
}
|
||||
}
|
||||
consumerContext={null}
|
||||
>
|
||||
<Chip
|
||||
className=""
|
||||
closeBtnAriaLabel="close"
|
||||
component="li"
|
||||
isOverflowChip={false}
|
||||
isReadOnly={false}
|
||||
key=".$3"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<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],
|
||||
}
|
||||
ouiaContext={
|
||||
Object {
|
||||
"isOuia": false,
|
||||
"ouiaId": null,
|
||||
}
|
||||
forwardedRef={null}
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
}
|
||||
tooltipPosition="top"
|
||||
>
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
>
|
||||
<PFChip
|
||||
className="Chip-sc-1rzr8oo-0 iczEeI"
|
||||
component="li"
|
||||
isReadOnly={false}
|
||||
onClick={[Function]}
|
||||
<li
|
||||
className="pf-c-chip"
|
||||
>
|
||||
<ComponentWithOuia
|
||||
component={[Function]}
|
||||
componentProps={
|
||||
Object {
|
||||
"children": "Member",
|
||||
"className": "Chip-sc-1rzr8oo-0 iczEeI",
|
||||
"component": "li",
|
||||
"isReadOnly": false,
|
||||
"onClick": [Function],
|
||||
}
|
||||
}
|
||||
consumerContext={null}
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
>
|
||||
<Chip
|
||||
className="Chip-sc-1rzr8oo-0 iczEeI"
|
||||
closeBtnAriaLabel="close"
|
||||
component="li"
|
||||
isOverflowChip={false}
|
||||
isReadOnly={false}
|
||||
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"
|
||||
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,
|
||||
}
|
||||
}
|
||||
tooltipPosition="top"
|
||||
variant="plain"
|
||||
>
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
<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,
|
||||
}
|
||||
}
|
||||
>
|
||||
<li
|
||||
className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI"
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
>
|
||||
Member
|
||||
</span>
|
||||
<ChipButton
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="close"
|
||||
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"
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<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"
|
||||
<TimesCircleIcon
|
||||
aria-hidden="true"
|
||||
color="currentColor"
|
||||
noVerticalAlign={false}
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<ComponentWithOuia
|
||||
component={[Function]}
|
||||
componentProps={
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
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,
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<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>
|
||||
</li>
|
||||
</GenerateId>
|
||||
</Chip>
|
||||
</ComponentWithOuia>
|
||||
</PFChip>
|
||||
</StyledComponent>
|
||||
<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>
|
||||
</InnerChipGroup>
|
||||
</ul>
|
||||
</ChipGroup>
|
||||
</StyledComponent>
|
||||
</ComponentWithOuia>
|
||||
</Component>
|
||||
</InnerChipGroup>
|
||||
</ul>
|
||||
</ChipGroup>
|
||||
</dd>
|
||||
</TextListItem>
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
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 { ChipGroup, Chip } from '../Chip';
|
||||
import VerticalSeparator from '../VerticalSeparator';
|
||||
|
||||
const Split = styled(PFSplit)`
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { ChipGroup } from '../Chip';
|
||||
import { ChipGroup } from '@patternfly/react-core';
|
||||
|
||||
import SelectedList from './SelectedList';
|
||||
|
||||
describe('<SelectedList />', () => {
|
||||
|
||||
@ -2,10 +2,9 @@ import React, { useCallback, useEffect } from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
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 { DetailList, Detail, UserDateDetail } from '@components/DetailList';
|
||||
import { ChipGroup, Chip } from '@components/Chip';
|
||||
import { VariablesDetail } from '@components/CodeMirrorInput';
|
||||
import DeleteButton from '@components/DeleteButton';
|
||||
import ContentError from '@components/ContentError';
|
||||
|
||||
@ -2,13 +2,13 @@ import React, { useState } from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
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 AlertModal from '@components/AlertModal';
|
||||
import { DetailList, Detail } from '@components/DetailList';
|
||||
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 DeleteButton from '@components/DeleteButton';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
|
||||
@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react';
|
||||
import { Link, useHistory, useRouteMatch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Button, Chip, ChipGroup } from '@patternfly/react-core';
|
||||
import { OrganizationsAPI } from '@api';
|
||||
import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
|
||||
import { CardBody, CardActionsRow } from '@components/Card';
|
||||
import { ChipGroup, Chip } from '@components/Chip';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import ContentError from '@components/ContentError';
|
||||
import ContentLoading from '@components/ContentLoading';
|
||||
|
||||
@ -12,7 +12,7 @@ import ContentLoading from '@components/ContentLoading';
|
||||
import DeleteButton from '@components/DeleteButton';
|
||||
import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
import { CredentialChip } from '@components/Chip';
|
||||
import CredentialChip from '@components/CredentialChip';
|
||||
import { ProjectsAPI } from '@api';
|
||||
import { toTitleCase } from '@util/strings';
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@ import { Link, useHistory, useParams } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import {
|
||||
Button,
|
||||
Chip,
|
||||
ChipGroup,
|
||||
TextList,
|
||||
TextListItem,
|
||||
TextListItemVariants,
|
||||
@ -15,7 +17,7 @@ import AlertModal from '@components/AlertModal';
|
||||
import { CardBody, CardActionsRow } from '@components/Card';
|
||||
import ContentError from '@components/ContentError';
|
||||
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 DeleteButton from '@components/DeleteButton';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user