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

upgrade to patternfly 2.x, pf/react-core 3.x (#184)

Browse Source
This commit is contained in:
Keith Grant
2019-04-30 08:19:19 -04:00
committed by GitHub
parent 6fe93f474f
commit ffade973a9
13 changed files with 1317 additions and 904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
View File

@@ -29,156 +29,246 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
aria-labelledby="items-list-item-9000" aria-labelledby="items-list-item-9000"
className="pf-c-data-list__item" className="pf-c-data-list__item"
> >
<DataListCell <DataListItemRow
className="" className=""
key=".0" key=".0"
rowid="items-list-item-9000" rowid="items-list-item-9000"
width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__item-row"
> >
<Link <DataListItemCells
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="" className=""
isRead={true} dataListCells={
style={ Array [
Object { <DataListCell
"textTransform": "capitalize", alignRight={false}
} className=""
isFilled={true}
isIcon={false}
width={1}
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/foo",
}
}
>
<b
id="items-list-item-9000"
>
Foo
</b>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
slack
</Badge>
</DataListCell>,
<DataListCell
alignRight={true}
className=""
isFilled={true}
isIcon={false}
width={1}
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
/>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
/>
</DataListCell>,
]
} }
key=".0"
rowid="items-list-item-9000"
> >
<span <div
className="pf-c-badge pf-m-read" className="pf-c-data-list__item-content"
style={
Object {
"textTransform": "capitalize",
}
}
> >
slack <DataListCell
</span> alignRight={false}
</Badge> className=""
isFilled={true}
isIcon={false}
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={true}
className=""
isFilled={true}
isIcon={false}
key="toggles"
width={1}
>
<div
className="pf-c-data-list__cell pf-m-align-right"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
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>
<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
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>
</div>
</DataListCell>
</div>
</DataListItemCells>
</div> </div>
</DataListCell> </DataListItemRow>
<DataListCell
alignRight={true}
className=""
key=".1"
rowid="items-list-item-9000"
width={1}
>
<div
alignRight={true}
className="pf-c-data-list__cell"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
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>
<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
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>
</div>
</DataListCell>
</li> </li>
</DataListItem> </DataListItem>
</I18n> </I18n>

595
__tests__/pages/Organizations/components/__snapshots__/OrganizationAccessItem.test.jsx.snap
View File

