mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 05:01:19 -03:30
Merge pull request #204 from ansible/use-styled-components
✨Use styled-components✨
This commit is contained in:
kialam
GitHub
commit
d59975c1ad
@ -57,10 +57,9 @@ describe('<DataListToolbar />', () => {
|
||||
});
|
||||
|
||||
test('dropdown items sortable columns work', () => {
|
||||
const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button';
|
||||
const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item';
|
||||
const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle';
|
||||
const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item';
|
||||
const sortDropdownToggleSelector = 'button[id="awx-sort"]';
|
||||
const searchDropdownToggleSelector = 'button[id="awx-search"]';
|
||||
const dropdownMenuItems = 'DropdownMenu > ul';
|
||||
|
||||
const multipleColumns = [
|
||||
{ name: 'Foo', key: 'foo', isSortable: true },
|
||||
@ -80,12 +79,10 @@ describe('<DataListToolbar />', () => {
|
||||
/>
|
||||
);
|
||||
const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
|
||||
expect(sortDropdownToggle.length).toBe(2);
|
||||
sortDropdownToggle.at(1).simulate('click');
|
||||
sortDropdownToggle.at(0).simulate('click');
|
||||
expect(sortDropdownToggle.length).toBe(1);
|
||||
sortDropdownToggle.simulate('click');
|
||||
toolbar.update();
|
||||
|
||||
const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
|
||||
const sortDropdownItems = toolbar.find(dropdownMenuItems).children();
|
||||
expect(sortDropdownItems.length).toBe(2);
|
||||
|
||||
const mockedSortEvent = { target: { innerText: 'Bar' } };
|
||||
@ -101,13 +98,13 @@ describe('<DataListToolbar />', () => {
|
||||
toolbar.update();
|
||||
|
||||
const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
|
||||
expect(sortDropdownToggleDescending.length).toBe(2);
|
||||
sortDropdownToggleDescending.at(1).simulate('click');
|
||||
sortDropdownToggleDescending.at(0).simulate('click');
|
||||
expect(sortDropdownToggleDescending.length).toBe(1);
|
||||
sortDropdownToggleDescending.simulate('click');
|
||||
toolbar.update();
|
||||
|
||||
const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector);
|
||||
const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children();
|
||||
expect(sortDropdownItemsDescending.length).toBe(2);
|
||||
sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
|
||||
|
||||
const mockedSortEventDescending = { target: { innerText: 'Bar' } };
|
||||
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
|
||||
@ -115,10 +112,10 @@ describe('<DataListToolbar />', () => {
|
||||
|
||||
const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
|
||||
expect(searchDropdownToggle.length).toBe(1);
|
||||
searchDropdownToggle.at(0).simulate('click');
|
||||
searchDropdownToggle.simulate('click');
|
||||
toolbar.update();
|
||||
|
||||
const searchDropdownItems = toolbar.find(searchDropdownItemsSelector);
|
||||
const searchDropdownItems = toolbar.find(dropdownMenuItems).children();
|
||||
expect(searchDropdownItems.length).toBe(3);
|
||||
|
||||
const mockedSearchEvent = { target: { innerText: 'Bar' } };
|
||||
|
||||
@ -69,57 +69,92 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
|
||||
trigger="mouseenter focus"
|
||||
zIndex={9999}
|
||||
>
|
||||
<Button
|
||||
<ToolbarDeleteButton__Button
|
||||
aria-label="Delete"
|
||||
className="awx-ToolBarBtn"
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
<StyledComponent
|
||||
aria-label="Delete"
|
||||
className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn"
|
||||
disabled={true}
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
|
||||
"isStatic": true,
|
||||
"lastClassName": "iyjqWq",
|
||||
"rules": Array [
|
||||
"width:30px;height:30px;display:flex;justify-content:center;margin-right:20px;border-radius:3px;padding:0;&:disabled{cursor:not-allowed;&:hover{background-color:white;> svg{color:#d2d2d2;}}}&:hover{background-color:#d9534f;> svg{color:white;}}",
|
||||
],
|
||||
},
|
||||
"displayName": "ToolbarDeleteButton__Button",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
isDisabled={true}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<TrashAltIcon
|
||||
className="awx-ToolBarTrashCanIcon"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
<Button
|
||||
aria-label="Delete"
|
||||
className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={true}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
className="awx-ToolBarTrashCanIcon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 448 512"
|
||||
width="1em"
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Delete"
|
||||
className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TrashAltIcon>
|
||||
</button>
|
||||
</Button>
|
||||
<TrashAltIcon
|
||||
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 448 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TrashAltIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</StyledComponent>
|
||||
</ToolbarDeleteButton__Button>
|
||||
<Portal
|
||||
containerInfo={
|
||||
<div>
|
||||
|
||||
@ -41,20 +41,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
className=""
|
||||
dataListCells={
|
||||
Array [
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
width={1}
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
<ForwardRef>
|
||||
<ForwardRef
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
@ -66,51 +54,33 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
>
|
||||
Foo
|
||||
</b>
|
||||
</Link>
|
||||
<Badge
|
||||
className=""
|
||||
</ForwardRef>
|
||||
<ForwardRef
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
slack
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
</ForwardRef>
|
||||
</ForwardRef>,
|
||||
<ForwardRef
|
||||
righthalf="true"
|
||||
>
|
||||
<Switch
|
||||
<ForwardRef
|
||||
aria-label="Toggle notification success"
|
||||
className=""
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
<Switch
|
||||
<ForwardRef
|
||||
aria-label="Toggle notification failure"
|
||||
className=""
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
</DataListCell>,
|
||||
</ForwardRef>,
|
||||
]
|
||||
}
|
||||
key=".0"
|
||||
@ -119,170 +89,366 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
<div
|
||||
className="pf-c-data-list__item-content"
|
||||
>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
<NotificationListItem__DataListCell
|
||||
key="name"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<b
|
||||
id="items-list-item-9000"
|
||||
>
|
||||
Foo
|
||||
</b>
|
||||
</a>
|
||||
</Link>
|
||||
<Badge
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
slack
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
key="toggles"
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
style={
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "NotificationListItem__DataListCell-j7c411-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "hoXOpW",
|
||||
"rules": Array [
|
||||
"display:flex;justify-content:",
|
||||
[Function],
|
||||
";padding-bottom:",
|
||||
[Function],
|
||||
";@media screen and (min-width:768px){justify-content:",
|
||||
[Function],
|
||||
";padding-bottom:0;}",
|
||||
],
|
||||
},
|
||||
"displayName": "NotificationListItem__DataListCell",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
className=""
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
width={1}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
<div
|
||||
className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
|
||||
>
|
||||
<input
|
||||
<Styled(Link)
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bdVaJa",
|
||||
"isStatic": true,
|
||||
"lastClassName": "eBseNd",
|
||||
"rules": Array [
|
||||
"margin-right: 1.5em;",
|
||||
],
|
||||
},
|
||||
"displayName": "Styled(Link)",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bdVaJa",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Link
|
||||
className="sc-bdVaJa eBseNd"
|
||||
replace={false}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
className="sc-bdVaJa eBseNd"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<b
|
||||
id="items-list-item-9000"
|
||||
>
|
||||
Foo
|
||||
</b>
|
||||
</a>
|
||||
</Link>
|
||||
</StyledComponent>
|
||||
</Styled(Link)>
|
||||
<Styled(Badge)
|
||||
isRead={true}
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bwzfXH",
|
||||
"isStatic": true,
|
||||
"lastClassName": "chTbOZ",
|
||||
"rules": Array [
|
||||
"text-transform: capitalize;",
|
||||
],
|
||||
},
|
||||
"displayName": "Styled(Badge)",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bwzfXH",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
isRead={true}
|
||||
>
|
||||
<Badge
|
||||
className="sc-bwzfXH chTbOZ"
|
||||
isRead={true}
|
||||
>
|
||||
<span
|
||||
className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
|
||||
>
|
||||
slack
|
||||
</span>
|
||||
</Badge>
|
||||
</StyledComponent>
|
||||
</Styled(Badge)>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</StyledComponent>
|
||||
</NotificationListItem__DataListCell>
|
||||
<NotificationListItem__DataListCell
|
||||
key="toggles"
|
||||
righthalf="true"
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "NotificationListItem__DataListCell-j7c411-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "hoXOpW",
|
||||
"rules": Array [
|
||||
"display:flex;justify-content:",
|
||||
[Function],
|
||||
";padding-bottom:",
|
||||
[Function],
|
||||
";@media screen and (min-width:768px){justify-content:",
|
||||
[Function],
|
||||
";padding-bottom:0;}",
|
||||
],
|
||||
},
|
||||
"displayName": "NotificationListItem__DataListCell",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
righthalf="true"
|
||||
>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
righthalf="true"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
|
||||
righthalf="true"
|
||||
>
|
||||
<NotificationListItem__Switch
|
||||
aria-label="Toggle notification success"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
className=""
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
<StyledComponent
|
||||
aria-label="Toggle notification success"
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "NotificationListItem__Switch-j7c411-1",
|
||||
"isStatic": true,
|
||||
"lastClassName": "ceuHGn",
|
||||
"rules": Array [
|
||||
"display:flex;flex-wrap:no-wrap;",
|
||||
],
|
||||
},
|
||||
"displayName": "NotificationListItem__Switch",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "NotificationListItem__Switch-j7c411-1",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
className="NotificationListItem__Switch-j7c411-1 ceuHGn"
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification success"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</StyledComponent>
|
||||
</NotificationListItem__Switch>
|
||||
<NotificationListItem__Switch
|
||||
aria-label="Toggle notification failure"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<StyledComponent
|
||||
aria-label="Toggle notification failure"
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "NotificationListItem__Switch-j7c411-1",
|
||||
"isStatic": true,
|
||||
"lastClassName": "ceuHGn",
|
||||
"rules": Array [
|
||||
"display:flex;flex-wrap:no-wrap;",
|
||||
],
|
||||
},
|
||||
"displayName": "NotificationListItem__Switch",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "NotificationListItem__Switch-j7c411-1",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
className="NotificationListItem__Switch-j7c411-1 ceuHGn"
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification failure"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</StyledComponent>
|
||||
</NotificationListItem__Switch>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</StyledComponent>
|
||||
</NotificationListItem__DataListCell>
|
||||
</div>
|
||||
</DataListItemCells>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,6 +2,7 @@ module.exports = api => {
|
||||
api.cache(false);
|
||||
return {
|
||||
plugins: [
|
||||
'babel-plugin-styled-components',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'macros'
|
||||
],
|
||||
|
||||
144
package-lock.json
generated
144
package-lock.json
generated
@ -163,7 +163,6 @@
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
|
||||
"integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.0.0"
|
||||
}
|
||||
@ -1134,6 +1133,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
|
||||
"integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="
|
||||
},
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
|
||||
"integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
|
||||
"requires": {
|
||||
"@emotion/memoize": "0.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
|
||||
"integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
|
||||
@ -2219,7 +2233,7 @@
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
|
||||
"integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
|
||||
"requires": {
|
||||
"ansi-wrap": "^0.1.0"
|
||||
@ -3237,14 +3251,25 @@
|
||||
"resolve": "^1.8.1"
|
||||
}
|
||||
},
|
||||
"babel-plugin-styled-components": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
|
||||
"integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
|
||||
"requires": {
|
||||
"@babel/helper-annotate-as-pure": "^7.0.0",
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.10"
|
||||
}
|
||||
},
|
||||
"babel-plugin-syntax-class-properties": {
|
||||
"version": "6.13.0",
|
||||
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
|
||||
"integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
|
||||
},
|
||||
"babel-plugin-syntax-flow": {
|
||||
"version": "6.18.0",
|
||||
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
|
||||
"integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
|
||||
},
|
||||
"babel-plugin-syntax-jsx": {
|
||||
@ -4154,6 +4179,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"camelize": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
|
||||
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30000902",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz",
|
||||
@ -4885,6 +4915,11 @@
|
||||
"urix": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"css-color-keywords": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
|
||||
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
|
||||
@ -4962,6 +4997,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-to-react-native": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz",
|
||||
"integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==",
|
||||
"requires": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
|
||||
@ -5421,7 +5466,7 @@
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.6",
|
||||
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
@ -6640,7 +6685,7 @@
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.6",
|
||||
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
|
||||
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
@ -7027,8 +7072,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -7049,14 +7093,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -7071,20 +7113,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -7201,8 +7240,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -7214,7 +7252,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -7229,7 +7266,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -7237,14 +7273,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -7263,7 +7297,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -7344,8 +7377,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -7357,7 +7389,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -7443,8 +7474,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -7480,7 +7510,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -7500,7 +7529,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -7544,14 +7572,12 @@
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -7803,8 +7829,7 @@
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
||||
},
|
||||
"has-symbols": {
|
||||
"version": "1.0.0",
|
||||
@ -10625,7 +10650,7 @@
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
|
||||
"integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
|
||||
},
|
||||
"kleur": {
|
||||
@ -10951,6 +10976,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
|
||||
"integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
|
||||
},
|
||||
"memory-fs": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
||||
@ -12639,8 +12669,7 @@
|
||||
"postcss-value-parser": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.1.2",
|
||||
@ -14922,6 +14951,39 @@
|
||||
"schema-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"styled-components": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz",
|
||||
"integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@emotion/is-prop-valid": "^0.7.3",
|
||||
"@emotion/unitless": "^0.7.0",
|
||||
"babel-plugin-styled-components": ">= 1",
|
||||
"css-to-react-native": "^2.2.2",
|
||||
"memoize-one": "^5.0.0",
|
||||
"prop-types": "^15.5.4",
|
||||
"react-is": "^16.6.0",
|
||||
"stylis": "^3.5.0",
|
||||
"stylis-rule-sheet": "^0.0.10",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/unitless": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
|
||||
"integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylis": {
|
||||
"version": "3.5.4",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"babel-jest": "^24.7.1",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-macros": "^2.4.2",
|
||||
"babel-plugin-styled-components": "^1.10.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"enzyme": "^3.9.0",
|
||||
"enzyme-adapter-react-16": "^1.12.1",
|
||||
@ -59,6 +60,7 @@
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-router-dom": "^4.3.1"
|
||||
"react-router-dom": "^4.3.1",
|
||||
"styled-components": "^4.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
11
src/app.scss
11
src/app.scss
@ -128,17 +128,6 @@
|
||||
--pf-c-data-list__cell--PaddingTop: 16px;
|
||||
--pf-c-data-list__cell-cell--PaddingTop: 16px;
|
||||
|
||||
.awx-c-list-group {
|
||||
display: inline-flex;
|
||||
margin-right: 20px;
|
||||
|
||||
&--badge {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.pf-c-data-list__cell--divider {
|
||||
--pf-c-data-list__cell-cell--MarginRight: 0;
|
||||
|
||||
@ -4,18 +4,71 @@ import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Checkbox,
|
||||
Level,
|
||||
LevelItem,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
Toolbar as PFToolbar,
|
||||
ToolbarGroup as PFToolbarGroup,
|
||||
ToolbarItem,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import ExpandCollapse from '../ExpandCollapse';
|
||||
import Search from '../Search';
|
||||
import Sort from '../Sort';
|
||||
import VerticalSeparator from '../VerticalSeparator';
|
||||
|
||||
const AWXToolbar = styled.div`
|
||||
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
||||
--awx-toolbar--BorderColor: #ebebeb;
|
||||
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
|
||||
|
||||
--pf-global--target-size--MinHeight: 0;
|
||||
--pf-global--target-size--MinWidth: 0;
|
||||
--pf-global--FontSize--md: 14px;
|
||||
|
||||
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
|
||||
background-color: var(--awx-toolbar--BackgroundColor);
|
||||
display: flex;
|
||||
min-height: 70px;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const Toolbar = styled(PFToolbar)`
|
||||
flex-grow: 1;
|
||||
margin-left: ${props => (props.marginleft ? '0' : '20px')};
|
||||
`;
|
||||
|
||||
const ToolbarGroup = styled(PFToolbarGroup)`
|
||||
&&& {
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const ColumnLeft = styled.div`
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 10px 0 8px 0;
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const ColumnRight = styled(ColumnLeft)`
|
||||
padding: 8px 0 10px 0;
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
margin-left: 0;
|
||||
padding: 10px 0 8px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const AdditionalControlsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
class DataListToolbar extends React.Component {
|
||||
render () {
|
||||
const {
|
||||
@ -38,67 +91,62 @@ class DataListToolbar extends React.Component {
|
||||
return (
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<div className="awx-toolbar">
|
||||
<Level>
|
||||
<LevelItem style={{ display: 'flex', flexBasis: '700px' }}>
|
||||
<Toolbar style={{ marginLeft: noLeftMargin ? '0px' : '20px', flexGrow: '1' }}>
|
||||
{ showSelectAll && (
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onChange={onSelectAll}
|
||||
aria-label={i18n._(t`Select all`)}
|
||||
id="select-all"
|
||||
/>
|
||||
</ToolbarItem>
|
||||
<VerticalSeparator />
|
||||
</ToolbarGroup>
|
||||
)}
|
||||
<ToolbarGroup style={{ flexGrow: '1' }}>
|
||||
<ToolbarItem style={{ flexGrow: '1' }}>
|
||||
<Search
|
||||
columns={columns}
|
||||
onSearch={onSearch}
|
||||
sortedColumnKey={sortedColumnKey}
|
||||
<AWXToolbar>
|
||||
<Toolbar marginleft={noLeftMargin ? 1 : 0}>
|
||||
<ColumnLeft>
|
||||
{ showSelectAll && (
|
||||
<Fragment>
|
||||
<ToolbarItem>
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onChange={onSelectAll}
|
||||
aria-label={i18n._(t`Select all`)}
|
||||
id="select-all"
|
||||
/>
|
||||
</ToolbarItem>
|
||||
<VerticalSeparator />
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup
|
||||
className="sortDropdownGroup"
|
||||
>
|
||||
<ToolbarItem>
|
||||
<Sort
|
||||
columns={columns}
|
||||
onSort={onSort}
|
||||
sortOrder={sortOrder}
|
||||
sortedColumnKey={sortedColumnKey}
|
||||
</Fragment>
|
||||
)}
|
||||
<ToolbarItem css="flex-grow: 1;">
|
||||
<Search
|
||||
columns={columns}
|
||||
onSearch={onSearch}
|
||||
sortedColumnKey={sortedColumnKey}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
<VerticalSeparator />
|
||||
</ColumnLeft>
|
||||
<ColumnRight>
|
||||
<ToolbarItem>
|
||||
<Sort
|
||||
columns={columns}
|
||||
onSort={onSort}
|
||||
sortOrder={sortOrder}
|
||||
sortedColumnKey={sortedColumnKey}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
{showExpandCollapse && (
|
||||
<Fragment>
|
||||
<VerticalSeparator />
|
||||
<ToolbarGroup>
|
||||
<ExpandCollapse
|
||||
isCompact={isCompact}
|
||||
onCompact={onCompact}
|
||||
onExpand={onExpand}
|
||||
/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
{showExpandCollapse && (
|
||||
<Fragment>
|
||||
</ToolbarGroup>
|
||||
{ additionalControls && (
|
||||
<VerticalSeparator />
|
||||
<ToolbarGroup>
|
||||
<ExpandCollapse
|
||||
isCompact={isCompact}
|
||||
onCompact={onCompact}
|
||||
onExpand={onExpand}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
{ additionalControls && (
|
||||
<VerticalSeparator />
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</Toolbar>
|
||||
</LevelItem>
|
||||
<LevelItem>
|
||||
{additionalControls}
|
||||
</LevelItem>
|
||||
</Level>
|
||||
</div>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
<AdditionalControlsWrapper>
|
||||
{additionalControls}
|
||||
</AdditionalControlsWrapper>
|
||||
</ColumnRight>
|
||||
</Toolbar>
|
||||
</AWXToolbar>
|
||||
|
||||
)}
|
||||
</I18n>
|
||||
);
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
.awx-toolbar {
|
||||
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
||||
--awx-toolbar--BorderColor: #ebebeb;
|
||||
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
|
||||
|
||||
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
|
||||
background-color: var(--awx-toolbar--BackgroundColor);
|
||||
display: flex;
|
||||
height: 70px;
|
||||
padding-top: 5px;
|
||||
|
||||
--pf-global--target-size--MinHeight: 0px;
|
||||
--pf-global--target-size--MinWidth: 0px;
|
||||
--pf-global--FontSize--md: 14px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-level {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-button.pf-m-plain {
|
||||
--pf-c-button--m-plain--PaddingLeft: 0px;
|
||||
--pf-c-button--m-plain--PaddingRight: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__group {
|
||||
--pf-l-toolbar__group--MarginRight: 0px;
|
||||
--pf-l-toolbar__group--MarginLeft: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar button.pf-c-button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-input-group {
|
||||
min-height: 0px;
|
||||
height: 30px;
|
||||
|
||||
.pf-m-tertiary {
|
||||
width: 34px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-dropdown__toggle {
|
||||
min-height: 30px;
|
||||
min-width: 70px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
margin: 0px;
|
||||
|
||||
.pf-c-dropdown__toggle-text {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pf-c-dropdown__toggle-icon {
|
||||
margin: 0px;
|
||||
padding-top: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-button.pf-m-primary {
|
||||
background-color: #5cb85c;
|
||||
min-width: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.awx-ToolBarBtn {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
border-radius: 3px;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-ToolBarBtn:hover {
|
||||
.awx-ToolBarTrashCanIcon {
|
||||
color: white;
|
||||
}
|
||||
background-color:#d9534f;
|
||||
}
|
||||
|
||||
.awx-ToolBarBtn[disabled]:hover {
|
||||
.awx-ToolBarTrashCanIcon {
|
||||
color: #d2d2d2;
|
||||
}
|
||||
background-color: white;
|
||||
}
|
||||
@ -5,13 +5,31 @@ import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Badge,
|
||||
Switch,
|
||||
Switch as PFSwitch,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCell,
|
||||
DataListCell as PFDataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DataListCell = styled(PFDataListCell)`
|
||||
display: flex;
|
||||
justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')};
|
||||
padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')};
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const Switch = styled(PFSwitch)`
|
||||
display: flex;
|
||||
flex-wrap: no-wrap;
|
||||
`;
|
||||
|
||||
function NotificationListItem (props) {
|
||||
const {
|
||||
canToggleNotifications,
|
||||
@ -21,13 +39,6 @@ function NotificationListItem (props) {
|
||||
errorTurnedOn,
|
||||
toggleNotification
|
||||
} = props;
|
||||
const capText = {
|
||||
textTransform: 'capitalize'
|
||||
};
|
||||
const toggleCellStyles = {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
};
|
||||
|
||||
return (
|
||||
<I18n>
|
||||
@ -43,18 +54,18 @@ function NotificationListItem (props) {
|
||||
to={{
|
||||
pathname: detailUrl
|
||||
}}
|
||||
style={{ marginRight: '1.5em' }}
|
||||
css="margin-right: 1.5em;"
|
||||
>
|
||||
<b id={`items-list-item-${notification.id}`}>{notification.name}</b>
|
||||
</Link>
|
||||
<Badge
|
||||
style={capText}
|
||||
css="text-transform: capitalize;"
|
||||
isRead
|
||||
>
|
||||
{notification.notification_type}
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell key="toggles" style={toggleCellStyles}>
|
||||
<DataListCell righthalf="true" key="toggles">
|
||||
<Switch
|
||||
id={`notification-${notification.id}-success-toggle`}
|
||||
label={i18n._(t`Successful`)}
|
||||
|
||||
@ -1,10 +1,24 @@
|
||||
import React from 'react';
|
||||
import { string, func } from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { Button as PFButton } from '@patternfly/react-core';
|
||||
import { PlusIcon } from '@patternfly/react-icons';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Button = styled(PFButton)`
|
||||
&&& { /* higher specificity order */
|
||||
background-color: #5cb85c;
|
||||
min-width: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
function ToolbarAddButton ({ linkTo, onClick }) {
|
||||
if (!linkTo && !onClick) {
|
||||
@ -15,7 +29,7 @@ function ToolbarAddButton ({ linkTo, onClick }) {
|
||||
return (
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Link to={linkTo} className="pf-c-button pf-m-primary">
|
||||
<Link to={linkTo}>
|
||||
<Button
|
||||
variant="primary"
|
||||
aria-label={i18n._(t`Add`)}
|
||||
|
||||
@ -1,12 +1,42 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { func, bool, number, string, arrayOf, shape } from 'prop-types';
|
||||
import { Button, Tooltip } from '@patternfly/react-core';
|
||||
import { Button as PFButton, Tooltip } from '@patternfly/react-core';
|
||||
import { TrashAltIcon } from '@patternfly/react-icons';
|
||||
import { I18n, i18nMark } from '@lingui/react';
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import AlertModal from '../AlertModal';
|
||||
import { pluralize } from '../../util/strings';
|
||||
|
||||
const Button = styled(PFButton)`
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
border-radius: 3px;
|
||||
padding: 0;
|
||||
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
> svg {
|
||||
color: #d2d2d2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color:#d9534f;
|
||||
> svg {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemToDelete = shape({
|
||||
id: number.isRequired,
|
||||
name: string.isRequired,
|
||||
@ -102,13 +132,12 @@ class ToolbarDeleteButton extends React.Component {
|
||||
position="left"
|
||||
>
|
||||
<Button
|
||||
className="awx-ToolBarBtn"
|
||||
variant="plain"
|
||||
aria-label={i18n._(t`Delete`)}
|
||||
onClick={this.handleConfirmDelete}
|
||||
isDisabled={isDisabled}
|
||||
>
|
||||
<TrashAltIcon className="awx-ToolBarTrashCanIcon" />
|
||||
<TrashAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{ isModalOpen && (
|
||||
|
||||
@ -3,17 +3,50 @@ import PropTypes from 'prop-types';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
Button as PFButton,
|
||||
Dropdown as PFDropdown,
|
||||
DropdownPosition,
|
||||
DropdownToggle,
|
||||
DropdownItem,
|
||||
TextInput
|
||||
TextInput as PFTextInput
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
SearchIcon
|
||||
} from '@patternfly/react-icons';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const TextInput = styled(PFTextInput)`
|
||||
min-height: 0px;
|
||||
height: 30px;
|
||||
`;
|
||||
|
||||
const Button = styled(PFButton)`
|
||||
width: 34px;
|
||||
padding: 0px;
|
||||
`;
|
||||
|
||||
const Dropdown = styled(PFDropdown)`
|
||||
&&& { /* Higher specificity required because we are selecting unclassed elements */
|
||||
> button {
|
||||
min-height: 30px;
|
||||
min-width: 70px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
margin: 0px;
|
||||
|
||||
> span { /* text element */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
> svg { /* caret icon */
|
||||
margin: 0px;
|
||||
padding-top: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
class Search extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
@ -80,13 +113,13 @@ class Search extends React.Component {
|
||||
{({ i18n }) => (
|
||||
<div className="pf-c-input-group">
|
||||
<Dropdown
|
||||
className="searchKeyDropdown"
|
||||
onToggle={this.handleDropdownToggle}
|
||||
onSelect={this.handleDropdownSelect}
|
||||
direction={up}
|
||||
isOpen={isSearchDropdownOpen}
|
||||
toggle={(
|
||||
<DropdownToggle
|
||||
id="awx-search"
|
||||
onToggle={this.handleDropdownToggle}
|
||||
>
|
||||
{searchColumnName}
|
||||
|
||||
@ -4,7 +4,7 @@ import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
Dropdown as PFDropdown,
|
||||
DropdownPosition,
|
||||
DropdownToggle,
|
||||
DropdownItem
|
||||
@ -16,6 +16,36 @@ import {
|
||||
SortNumericUpIcon
|
||||
} from '@patternfly/react-icons';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Dropdown = styled(PFDropdown)`
|
||||
&&& {
|
||||
> button {
|
||||
min-height: 30px;
|
||||
min-width: 70px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
margin: 0px;
|
||||
|
||||
> span { /* text element within dropdown */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
> svg { /* caret icon */
|
||||
margin: 0px;
|
||||
padding-top: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const IconWrapper = styled.span`
|
||||
> svg {
|
||||
font-size: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
class Sort extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
@ -60,7 +90,6 @@ class Sort extends React.Component {
|
||||
const {
|
||||
isSortDropdownOpen
|
||||
} = this.state;
|
||||
|
||||
const [{ name: sortedColumnName, isNumeric }] = columns
|
||||
.filter(({ key }) => key === sortedColumnKey);
|
||||
|
||||
@ -92,6 +121,7 @@ class Sort extends React.Component {
|
||||
isOpen={isSortDropdownOpen}
|
||||
toggle={(
|
||||
<DropdownToggle
|
||||
id="awx-sort"
|
||||
onToggle={this.handleDropdownToggle}
|
||||
>
|
||||
{sortedColumnName}
|
||||
@ -104,8 +134,11 @@ class Sort extends React.Component {
|
||||
onClick={this.handleSort}
|
||||
variant="plain"
|
||||
aria-label={i18n._(t`Sort`)}
|
||||
css="padding: 0;"
|
||||
>
|
||||
<SortIcon />
|
||||
<IconWrapper>
|
||||
<SortIcon />
|
||||
</IconWrapper>
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
@ -13,7 +13,6 @@ import { t } from '@lingui/macro';
|
||||
import '@patternfly/react-core/dist/styles/base.css';
|
||||
import './app.scss';
|
||||
import './components/Pagination/styles.scss';
|
||||
import './components/DataListToolbar/styles.scss';
|
||||
import './components/SelectedList/styles.scss';
|
||||
import './components/AddRole/styles.scss';
|
||||
|
||||
|
||||
@ -2,20 +2,52 @@ import React from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
import { Trans } from '@lingui/macro';
|
||||
import {
|
||||
Badge,
|
||||
Badge as PFBadge,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListCell,
|
||||
DataListCell as PFDataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Link
|
||||
} from 'react-router-dom';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
import VerticalSeparator from '../../../components/VerticalSeparator';
|
||||
import { Organization } from '../../../types';
|
||||
|
||||
const Badge = styled(PFBadge)`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
`;
|
||||
|
||||
const ListGroup = styled.span`
|
||||
display: flex;
|
||||
margin-left: 40px;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-left: 20px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const DataListCell = styled(PFDataListCell)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
class OrganizationListItem extends React.Component {
|
||||
static propTypes = {
|
||||
organization: Organization.isRequired,
|
||||
@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component {
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="divider" className="pf-c-data-list__cell--divider">
|
||||
<DataListCell key="divider">
|
||||
<VerticalSeparator />
|
||||
</DataListCell>,
|
||||
<DataListCell key="org-name">
|
||||
<span id={labelId}>
|
||||
<Link
|
||||
to={`${detailUrl}`}
|
||||
@ -54,19 +84,19 @@ class OrganizationListItem extends React.Component {
|
||||
</Link>
|
||||
</span>
|
||||
</DataListCell>,
|
||||
<DataListCell key="org-members" width={2}>
|
||||
<span className="awx-c-list-group">
|
||||
<DataListCell key="org-members" righthalf="true" width={2}>
|
||||
<ListGroup>
|
||||
<Trans>Members</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
<Badge isRead>
|
||||
{organization.summary_fields.related_field_counts.users}
|
||||
</Badge>
|
||||
</span>
|
||||
<span className="awx-c-list-group">
|
||||
</ListGroup>
|
||||
<ListGroup>
|
||||
<Trans>Teams</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
<Badge isRead>
|
||||
{organization.summary_fields.related_field_counts.teams}
|
||||
</Badge>
|
||||
</span>
|
||||
</ListGroup>
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user