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

Show notification type in its own column

Browse Source
This commit is contained in:
mabashian
2019-06-27 10:15:11 -04:00
parent 3371a6f386
commit 1d2c21249b
7 changed files with 331 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui_next/src/api/mixins/Notifications.mixin.js
View File

@@ -1,5 +1,9 @@
const NotificationsMixin = parent => const NotificationsMixin = parent =>
class extends parent { class extends parent {
readOptionsNotificationTemplates(id) {
return this.http.options(`${this.baseUrl}${id}/notification_templates/`);
}
readNotificationTemplates(id, params = {}) { readNotificationTemplates(id, params = {}) {
return this.http.get(`${this.baseUrl}${id}/notification_templates/`, { return this.http.get(`${this.baseUrl}${id}/notification_templates/`, {
params, params,

34
awx/ui_next/src/components/NotificationsList/NotificationListItem.jsx
View File

@@ -4,7 +4,6 @@ import { withI18n } 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 { import {
Badge,
Switch as PFSwitch, Switch as PFSwitch,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
@@ -39,6 +38,7 @@ function NotificationListItem(props) {
errorTurnedOn, errorTurnedOn,
toggleNotification, toggleNotification,
i18n, i18n,
typeLabels,
} = props; } = props;
return ( return (
@@ -47,22 +47,19 @@ function NotificationListItem(props) {
key={notification.id} key={notification.id}
> >
<DataListItemRow> <DataListItemRow>
<DataListItemCells <DataListItemCells dataListCells={[
dataListCells={[
<DataListCell key="name"> <DataListCell key="name">
<Link <Link
to={{ to={{
pathname: detailUrl, pathname: detailUrl
}} }}
css="margin-right: 1.5em;" css="margin-right: 1.5em;"
> >
<b id={`items-list-item-${notification.id}`}> <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
{notification.name}
</b>
</Link> </Link>
<Badge css="text-transform: capitalize;" isRead> </DataListCell>,
{notification.notification_type} <DataListCell key="type">
</Badge> {typeLabels[notification.notification_type]}
</DataListCell>, </DataListCell>,
<DataListCell righthalf="true" key="toggles"> <DataListCell righthalf="true" key="toggles">
<Switch <Switch
@@ -70,13 +67,11 @@ function NotificationListItem(props) {
label={i18n._(t`Successful`)} label={i18n._(t`Successful`)}
isChecked={successTurnedOn} isChecked={successTurnedOn}
isDisabled={!canToggleNotifications} isDisabled={!canToggleNotifications}
onChange={() => onChange={() => toggleNotification(
toggleNotification(
notification.id, notification.id,
successTurnedOn, successTurnedOn,
'success' 'success'
) )}
}
aria-label={i18n._(t`Toggle notification success`)} aria-label={i18n._(t`Toggle notification success`)}
/> />
<Switch <Switch
@@ -84,12 +79,14 @@ function NotificationListItem(props) {
label={i18n._(t`Failure`)} label={i18n._(t`Failure`)}
isChecked={errorTurnedOn} isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications} isDisabled={!canToggleNotifications}
onChange={() => onChange={() => toggleNotification(
toggleNotification(notification.id, errorTurnedOn, 'error') notification.id,
} errorTurnedOn,
'error'
)}
aria-label={i18n._(t`Toggle notification failure`)} aria-label={i18n._(t`Toggle notification failure`)}
/> />
</DataListCell>, </DataListCell>
]} ]}
/> />
</DataListItemRow> </DataListItemRow>
@@ -108,6 +105,7 @@ NotificationListItem.propTypes = {
errorTurnedOn: bool, errorTurnedOn: bool,
successTurnedOn: bool, successTurnedOn: bool,
toggleNotification: func.isRequired, toggleNotification: func.isRequired,
typeLabels: shape().isRequired
}; };
NotificationListItem.defaultProps = { NotificationListItem.defaultProps = {

61
awx/ui_next/src/components/NotificationsList/NotificationListItem.test.jsx
View File

@@ -6,6 +6,16 @@ describe('<NotificationListItem canToggleNotifications />', () => {
let wrapper; let wrapper;
let toggleNotification; let toggleNotification;
const mockNotif = {
id: 9000,
name: 'Foo',
notification_type: 'slack'
};
const typeLabels = {
slack: 'Slack'
};
beforeEach(() => { beforeEach(() => {
toggleNotification = jest.fn(); toggleNotification = jest.fn();
}); });
@@ -18,34 +28,42 @@ describe('<NotificationListItem canToggleNotifications />', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
test('initially renders succesfully', () => { test('initially renders succesfully and displays correct label', () => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<NotificationListItem <NotificationListItem
notification={{ notification={mockNotif}
id: 9000,
name: 'Foo',
notification_type: 'slack',
}}
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
canToggleNotifications canToggleNotifications
typeLabels={typeLabels}
/> />
); );
expect(wrapper.find('NotificationListItem')).toMatchSnapshot(); expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
}); });
test('displays correct label in correct column', () => {
wrapper = mountWithContexts(
<NotificationListItem
notification={mockNotif}
toggleNotification={toggleNotification}
detailUrl="/foo"
canToggleNotifications
typeLabels={typeLabels}
/>
);
const typeCell = wrapper.find('DataListCell').at(1).find('div');
expect(typeCell.text()).toBe('Slack');
});
test('handles success click when toggle is on', () => { test('handles success click when toggle is on', () => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<NotificationListItem <NotificationListItem
notification={{ notification={mockNotif}
id: 9000,
name: 'Foo',
notification_type: 'slack',
}}
successTurnedOn successTurnedOn
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
canToggleNotifications canToggleNotifications
typeLabels={typeLabels}
/> />
); );
wrapper wrapper
@@ -59,15 +77,12 @@ describe('<NotificationListItem canToggleNotifications />', () => {
test('handles success click when toggle is off', () => { test('handles success click when toggle is off', () => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<NotificationListItem <NotificationListItem
notification={{ notification={mockNotif}
id: 9000,
name: 'Foo',
notification_type: 'slack',
}}
successTurnedOn={false} successTurnedOn={false}
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
canToggleNotifications canToggleNotifications
typeLabels={typeLabels}
/> />
); );
wrapper wrapper
@@ -81,15 +96,12 @@ describe('<NotificationListItem canToggleNotifications />', () => {
test('handles error click when toggle is on', () => { test('handles error click when toggle is on', () => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<NotificationListItem <NotificationListItem
notification={{ notification={mockNotif}
id: 9000,
name: 'Foo',
notification_type: 'slack',
}}
errorTurnedOn errorTurnedOn
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
canToggleNotifications canToggleNotifications
typeLabels={typeLabels}
/> />
); );
wrapper wrapper
@@ -103,15 +115,12 @@ describe('<NotificationListItem canToggleNotifications />', () => {
test('handles error click when toggle is off', () => { test('handles error click when toggle is off', () => {
wrapper = mountWithContexts( wrapper = mountWithContexts(
<NotificationListItem <NotificationListItem
notification={{ notification={mockNotif}
id: 9000,
name: 'Foo',
notification_type: 'slack',
}}
errorTurnedOn={false} errorTurnedOn={false}
toggleNotification={toggleNotification} toggleNotification={toggleNotification}
detailUrl="/foo" detailUrl="/foo"
canToggleNotifications canToggleNotifications
typeLabels={typeLabels}
/> />
); );
wrapper wrapper

61
awx/ui_next/src/components/NotificationsList/__snapshots__/NotificationListItem.test.jsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<NotificationListItem canToggleNotifications /> initially renders succesfully 1`] = ` exports[`<NotificationListItem canToggleNotifications /> initially renders succesfully and displays correct label 1`] = `
<NotificationListItem <NotificationListItem
canToggleNotifications={true} canToggleNotifications={true}
detailUrl="/foo" detailUrl="/foo"
@@ -15,6 +15,11 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
successTurnedOn={false} successTurnedOn={false}
toggleNotification={[MockFunction]} toggleNotification={[MockFunction]}
typeLabels={
Object {
"slack": "Slack",
}
}
> >
<DataListItem <DataListItem
aria-labelledby="items-list-item-9000" aria-labelledby="items-list-item-9000"
@@ -52,11 +57,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
Foo Foo
</b> </b>
</ForwardRef> </ForwardRef>
<ForwardRef </ForwardRef>,
isRead={true} <ForwardRef>
> Slack
slack
</ForwardRef>
</ForwardRef>, </ForwardRef>,
<ForwardRef <ForwardRef
righthalf="true" righthalf="true"
@@ -189,8 +192,12 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</Link> </Link>
</StyledComponent> </StyledComponent>
</Styled(Link)> </Styled(Link)>
<Styled(Badge) </div>
isRead={true} </DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
key="type"
> >
<StyledComponent <StyledComponent
forwardedComponent={ forwardedComponent={
@@ -198,17 +205,23 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH", "componentId": "NotificationListItem__DataListCell-j7c411-0",
"isStatic": true, "isStatic": false,
"lastClassName": "chTbOZ", "lastClassName": "hoXOpW",
"rules": Array [ "rules": Array [
"text-transform: capitalize;", "display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
], ],
}, },
"displayName": "Styled(Badge)", "displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bwzfXH", "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -216,20 +229,18 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
} }
forwardedRef={null} forwardedRef={null}
isRead={true}
> >
<Badge <DataListCell
className="sc-bwzfXH chTbOZ" alignRight={false}
isRead={true} className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
isFilled={true}
isIcon={false}
width={1}
> >
<span <div
className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
> >
slack Slack
</span>
</Badge>
</StyledComponent>
</Styled(Badge)>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent> </StyledComponent>

34
awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
View File

@@ -35,6 +35,7 @@ class OrganizationNotifications extends Component {
notifications: [], notifications: [],
successTemplateIds: [], successTemplateIds: [],
errorTemplateIds: [], errorTemplateIds: [],
typeLabels: null
}; };
this.handleNotificationToggle = this.handleNotificationToggle.bind(this); this.handleNotificationToggle = this.handleNotificationToggle.bind(this);
this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind( this.handleNotificationErrorClose = this.handleNotificationErrorClose.bind(
@@ -56,13 +57,25 @@ class OrganizationNotifications extends Component {
async loadNotifications() { async loadNotifications() {
const { id, location } = this.props; const { id, location } = this.props;
const { typeLabels } = this.state;
const params = parseNamespacedQueryString(QS_CONFIG, location.search); const params = parseNamespacedQueryString(QS_CONFIG, location.search);
const promises = [
OrganizationsAPI.readNotificationTemplates(id, params)
];
if (!typeLabels) {
promises.push(OrganizationsAPI.readOptionsNotificationTemplates(id));
}
this.setState({ contentError: null, hasContentLoading: true }); this.setState({ contentError: null, hasContentLoading: true });
try { try {
const { const [{
data: { count: itemCount = 0, results: notifications = [] }, data: {
} = await OrganizationsAPI.readNotificationTemplates(id, params); count: itemCount = 0,
results: notifications = [],
}
}, optionsResponse] = await Promise.all(promises);
let idMatchParams; let idMatchParams;
if (notifications.length > 0) { if (notifications.length > 0) {
@@ -79,12 +92,21 @@ class OrganizationNotifications extends Component {
OrganizationsAPI.readNotificationTemplatesError(id, idMatchParams), OrganizationsAPI.readNotificationTemplatesError(id, idMatchParams),
]); ]);
this.setState({ const stateToUpdate = {
itemCount, itemCount,
notifications, notifications,
successTemplateIds: successTemplates.results.map(s => s.id), successTemplateIds: successTemplates.results.map(s => s.id),
errorTemplateIds: errorTemplates.results.map(e => e.id), errorTemplateIds: errorTemplates.results.map(e => e.id),
}); };
if (!typeLabels) {
const { data: { actions: { GET: { notification_type: {choices} } } } } = optionsResponse;
// The structure of choices looks like [['slack', 'Slack'], ['email', 'Email'], ...]
stateToUpdate.typeLabels =
choices.reduce((map, notifType) => ({ ...map, [notifType[0]]: notifType[1]}), {});
}
this.setState(stateToUpdate);
} catch (err) { } catch (err) {
this.setState({ contentError: err }); this.setState({ contentError: err });
} finally { } finally {
@@ -148,6 +170,7 @@ class OrganizationNotifications extends Component {
notifications, notifications,
successTemplateIds, successTemplateIds,
errorTemplateIds, errorTemplateIds,
typeLabels,
} = this.state; } = this.state;
return ( return (
@@ -169,6 +192,7 @@ class OrganizationNotifications extends Component {
toggleNotification={this.handleNotificationToggle} toggleNotification={this.handleNotificationToggle}
errorTurnedOn={errorTemplateIds.includes(notification.id)} errorTurnedOn={errorTemplateIds.includes(notification.id)}
successTurnedOn={successTemplateIds.includes(notification.id)} successTurnedOn={successTemplateIds.includes(notification.id)}
typeLabels={typeLabels}
/> />
)} )}
/> />

30
awx/ui_next/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.test.jsx
View File

@@ -8,26 +8,36 @@ import OrganizationNotifications from './OrganizationNotifications';
jest.mock('@api'); jest.mock('@api');
describe('<OrganizationNotifications />', () => { describe('<OrganizationNotifications />', () => {
let data; const data = {
beforeEach(() => {
data = {
count: 2, count: 2,
results: [ results: [{
{
id: 1, id: 1,
name: 'Notification one', name: 'Notification one',
url: '/api/v2/notification_templates/1/', url: '/api/v2/notification_templates/1/',
notification_type: 'email', notification_type: 'email',
}, }, {
{
id: 2, id: 2,
name: 'Notification two', name: 'Notification two',
url: '/api/v2/notification_templates/2/', url: '/api/v2/notification_templates/2/',
notification_type: 'email', notification_type: 'email',
}, }]
],
}; };
OrganizationsAPI.readOptionsNotificationTemplates.mockReturnValue({
data: {
actions: {
GET: {
notification_type: {
choices: [
['email', 'Email']
]
}
}
}
}
});
beforeEach(() => {
OrganizationsAPI.readNotificationTemplates.mockReturnValue({ data }); OrganizationsAPI.readNotificationTemplates.mockReturnValue({ data });
OrganizationsAPI.readNotificationTemplatesSuccess.mockReturnValue({ OrganizationsAPI.readNotificationTemplatesSuccess.mockReturnValue({
data: { results: [{ id: 1 }] }, data: { results: [{ id: 1 }] },

148
awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

@@ -410,9 +410,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bxivhb", "componentId": "sc-htpNat",
"isStatic": true, "isStatic": true,
"lastClassName": "gYEJOJ", "lastClassName": "dqEVhr",
"rules": Array [ "rules": Array [
"flex-grow: 1;", "flex-grow: 1;",
], ],
@@ -420,7 +420,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"displayName": "Styled(ToolbarItem)", "displayName": "Styled(ToolbarItem)",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bxivhb", "styledComponentId": "sc-htpNat",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -430,10 +430,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<ToolbarItem <ToolbarItem
className="sc-bxivhb gYEJOJ" className="sc-htpNat dqEVhr"
> >
<div <div
className="pf-l-toolbar__item sc-bxivhb gYEJOJ" className="pf-l-toolbar__item sc-htpNat dqEVhr"
> >
<WithI18n <WithI18n
columns={ columns={
@@ -1441,9 +1441,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-htpNat", "componentId": "sc-bwzfXH",
"isStatic": true, "isStatic": true,
"lastClassName": "jWbbwS", "lastClassName": "iNPUwu",
"rules": Array [ "rules": Array [
"padding: 0;", "padding: 0;",
], ],
@@ -1451,7 +1451,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"displayName": "Styled(Button)", "displayName": "Styled(Button)",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-htpNat", "styledComponentId": "sc-bwzfXH",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -1464,7 +1464,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
> >
<Button <Button
aria-label="Sort" aria-label="Sort"
className="sc-htpNat jWbbwS" className="sc-bwzfXH iNPUwu"
component="button" component="button"
isActive={false} isActive={false}
isBlock={false} isBlock={false}
@@ -1479,7 +1479,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
<button <button
aria-disabled={null} aria-disabled={null}
aria-label="Sort" aria-label="Sort"
className="pf-c-button pf-m-plain sc-htpNat jWbbwS" className="pf-c-button pf-m-plain sc-bwzfXH iNPUwu"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
@@ -1619,6 +1619,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
successTurnedOn={true} successTurnedOn={true}
toggleNotification={[Function]} toggleNotification={[Function]}
typeLabels={
Object {
"email": "Email",
}
}
> >
<I18n <I18n
update={true} update={true}
@@ -1639,6 +1644,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
successTurnedOn={true} successTurnedOn={true}
toggleNotification={[Function]} toggleNotification={[Function]}
typeLabels={
Object {
"email": "Email",
}
}
> >
<DataListItem <DataListItem
aria-labelledby="items-list-item-1" aria-labelledby="items-list-item-1"
@@ -1676,11 +1686,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
Notification one Notification one
</b> </b>
</ForwardRef> </ForwardRef>
<ForwardRef </ForwardRef>,
isRead={true} <ForwardRef>
> Email
email
</ForwardRef>
</ForwardRef>, </ForwardRef>,
<ForwardRef <ForwardRef
righthalf="true" righthalf="true"
@@ -1813,8 +1821,12 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</Link> </Link>
</StyledComponent> </StyledComponent>
</Styled(Link)> </Styled(Link)>
<Styled(Badge) </div>
isRead={true} </DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
key="type"
> >
<StyledComponent <StyledComponent
forwardedComponent={ forwardedComponent={
@@ -1822,17 +1834,23 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH", "componentId": "NotificationListItem__DataListCell-j7c411-0",
"isStatic": true, "isStatic": false,
"lastClassName": "chTbOZ", "lastClassName": "hoXOpW",
"rules": Array [ "rules": Array [
"text-transform: capitalize;", "display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
], ],
}, },
"displayName": "Styled(Badge)", "displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bwzfXH", "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -1840,20 +1858,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
} }
forwardedRef={null} forwardedRef={null}
isRead={true}
> >
<Badge <DataListCell
className="sc-bwzfXH chTbOZ" alignRight={false}
isRead={true} className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
isFilled={true}
isIcon={false}
width={1}
> >
<span <div
className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
> >
email Email
</span>
</Badge>
</StyledComponent>
</Styled(Badge)>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent> </StyledComponent>
@@ -2094,6 +2110,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
successTurnedOn={false} successTurnedOn={false}
toggleNotification={[Function]} toggleNotification={[Function]}
typeLabels={
Object {
"email": "Email",
}
}
> >
<I18n <I18n
update={true} update={true}
@@ -2114,6 +2135,11 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
successTurnedOn={false} successTurnedOn={false}
toggleNotification={[Function]} toggleNotification={[Function]}
typeLabels={
Object {
"email": "Email",
}
}
> >
<DataListItem <DataListItem
aria-labelledby="items-list-item-2" aria-labelledby="items-list-item-2"
@@ -2151,11 +2177,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
Notification two Notification two
</b> </b>
</ForwardRef> </ForwardRef>
<ForwardRef </ForwardRef>,
isRead={true} <ForwardRef>
> Email
email
</ForwardRef>
</ForwardRef>, </ForwardRef>,
<ForwardRef <ForwardRef
righthalf="true" righthalf="true"
@@ -2288,8 +2312,12 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</Link> </Link>
</StyledComponent> </StyledComponent>
</Styled(Link)> </Styled(Link)>
<Styled(Badge) </div>
isRead={true} </DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
key="type"
> >
<StyledComponent <StyledComponent
forwardedComponent={ forwardedComponent={
@@ -2297,17 +2325,23 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH", "componentId": "NotificationListItem__DataListCell-j7c411-0",
"isStatic": true, "isStatic": false,
"lastClassName": "chTbOZ", "lastClassName": "hoXOpW",
"rules": Array [ "rules": Array [
"text-transform: capitalize;", "display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
], ],
}, },
"displayName": "Styled(Badge)", "displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bwzfXH", "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -2315,20 +2349,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
} }
forwardedRef={null} forwardedRef={null}
isRead={true}
> >
<Badge <DataListCell
className="sc-bwzfXH chTbOZ" alignRight={false}
isRead={true} className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
isFilled={true}
isIcon={false}
width={1}
> >
<span <div
className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
> >
email Email
</span>
</Badge>
</StyledComponent>
</Styled(Badge)>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent> </StyledComponent>