@@ -45,58 +45,82 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
aria-labelledby="access-list-item" aria-labelledby="access-list-item"
className="pf-c-data-list__item" className="pf-c-data-list__item"
> >
<DataListCell <DataListItemRow
className="" className=""
key=".0" key=".0"
rowid="access-list-item" rowid="access-list-item"
width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__item-row"
> >
<TextContent <DataListItemCells
className="" className=""
style={ dataListCells={
Object { Array [
"display": "grid", <DataListCell
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)", alignRight={false}
} className=""
} isFilled={true}
> isIcon={false}
<div width={1}
className="pf-c-content"
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<Link
replace={false}
to={
Object {
"pathname": "/bar",
}
}
>
<a
onClick={[Function]}
> >
<Text <TextContent
className="" className=""
component="h6"
style={ style={
Object { Object {
"fontWeight": "700", "display": "grid",
"lineHeight": "24px", "gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
"marginRight": "20px",
} }
} }
> >
<h6 <Link
replace={false}
to={
Object {
"pathname": "/bar",
}
}
>
<Text
className=""
component="h6"
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
jane
</Text>
</Link>
</TextContent>
<Detail
customStyles={null}
label="Name"
url={null}
value="jane brown"
/>
</DataListCell>,
<DataListCell
alignRight={false}
className=""
isFilled={true}
isIcon={false}
width={1}
>
<ul
style={
Object {
"display": "flex",
"flexWrap": "wrap",
}
}
>
<Text
className="" className=""
data-pf-content={true} component="h6"
style={ style={
Object { Object {
"fontWeight": "700", "fontWeight": "700",
@@ -105,220 +129,309 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
} }
} }
> >
jane Team Roles
</h6> </Text>
</Text> <Chip
</a> className="awx-c-chip"
</Link> closeBtnAriaLabel="close"
</div> isOverflowChip={false}
</TextContent>
<Detail
customStyles={null}
label="Name"
url={null}
value="jane brown"
>
<TextContent
className=""
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<div
className="pf-c-content"
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<Text
className=""
component="h6"
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
<h6
className=""
data-pf-content={true}
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
Name
</h6>
</Text>
<Text
className=""
component="p"
style={
Object {
"lineHeight": "28px",
"overflow": "visible",
}
}
>
<p
className=""
data-pf-content={true}
style={
Object {
"lineHeight": "28px",
"overflow": "visible",
}
}
>
jane brown
</p>
</Text>
</div>
</TextContent>
</Detail>
</div>
</DataListCell>
<DataListCell
className=""
key=".1"
rowid="access-list-item"
width={1}
>
<div
className="pf-c-data-list__cell"
>
<ul
style={
Object {
"display": "flex",
"flexWrap": "wrap",
}
}
>
<Text
className=""
component="h6"
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
<h6
className=""
data-pf-content={true}
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
Team Roles
</h6>
</Text>
<Chip
className="awx-c-chip"
closeBtnAriaLabel="close"
isOverflowChip={false}
key="3"
onClick={[Function]}
tooltipPosition="top"
>
<GenerateId
prefix="pf-random-id-"
>
<li
className="pf-c-chip awx-c-chip"
>
<span
className="pf-c-chip__text"
id="pf-random-id-0"
>
Member
</span>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
>
<Button
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
component="button"
id="remove_pf-random-id-0"
isActive={false}
isBlock={false}
isDisabled={false}
isFocus={false}
isHover={false}
onClick={[Function]} onClick={[Function]}
type="button" tooltipPosition="top"
variant="plain"
> >
<button Member
aria-disabled={null} </Chip>
aria-label="close" </ul>
aria-labelledby="remove_pf-random-id-0 pf-random-id-0" </DataListCell>,
className="pf-c-button pf-m-plain" ]
disabled={false} }
id="remove_pf-random-id-0" key=".0"
onClick={[Function]} rowid="access-list-item"
tabIndex={null} >
type="button" <div
className="pf-c-data-list__item-content"
>
<DataListCell
alignRight={false}
className=""
isFilled={true}
isIcon={false}
key="name"
width={1}
>
<div
className="pf-c-data-list__cell"
>
<TextContent
className=""
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<div
className="pf-c-content"
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<Link
replace={false}
to={
Object {
"pathname": "/bar",
}
}
> >
<TimesCircleIcon <a
aria-hidden="true" onClick={[Function]}
color="currentColor"
size="sm"
title={null}
> >
<svg <Text
aria-hidden="true" className=""
aria-labelledby={null} component="h6"
fill="currentColor"
height="1em"
role="img"
style={ style={
Object { Object {
"verticalAlign": "-0.125em", "fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
} }
} }
viewBox="0 0 512 512"
width="1em"
> >
<path <h6
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" className=""
transform="" data-pf-content={true}
/> style={
</svg> Object {
</TimesCircleIcon> "fontWeight": "700",
</button> "lineHeight": "24px",
</Button> "marginRight": "20px",
</ChipButton> }
</li> }
</GenerateId> >
</Chip> jane
</ul> </h6>
</Text>
</a>
</Link>
</div>
</TextContent>
<Detail
customStyles={null}
label="Name"
url={null}
value="jane brown"
>
<TextContent
className=""
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<div
className="pf-c-content"
style={
Object {
"display": "grid",
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
}
}
>
<Text
className=""
component="h6"
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
<h6
className=""
data-pf-content={true}
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
Name
</h6>
</Text>
<Text
className=""
component="p"
style={
Object {
"lineHeight": "28px",
"overflow": "visible",
}
}
>
<p
className=""
data-pf-content={true}
style={
Object {
"lineHeight": "28px",
"overflow": "visible",
}
}
>
jane brown
</p>
</Text>
</div>
</TextContent>
</Detail>
</div>
</DataListCell>
<DataListCell
alignRight={false}
className=""
isFilled={true}
isIcon={false}
key="roles"
width={1}
>
<div
className="pf-c-data-list__cell"
>
<ul
style={
Object {
"display": "flex",
"flexWrap": "wrap",
}
}
>
<Text
className=""
component="h6"
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
<h6
className=""
data-pf-content={true}
style={
Object {
"fontWeight": "700",
"lineHeight": "24px",
"marginRight": "20px",
}
}
>
Team Roles
</h6>
</Text>
<Chip
className="awx-c-chip"
closeBtnAriaLabel="close"
isOverflowChip={false}
key="3"
onClick={[Function]}
tooltipPosition="top"
>
<GenerateId
prefix="pf-random-id-"
>
<li
className="pf-c-chip awx-c-chip"
>
<span
className="pf-c-chip__text"
id="pf-random-id-0"
>
Member
</span>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close"
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
>
<Button
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
component="button"
id="remove_pf-random-id-0"
isActive={false}
isBlock={false}
isDisabled={false}
isFocus={false}
isHover={false}
onClick={[Function]}
type="button"
variant="plain"
>
<button
aria-disabled={null}
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="pf-c-button pf-m-plain"
disabled={false}
id="remove_pf-random-id-0"
onClick={[Function]}
tabIndex={null}
type="button"
>
<TimesCircleIcon
aria-hidden="true"
color="currentColor"
size="sm"
title={null}
>
<svg
aria-hidden="true"
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
transform=""
/>
</svg>
</TimesCircleIcon>
</button>
</Button>
</ChipButton>
</li>
</GenerateId>
</Chip>
</ul>
</div>
</DataListCell>
</div>
</DataListItemCells>
</div> </div>
</DataListCell> </DataListItemRow>
</li> </li>
</DataListItem> </DataListItem>
</I18n> </I18n>

