mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 20:00:43 -03:30
upgrade to patternfly 2.x, pf/react-core 3.x (#184)
This commit is contained in:
Keith Grant
GitHub
parent
6fe93f474f
commit
ffade973a9
@ -29,156 +29,246 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
<DataListItemRow
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="items-list-item-9000"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
className="pf-c-data-list__item-row"
|
||||
>
|
||||
<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
|
||||
<DataListItemCells
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
dataListCells={
|
||||
Array [
|
||||
<DataListCell
|
||||
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
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
<div
|
||||
className="pf-c-data-list__item-content"
|
||||
>
|
||||
slack
|
||||
</span>
|
||||
</Badge>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
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>
|
||||
</DataListCell>
|
||||
<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>
|
||||
</DataListItemRow>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
|
||||
@ -45,58 +45,82 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
|
||||
aria-labelledby="access-list-item"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
<DataListItemRow
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="access-list-item"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
className="pf-c-data-list__item-row"
|
||||
>
|
||||
<TextContent
|
||||
<DataListItemCells
|
||||
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",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
dataListCells={
|
||||
Array [
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
width={1}
|
||||
>
|
||||
<Text
|
||||
<TextContent
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<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=""
|
||||
data-pf-content={true}
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
@ -105,220 +129,309 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
jane
|
||||
</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
|
||||
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}
|
||||
Team Roles
|
||||
</Text>
|
||||
<Chip
|
||||
className="awx-c-chip"
|
||||
closeBtnAriaLabel="close"
|
||||
isOverflowChip={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
tooltipPosition="top"
|
||||
>
|
||||
<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"
|
||||
Member
|
||||
</Chip>
|
||||
</ul>
|
||||
</DataListCell>,
|
||||
]
|
||||
}
|
||||
key=".0"
|
||||
rowid="access-list-item"
|
||||
>
|
||||
<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
|
||||
aria-hidden="true"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
<a
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
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>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
jane
|
||||
</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>
|
||||
</DataListCell>
|
||||
</DataListItemRow>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
|
||||
@ -2,14 +2,16 @@ import React from 'react';
|
||||
import { mountWithContexts } from '../../../../enzymeHelpers';
|
||||
import Organization from '../../../../../src/pages/Organizations/screens/Organization/Organization';
|
||||
|
||||
describe('<OrganizationView />', () => {
|
||||
describe.only('<Organization />', () => {
|
||||
const me = {
|
||||
is_super_user: true,
|
||||
is_system_auditor: false
|
||||
};
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(<Organization me={me} />);
|
||||
});
|
||||
|
||||
test('notifications tab shown/hidden based on permissions', () => {
|
||||
const wrapper = mountWithContexts(<Organization me={me} />);
|
||||
expect(wrapper.find('.pf-c-tabs__item').length).toBe(3);
|
||||
@ -18,6 +20,6 @@ describe('<OrganizationView />', () => {
|
||||
isNotifAdmin: true
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -71,9 +71,9 @@ describe('<OrganizationAccess />', () => {
|
||||
};
|
||||
});
|
||||
|
||||
test.only('initially renders succesfully', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} organization={organization} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
|
||||
@ -81,7 +81,7 @@ describe('<OrganizationAccess />', () => {
|
||||
|
||||
test('should fetch and display access records on mount', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
@ -94,7 +94,7 @@ describe('<OrganizationAccess />', () => {
|
||||
|
||||
test('should open confirmation dialog when deleting role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
@ -114,7 +114,7 @@ describe('<OrganizationAccess />', () => {
|
||||
|
||||
it('should close dialog when cancel button clicked', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
@ -133,7 +133,7 @@ describe('<OrganizationAccess />', () => {
|
||||
|
||||
it('should delete user role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
@ -156,7 +156,7 @@ describe('<OrganizationAccess />', () => {
|
||||
|
||||
it('should delete team role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
<OrganizationAccess organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
|
||||
@ -5,7 +5,6 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
|
||||
api={"/api/"}
|
||||
handleHttpError={[Function]}
|
||||
history={"/history/"}
|
||||
id={1}
|
||||
location={
|
||||
Object {
|
||||
"hash": "",
|
||||
|
||||
@ -666,156 +666,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
aria-labelledby="items-list-item-1"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
<DataListItemRow
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="items-list-item-1"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
className="pf-c-data-list__item-row"
|
||||
>
|
||||
<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
|
||||
<DataListItemCells
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
dataListCells={
|
||||
Array [
|
||||
<DataListCell
|
||||
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
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
<div
|
||||
className="pf-c-data-list__item-content"
|
||||
>
|
||||
email
|
||||
</span>
|
||||
</Badge>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
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>
|
||||
</DataListCell>
|
||||
<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>
|
||||
</DataListItemRow>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
@ -850,156 +940,246 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
aria-labelledby="items-list-item-2"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
<DataListItemRow
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="items-list-item-2"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
className="pf-c-data-list__item-row"
|
||||
>
|
||||
<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
|
||||
<DataListItemCells
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
dataListCells={
|
||||
Array [
|
||||
<DataListCell
|
||||
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
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
<div
|
||||
className="pf-c-data-list__item-content"
|
||||
>
|
||||
email
|
||||
</span>
|
||||
</Badge>
|
||||
<DataListCell
|
||||
alignRight={false}
|
||||
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>
|
||||
</DataListCell>
|
||||
<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>
|
||||
</DataListItemRow>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
|
||||
101
package-lock.json
generated
101
package-lock.json
generated
@ -1748,18 +1748,18 @@
|
||||
}
|
||||
},
|
||||
"@patternfly/patternfly": {
|
||||
"version": "1.0.248",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.248.tgz",
|
||||
"integrity": "sha512-x+fz3cP0nyFsK0ZRt1H58ESZxoy4wKqqb2uhyaNIg5jC3x5KC0PCr0gfUmBvNOiHnOePmc+ZC5nWcAOKN9tGBA=="
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.5.tgz",
|
||||
"integrity": "sha512-L0k+ea2N679ytQwTqYJ7RewVDx6FDpm9burtHgD8fhcIN0UJJo7v2IkhLya2WzH2/O7L7TiF45lb/ZVoFVckDA=="
|
||||
},
|
||||
"@patternfly/react-core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-2.9.2.tgz",
|
||||
"integrity": "sha512-v93pAA9dXTzsgFeR8W4+fg0kC0joB4BISFoSqzb22+/cNvSnEypC/DjBN4pOUEoBvsFC/JI8FotQoj9ZAx3GAw==",
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.2.6.tgz",
|
||||
"integrity": "sha512-58GBM8SfhoggQldGArUR3LwvcMe+GaW/uTjB1/a3RTG6HXTfFfs33UXnQnN2IgWZmHOyxpjnWq2yEh5xwJs5HQ==",
|
||||
"requires": {
|
||||
"@patternfly/react-icons": "^3.6.1",
|
||||
"@patternfly/react-styles": "^2.4.0",
|
||||
"@patternfly/react-tokens": "^2.2.1",
|
||||
"@patternfly/react-icons": "^3.7.4",
|
||||
"@patternfly/react-styles": "^3.0.2",
|
||||
"@patternfly/react-tokens": "^2.3.3",
|
||||
"@tippy.js/react": "^1.1.1",
|
||||
"emotion": "^9.2.9",
|
||||
"exenv": "^1.2.2",
|
||||
@ -1767,26 +1767,26 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@patternfly/react-icons": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz",
|
||||
"integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA=="
|
||||
"version": "3.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
|
||||
"integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
|
||||
},
|
||||
"@patternfly/react-tokens": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz",
|
||||
"integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw=="
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
|
||||
"integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@patternfly/react-icons": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.6.1.tgz",
|
||||
"integrity": "sha512-7PkP7NC3sDmsFAnQIGl+9p14vgx7gj0TZSwtL1ABkAEV9tXcEjWsyyZP2fahfTKVE9aPrOZ/YINsr8+iGCOTnA=="
|
||||
"version": "3.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
|
||||
"integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
|
||||
},
|
||||
"@patternfly/react-styles": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.4.0.tgz",
|
||||
"integrity": "sha512-BJQtg4zjj5Gw6OixHu2MGiT2T3vFTvyiGSXPQ+wk+vqR/wl0Y7/OOGNqI3fGYm1ON4q2ySOlGuJdHF+1NLbVyA==",
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
|
||||
"integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.0.0-beta.48",
|
||||
"camel-case": "^3.0.0",
|
||||
@ -1803,9 +1803,9 @@
|
||||
}
|
||||
},
|
||||
"@patternfly/react-tokens": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.1.tgz",
|
||||
"integrity": "sha512-DVGrHRPpNvIhS9ekn7lqvXdHHAbkCawwfc8hRCuGvGS2Z6O45u1JFTyKWTyvW9b94pigaDTArtMlp++k5o1Xpw=="
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
|
||||
"integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
|
||||
},
|
||||
"@tippy.js/react": {
|
||||
"version": "1.1.1",
|
||||
@ -4988,9 +4988,9 @@
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
|
||||
"integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
|
||||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.4.tgz",
|
||||
"integrity": "sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg=="
|
||||
},
|
||||
"currently-unhandled": {
|
||||
"version": "0.4.1",
|
||||
@ -7027,8 +7027,7 @@
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -7049,14 +7048,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 +7068,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 +7195,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -7214,7 +7207,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -7229,7 +7221,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -7237,14 +7228,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 +7252,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -7344,8 +7332,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -7357,7 +7344,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -7443,8 +7429,7 @@
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -7480,7 +7465,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 +7484,6 @@
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -7544,14 +7527,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
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -12539,9 +12520,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.14.7",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
|
||||
"integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
|
||||
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.20",
|
||||
|
||||
@ -50,10 +50,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@lingui/react": "^2.7.2",
|
||||
"@patternfly/patternfly": "^1.0.248",
|
||||
"@patternfly/react-core": "^2.9.2",
|
||||
"@patternfly/react-icons": "^3.6.1",
|
||||
"@patternfly/react-tokens": "^2.2.1",
|
||||
"@patternfly/patternfly": "^2.6.5",
|
||||
"@patternfly/react-core": "^3.2.6",
|
||||
"@patternfly/react-icons": "^3.7.5",
|
||||
"@patternfly/react-tokens": "^2.3.3",
|
||||
"axios": "^0.18.0",
|
||||
"formik": "^1.5.1",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
22
src/app.scss
22
src/app.scss
@ -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--PaddingLeft: 20px;
|
||||
--pf-c-data-list__item--PaddingRight: 20px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pf-c-data-list__cell {
|
||||
--pf-c-data-list__cell--PaddingTop: 16px;
|
||||
--pf-c-data-list__cell--PaddingBottom: 16px;
|
||||
--pf-c-data-list__cell-cell--PaddingTop: 16px;
|
||||
|
||||
.awx-c-list-group {
|
||||
@ -111,6 +122,11 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.pf-c-data-list__cell--divider {
|
||||
flex-grow: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@ -3,7 +3,14 @@ import { shape, number, string, bool, func } from 'prop-types';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
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) {
|
||||
const {
|
||||
@ -25,48 +32,53 @@ function NotificationListItem (props) {
|
||||
aria-labelledby={`items-list-item-${notification.id}`}
|
||||
key={notification.id}
|
||||
>
|
||||
<DataListCell>
|
||||
<Link
|
||||
to={{
|
||||
pathname: detailUrl
|
||||
}}
|
||||
style={{ marginRight: '1.5em' }}
|
||||
>
|
||||
<b id={`items-list-item-${notification.id}`}>{notification.name}</b>
|
||||
</Link>
|
||||
<Badge
|
||||
style={capText}
|
||||
isRead
|
||||
>
|
||||
{notification.notification_type}
|
||||
</Badge>
|
||||
</DataListCell>
|
||||
<DataListCell alignRight>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-success-toggle`}
|
||||
label={i18n._(t`Successful`)}
|
||||
isChecked={successTurnedOn}
|
||||
isDisabled={!canToggleNotifications}
|
||||
onChange={() => toggleNotification(
|
||||
notification.id,
|
||||
successTurnedOn,
|
||||
'success'
|
||||
)}
|
||||
aria-label={i18n._(t`Toggle notification success`)}
|
||||
<DataListItemRow>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="name">
|
||||
<Link
|
||||
to={{
|
||||
pathname: detailUrl
|
||||
}}
|
||||
style={{ marginRight: '1.5em' }}
|
||||
>
|
||||
<b id={`items-list-item-${notification.id}`}>{notification.name}</b>
|
||||
</Link>
|
||||
<Badge
|
||||
style={capText}
|
||||
isRead
|
||||
>
|
||||
{notification.notification_type}
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell key="toggles" alignRight>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-success-toggle`}
|
||||
label={i18n._(t`Successful`)}
|
||||
isChecked={successTurnedOn}
|
||||
isDisabled={!canToggleNotifications}
|
||||
onChange={() => toggleNotification(
|
||||
notification.id,
|
||||
successTurnedOn,
|
||||
'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
|
||||
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>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
)}
|
||||
</I18n>
|
||||
|
||||
@ -3,6 +3,8 @@ import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
|
||||
import {
|
||||
DataList,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCell,
|
||||
Text,
|
||||
TextContent,
|
||||
@ -154,21 +156,26 @@ class PaginatedDataList extends React.Component {
|
||||
aria-labelledby={`items-list-item-${item.id}`}
|
||||
key={item.id}
|
||||
>
|
||||
<DataListCell>
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
<Link to={{ pathname: item.url }}>
|
||||
<Text
|
||||
id="items-list-item"
|
||||
component={TextVariants.h6}
|
||||
style={detailLabelStyle}
|
||||
>
|
||||
<span id={`items-list-item-${item.id}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
</Text>
|
||||
</Link>
|
||||
</TextContent>
|
||||
</DataListCell>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="team-name">
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
<Link to={{ pathname: item.url }}>
|
||||
<Text
|
||||
id="items-list-item"
|
||||
component={TextVariants.h6}
|
||||
style={detailLabelStyle}
|
||||
>
|
||||
<span id={`items-list-item-${item.id}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
</Text>
|
||||
</Link>
|
||||
</TextContent>
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
)))}
|
||||
</DataList>
|
||||
|
||||
@ -4,6 +4,8 @@ import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCell,
|
||||
Text,
|
||||
TextContent,
|
||||
@ -86,79 +88,84 @@ class OrganizationAccessItem extends React.Component {
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<DataListItem aria-labelledby="access-list-item" key={accessRecord.id}>
|
||||
<DataListCell>
|
||||
{accessRecord.username && (
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
{accessRecord.url ? (
|
||||
<Link to={{ pathname: accessRecord.url }}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
</Link>
|
||||
) : (
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="name">
|
||||
{accessRecord.username && (
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
{accessRecord.url ? (
|
||||
<Link to={{ pathname: accessRecord.url }}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
</Link>
|
||||
) : (
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{accessRecord.username}
|
||||
</Text>
|
||||
)}
|
||||
</TextContent>
|
||||
)}
|
||||
</TextContent>
|
||||
)}
|
||||
{accessRecord.first_name || accessRecord.last_name ? (
|
||||
<Detail
|
||||
label={i18n._(t`Name`)}
|
||||
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
|
||||
url={null}
|
||||
customStyles={null}
|
||||
/>
|
||||
) : (
|
||||
null
|
||||
)}
|
||||
</DataListCell>
|
||||
<DataListCell>
|
||||
{userRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`User Roles`)}
|
||||
</Text>
|
||||
{userRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`Team Roles`)}
|
||||
</Text>
|
||||
{teamRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DataListCell>
|
||||
{accessRecord.first_name || accessRecord.last_name ? (
|
||||
<Detail
|
||||
label={i18n._(t`Name`)}
|
||||
value={`${accessRecord.first_name} ${accessRecord.last_name}`}
|
||||
url={null}
|
||||
customStyles={null}
|
||||
/>
|
||||
) : (
|
||||
null
|
||||
)}
|
||||
</DataListCell>,
|
||||
<DataListCell key="roles">
|
||||
{userRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`User Roles`)}
|
||||
</Text>
|
||||
{userRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{teamRoles.length > 0 && (
|
||||
<ul style={userRolesWrapperStyle}>
|
||||
<Text component={TextVariants.h6} style={detailLabelStyle}>
|
||||
{i18n._(t`Team Roles`)}
|
||||
</Text>
|
||||
{teamRoles.map(role => (
|
||||
role.user_capabilities.unattach ? (
|
||||
<Chip
|
||||
key={role.id}
|
||||
className="awx-c-chip"
|
||||
onClick={() => { onRoleDelete(role, accessRecord); }}
|
||||
>
|
||||
{role.name}
|
||||
</Chip>
|
||||
) : (
|
||||
<BasicChip key={role.id}>
|
||||
{role.name}
|
||||
</BasicChip>
|
||||
)
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
)}
|
||||
</I18n>
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import React from 'react';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { Trans, t } from '@lingui/macro';
|
||||
import { Trans } from '@lingui/macro';
|
||||
import {
|
||||
Badge,
|
||||
Checkbox,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
Link
|
||||
@ -22,44 +25,47 @@ class OrganizationListItem extends React.Component {
|
||||
onSelect,
|
||||
detailUrl,
|
||||
} = this.props;
|
||||
const labelId = `check-action-${itemId}`;
|
||||
return (
|
||||
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-label={i18n._(t`select organization ${itemId}`)}
|
||||
id={`select-organization-${itemId}`}
|
||||
/>
|
||||
)}
|
||||
</I18n>
|
||||
<VerticalSeparator />
|
||||
<div className="pf-c-data-list__cell">
|
||||
<span id="check-action-item1">
|
||||
<Link
|
||||
to={`${detailUrl}`}
|
||||
>
|
||||
<b>{name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pf-c-data-list__cell">
|
||||
<span className="awx-c-list-group">
|
||||
<Trans>Members</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
{memberCount}
|
||||
</Badge>
|
||||
</span>
|
||||
<span className="awx-c-list-group">
|
||||
<Trans>Teams</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
{teamCount}
|
||||
</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pf-c-data-list__cell" />
|
||||
</li>
|
||||
<DataListItem key={itemId} aria-labelledby={labelId}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-organization-${itemId}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="divider" className="pf-c-data-list__cell--divider">
|
||||
<VerticalSeparator />
|
||||
</DataListCell>,
|
||||
<DataListCell key="org-name">
|
||||
<span id={labelId}>
|
||||
<Link
|
||||
to={`${detailUrl}`}
|
||||
>
|
||||
<b>{name}</b>
|
||||
</Link>
|
||||
</span>
|
||||
</DataListCell>,
|
||||
<DataListCell key="org-members">
|
||||
<span className="awx-c-list-group">
|
||||
<Trans>Members</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
{memberCount}
|
||||
</Badge>
|
||||
</span>
|
||||
<span className="awx-c-list-group">
|
||||
<Trans>Teams</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
{teamCount}
|
||||
</Badge>
|
||||
</span>
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user