mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 05:31:22 -03:30
Standardize chip height (#213)
* make all chips the same size * create DetailList, Detail components; clean up Chips, ChipGroup * delete BasicChip in favor of <Chip isReadOnly> * create our own ChipGroup to handle overflow
This commit is contained in:
Keith Grant
GitHub
parent
189e12f8b3
commit
29e17ac49e
69
__tests__/components/Chip/ChipGroup.test.jsx
Normal file
69
__tests__/components/Chip/ChipGroup.test.jsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mountWithContexts } from '../../enzymeHelpers';
|
||||
import { ChipGroup, Chip } from '../../../src/components/Chip';
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
@ -141,7 +141,7 @@ describe('<Lookup />', () => {
|
||||
sortedColumnKey="name"
|
||||
/>
|
||||
).find('Lookup');
|
||||
const chip = wrapper.find('li.pf-c-chip');
|
||||
const chip = wrapper.find('.pf-c-chip');
|
||||
expect(chip).toHaveLength(2);
|
||||
});
|
||||
|
||||
|
||||
@ -111,6 +111,7 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import SelectedList from '../../src/components/SelectedList';
|
||||
import { ChipGroup } from '../../src/components/Chip';
|
||||
|
||||
describe('<SelectedList />', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
@ -22,7 +23,8 @@ describe('<SelectedList />', () => {
|
||||
/>
|
||||
);
|
||||
});
|
||||
test('showOverflow should set showOverflow state to true', () => {
|
||||
|
||||
test('showOverflow should set showOverflow on ChipGroup', () => {
|
||||
const wrapper = mount(
|
||||
<SelectedList
|
||||
label="Selected"
|
||||
@ -31,73 +33,11 @@ describe('<SelectedList />', () => {
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.state('showOverflow')).toBe(false);
|
||||
wrapper.instance().showOverflow();
|
||||
expect(wrapper.state('showOverflow')).toBe(true);
|
||||
});
|
||||
test('Overflow chip should be shown when more selected.length exceeds showOverflowAfter', () => {
|
||||
const mockSelected = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'bar'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'foobar'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'baz'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'foobaz'
|
||||
}
|
||||
];
|
||||
const wrapper = mount(
|
||||
<SelectedList
|
||||
label="Selected"
|
||||
selected={mockSelected}
|
||||
showOverflowAfter={3}
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('Chip').length).toBe(4);
|
||||
expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
|
||||
});
|
||||
test('Clicking overflow chip should show all chips', () => {
|
||||
const mockSelected = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'bar'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'foobar'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'baz'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'foobaz'
|
||||
}
|
||||
];
|
||||
const wrapper = mount(
|
||||
<SelectedList
|
||||
label="Selected"
|
||||
selected={mockSelected}
|
||||
showOverflowAfter={3}
|
||||
onRemove={() => {}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('Chip').length).toBe(4);
|
||||
expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
|
||||
wrapper.find('[isOverflowChip=true] button').simulate('click');
|
||||
expect(wrapper.find('Chip').length).toBe(5);
|
||||
expect(wrapper.find('[isOverflowChip=true]').length).toBe(0);
|
||||
const chipGroup = wrapper.find(ChipGroup);
|
||||
expect(chipGroup).toHaveLength(1);
|
||||
expect(chipGroup.prop('showOverflowAfter')).toEqual(5);
|
||||
});
|
||||
|
||||
test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
|
||||
const onRemove = jest.fn();
|
||||
const mockSelected = [
|
||||
|
||||
@ -29,6 +29,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
@ -44,6 +45,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@ -69,6 +71,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
@ -84,6 +87,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@ -112,85 +116,81 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
class="pf-l-bullseye"
|
||||
>
|
||||
<div
|
||||
class="pf-l-bullseye"
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
aria-modal="true"
|
||||
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
aria-modal="true"
|
||||
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3
|
||||
class="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h3>
|
||||
<div
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
Are you sure you want to remove {0} access from {1}? Doing so affects all members of the team.
|
||||
<br />
|
||||
<br />
|
||||
If you {0} want to remove access for this particular user, please remove them from the team.
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="pf-c-button pf-m-plain"
|
||||
aria-label="Confirm delete"
|
||||
class="pf-c-button pf-m-danger"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
Delete
|
||||
</button>
|
||||
<h3
|
||||
class="pf-c-title pf-m-2xl"
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
type="button"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h3>
|
||||
<div
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
Are you sure you want to remove {0} access from {1}? Doing so affects all members of the team.
|
||||
<br />
|
||||
<br />
|
||||
If you {0} want to remove access for this particular user, please remove them from the team.
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<button
|
||||
aria-label="Confirm delete"
|
||||
class="pf-c-button pf-m-danger"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
</div>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,6 +210,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
@ -225,6 +226,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@ -250,233 +252,227 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<div
|
||||
className="pf-c-backdrop"
|
||||
>
|
||||
<Bullseye
|
||||
className=""
|
||||
component="div"
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
className="pf-l-bullseye"
|
||||
focusTrapOptions={
|
||||
Object {
|
||||
"clickOutsideDeactivates": true,
|
||||
}
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
className="pf-l-bullseye"
|
||||
focusTrapOptions={
|
||||
<ModalBox
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isSmall={false}
|
||||
style={
|
||||
Object {
|
||||
"clickOutsideDeactivates": true,
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
title="Remove {0} Access"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<ModalBox
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isSmall={false}
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
aria-modal="true"
|
||||
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
title="Remove {0} Access"
|
||||
}
|
||||
>
|
||||
<ModalBoxCloseButton
|
||||
className=""
|
||||
onClose={[Function]}
|
||||
>
|
||||
<Button
|
||||
aria-label="Close"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Close"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesIcon
|
||||
color="currentColor"
|
||||
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 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader
|
||||
className=""
|
||||
hideTitle={false}
|
||||
>
|
||||
<Title
|
||||
className=""
|
||||
headingLevel="h3"
|
||||
size="2xl"
|
||||
>
|
||||
<h3
|
||||
className="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h3>
|
||||
</Title>
|
||||
</ModalBoxHeader>
|
||||
<ModalBoxBody
|
||||
className=""
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
aria-modal="true"
|
||||
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
className="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<ModalBoxCloseButton
|
||||
className=""
|
||||
onClose={[Function]}
|
||||
Are you sure you want to remove {0} access from {1}? Doing so affects all members of the team.
|
||||
<br />
|
||||
<br />
|
||||
If you {0} want to remove access for this particular user, please remove them from the team.
|
||||
<ExclamationCircleIcon
|
||||
className="at-c-alertModal__icon"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<Button
|
||||
aria-label="Close"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
className="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Close"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesIcon
|
||||
color="currentColor"
|
||||
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 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader
|
||||
className=""
|
||||
hideTitle={false}
|
||||
>
|
||||
<Title
|
||||
className=""
|
||||
headingLevel="h3"
|
||||
size="2xl"
|
||||
>
|
||||
<h3
|
||||
className="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h3>
|
||||
</Title>
|
||||
</ModalBoxHeader>
|
||||
<ModalBoxBody
|
||||
className=""
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
Are you sure you want to remove {0} access from {1}? Doing so affects all members of the team.
|
||||
<br />
|
||||
<br />
|
||||
If you {0} want to remove access for this particular user, please remove them from the team.
|
||||
<ExclamationCircleIcon
|
||||
className="at-c-alertModal__icon"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
className="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</ExclamationCircleIcon>
|
||||
</div>
|
||||
</ModalBoxBody>
|
||||
<ModalBoxFooter
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="delete"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Confirm delete"
|
||||
className="pf-c-button pf-m-danger"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="cancel"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-secondary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</ModalBoxFooter>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</ExclamationCircleIcon>
|
||||
</div>
|
||||
</ModalBox>
|
||||
</ModalBoxBody>
|
||||
<ModalBoxFooter
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
key="delete"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Confirm delete"
|
||||
className="pf-c-button pf-m-danger"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
key="cancel"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-secondary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</ModalBoxFooter>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</ModalBox>
|
||||
</div>
|
||||
</Bullseye>
|
||||
</FocusTrap>
|
||||
</div>
|
||||
</Backdrop>
|
||||
</ModalContent>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -714,7 +714,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DropdownToggle
|
||||
<Toggle
|
||||
ariaHasPopup={true}
|
||||
className=""
|
||||
id="awx-search"
|
||||
@ -804,7 +804,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</svg>
|
||||
</CaretDownIcon>
|
||||
</button>
|
||||
</DropdownToggle>
|
||||
</Toggle>
|
||||
</DropdownToggle>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@ -932,6 +932,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="tertiary"
|
||||
@ -984,20 +985,37 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</Styled(ToolbarItem)>
|
||||
<VerticalSeparator>
|
||||
<div>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#d7d7d7",
|
||||
"content": "",
|
||||
"display": "inline-block",
|
||||
"height": "30px",
|
||||
"marginLeft": "20px",
|
||||
"marginRight": "20px",
|
||||
"verticalAlign": "middle",
|
||||
"width": "1px",
|
||||
<VerticalSeparator__Separator>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "VerticalSeparator__Separator-sc-1256nz7-0",
|
||||
"isStatic": true,
|
||||
"lastClassName": "kgxyCB",
|
||||
"rules": Array [
|
||||
"display:inline-block;width:1px;height:30px;margin-right:20px;margin-left:20px;background-color:#d7d7d7;vertical-align:middle;",
|
||||
],
|
||||
},
|
||||
"displayName": "VerticalSeparator__Separator",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "VerticalSeparator__Separator-sc-1256nz7-0",
|
||||
"target": "span",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
forwardedRef={null}
|
||||
>
|
||||
<span
|
||||
className="VerticalSeparator__Separator-sc-1256nz7-0 kgxyCB"
|
||||
/>
|
||||
</StyledComponent>
|
||||
</VerticalSeparator__Separator>
|
||||
</div>
|
||||
</VerticalSeparator>
|
||||
</div>
|
||||
@ -1327,7 +1345,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DropdownToggle
|
||||
<Toggle
|
||||
ariaHasPopup={true}
|
||||
className=""
|
||||
id="awx-sort"
|
||||
@ -1418,7 +1436,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</svg>
|
||||
</CaretDownIcon>
|
||||
</button>
|
||||
</DropdownToggle>
|
||||
</Toggle>
|
||||
</DropdownToggle>
|
||||
</div>
|
||||
</Dropdown>
|
||||
@ -1466,6 +1484,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
@ -2748,7 +2767,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
<div
|
||||
className="pf-c-pagination pf-m-footer Pagination__AWXPagination-c2dclb-0 dXBcqV"
|
||||
>
|
||||
<OptionsMenu
|
||||
<PaginationOptionsMenu
|
||||
dropDirection="up"
|
||||
firstIndex={1}
|
||||
itemCount={2}
|
||||
@ -2964,7 +2983,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
<span
|
||||
className="pf-c-options-menu__toggle-text"
|
||||
>
|
||||
<ToggleTamplate
|
||||
<ToggleTemplate
|
||||
firstIndex={1}
|
||||
itemCount={2}
|
||||
itemsTitle="items"
|
||||
@ -2981,7 +3000,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</strong>
|
||||
|
||||
items
|
||||
</ToggleTamplate>
|
||||
</ToggleTemplate>
|
||||
</span>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
@ -3024,7 +3043,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</OptionsMenu>
|
||||
</PaginationOptionsMenu>
|
||||
<Navigation
|
||||
currPage="Current page"
|
||||
lastPage={1}
|
||||
@ -3056,6 +3075,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
@ -3107,6 +3127,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
@ -3179,6 +3200,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
@ -3230,6 +3252,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
isInline={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
|
||||
54
package-lock.json
generated
54
package-lock.json
generated
@ -1179,6 +1179,19 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
|
||||
"integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz",
|
||||
"integrity": "sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q=="
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
|
||||
"integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.18"
|
||||
}
|
||||
},
|
||||
"@jest/console": {
|
||||
"version": "24.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
|
||||
@ -1762,18 +1775,18 @@
|
||||
}
|
||||
},
|
||||
"@patternfly/patternfly": {
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.5.tgz",
|
||||
"integrity": "sha512-L0k+ea2N679ytQwTqYJ7RewVDx6FDpm9burtHgD8fhcIN0UJJo7v2IkhLya2WzH2/O7L7TiF45lb/ZVoFVckDA=="
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.7.0.tgz",
|
||||
"integrity": "sha512-mewkgiqaQQTLabpOUCi9BrFJ6cQAvgNtOT7Z+LHS3PKIGFKkTfjAd+hm0TktbohNQJS8KvH5qcUV/WuLZ2/UbA=="
|
||||
},
|
||||
"@patternfly/react-core": {
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.2.6.tgz",
|
||||
"integrity": "sha512-58GBM8SfhoggQldGArUR3LwvcMe+GaW/uTjB1/a3RTG6HXTfFfs33UXnQnN2IgWZmHOyxpjnWq2yEh5xwJs5HQ==",
|
||||
"version": "3.16.14",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.16.14.tgz",
|
||||
"integrity": "sha512-JKBwXs6+YlmOSQGsKOraiioLIYysdHqMYWsTgLqomXouOyAk3q30/TKQudZbRs/Iw7Gg3W2Ub9ed3pDI7D+R6Q==",
|
||||
"requires": {
|
||||
"@patternfly/react-icons": "^3.7.4",
|
||||
"@patternfly/react-styles": "^3.0.2",
|
||||
"@patternfly/react-tokens": "^2.3.3",
|
||||
"@patternfly/react-icons": "^3.9.1",
|
||||
"@patternfly/react-styles": "^3.2.0",
|
||||
"@patternfly/react-tokens": "^2.5.1",
|
||||
"@tippy.js/react": "^1.1.1",
|
||||
"emotion": "^9.2.9",
|
||||
"exenv": "^1.2.2",
|
||||
@ -1781,14 +1794,17 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@patternfly/react-icons": {
|
||||
"version": "3.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
|
||||
"integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.9.2.tgz",
|
||||
"integrity": "sha512-EwPB+Nodd7zwiFh7R3Qq6Dif+xUR3WOwaJ+SRbP5NsxEAJf3CyYyrd7rbN8yFrFLTMKzknT2ez9XrP/5Lgr5LQ==",
|
||||
"requires": {
|
||||
"@fortawesome/free-brands-svg-icons": "^5.8.1"
|
||||
}
|
||||
},
|
||||
"@patternfly/react-tokens": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
|
||||
"integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.5.1.tgz",
|
||||
"integrity": "sha512-ZykUfWT4yCELXhGGwQxcNqnXwe3sqfSuoL6IlQRV6wtUKk+/et7NkVvrRwvci926+Usemr4IQVc8V9gbHqRN/A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -1798,9 +1814,9 @@
|
||||
"integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
|
||||
},
|
||||
"@patternfly/react-styles": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
|
||||
"integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.2.0.tgz",
|
||||
"integrity": "sha512-8M7bo4kPvypHlbzuynV53xjk5176EktfEgZ283sfHmvUlU3Yvq2+m8hS9ERHE9gd91Ip4HiyucAVVACd2gtHNQ==",
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.0.0-beta.48",
|
||||
"camel-case": "^3.0.0",
|
||||
@ -3279,7 +3295,7 @@
|
||||
},
|
||||
"babel-plugin-syntax-object-rest-spread": {
|
||||
"version": "6.13.0",
|
||||
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
|
||||
"integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
|
||||
},
|
||||
"babel-plugin-syntax-trailing-function-commas": {
|
||||
|
||||
@ -51,8 +51,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@lingui/react": "^2.7.2",
|
||||
"@patternfly/patternfly": "^2.6.5",
|
||||
"@patternfly/react-core": "^3.2.6",
|
||||
"@patternfly/patternfly": "^2.7.0",
|
||||
"@patternfly/react-core": "^3.16.14",
|
||||
"@patternfly/react-icons": "^3.7.5",
|
||||
"@patternfly/react-tokens": "^2.3.3",
|
||||
"axios": "^0.18.0",
|
||||
|
||||
@ -303,13 +303,6 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.awx-c-chip {
|
||||
padding: 3px 0;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.awx-orgTabs-container{
|
||||
display: flex
|
||||
}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Chip } from '@patternfly/react-core';
|
||||
import './basicChip.scss';
|
||||
|
||||
const BasicChip = ({ children, onToggle, isOverflowChip }) => (
|
||||
<Chip
|
||||
className="awx-c-chip--basic"
|
||||
onClick={onToggle}
|
||||
isOverflowChip={isOverflowChip}
|
||||
>
|
||||
{children}
|
||||
</Chip>
|
||||
);
|
||||
|
||||
BasicChip.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default BasicChip;
|
||||
@ -1,18 +0,0 @@
|
||||
.awx-c-chip--basic {
|
||||
padding: 3px 8px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.pf-c-chip {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.pf-m-overflow {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(.pf-m-overflow) .pf-c-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
18
src/components/Chip/Chip.jsx
Normal file
18
src/components/Chip/Chip.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
import { Chip } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
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-button {
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
${props => (props.isOverflowChip && `
|
||||
padding: 0;
|
||||
`)}
|
||||
`;
|
||||
41
src/components/Chip/ChipGroup.jsx
Normal file
41
src/components/Chip/ChipGroup.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React, { useState } from 'react';
|
||||
import { number } from 'prop-types';
|
||||
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}>
|
||||
{mappedChildren.slice(0, numToShow)}
|
||||
{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;
|
||||
`;
|
||||
2
src/components/Chip/index.js
Normal file
2
src/components/Chip/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export { default as ChipGroup } from './ChipGroup';
|
||||
export { default as Chip } from './Chip';
|
||||
56
src/components/DetailList/Detail.jsx
Normal file
56
src/components/DetailList/Detail.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { node, bool } from 'prop-types';
|
||||
import { TextListItem, TextListItemVariants } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DetailName = styled(({ fullWidth, ...props }) => (
|
||||
<TextListItem {...props} />
|
||||
))`
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
text-align: right;
|
||||
${props => props.fullWidth && `
|
||||
grid-column: 1;
|
||||
`}
|
||||
`;
|
||||
|
||||
const DetailValue = styled(({ fullWidth, ...props }) => (
|
||||
<TextListItem {...props} />
|
||||
))`
|
||||
word-break: break-all;
|
||||
${props => props.fullWidth && `
|
||||
grid-column: 2 / -1;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Detail = ({ label, value, fullWidth }) => {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<Fragment>
|
||||
<DetailName
|
||||
component={TextListItemVariants.dt}
|
||||
fullWidth={fullWidth}
|
||||
>
|
||||
{label}
|
||||
</DetailName>
|
||||
<DetailValue
|
||||
component={TextListItemVariants.dd}
|
||||
fullWidth={fullWidth}
|
||||
>
|
||||
{value}
|
||||
</DetailValue>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
Detail.propTypes = {
|
||||
label: node.isRequired,
|
||||
value: node,
|
||||
fullWidth: bool,
|
||||
};
|
||||
Detail.defaultProps = {
|
||||
value: null,
|
||||
fullWidth: false,
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
export { DetailName };
|
||||
export { DetailValue };
|
||||
28
src/components/DetailList/DetailList.jsx
Normal file
28
src/components/DetailList/DetailList.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { TextList, TextListVariants } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DetailList = ({ children, stacked, ...props }) => (
|
||||
<TextList component={TextListVariants.dl} {...props}>
|
||||
{children}
|
||||
</TextList>
|
||||
);
|
||||
|
||||
export default styled(DetailList)`
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
${props => (props.stacked ? (`
|
||||
grid-template-columns: auto 1fr;
|
||||
`) : (`
|
||||
--column-count: 1;
|
||||
grid-template-columns: repeat(var(--column-count), auto minmax(10em, 1fr));
|
||||
|
||||
@media (min-width: 920px) {
|
||||
--column-count: 2;
|
||||
}
|
||||
|
||||
@media (min-width: 1210px) {
|
||||
--column-count: 3;
|
||||
}
|
||||
`))}
|
||||
`;
|
||||
2
src/components/DetailList/index.js
Normal file
2
src/components/DetailList/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export { default as DetailList } from './DetailList';
|
||||
export { default as Detail, DetailName, DetailValue } from './Detail';
|
||||
@ -5,7 +5,6 @@ import { SearchIcon } from '@patternfly/react-icons';
|
||||
import {
|
||||
Button,
|
||||
ButtonVariant,
|
||||
Chip,
|
||||
InputGroup,
|
||||
Modal,
|
||||
} from '@patternfly/react-core';
|
||||
@ -17,6 +16,7 @@ import PaginatedDataList from '../PaginatedDataList';
|
||||
import DataListToolbar from '../DataListToolbar';
|
||||
import CheckboxListItem from '../ListItem';
|
||||
import SelectedList from '../SelectedList';
|
||||
import { ChipGroup, Chip } from '../Chip';
|
||||
import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
|
||||
|
||||
class Lookup extends React.Component {
|
||||
@ -128,13 +128,13 @@ class Lookup extends React.Component {
|
||||
const header = lookupHeader || i18n._(t`items`);
|
||||
|
||||
const chips = value ? (
|
||||
<div className="pf-c-chip-group">
|
||||
<ChipGroup>
|
||||
{value.map(chip => (
|
||||
<Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
|
||||
{chip.name}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
</ChipGroup>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
|
||||
@ -1,40 +1,24 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Chip
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import BasicChip from '../BasicChip/BasicChip';
|
||||
import { Split as PFSplit, SplitItem } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import { ChipGroup, Chip } from '../Chip';
|
||||
import VerticalSeparator from '../VerticalSeparator';
|
||||
|
||||
const selectedRowStyling = {
|
||||
paddingTop: '15px',
|
||||
paddingBottom: '5px',
|
||||
borderLeft: '0',
|
||||
borderRight: '0'
|
||||
};
|
||||
const Split = styled(PFSplit)`
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: #ebebeb var(--pf-global--BorderWidth--sm) solid;
|
||||
align-items: baseline;
|
||||
`;
|
||||
|
||||
const selectedLabelStyling = {
|
||||
alignSelf: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
};
|
||||
const SplitLabelItem = styled(SplitItem)`
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
word-break: initial;
|
||||
`;
|
||||
|
||||
class SelectedList extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showOverflow: false
|
||||
};
|
||||
|
||||
this.showOverflow = this.showOverflow.bind(this);
|
||||
}
|
||||
|
||||
showOverflow = () => {
|
||||
this.setState({ showOverflow: true });
|
||||
};
|
||||
|
||||
render () {
|
||||
const {
|
||||
label,
|
||||
@ -44,58 +28,26 @@ class SelectedList extends Component {
|
||||
displayKey,
|
||||
isReadOnly
|
||||
} = this.props;
|
||||
const { showOverflow } = this.state;
|
||||
const visibleItems = selected.slice(0, showOverflow ? selected.length : showOverflowAfter);
|
||||
return (
|
||||
<div className="awx-selectedList">
|
||||
<div className="pf-l-split" style={selectedRowStyling}>
|
||||
<div className="pf-l-split__item" style={selectedLabelStyling}>
|
||||
{label}
|
||||
</div>
|
||||
<VerticalSeparator />
|
||||
<div className="pf-l-split__item">
|
||||
<div className="pf-c-chip-group">
|
||||
{isReadOnly ? (
|
||||
<Fragment>
|
||||
{visibleItems
|
||||
.map(selectedItem => (
|
||||
<BasicChip
|
||||
key={selectedItem.id}
|
||||
>
|
||||
{selectedItem[displayKey]}
|
||||
</BasicChip>
|
||||
))
|
||||
}
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
{visibleItems
|
||||
.map(selectedItem => (
|
||||
<Chip
|
||||
key={selectedItem.id}
|
||||
onClick={() => onRemove(selectedItem)}
|
||||
>
|
||||
{selectedItem[displayKey]}
|
||||
</Chip>
|
||||
))
|
||||
}
|
||||
</Fragment>
|
||||
)}
|
||||
{(
|
||||
!showOverflow
|
||||
&& selected.length > showOverflowAfter
|
||||
) && (
|
||||
<Chip
|
||||
isOverflowChip
|
||||
onClick={() => this.showOverflow()}
|
||||
>
|
||||
{`${(selected.length - showOverflowAfter).toString()} more`}
|
||||
</Chip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Split>
|
||||
<SplitLabelItem>
|
||||
{label}
|
||||
</SplitLabelItem>
|
||||
<VerticalSeparator />
|
||||
<SplitItem>
|
||||
<ChipGroup showOverflowAfter={showOverflowAfter}>
|
||||
{selected.map(item => (
|
||||
<Chip
|
||||
key={item.id}
|
||||
isReadOnly={isReadOnly}
|
||||
onClick={() => onRemove(item)}
|
||||
>
|
||||
{item[displayKey]}
|
||||
</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
.awx-selectedList {
|
||||
--awx-selectedList--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
||||
--awx-selectedList--BorderColor: #ebebeb;
|
||||
--awx-selectedList--BorderWidth: var(--pf-global--BorderWidth--sm);
|
||||
--awx-selectedList--FontSize: var(--pf-c-chip__text--FontSize);
|
||||
|
||||
|
||||
.pf-l-split {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: var(--awx-selectedList--BorderWidth) solid var(--awx-selectedList--BorderColor);
|
||||
}
|
||||
.pf-l-split__item:first-child {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
height: 30px;
|
||||
}
|
||||
.pf-c-chip {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,19 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Separator = styled.span`
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
background-color: #d7d7d7;
|
||||
vertical-align: middle;
|
||||
`;
|
||||
|
||||
const VerticalSeparator = () => (
|
||||
<div>
|
||||
<span style={{
|
||||
content: '',
|
||||
backgroundColor: '#d7d7d7',
|
||||
width: '1px',
|
||||
height: '30px',
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'middle',
|
||||
marginLeft: '20px',
|
||||
marginRight: '20px'
|
||||
}}
|
||||
/>
|
||||
<Separator />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ import { t } from '@lingui/macro';
|
||||
|
||||
import '@patternfly/react-core/dist/styles/base.css';
|
||||
import './app.scss';
|
||||
import './components/SelectedList/styles.scss';
|
||||
import './components/AddRole/styles.scss';
|
||||
|
||||
import { Config } from './contexts/Config';
|
||||
|
||||
@ -5,55 +5,21 @@ import { t } from '@lingui/macro';
|
||||
import {
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListItemCells as PFDataListItemCells,
|
||||
DataListCell,
|
||||
Text,
|
||||
TextContent,
|
||||
TextVariants,
|
||||
Chip,
|
||||
} from '@patternfly/react-core';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { AccessRecord } from '../../../types';
|
||||
import BasicChip from '../../../components/BasicChip/BasicChip';
|
||||
import { DetailList, Detail } from '../../../components/DetailList';
|
||||
import { ChipGroup, Chip } from '../../../components/Chip';
|
||||
|
||||
const userRolesWrapperStyle = {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
};
|
||||
|
||||
const detailWrapperStyle = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(70px, max-content) minmax(60px, max-content)',
|
||||
};
|
||||
|
||||
const detailLabelStyle = {
|
||||
fontWeight: '700',
|
||||
lineHeight: '24px',
|
||||
marginRight: '20px',
|
||||
};
|
||||
|
||||
const detailValueStyle = {
|
||||
lineHeight: '28px',
|
||||
overflow: 'visible',
|
||||
};
|
||||
|
||||
/* TODO: does PF offer any sort of <dl> treatment for this? */
|
||||
const Detail = ({ label, value, url, customStyles }) => {
|
||||
let detail = null;
|
||||
if (value) {
|
||||
detail = (
|
||||
<TextContent style={{ ...detailWrapperStyle, ...customStyles }}>
|
||||
{url ? (
|
||||
<Link to={{ pathname: url }}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
|
||||
</Link>) : (<Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
|
||||
)}
|
||||
<Text component={TextVariants.p} style={detailValueStyle}>{value}</Text>
|
||||
</TextContent>
|
||||
);
|
||||
}
|
||||
return detail;
|
||||
};
|
||||
const DataListItemCells = styled(PFDataListItemCells)`
|
||||
align-items: start;
|
||||
`;
|
||||
|
||||
class OrganizationAccessItem extends React.Component {
|
||||
static propTypes = {
|
||||
@ -61,6 +27,11 @@ class OrganizationAccessItem extends React.Component {
|
||||
onRoleDelete: func.isRequired,
|
||||
};
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.renderChip = this.renderChip.bind(this);
|
||||
}
|
||||
|
||||
getRoleLists () {
|
||||
const { accessRecord } = this.props;
|
||||
const teamRoles = [];
|
||||
@ -80,8 +51,21 @@ class OrganizationAccessItem extends React.Component {
|
||||
return [teamRoles, userRoles];
|
||||
}
|
||||
|
||||
renderChip (role) {
|
||||
const { accessRecord, onRoleDelete } = this.props;
|
||||
return (
|
||||
<Chip
|
||||
key={role.id}
|
||||
isReadOnly={!role.user_capabilities.unattach}
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accessRecord, onRoleDelete, i18n } = this.props;
|
||||
const { accessRecord, i18n } = this.props;
|
||||
const [teamRoles, userRoles] = this.getRoleLists();
|
||||
|
||||
return (
|
||||
@ -90,76 +74,60 @@ class OrganizationAccessItem extends React.Component {
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="name">
|
||||
{accessRecord.username && (
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
<TextContent>
|
||||
{accessRecord.url ? (
|
||||
<Link to={{ pathname: accessRecord.url }}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
<Text component={TextVariants.h6}>
|
||||
<Link
|
||||
to={{ pathname: accessRecord.url }}
|
||||
css="font-weight: bold"
|
||||
>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
</Link>
|
||||
</Link>
|
||||
</Text>
|
||||
) : (
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
<Text
|
||||
component={TextVariants.h6}
|
||||
css="font-weight: bold"
|
||||
>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
)}
|
||||
</TextContent>
|
||||
)}
|
||||
{accessRecord.first_name || accessRecord.last_name ? (
|
||||
<Detail
|
||||
label={i18n._(t`Name`)}
|
||||
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
|
||||
url={null}
|
||||
customStyles={null}
|
||||
/>
|
||||
<DetailList stacked>
|
||||
<Detail
|
||||
label={i18n._(t`Name`)}
|
||||
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
|
||||
/>
|
||||
</DetailList>
|
||||
) : (
|
||||
null
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell key="roles">
|
||||
{userRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`User Roles`)}
|
||||
</Text>
|
||||
{userRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`Team Roles`)}
|
||||
</Text>
|
||||
{teamRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<DetailList stacked>
|
||||
{userRoles.length > 0 && (
|
||||
<Detail
|
||||
label={i18n._(t`User Roles`)}
|
||||
value={(
|
||||
<ChipGroup>
|
||||
{userRoles.map(this.renderChip)}
|
||||
</ChipGroup>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<Detail
|
||||
label={i18n._(t`Team Roles`)}
|
||||
value={(
|
||||
<ChipGroup>
|
||||
{teamRoles.map(this.renderChip)}
|
||||
</ChipGroup>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -2,75 +2,24 @@ import React, { Component } from 'react';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
|
||||
import {
|
||||
CardBody as PFCardBody,
|
||||
Button,
|
||||
TextList,
|
||||
TextListItem,
|
||||
TextListVariants,
|
||||
TextListItemVariants,
|
||||
} from '@patternfly/react-core';
|
||||
import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import { DetailList, Detail } from '../../../../components/DetailList';
|
||||
import { withNetwork } from '../../../../contexts/Network';
|
||||
import BasicChip from '../../../../components/BasicChip/BasicChip';
|
||||
import { ChipGroup, Chip } from '../../../../components/Chip';
|
||||
|
||||
const CardBody = styled(PFCardBody)`
|
||||
padding-top: 20px;
|
||||
`;
|
||||
|
||||
const DetailList = styled(TextList)`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
grid-gap: 20px;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: 10em 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const DetailName = styled(TextListItem)`
|
||||
&& {
|
||||
grid-column: 1;
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
text-align: right;
|
||||
}
|
||||
`;
|
||||
|
||||
const DetailValue = styled(TextListItem)`
|
||||
&& {
|
||||
grid-column: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
`;
|
||||
|
||||
const InstanceGroupsDetail = styled.div`
|
||||
grid-column: 1 / -1;
|
||||
`;
|
||||
|
||||
const Detail = ({ label, value }) => {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<div>
|
||||
<DetailName component={TextListItemVariants.dt}>{label}</DetailName>
|
||||
<DetailValue component={TextListItemVariants.dd}>{value}</DetailValue>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
class OrganizationDetail extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
instanceGroups: [],
|
||||
isToggleOpen: false,
|
||||
error: false
|
||||
};
|
||||
|
||||
this.handleChipToggle = this.handleChipToggle.bind(this);
|
||||
this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
|
||||
}
|
||||
|
||||
@ -78,12 +27,6 @@ class OrganizationDetail extends Component {
|
||||
this.loadInstanceGroups();
|
||||
}
|
||||
|
||||
handleChipToggle = () => {
|
||||
this.setState((prevState) => ({
|
||||
isToggleOpen: !prevState.isToggleOpen
|
||||
}));
|
||||
}
|
||||
|
||||
async loadInstanceGroups () {
|
||||
const {
|
||||
api,
|
||||
@ -106,7 +49,6 @@ class OrganizationDetail extends Component {
|
||||
const {
|
||||
error,
|
||||
instanceGroups,
|
||||
isToggleOpen,
|
||||
} = this.state;
|
||||
|
||||
const {
|
||||
@ -121,30 +63,10 @@ class OrganizationDetail extends Component {
|
||||
match,
|
||||
i18n
|
||||
} = this.props;
|
||||
const showOverflowChipAfter = 5;
|
||||
|
||||
const instanceGroupChips = instanceGroups.slice(0, isToggleOpen
|
||||
? instanceGroups.length : showOverflowChipAfter)
|
||||
.map(instanceGroup => (
|
||||
<BasicChip
|
||||
key={instanceGroup.id}
|
||||
>
|
||||
{instanceGroup.name}
|
||||
</BasicChip>
|
||||
));
|
||||
|
||||
const overflowChip = (instanceGroups.length > showOverflowChipAfter) ? (
|
||||
<BasicChip
|
||||
isOverflowChip
|
||||
onToggle={this.handleChipToggle}
|
||||
>
|
||||
{isToggleOpen ? 'Show less' : `${(instanceGroups.length - showOverflowChipAfter).toString()} more`}
|
||||
</BasicChip>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<CardBody>
|
||||
<DetailList component={TextListVariants.dl}>
|
||||
<DetailList>
|
||||
<Detail
|
||||
label={i18n._(t`Name`)}
|
||||
value={name}
|
||||
@ -166,15 +88,17 @@ class OrganizationDetail extends Component {
|
||||
value={modified}
|
||||
/>
|
||||
{(instanceGroups && instanceGroups.length > 0) && (
|
||||
<InstanceGroupsDetail>
|
||||
<DetailName component={TextListItemVariants.dt}>
|
||||
{i18n._(t`Instance Groups`)}
|
||||
</DetailName>
|
||||
<DetailValue component={TextListItemVariants.dd}>
|
||||
{instanceGroupChips}
|
||||
{overflowChip}
|
||||
</DetailValue>
|
||||
</InstanceGroupsDetail>
|
||||
<Detail
|
||||
fullWidth
|
||||
label={i18n._(t`Instance Groups`)}
|
||||
value={(
|
||||
<ChipGroup showOverflowAfter={5}>
|
||||
{instanceGroups.map(ig => (
|
||||
<Chip key={ig.id} isReadOnly>{ig.name}</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</DetailList>
|
||||
{summary_fields.user_capabilities.edit && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user