6
__tests__/pages/Organizations/screens/Organization/Organization.test.jsx
View File

@@ -2,14 +2,16 @@ import React from 'react';
import { mountWithContexts } from '../../../../enzymeHelpers'; import { mountWithContexts } from '../../../../enzymeHelpers';
import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization'; import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
describe('<OrganizationView />', () => { describe.only('<Organization />', () => {
const me = { const me = {
is_super_user: true, is_super_user: true,
is_system_auditor: false is_system_auditor: false
}; };
test('initially renders succesfully', () => { test('initially renders succesfully', () => {
mountWithContexts(<Organization me={me} />); mountWithContexts(<Organization me={me} />);
}); });
test('notifications tab shown/hidden based on permissions', () => { test('notifications tab shown/hidden based on permissions', () => {
const wrapper = mountWithContexts(<Organization me={me} />); const wrapper = mountWithContexts(<Organization me={me} />);
expect(wrapper.find('.pf-c-tabs__item').length).toBe(3); expect(wrapper.find('.pf-c-tabs__item').length).toBe(3);
@@ -18,6 +20,6 @@ describe('<OrganizationView />', () => {
isNotifAdmin: true isNotifAdmin: true
}); });
expect(wrapper.find('.pf-c-tabs__item').length).toBe(4); expect(wrapper.find('.pf-c-tabs__item').length).toBe(4);
expect(wrapper.find('.pf-c-tabs__button[children="Notifications"]').length).toBe(1); expect(wrapper.find('button.pf-c-tabs__button[children="Notifications"]').length).toBe(1);
}); });
}); });

14
__tests__/pages/Organizations/screens/Organization/OrganizationAccess.test.jsx
View File

@@ -71,9 +71,9 @@ describe('<OrganizationAccess />', () => {
}; };
}); });
test.only('initially renders succesfully', () => { test('initially renders succesfully', () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} organization={organization} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
expect(wrapper.find('OrganizationAccess')).toMatchSnapshot(); expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
@@ -81,7 +81,7 @@ describe('<OrganizationAccess />', () => {
test('should fetch and display access records on mount', async () => { test('should fetch and display access records on mount', async () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
await sleep(0); await sleep(0);
@@ -94,7 +94,7 @@ describe('<OrganizationAccess />', () => {
test('should open confirmation dialog when deleting role', async () => { test('should open confirmation dialog when deleting role', async () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
await sleep(0); await sleep(0);
@@ -114,7 +114,7 @@ describe('<OrganizationAccess />', () => {
it('should close dialog when cancel button clicked', async () => { it('should close dialog when cancel button clicked', async () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
await sleep(0); await sleep(0);
@@ -133,7 +133,7 @@ describe('<OrganizationAccess />', () => {
it('should delete user role', async () => { it('should delete user role', async () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
await sleep(0); await sleep(0);
@@ -156,7 +156,7 @@ describe('<OrganizationAccess />', () => {
it('should delete team role', async () => { it('should delete team role', async () => {
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<OrganizationAccess id={1} />, <OrganizationAccess organization={organization} />,
{ context: { network } } { context: { network } }
); );
await sleep(0); await sleep(0);

1
__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationAccess.test.jsx.snap
View File

@@ -5,7 +5,6 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
api={"/api/"} api={"/api/"}
handleHttpError={[Function]} handleHttpError={[Function]}
history={"/history/"} history={"/history/"}
id={1}
location={ location={
Object { Object {
"hash": "", "hash": "",

736
__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

@@ -666,156 +666,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
aria-labelledby="items-list-item-1" aria-labelledby="items-list-item-1"
className="pf-c-data-list__item" className="pf-c-data-list__item"
> >
<DataListCell <DataListItemRow
className="" className=""
key=".0" key=".0"
rowid="items-list-item-1" rowid="items-list-item-1"
width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__item-row"
> >
<Link <DataListItemCells
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/1",
}
}
>
<a
onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
>
<b
id="items-list-item-1"
>
Notification one
</b>
</a>
</Link>
<Badge
className="" className=""
isRead={true} dataListCells={
style={ Array [
Object { <DataListCell
"textTransform": "capitalize", alignRight={false}
} className=""
isFilled={true}
isIcon={false}
width={1}
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/1",
}
}
>
<b
id="items-list-item-1"
>
Notification one
</b>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
email
</Badge>
</DataListCell>,
<DataListCell
alignRight={true}
className=""
isFilled={true}
isIcon={false}
width={1}
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-1-success-toggle"
isChecked={true}
isDisabled={false}
label="Successful"
onChange={[Function]}
/>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-1-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
/>
</DataListCell>,
]
} }
key=".0"
rowid="items-list-item-1"
> >
<span <div
className="pf-c-badge pf-m-read" className="pf-c-data-list__item-content"
style={
Object {
"textTransform": "capitalize",
}
}
> >
email <DataListCell
</span> alignRight={false}
</Badge> className=""
isFilled={true}
isIcon={false}
key="name"
width={1}
>
<div
className="pf-c-data-list__cell"
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/1",
}
}
>
<a
onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
>
<b
id="items-list-item-1"
>
Notification one
</b>
</a>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
<span
className="pf-c-badge pf-m-read"
style={
Object {
"textTransform": "capitalize",
}
}
>
email
</span>
</Badge>
</div>
</DataListCell>
<DataListCell
alignRight={true}
className=""
isFilled={true}
isIcon={false}
key="toggles"
width={1}
>
<div
className="pf-c-data-list__cell pf-m-align-right"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-1-success-toggle"
isChecked={true}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-1-success-toggle"
>
<input
aria-label="Toggle notification success"
checked={true}
className="pf-c-switch__input"
disabled={false}
id="notification-1-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>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-1-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-1-error-toggle"
>
<input
aria-label="Toggle notification failure"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-1-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>
</div>
</DataListCell>
</div>
</DataListItemCells>
</div> </div>
</DataListCell> </DataListItemRow>
<DataListCell
alignRight={true}
className=""
key=".1"
rowid="items-list-item-1"
width={1}
>
<div
alignRight={true}
className="pf-c-data-list__cell"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-1-success-toggle"
isChecked={true}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-1-success-toggle"
>
<input
aria-label="Toggle notification success"
checked={true}
className="pf-c-switch__input"
disabled={false}
id="notification-1-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>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-1-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-1-error-toggle"
>
<input
aria-label="Toggle notification failure"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-1-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>
</div>
</DataListCell>
</li> </li>
</DataListItem> </DataListItem>
</I18n> </I18n>
@@ -850,156 +940,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
aria-labelledby="items-list-item-2" aria-labelledby="items-list-item-2"
className="pf-c-data-list__item" className="pf-c-data-list__item"
> >
<DataListCell <DataListItemRow
className="" className=""
key=".0" key=".0"
rowid="items-list-item-2" rowid="items-list-item-2"
width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__item-row"
> >
<Link <DataListItemCells
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/2",
}
}
>
<a
onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
>
<b
id="items-list-item-2"
>
Notification two
</b>
</a>
</Link>
<Badge
className="" className=""
isRead={true} dataListCells={
style={ Array [
Object { <DataListCell
"textTransform": "capitalize", alignRight={false}
} className=""
isFilled={true}
isIcon={false}
width={1}
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/2",
}
}
>
<b
id="items-list-item-2"
>
Notification two
</b>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
email
</Badge>
</DataListCell>,
<DataListCell
alignRight={true}
className=""
isFilled={true}
isIcon={false}
width={1}
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-2-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
/>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-2-error-toggle"
isChecked={true}
isDisabled={false}
label="Failure"
onChange={[Function]}
/>
</DataListCell>,
]
} }
key=".0"
rowid="items-list-item-2"
> >
<span <div
className="pf-c-badge pf-m-read" className="pf-c-data-list__item-content"
style={
Object {
"textTransform": "capitalize",
}
}
> >
email <DataListCell
</span> alignRight={false}
</Badge> className=""
isFilled={true}
isIcon={false}
key="name"
width={1}
>
<div
className="pf-c-data-list__cell"
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/notifications/2",
}
}
>
<a
onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
>
<b
id="items-list-item-2"
>
Notification two
</b>
</a>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
<span
className="pf-c-badge pf-m-read"
style={
Object {
"textTransform": "capitalize",
}
}
>
email
</span>
</Badge>
</div>
</DataListCell>
<DataListCell
alignRight={true}
className=""
isFilled={true}
isIcon={false}
key="toggles"
width={1}
>
<div
className="pf-c-data-list__cell pf-m-align-right"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-2-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-2-success-toggle"
>
<input
aria-label="Toggle notification success"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-2-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>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-2-error-toggle"
isChecked={true}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-2-error-toggle"
>
<input
aria-label="Toggle notification failure"
checked={true}
className="pf-c-switch__input"
disabled={false}
id="notification-2-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>
</div>
</DataListCell>
</div>
</DataListItemCells>
</div> </div>
</DataListCell> </DataListItemRow>
<DataListCell
alignRight={true}
className=""
key=".1"
rowid="items-list-item-2"
width={1}
>
<div
alignRight={true}
className="pf-c-data-list__cell"
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-2-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-2-success-toggle"
>
<input
aria-label="Toggle notification success"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-2-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>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-2-error-toggle"
isChecked={true}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<label
className="pf-c-switch"
htmlFor="notification-2-error-toggle"
>
<input
aria-label="Toggle notification failure"
checked={true}
className="pf-c-switch__input"
disabled={false}
id="notification-2-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>
</div>
</DataListCell>
</li> </li>
</DataListItem> </DataListItem>
</I18n> </I18n>

101
package-lock.json generated
View File

@@ -1748,18 +1748,18 @@
} }
}, },
"@patternfly/patternfly": { "@patternfly/patternfly": {
"version": "1.0.248", "version": "2.6.5",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.248.tgz", "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.5.tgz",
"integrity": "sha512-x+fz3cP0nyFsK0ZRt1H58ESZxoy4wKqqb2uhyaNIg5jC3x5KC0PCr0gfUmBvNOiHnOePmc+ZC5nWcAOKN9tGBA==" "integrity": "sha512-L0k+ea2N679ytQwTqYJ7RewVDx6FDpm9burtHgD8fhcIN0UJJo7v2IkhLya2WzH2/O7L7TiF45lb/ZVoFVckDA=="
}, },
"@patternfly/react-core": { "@patternfly/react-core": {
"version": "2.9.2", "version": "3.2.6",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-2.9.2.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.2.6.tgz",
"integrity": "sha512-v93pAA9dXTzsgFeR8W4+fg0kC0joB4BISFoSqzb22+/cNvSnEypC/DjBN4pOUEoBvsFC/JI8FotQoj9ZAx3GAw==", "integrity": "sha512-58GBM8SfhoggQldGArUR3LwvcMe+GaW/uTjB1/a3RTG6HXTfFfs33UXnQnN2IgWZmHOyxpjnWq2yEh5xwJs5HQ==",
"requires": { "requires": {
"@patternfly/react-icons": "^3.6.1", "@patternfly/react-icons": "^3.7.4",
"@patternfly/react-styles": "^2.4.0", "@patternfly/react-styles": "^3.0.2",
"@patternfly/react-tokens": "^2.2.1", "@patternfly/react-tokens": "^2.3.3",
"@tippy.js/react": "^1.1.1", "@tippy.js/react": "^1.1.1",
"emotion": "^9.2.9", "emotion": "^9.2.9",
"exenv": "^1.2.2", "exenv": "^1.2.2",
@@ -1767,26 +1767,26 @@
}, },
"dependencies": { "dependencies": {
"@patternfly/react-icons": { "@patternfly/react-icons": {
"version": "3.6.1", "version": "3.7.5",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
"integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA==" "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
}, },
"@patternfly/react-tokens": { "@patternfly/react-tokens": {
"version": "2.2.1", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
"integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw==" "integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
} }
} }
}, },
"@patternfly/react-icons": { "@patternfly/react-icons": {
"version": "3.6.1", "version": "3.7.5",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
"integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA==" "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
}, },
"@patternfly/react-styles": { "@patternfly/react-styles": {
"version": "2.4.0", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.4.0.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
"integrity": "sha512-BJQtg4zjj5Gw6OixHu2MGiT2T3vFTvyiGSXPQ+wk+vqR/wl0Y7/OOGNqI3fGYm1ON4q2ySOlGuJdHF+1NLbVyA==", "integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
"requires": { "requires": {
"@babel/helper-plugin-utils": "^7.0.0-beta.48", "@babel/helper-plugin-utils": "^7.0.0-beta.48",
"camel-case": "^3.0.0", "camel-case": "^3.0.0",
@@ -1803,9 +1803,9 @@
} }
}, },
"@patternfly/react-tokens": { "@patternfly/react-tokens": {
"version": "2.2.1", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
"integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw==" "integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
}, },
"@tippy.js/react": { "@tippy.js/react": {
"version": "1.1.1", "version": "1.1.1",
@@ -4988,9 +4988,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "2.6.3", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.4.tgz",
"integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg==" "integrity": "sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg=="
}, },
"currently-unhandled": { "currently-unhandled": {
"version": "0.4.1", "version": "0.4.1",
@@ -7027,8 +7027,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -7049,14 +7048,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -7071,20 +7068,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -7201,8 +7195,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -7214,7 +7207,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -7229,7 +7221,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@@ -7237,14 +7228,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -7263,7 +7252,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -7344,8 +7332,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -7357,7 +7344,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -7443,8 +7429,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -7480,7 +7465,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -7500,7 +7484,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -7544,14 +7527,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
@@ -12539,9 +12520,9 @@
"dev": true "dev": true
}, },
"popper.js": { "popper.js": {
"version": "1.14.7", "version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
}, },
"portfinder": { "portfinder": {
"version": "1.0.20", "version": "1.0.20",

8
package.json
View File

@@ -50,10 +50,10 @@
}, },
"dependencies": { "dependencies": {
"@lingui/react": "^2.7.2", "@lingui/react": "^2.7.2",
"@patternfly/patternfly": "^1.0.248", "@patternfly/patternfly": "^2.6.5",
"@patternfly/react-core": "^2.9.2", "@patternfly/react-core": "^3.2.6",
"@patternfly/react-icons": "^3.6.1", "@patternfly/react-icons": "^3.7.5",
"@patternfly/react-tokens": "^2.2.1", "@patternfly/react-tokens": "^2.3.3",
"axios": "^0.18.0", "axios": "^0.18.0",
"formik": "^1.5.1", "formik": "^1.5.1",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",

22
src/app.scss
View File

@@ -88,16 +88,27 @@
} }
} }
.pf-c-data-list__item-row {
--pf-c-data-list__item-row--PaddingRight: 20px;
--pf-c-data-list__item-row--PaddingLeft: 20px;
}
.pf-c-data-list__item-content {
--pf-c-data-list__item-content--PaddingBottom: 16px;
}
.pf-c-data-list__item-control {
--pf-c-data-list__item-control--PaddingTop: 16px;
--pf-c-data-list__item-control--MarginRight: 8px;
}
.pf-c-data-list__item { .pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px; --pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 20px; --pf-c-data-list__item--PaddingRight: 20px;
align-items: center;
} }
.pf-c-data-list__cell { .pf-c-data-list__cell {
--pf-c-data-list__cell--PaddingTop: 16px; --pf-c-data-list__cell--PaddingTop: 16px;
--pf-c-data-list__cell--PaddingBottom: 16px;
--pf-c-data-list__cell-cell--PaddingTop: 16px; --pf-c-data-list__cell-cell--PaddingTop: 16px;
.awx-c-list-group { .awx-c-list-group {
@@ -111,6 +122,11 @@
margin-left: 10px; margin-left: 10px;
} }
} }
&.pf-c-data-list__cell--divider {
flex-grow: 0;
margin-right: 0;
}
} }
// //

96
src/components/NotificationsList/NotificationListItem.jsx
View File

@@ -3,7 +3,14 @@ import { shape, number, string, bool, func } from 'prop-types';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Badge, Switch, DataListItem, DataListCell } from '@patternfly/react-core'; import {
Badge,
Switch,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
} from '@patternfly/react-core';
function NotificationListItem (props) { function NotificationListItem (props) {
const { const {
@@ -25,48 +32,53 @@ function NotificationListItem (props) {
aria-labelledby={`items-list-item-${notification.id}`} aria-labelledby={`items-list-item-${notification.id}`}
key={notification.id} key={notification.id}
> >
<DataListCell> <DataListItemRow>
<Link <DataListItemCells dataListCells={[
to={{ <DataListCell key="name">
pathname: detailUrl <Link
}} to={{
style={{ marginRight: '1.5em' }} pathname: detailUrl
> }}
<b id={`items-list-item-${notification.id}`}>{notification.name}</b> style={{ marginRight: '1.5em' }}
</Link> >
<Badge <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
style={capText} </Link>
isRead <Badge
> style={capText}
{notification.notification_type} isRead
</Badge> >
</DataListCell> {notification.notification_type}
<DataListCell alignRight> </Badge>
<Switch </DataListCell>,
id={`notification-${notification.id}-success-toggle`} <DataListCell key="toggles" alignRight>
label={i18n._(t`Successful`)} <Switch
isChecked={successTurnedOn} id={`notification-${notification.id}-success-toggle`}
isDisabled={!canToggleNotifications} label={i18n._(t`Successful`)}
onChange={() => toggleNotification( isChecked={successTurnedOn}
notification.id, isDisabled={!canToggleNotifications}
successTurnedOn, onChange={() => toggleNotification(
'success' notification.id,
)} successTurnedOn,
aria-label={i18n._(t`Toggle notification success`)} 'success'
)}
aria-label={i18n._(t`Toggle notification success`)}
/>
<Switch
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
errorTurnedOn,
'error'
)}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListCell>
]}
/> />
<Switch </DataListItemRow>
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() => toggleNotification(
notification.id,
errorTurnedOn,
'error'
)}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListCell>
</DataListItem> </DataListItem>
)} )}
</I18n> </I18n>

37
src/components/PaginatedDataList/PaginatedDataList.jsx
View File

@@ -3,6 +3,8 @@ import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
import { import {
DataList, DataList,
DataListItem, DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell, DataListCell,
Text, Text,
TextContent, TextContent,
@@ -154,21 +156,26 @@ class PaginatedDataList extends React.Component {
aria-labelledby={`items-list-item-${item.id}`} aria-labelledby={`items-list-item-${item.id}`}
key={item.id} key={item.id}
> >
<DataListCell> <DataListItemRow>
<TextContent style={detailWrapperStyle}> <DataListItemCells dataListCells={[
<Link to={{ pathname: item.url }}> <DataListCell key="team-name">
<Text <TextContent style={detailWrapperStyle}>
id="items-list-item" <Link to={{ pathname: item.url }}>
component={TextVariants.h6} <Text
style={detailLabelStyle} id="items-list-item"
> component={TextVariants.h6}
<span id={`items-list-item-${item.id}`}> style={detailLabelStyle}
{item.name} >
</span> <span id={`items-list-item-${item.id}`}>
</Text> {item.name}
</Link> </span>
</TextContent> </Text>
</DataListCell> </Link>
</TextContent>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem> </DataListItem>
)))} )))}
</DataList> </DataList>

151
src/pages/Organizations/components/OrganizationAccessItem.jsx
View File

@@ -4,6 +4,8 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
DataListItem, DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell, DataListCell,
Text, Text,
TextContent, TextContent,
@@ -86,79 +88,84 @@ class OrganizationAccessItem extends React.Component {
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<DataListItem aria-labelledby="access-list-item" key={accessRecord.id}> <DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
<DataListCell> <DataListItemRow>
{accessRecord.username && ( <DataListItemCells dataListCells={[
<TextContent style={detailWrapperStyle}> <DataListCell key="name">
{accessRecord.url ? ( {accessRecord.username && (
<Link to={{ pathname: accessRecord.url }}> <TextContent style={detailWrapperStyle}>
<Text component={TextVariants.h6} style={detailLabelStyle}> {accessRecord.url ? (
{accessRecord.username} <Link to={{ pathname: accessRecord.url }}>
</Text> <Text component={TextVariants.h6} style={detailLabelStyle}>
</Link> {accessRecord.username}
) : ( </Text>
<Text component={TextVariants.h6} style={detailLabelStyle}> </Link>
{accessRecord.username} ) : (
</Text> <Text component={TextVariants.h6} style={detailLabelStyle}>
{accessRecord.username}
</Text>
)}
</TextContent>
)} )}
</TextContent> {accessRecord.first_name || accessRecord.last_name ? (
)} <Detail
{accessRecord.first_name || accessRecord.last_name ? ( label={i18n._(t`Name`)}
<Detail value={`${accessRecord.first_name} ${accessRecord.last_name}`}
label={i18n._(t`Name`)} url={null}
value={`${accessRecord.first_name} ${accessRecord.last_name}`} customStyles={null}
url={null} />
customStyles={null} ) : (
/> null
) : ( )}
null </DataListCell>,
)} <DataListCell key="roles">
</DataListCell> {userRoles.length > 0 && (
<DataListCell> <ul style={userRolesWrapperStyle}>
{userRoles.length > 0 && ( <Text component={TextVariants.h6} style={detailLabelStyle}>
<ul style={userRolesWrapperStyle}> {i18n._(t`User Roles`)}
<Text component={TextVariants.h6} style={detailLabelStyle}> </Text>
{i18n._(t`User Roles`)} {userRoles.map(role => (
</Text> role.user_capabilities.unattach ? (
{userRoles.map(role => ( <Chip
role.user_capabilities.unattach ? ( key={role.id}
<Chip className="awx-c-chip"
key={role.id} onClick={() => { onRoleDelete(role, accessRecord); }}
className="awx-c-chip" >
onClick={() => { onRoleDelete(role, accessRecord); }} {role.name}
> </Chip>
{role.name} ) : (
</Chip> <BasicChip key={role.id}>
) : ( {role.name}
<BasicChip key={role.id}> </BasicChip>
{role.name} )
</BasicChip> ))}
) </ul>
))} )}
</ul> {teamRoles.length > 0 && (
)} <ul style={userRolesWrapperStyle}>
{teamRoles.length > 0 && ( <Text component={TextVariants.h6} style={detailLabelStyle}>
<ul style={userRolesWrapperStyle}> {i18n._(t`Team Roles`)}
<Text component={TextVariants.h6} style={detailLabelStyle}> </Text>
{i18n._(t`Team Roles`)} {teamRoles.map(role => (
</Text> role.user_capabilities.unattach ? (
{teamRoles.map(role => ( <Chip
role.user_capabilities.unattach ? ( key={role.id}
<Chip className="awx-c-chip"
key={role.id} onClick={() => { onRoleDelete(role, accessRecord); }}
className="awx-c-chip" >
onClick={() => { onRoleDelete(role, accessRecord); }} {role.name}
> </Chip>
{role.name} ) : (
</Chip> <BasicChip key={role.id}>
) : ( {role.name}
<BasicChip key={role.id}> </BasicChip>
{role.name} )
</BasicChip> ))}
) </ul>
))} )}
</ul> </DataListCell>
)} ]}
</DataListCell> />
</DataListItemRow>
</DataListItem> </DataListItem>
)} )}
</I18n> </I18n>

86
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@@ -1,9 +1,12 @@
import React from 'react'; import React from 'react';
import { I18n } from '@lingui/react'; import { Trans } from '@lingui/macro';
import { Trans, t } from '@lingui/macro';
import { import {
Badge, Badge,
Checkbox, DataListItem,
DataListItemRow,
DataListItemCells,
DataListCheck,
DataListCell,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
Link Link
@@ -22,44 +25,47 @@ class OrganizationListItem extends React.Component {
onSelect, onSelect,
detailUrl, detailUrl,
} = this.props; } = this.props;
const labelId = `check-action-${itemId}`;
return ( return (
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1"> <DataListItem key={itemId} aria-labelledby={labelId}>
<I18n> <DataListItemRow>
{({ i18n }) => ( <DataListCheck
<Checkbox id={`select-organization-${itemId}`}
checked={isSelected} checked={isSelected}
onChange={onSelect} onChange={onSelect}
aria-label={i18n._(t`select organization ${itemId}`)} aria-labelledby={labelId}
id={`select-organization-${itemId}`} />
/> <DataListItemCells dataListCells={[
)} <DataListCell key="divider" className="pf-c-data-list__cell--divider">
</I18n> <VerticalSeparator />
<VerticalSeparator /> </DataListCell>,
<div className="pf-c-data-list__cell"> <DataListCell key="org-name">
<span id="check-action-item1"> <span id={labelId}>
<Link <Link
to={`${detailUrl}`} to={`${detailUrl}`}
> >
<b>{name}</b> <b>{name}</b>
</Link> </Link>
</span> </span>
</div> </DataListCell>,
<div className="pf-c-data-list__cell"> <DataListCell key="org-members">
<span className="awx-c-list-group"> <span className="awx-c-list-group">
<Trans>Members</Trans> <Trans>Members</Trans>
<Badge className="awx-c-list-group--badge" isRead> <Badge className="awx-c-list-group--badge" isRead>
{memberCount} {memberCount}
</Badge> </Badge>
</span> </span>
<span className="awx-c-list-group"> <span className="awx-c-list-group">
<Trans>Teams</Trans> <Trans>Teams</Trans>
<Badge className="awx-c-list-group--badge" isRead> <Badge className="awx-c-list-group--badge" isRead>
{teamCount} {teamCount}
</Badge> </Badge>
</span> </span>
</div> </DataListCell>
<div className="pf-c-data-list__cell" /> ]}
</li> />
</DataListItemRow>
</DataListItem>
); );
} }
} }