From 0a30dd8f9c5a2d5f4660e2be277184efb8dfc204 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 20 Jan 2021 16:55:31 +0000 Subject: [PATCH 01/23] Add notification event meta --- src-docs/src/routes.js | 4 +- .../notification_events.js | 63 ++++++++++++ .../notification_events_example.js | 32 +++++++ src/components/index.js | 5 + src/components/index.scss | 1 + src/components/notification/_index.scss | 2 + .../_notification_event_meta.scss | 15 +++ .../_notification_event_read_button.scss | 11 +++ src/components/notification/index.ts | 21 ++++ .../notification/notification_event_meta.tsx | 95 +++++++++++++++++++ .../notification_event_read_button.tsx | 47 +++++++++ 11 files changed, 295 insertions(+), 1 deletion(-) create mode 100644 src-docs/src/views/notification_events/notification_events.js create mode 100644 src-docs/src/views/notification_events/notification_events_example.js create mode 100644 src/components/notification/_index.scss create mode 100644 src/components/notification/_notification_event_meta.scss create mode 100644 src/components/notification/_notification_event_read_button.scss create mode 100644 src/components/notification/index.ts create mode 100644 src/components/notification/notification_event_meta.tsx create mode 100644 src/components/notification/notification_event_read_button.tsx diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 5905d4889a1b..f034ef834798 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -144,6 +144,8 @@ import { ModalExample } from './views/modal/modal_example'; import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example'; +import { NotificationEventsExample } from './views/notification_events/notification_events_example'; + import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example'; import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example'; @@ -389,9 +391,9 @@ const navigation = [ ImageExample, ListGroupExample, LoadingExample, + NotificationEventsExample, ProgressExample, StatExample, - TextExample, TitleExample, ToastExample, diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js new file mode 100644 index 000000000000..357016a4169e --- /dev/null +++ b/src-docs/src/views/notification_events/notification_events.js @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import { + EuiNotificationEventMeta, + EuiPanel, + EuiSpacer, + EuiTitle, +} from '../../../../src/components'; + +export default () => { + const [isRead, setIsRead] = useState(false); + + const onRead = () => { + setIsRead(true); + }; + + const panelStyle = { maxWidth: '400px' }; + + return ( + <> + +

All props

+ + + + + + + + +

No Severity

+ + + + + + + + +

Only required props

+ + + + + + + ); +}; diff --git a/src-docs/src/views/notification_events/notification_events_example.js b/src-docs/src/views/notification_events/notification_events_example.js new file mode 100644 index 000000000000..e4a0f42002e3 --- /dev/null +++ b/src-docs/src/views/notification_events/notification_events_example.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { EuiNotificationEventMeta } from '../../../../src/components'; + +import Notification from './notification_events'; +const notificationSource = require('!!raw-loader!./notification_events'); +const notificationHtml = renderToHtml(Notification); + +export const NotificationEventsExample = { + title: 'Notification Events', + isNew: true, + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: notificationSource, + }, + { + type: GuideSectionTypes.HTML, + code: notificationHtml, + }, + ], + props: { EuiNotificationEventMeta }, + demo: , + }, + ], +}; diff --git a/src/components/index.js b/src/components/index.js index 271cc3e0db2f..485ba4474c81 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -240,6 +240,11 @@ export { export { EuiMutationObserver } from './observer/mutation_observer'; +export { + EuiNotificationEventMeta, + EuiNotificationEventReadButton, +} from './notification/'; + export { EuiOutsideClickDetector } from './outside_click_detector'; export { EuiOverlayMask } from './overlay_mask'; diff --git a/src/components/index.scss b/src/components/index.scss index 123870f06850..ec31d5d21885 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -44,6 +44,7 @@ @import 'markdown_editor/index'; @import 'mark/index'; @import 'modal/index'; +@import 'notification/index'; @import 'overlay_mask/index'; @import 'page/index'; @import 'pagination/index'; diff --git a/src/components/notification/_index.scss b/src/components/notification/_index.scss new file mode 100644 index 000000000000..b9961e7e8fe4 --- /dev/null +++ b/src/components/notification/_index.scss @@ -0,0 +1,2 @@ +@import './notification_event_meta'; +@import './notification_event_read_button'; \ No newline at end of file diff --git a/src/components/notification/_notification_event_meta.scss b/src/components/notification/_notification_event_meta.scss new file mode 100644 index 000000000000..63558317a782 --- /dev/null +++ b/src/components/notification/_notification_event_meta.scss @@ -0,0 +1,15 @@ +.euiNotificationEventMeta { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + > div > * + * { + margin-left: $euiSizeS; + } + + &__time { + font-size: $euiFontSizeXS; + color: $euiColorDarkShade; + } +} diff --git a/src/components/notification/_notification_event_read_button.scss b/src/components/notification/_notification_event_read_button.scss new file mode 100644 index 000000000000..0df56e9277e8 --- /dev/null +++ b/src/components/notification/_notification_event_read_button.scss @@ -0,0 +1,11 @@ +.euiNotificationEventReadButton { + &--isUnread svg { + fill: $euiColorPrimary; + } + + &--isRead svg { + fill: transparent; + stroke-width: 1px; + stroke: $euiBorderColor; + } +} diff --git a/src/components/notification/index.ts b/src/components/notification/index.ts new file mode 100644 index 000000000000..d4e17468d596 --- /dev/null +++ b/src/components/notification/index.ts @@ -0,0 +1,21 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { EuiNotificationEventMeta } from './notification_event_meta'; +export { EuiNotificationEventReadButton } from './notification_event_read_button'; diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx new file mode 100644 index 000000000000..31c5e0e6416a --- /dev/null +++ b/src/components/notification/notification_event_meta.tsx @@ -0,0 +1,95 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent } from 'react'; +import { EuiIcon } from '../icon'; +import { EuiBadge } from '../badge'; + +import { EuiNotificationEventReadButton } from './notification_event_read_button'; + +export type EuiNotificationEventMetaProps = { + /** + * Type of event (e.g. "Alert", "Cloud", etc..) + */ + type: string; + /** + * Type of severity (e.g. "Critical", "Cloud", etc..) + */ + severity?: string; + /** + * The read state of the event + */ + isRead?: boolean | undefined; + + /** + * Changes the color of the badge + */ + healthStatus?: 'secondary' | 'warning' | 'danger'; + + /** + * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`. + */ + iconType?: string; + + /** + * Indicates when was the event received + */ + time: string; + + onRead?: () => void; +}; + +export const EuiNotificationEventMeta: FunctionComponent = ({ + isRead, + iconType, + type, + time, + healthStatus, + onRead, + severity, +}) => { + const markAsRead = () => { + onRead && onRead(); + }; + + return ( +
+
+ {typeof isRead === 'boolean' && ( + + )} + + {iconType && } + + {type && ( + + {severity ? `${type}: ${severity}` : type} + + )} +
+ +
+ {time} +
+
+ ); +}; diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx new file mode 100644 index 000000000000..71cd4ffe4b4e --- /dev/null +++ b/src/components/notification/notification_event_read_button.tsx @@ -0,0 +1,47 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FunctionComponent } from 'react'; +import { EuiButtonIcon } from '../button'; +import classNames from 'classnames'; + +export type EuiNotificationEventReadButtonProps = { + markAsRead: () => void; + isRead: boolean; +}; + +export const EuiNotificationEventReadButton: FunctionComponent = ({ + isRead, + markAsRead, +}) => { + const classesReadState = classNames('euiNotificationEventReadButton', { + 'euiNotificationEventReadButton--isRead': isRead === true, + 'euiNotificationEventReadButton--isUnread': isRead === false, + }); + + return ( + + ); +}; From f6d29432a8177bc46a7f0ad4cf7ee67d16a66546 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 20 Jan 2021 17:12:29 +0000 Subject: [PATCH 02/23] WIP --- .../notification/notification_event_read_button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index 71cd4ffe4b4e..5d20b8858b20 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -31,8 +31,8 @@ export const EuiNotificationEventReadButton: FunctionComponent { const classesReadState = classNames('euiNotificationEventReadButton', { - 'euiNotificationEventReadButton--isRead': isRead === true, - 'euiNotificationEventReadButton--isUnread': isRead === false, + 'euiNotificationEventReadButton--isRead': isRead, + 'euiNotificationEventReadButton--isUnread': !isRead, }); return ( From 4110ea8a3068cdc3bc3a1c7fe99c33a962b6400c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 21 Jan 2021 15:06:07 +0000 Subject: [PATCH 03/23] adding i18n --- .../notification/notification_event_meta.tsx | 4 +-- .../notification_event_read_button.tsx | 25 ++++++++++++------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 31c5e0e6416a..346e71539100 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -64,7 +64,7 @@ export const EuiNotificationEventMeta: FunctionComponent { - const markAsRead = () => { + const onMarkAsRead = () => { onRead && onRead(); }; @@ -74,7 +74,7 @@ export const EuiNotificationEventMeta: FunctionComponent )} diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index 5d20b8858b20..c5f13efdf0b7 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -19,16 +19,17 @@ import React, { FunctionComponent } from 'react'; import { EuiButtonIcon } from '../button'; +import { EuiI18n } from '../i18n'; import classNames from 'classnames'; export type EuiNotificationEventReadButtonProps = { - markAsRead: () => void; + onMarkAsRead: () => void; isRead: boolean; }; export const EuiNotificationEventReadButton: FunctionComponent = ({ isRead, - markAsRead, + onMarkAsRead, }) => { const classesReadState = classNames('euiNotificationEventReadButton', { 'euiNotificationEventReadButton--isRead': isRead, @@ -36,12 +37,18 @@ export const EuiNotificationEventReadButton: FunctionComponent + + {(markAsRead: string) => ( + + )} + ); }; From 6be10cc30369dc465feca9006fc12206ba834905 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 21 Jan 2021 16:04:50 +0000 Subject: [PATCH 04/23] Fixing axe error in docs example --- src-docs/src/views/notification_events/notification_events.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index 357016a4169e..5c758cc32d45 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -18,6 +18,10 @@ export default () => { return ( <> + +

EuiNotificationEventMeta

+ +

All props

 From 3e876798c3e2f37f1c5acda58ef8f80d0e3e3add Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 25 Jan 2021 13:29:02 +0000 Subject: [PATCH 05/23] Adding context menus items --- .../notification_events.js | 16 +++++++ .../notification_events_example.js | 6 +-- src/components/context_menu/index.ts | 1 + .../notification/notification_event_meta.tsx | 42 ++++++++++++++++++- 4 files changed, 59 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index 5c758cc32d45..a71adcaf4d46 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -5,6 +5,7 @@ import { EuiPanel, EuiSpacer, EuiTitle, + EuiContextMenuItem, } from '../../../../src/components'; export default () => { @@ -16,6 +17,20 @@ export default () => { const panelStyle = { maxWidth: '400px' }; + const contextMenuItems = [ + + Mark as read + , + + {}}> + View messages like this + , + + {}}> + Don’t notify me about this + , + ]; + return ( <> @@ -35,6 +50,7 @@ export default () => { time="2 min ago" isRead={isRead} onRead={onRead} + contextMenuItems={contextMenuItems} /> diff --git a/src-docs/src/views/notification_events/notification_events_example.js b/src-docs/src/views/notification_events/notification_events_example.js index e4a0f42002e3..8a7c618fbaa8 100644 --- a/src-docs/src/views/notification_events/notification_events_example.js +++ b/src-docs/src/views/notification_events/notification_events_example.js @@ -1,10 +1,8 @@ import React from 'react'; - import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; - import { EuiNotificationEventMeta } from '../../../../src/components'; +import { EuiContextMenuItem } from '../../../../src/components/context_menu/'; import Notification from './notification_events'; const notificationSource = require('!!raw-loader!./notification_events'); @@ -25,7 +23,7 @@ export const NotificationEventsExample = { code: notificationHtml, }, ], - props: { EuiNotificationEventMeta }, + props: { EuiNotificationEventMeta, EuiContextMenuItem }, demo: , }, ], diff --git a/src/components/context_menu/index.ts b/src/components/context_menu/index.ts index 18743849877d..505a138c2f93 100644 --- a/src/components/context_menu/index.ts +++ b/src/components/context_menu/index.ts @@ -30,6 +30,7 @@ export { export { EuiContextMenuItem, + EuiContextMenuItemProps, EuiContextMenuItemIcon, EuiContextMenuItemLayoutAlignment, } from './context_menu_item'; diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 346e71539100..9d82e9515372 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -17,10 +17,13 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, useState, ReactElement } from 'react'; import { EuiIcon } from '../icon'; import { EuiBadge } from '../badge'; - +import { EuiPopover } from '../popover'; +import { EuiButtonIcon } from '../button'; +import { EuiContextMenuPanel, EuiContextMenuItemProps } from '../context_menu'; +import { EuiI18n } from '../i18n'; import { EuiNotificationEventReadButton } from './notification_event_read_button'; export type EuiNotificationEventMetaProps = { @@ -53,6 +56,11 @@ export type EuiNotificationEventMetaProps = { time: string; onRead?: () => void; + + /** + * An array of context menu items. See #EuiContextMenuItem + */ + contextMenuItems?: EuiContextMenuItemProps[]; }; export const EuiNotificationEventMeta: FunctionComponent = ({ @@ -63,7 +71,10 @@ export const EuiNotificationEventMeta: FunctionComponent { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onMarkAsRead = () => { onRead && onRead(); }; @@ -89,6 +100,33 @@ export const EuiNotificationEventMeta: FunctionComponent {time} + + {contextMenuItems.length > 0 && ( + + {(contextMenuButton: string) => ( + setIsPopoverOpen(!isPopoverOpen)} + /> + )} + + } + closePopover={() => setIsPopoverOpen(false)}> + + + )} ); From ffb70dee92fb6f91ad4df76f63b10f22c9c13683 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 25 Jan 2021 16:45:29 +0000 Subject: [PATCH 06/23] contetx menu item anchor position --- src/components/notification/notification_event_meta.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 9d82e9515372..cb0b9b2bfa78 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -107,7 +107,7 @@ export const EuiNotificationEventMeta: FunctionComponent Date: Mon, 25 Jan 2021 19:34:58 +0000 Subject: [PATCH 07/23] Adding tests --- .../notification_events_example.js | 5 +- .../notification_event_meta.test.tsx.snap | 214 ++++++++++++++++++ ...tification_event_read_button.test.tsx.snap | 32 +++ .../notification_event_meta.test.tsx | 104 +++++++++ .../notification/notification_event_meta.tsx | 6 +- .../notification_event_read_button.test.tsx | 50 ++++ .../notification_event_read_button.tsx | 1 + 7 files changed, 408 insertions(+), 4 deletions(-) create mode 100644 src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap create mode 100644 src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap create mode 100644 src/components/notification/notification_event_meta.test.tsx create mode 100644 src/components/notification/notification_event_read_button.test.tsx diff --git a/src-docs/src/views/notification_events/notification_events_example.js b/src-docs/src/views/notification_events/notification_events_example.js index 8a7c618fbaa8..3f6730303150 100644 --- a/src-docs/src/views/notification_events/notification_events_example.js +++ b/src-docs/src/views/notification_events/notification_events_example.js @@ -23,7 +23,10 @@ export const NotificationEventsExample = { code: notificationHtml, }, ], - props: { EuiNotificationEventMeta, EuiContextMenuItem }, + props: { + EuiNotificationEventMeta, + EuiContextMenuItem, + }, demo: , }, ], diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap new file mode 100644 index 000000000000..6f0c8fade96f --- /dev/null +++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap @@ -0,0 +1,214 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiNotificationEventMeta is rendered 1`] = ` +
+
+ + + + Alert + + + +
+
+ + 2 min ago + +
+
+`; + +exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = ` +
+
+ + + + + Alert + + + +
+
+ + 2 min ago + +
+
+ +
+
+
+
+`; + +exports[`EuiNotificationEventMeta props healthStatus is rendered 1`] = ` +
+
+ + + + Alert + + + +
+
+ + 2 min ago + +
+
+`; + +exports[`EuiNotificationEventMeta props isRead is rendered 1`] = ` +
+
+ + + + + Alert + + + +
+
+ + 2 min ago + +
+
+`; + +exports[`EuiNotificationEventMeta props logoCloud is rendered 1`] = ` +
+
+ + + + + Alert + + + +
+
+ + 2 min ago + +
+
+`; + +exports[`EuiNotificationEventMeta props severity is rendered 1`] = ` +
+
+ + + + Alert: severity + + + +
+
+ + 2 min ago + +
+
+`; diff --git a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap new file mode 100644 index 000000000000..c5ec1e154e06 --- /dev/null +++ b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiNotificationEventReadButton is rendered 1`] = ` + +`; + +exports[`EuiNotificationEventReadButton renders isRead to false 1`] = ` + +`; diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx new file mode 100644 index 000000000000..79bdaebb7b6e --- /dev/null +++ b/src/components/notification/notification_event_meta.test.tsx @@ -0,0 +1,104 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render } from 'enzyme'; +import { EuiNotificationEventMeta } from './notification_event_meta'; +import { EuiContextMenuItem } from '../context_menu'; + +describe('EuiNotificationEventMeta', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + test('severity is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('isRead is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('healthStatus is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('logoCloud is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('contextMenuItems are rendered', () => { + const contextMenuItems = [ + + Mark as read + , + + View messages like this + , + + Don’t notify me about this + , + ]; + + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index cb0b9b2bfa78..0b5c75ba1dbf 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -22,7 +22,7 @@ import { EuiIcon } from '../icon'; import { EuiBadge } from '../badge'; import { EuiPopover } from '../popover'; import { EuiButtonIcon } from '../button'; -import { EuiContextMenuPanel, EuiContextMenuItemProps } from '../context_menu'; +import { EuiContextMenuPanel } from '../context_menu'; import { EuiI18n } from '../i18n'; import { EuiNotificationEventReadButton } from './notification_event_read_button'; @@ -60,7 +60,7 @@ export type EuiNotificationEventMetaProps = { /** * An array of context menu items. See #EuiContextMenuItem */ - contextMenuItems?: EuiContextMenuItemProps[]; + contextMenuItems?: ReactElement[]; }; export const EuiNotificationEventMeta: FunctionComponent = ({ @@ -124,7 +124,7 @@ export const EuiNotificationEventMeta: FunctionComponent } closePopover={() => setIsPopoverOpen(false)}> - + )} diff --git a/src/components/notification/notification_event_read_button.test.tsx b/src/components/notification/notification_event_read_button.test.tsx new file mode 100644 index 000000000000..90a3b29c92b8 --- /dev/null +++ b/src/components/notification/notification_event_read_button.test.tsx @@ -0,0 +1,50 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render, mount } from 'enzyme'; + +import { EuiNotificationEventReadButton } from './notification_event_read_button'; + +describe('EuiNotificationEventReadButton', () => { + test('is rendered', () => { + const component = render( + {}} /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('renders isRead to false', () => { + const component = render( + {}} /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('onClick fires for buttons', () => { + const handler = jest.fn(); + const component = mount( + + ); + component.find('button').simulate('click'); + expect(handler.mock.calls.length).toEqual(1); + }); +}); diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index c5f13efdf0b7..d0183479dbed 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -47,6 +47,7 @@ export const EuiNotificationEventReadButton: FunctionComponent )} From f52b1f1821e11fa298345beee65322af50ab27a5 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 27 Jan 2021 11:08:22 +0000 Subject: [PATCH 08/23] Update src/components/notification/notification_event_meta.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/notification/notification_event_meta.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 0b5c75ba1dbf..fb453c02037f 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -60,7 +60,7 @@ export type EuiNotificationEventMetaProps = { /** * An array of context menu items. See #EuiContextMenuItem */ - contextMenuItems?: ReactElement[]; + contextMenuItems?: EuiContextMenuPanelProps['items']; }; export const EuiNotificationEventMeta: FunctionComponent = ({ From 1d72b7f8370ffbe4fed0b81903afe87a588fbf5c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 27 Jan 2021 12:51:48 +0000 Subject: [PATCH 09/23] Improving code based on PR review --- .../notification_events.js | 3 +- .../notification_events_example.js | 4 +- src/components/index.js | 5 +- .../notification_event_meta.test.tsx.snap | 54 ++++++++++++++----- ...tification_event_read_button.test.tsx.snap | 2 + .../_notification_event_meta.scss | 4 +- .../notification/notification_event_meta.tsx | 21 ++++++-- .../notification_event_read_button.tsx | 1 + 8 files changed, 68 insertions(+), 26 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index a71adcaf4d46..7300d18648e0 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import { - EuiNotificationEventMeta, EuiPanel, EuiSpacer, EuiTitle, EuiContextMenuItem, } from '../../../../src/components'; +import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta'; + export default () => { const [isRead, setIsRead] = useState(false); diff --git a/src-docs/src/views/notification_events/notification_events_example.js b/src-docs/src/views/notification_events/notification_events_example.js index 3f6730303150..6d8a3b1c9a87 100644 --- a/src-docs/src/views/notification_events/notification_events_example.js +++ b/src-docs/src/views/notification_events/notification_events_example.js @@ -1,7 +1,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiNotificationEventMeta } from '../../../../src/components'; +import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta'; import { EuiContextMenuItem } from '../../../../src/components/context_menu/'; import Notification from './notification_events'; @@ -9,7 +9,7 @@ const notificationSource = require('!!raw-loader!./notification_events'); const notificationHtml = renderToHtml(Notification); export const NotificationEventsExample = { - title: 'Notification Events', + title: 'Notification events', isNew: true, sections: [ { diff --git a/src/components/index.js b/src/components/index.js index 485ba4474c81..26e2d2ad5c85 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -240,10 +240,7 @@ export { export { EuiMutationObserver } from './observer/mutation_observer'; -export { - EuiNotificationEventMeta, - EuiNotificationEventReadButton, -} from './notification/'; +export { EuiNotificationEventReadButton } from './notification'; export { EuiOutsideClickDetector } from './outside_click_detector'; diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap index 6f0c8fade96f..30a1a9d455e2 100644 --- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap +++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap @@ -4,7 +4,9 @@ exports[`EuiNotificationEventMeta is rendered 1`] = `
-
+
@@ -19,7 +21,9 @@ exports[`EuiNotificationEventMeta is rendered 1`] = `
-
+
@@ -33,7 +37,9 @@ exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = `
-
+
@@ -51,7 +57,9 @@ exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = `
-
+
@@ -59,13 +67,18 @@ exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = `
-
+
@@ -156,7 +178,9 @@ exports[`EuiNotificationEventMeta props logoCloud is rendered 1`] = `
-
+
@@ -174,7 +198,9 @@ exports[`EuiNotificationEventMeta props logoCloud is rendered 1`] = `
-
+
@@ -188,7 +214,9 @@ exports[`EuiNotificationEventMeta props severity is rendered 1`] = `
-
+
@@ -203,7 +231,9 @@ exports[`EuiNotificationEventMeta props severity is rendered 1`] = `
-
+
diff --git a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap index c5ec1e154e06..85117a3a07db 100644 --- a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap +++ b/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap @@ -6,6 +6,7 @@ exports[`EuiNotificationEventReadButton is rendered 1`] = ` class="euiButtonIcon euiButtonIcon--primary euiNotificationEventReadButton euiNotificationEventReadButton--isRead" data-test-subj="notificationEventReadButton" disabled="" + title="Mark as read" type="button" > div > * + * { + &__section > * + * { margin-left: $euiSizeS; } &__time { font-size: $euiFontSizeXS; - color: $euiColorDarkShade; + color: $euiTextSubduedColor; } } diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index fb453c02037f..62783fdefeb4 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -17,14 +17,15 @@ * under the License. */ -import React, { FunctionComponent, useState, ReactElement } from 'react'; +import React, { FunctionComponent, useState } from 'react'; import { EuiIcon } from '../icon'; import { EuiBadge } from '../badge'; import { EuiPopover } from '../popover'; import { EuiButtonIcon } from '../button'; -import { EuiContextMenuPanel } from '../context_menu'; +import { EuiContextMenuPanel, EuiContextMenuPanelProps } from '../context_menu'; import { EuiI18n } from '../i18n'; import { EuiNotificationEventReadButton } from './notification_event_read_button'; +import { htmlIdGenerator } from '../../services'; export type EuiNotificationEventMetaProps = { /** @@ -55,6 +56,9 @@ export type EuiNotificationEventMetaProps = { */ time: string; + /** + * Applies an `onClick` handler to the `read` indicator + */ onRead?: () => void; /** @@ -79,9 +83,11 @@ export const EuiNotificationEventMeta: FunctionComponent -
+
{typeof isRead === 'boolean' && ( -
+
{time} {contextMenuItems.length > 0 && ( ( setIsPopoverOpen(!isPopoverOpen)} + data-test-subj="notificationEventMetaButton" /> )} diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index d0183479dbed..435aeecb5b11 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -43,6 +43,7 @@ export const EuiNotificationEventReadButton: FunctionComponent ( Date: Wed, 27 Jan 2021 18:17:37 +0000 Subject: [PATCH 10/23] More PR review --- .../notification_events.js | 10 +-- .../notification_event_meta.test.tsx.snap | 88 +++++++++++-------- .../_notification_event_read_button.scss | 14 +-- .../notification_event_meta.test.tsx | 20 +++-- .../notification/notification_event_meta.tsx | 28 +++--- .../notification_event_read_button.test.tsx | 6 +- .../notification_event_read_button.tsx | 17 ++-- 7 files changed, 99 insertions(+), 84 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index 7300d18648e0..29fc8e2be226 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -46,9 +46,9 @@ export default () => { 2 min ago} isRead={isRead} onRead={onRead} contextMenuItems={contextMenuItems} @@ -63,9 +63,9 @@ export default () => { 2 min ago} isRead={isRead} onRead={onRead} /> @@ -77,7 +77,7 @@ export default () => { - + 2 min ago} /> ); diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap index 30a1a9d455e2..92cc706961c8 100644 --- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap +++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap @@ -27,13 +27,15 @@ exports[`EuiNotificationEventMeta is rendered 1`] = ` - 2 min ago + + 2 min ago +
`; -exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = ` +exports[`EuiNotificationEventMeta props badgeColor is rendered 1`] = `
@@ -41,10 +43,8 @@ exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = ` class="euiNotificationEventMeta__section" > - - 2 min ago + + 2 min ago + -
-
- -
-
`; -exports[`EuiNotificationEventMeta props healthStatus is rendered 1`] = ` +exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = `
@@ -101,8 +79,10 @@ exports[`EuiNotificationEventMeta props healthStatus is rendered 1`] = ` class="euiNotificationEventMeta__section" > + - 2 min ago + + 2 min ago + +
+
+ +
+
`; @@ -168,7 +174,9 @@ exports[`EuiNotificationEventMeta props isRead is rendered 1`] = ` - 2 min ago + + 2 min ago +
@@ -204,7 +212,9 @@ exports[`EuiNotificationEventMeta props logoCloud is rendered 1`] = ` - 2 min ago + + 2 min ago +
@@ -237,7 +247,9 @@ exports[`EuiNotificationEventMeta props severity is rendered 1`] = ` - 2 min ago + + 2 min ago +
diff --git a/src/components/notification/_notification_event_read_button.scss b/src/components/notification/_notification_event_read_button.scss index 0df56e9277e8..d9c0331b8222 100644 --- a/src/components/notification/_notification_event_read_button.scss +++ b/src/components/notification/_notification_event_read_button.scss @@ -1,11 +1,5 @@ -.euiNotificationEventReadButton { - &--isUnread svg { - fill: $euiColorPrimary; - } - - &--isRead svg { - fill: transparent; - stroke-width: 1px; - stroke: $euiBorderColor; - } +.euiNotificationEventReadButton--isRead svg { + fill: transparent; + stroke-width: 1px; + stroke: $euiBorderColor; } diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx index 79bdaebb7b6e..71a7f9be406f 100644 --- a/src/components/notification/notification_event_meta.test.tsx +++ b/src/components/notification/notification_event_meta.test.tsx @@ -25,7 +25,7 @@ import { EuiContextMenuItem } from '../context_menu'; describe('EuiNotificationEventMeta', () => { test('is rendered', () => { const component = render( - + 2 min ago} /> ); expect(component).toMatchSnapshot(); @@ -36,7 +36,7 @@ describe('EuiNotificationEventMeta', () => { const component = render( 2 min ago} severity="severity" /> ); @@ -46,18 +46,22 @@ describe('EuiNotificationEventMeta', () => { test('isRead is rendered', () => { const component = render( - + 2 min ago} + isRead={true} + /> ); expect(component).toMatchSnapshot(); }); - test('healthStatus is rendered', () => { + test('badgeColor is rendered', () => { const component = render( 2 min ago} + badgeColor="secondary" /> ); @@ -68,7 +72,7 @@ describe('EuiNotificationEventMeta', () => { const component = render( 2 min ago} iconType="logoCloud" /> ); @@ -92,7 +96,7 @@ describe('EuiNotificationEventMeta', () => { const component = render( 2 min ago} iconType="logoCloud" contextMenuItems={contextMenuItems} /> diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 62783fdefeb4..2ae06a1b4a6f 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -17,8 +17,8 @@ * under the License. */ -import React, { FunctionComponent, useState } from 'react'; -import { EuiIcon } from '../icon'; +import React, { FunctionComponent, useState, ReactNode } from 'react'; +import { EuiIcon, IconType, IconColor } from '../icon'; import { EuiBadge } from '../badge'; import { EuiPopover } from '../popover'; import { EuiButtonIcon } from '../button'; @@ -29,32 +29,32 @@ import { htmlIdGenerator } from '../../services'; export type EuiNotificationEventMetaProps = { /** - * Type of event (e.g. "Alert", "Cloud", etc..) + * Type of event (e.g. "Alert", "Cloud", etc..). Appears inside a badge. */ type: string; /** - * Type of severity (e.g. "Critical", "Cloud", etc..) + * Type of severity (e.g. "Critical", "Warning", etc..) */ severity?: string; /** - * The read state of the event + * Shows an indicator of the read state of the event. Leave as `undefined` to hide the indicator. */ isRead?: boolean | undefined; /** - * Changes the color of the badge + * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`. */ - healthStatus?: 'secondary' | 'warning' | 'danger'; + badgeColor?: IconColor; /** * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`. */ - iconType?: string; + iconType?: IconType; /** * Indicates when was the event received */ - time: string; + time: ReactNode; /** * Applies an `onClick` handler to the `read` indicator @@ -72,33 +72,33 @@ export const EuiNotificationEventMeta: FunctionComponent { const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const id = htmlIdGenerator()(); + const onMarkAsRead = () => { onRead && onRead(); }; - const id = htmlIdGenerator()(); - return (
{typeof isRead === 'boolean' && ( )} {iconType && } {type && ( - + {severity ? `${type}: ${severity}` : type} )} diff --git a/src/components/notification/notification_event_read_button.test.tsx b/src/components/notification/notification_event_read_button.test.tsx index 90a3b29c92b8..623e7e97f8ae 100644 --- a/src/components/notification/notification_event_read_button.test.tsx +++ b/src/components/notification/notification_event_read_button.test.tsx @@ -25,7 +25,7 @@ import { EuiNotificationEventReadButton } from './notification_event_read_button describe('EuiNotificationEventReadButton', () => { test('is rendered', () => { const component = render( - {}} /> + {}} /> ); expect(component).toMatchSnapshot(); @@ -33,7 +33,7 @@ describe('EuiNotificationEventReadButton', () => { test('renders isRead to false', () => { const component = render( - {}} /> + {}} /> ); expect(component).toMatchSnapshot(); @@ -42,7 +42,7 @@ describe('EuiNotificationEventReadButton', () => { test('onClick fires for buttons', () => { const handler = jest.fn(); const component = mount( - + ); component.find('button').simulate('click'); expect(handler.mock.calls.length).toEqual(1); diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index 435aeecb5b11..bca1aa9d4d08 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -18,18 +18,22 @@ */ import React, { FunctionComponent } from 'react'; -import { EuiButtonIcon } from '../button'; +import { EuiButtonIcon, EuiButtonIconProps } from '../button'; import { EuiI18n } from '../i18n'; import classNames from 'classnames'; -export type EuiNotificationEventReadButtonProps = { - onMarkAsRead: () => void; +export type EuiNotificationEventReadButtonProps = Omit< + EuiButtonIconProps, + 'iconType' +> & { isRead: boolean; + onClick: () => void; }; export const EuiNotificationEventReadButton: FunctionComponent = ({ isRead, - onMarkAsRead, + onClick, + ...rest }) => { const classesReadState = classNames('euiNotificationEventReadButton', { 'euiNotificationEventReadButton--isRead': isRead, @@ -42,13 +46,14 @@ export const EuiNotificationEventReadButton: FunctionComponent {(markAsRead: string) => ( )} From 7416eb702affbf48a0e9890e6ceb802d704946ed Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 27 Jan 2021 18:52:12 +0000 Subject: [PATCH 11/23] Better description --- src/components/notification/notification_event_meta.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 2ae06a1b4a6f..8d1d559d9d17 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -29,11 +29,11 @@ import { htmlIdGenerator } from '../../services'; export type EuiNotificationEventMetaProps = { /** - * Type of event (e.g. "Alert", "Cloud", etc..). Appears inside a badge. + * Type of event (e.g. "Alert", "Cloud", etc..). Shows inside a badge. */ type: string; /** - * Type of severity (e.g. "Critical", "Warning", etc..) + * Type of severity (e.g. "Critical", "Warning", etc..). Shows as a text after the `type` following the format "Alert: Critical". */ severity?: string; /** From 62648ca114dfc9adfc4716d0b5199820447c602c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jan 2021 17:00:13 +0000 Subject: [PATCH 12/23] Update src/components/notification/notification_event_meta.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/notification/notification_event_meta.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 8d1d559d9d17..95a900915765 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -44,7 +44,7 @@ export type EuiNotificationEventMetaProps = { /** * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`. */ - badgeColor?: IconColor; + badgeColor?: EuiBadgeProps['color']; /** * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`. From 3db343ed66202dca6581d20f91c9863e6361b150 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jan 2021 17:13:23 +0000 Subject: [PATCH 13/23] Update src-docs/src/views/notification_events/notification_events.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/notification_events/notification_events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index 29fc8e2be226..52a6dda774ef 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -48,7 +48,7 @@ export default () => { severity="Critical" badgeColor="danger" iconType="logoCloud" - time={2 min ago} + time="2 min ago" isRead={isRead} onRead={onRead} contextMenuItems={contextMenuItems} From 89d36ff0d0b01257f6896dffe126c79abba82e5e Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 29 Jan 2021 11:03:04 +0000 Subject: [PATCH 14/23] Badge 100% width --- .../notification_events.js | 6 ++--- .../notification_event_meta.test.tsx.snap | 12 +++++----- .../_notification_event_meta.scss | 22 +++++++++++++++++-- .../notification/notification_event_meta.tsx | 4 +++- 4 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index 29fc8e2be226..cb8d3b81f463 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -44,8 +44,8 @@ export default () => { 2 min ago} @@ -62,7 +62,7 @@ export default () => { 2 min ago} diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap index 92cc706961c8..7b60ff3c487c 100644 --- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap +++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiNotificationEventMeta is rendered 1`] = ` class="euiNotificationEventMeta__section" > * + * { - margin-left: $euiSizeS; + &__section { + > * + * { + margin-left: $euiSizeS; + } + + &:first-child { + display: flex; + flex: 1; + align-items: center; + } + + &:last-child { + margin-left: $euiSize; + } + } + + &__badge { + max-width: 100%; + display: inline-grid; } &__time { diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 8d1d559d9d17..0406c3ef65d7 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -98,7 +98,9 @@ export const EuiNotificationEventMeta: FunctionComponent} {type && ( - + {severity ? `${type}: ${severity}` : type} )} From 3c5d68d62f21f63cb8397cebe7bafc090130feb0 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 29 Jan 2021 12:17:11 +0000 Subject: [PATCH 15/23] ES lint --- src/components/notification/notification_event_meta.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 750a028503ca..7fe746d4aedc 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -18,8 +18,8 @@ */ import React, { FunctionComponent, useState, ReactNode } from 'react'; -import { EuiIcon, IconType, IconColor } from '../icon'; -import { EuiBadge } from '../badge'; +import { EuiIcon, IconType } from '../icon'; +import { EuiBadge, EuiBadgeProps } from '../badge'; import { EuiPopover } from '../popover'; import { EuiButtonIcon } from '../button'; import { EuiContextMenuPanel, EuiContextMenuPanelProps } from '../context_menu'; From 0cffbcf12a1baaacb36327ce6ac8aa331f902ba2 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 29 Jan 2021 15:08:01 +0000 Subject: [PATCH 16/23] Read and unread states --- .../notification_events/notification_events.js | 2 +- .../notification_event_meta.test.tsx.snap | 5 ++--- .../notification_event_read_button.test.tsx.snap | 7 +++---- .../notification_event_read_button.tsx | 15 ++++++++------- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/notification_events/notification_events.js b/src-docs/src/views/notification_events/notification_events.js index e47015a497fa..985d8e50d1c9 100644 --- a/src-docs/src/views/notification_events/notification_events.js +++ b/src-docs/src/views/notification_events/notification_events.js @@ -13,7 +13,7 @@ export default () => { const [isRead, setIsRead] = useState(false); const onRead = () => { - setIsRead(true); + setIsRead(!isRead); }; const panelStyle = { maxWidth: '400px' }; diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap index 7b60ff3c487c..1d47a56337f0 100644 --- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap +++ b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap @@ -141,11 +141,10 @@ exports[`EuiNotificationEventMeta props isRead is rendered 1`] = ` class="euiNotificationEventMeta__section" >
`; -exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = ` +exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = `
-
-
diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx index 1cd9a194a643..f40a896aba9b 100644 --- a/src/components/notification/notification_event_meta.test.tsx +++ b/src/components/notification/notification_event_meta.test.tsx @@ -18,9 +18,10 @@ */ import React from 'react'; -import { render } from 'enzyme'; +import { mount, render } from 'enzyme'; import { EuiNotificationEventMeta } from './notification_event_meta'; -import { EuiContextMenuItem } from '../context_menu'; +import { EuiContextMenuPanel, EuiContextMenuItem } from '../context_menu'; +import { findTestSubject, takeMountedSnapshot } from '../../test'; describe('EuiNotificationEventMeta', () => { test('is rendered', () => { @@ -88,7 +89,7 @@ describe('EuiNotificationEventMeta', () => { expect(component).toMatchSnapshot(); }); - test('contextMenuItems are rendered', () => { + test('contextMenuItems are rendered', () => { const contextMenuItems = [ Mark as read @@ -101,7 +102,7 @@ describe('EuiNotificationEventMeta', () => { , ]; - const component = render( + const component = mount( 2 min ago} @@ -111,7 +112,37 @@ describe('EuiNotificationEventMeta', () => { /> ); - expect(component).toMatchSnapshot(); + expect(component.find(EuiContextMenuPanel)).toHaveLength(0); + findTestSubject(component, 'notificationEventMetaButton').simulate( + 'click' + ); + expect(component.find(EuiContextMenuPanel)).toHaveLength(1); + + expect( + takeMountedSnapshot(component.find(EuiContextMenuPanel)) + ).toMatchSnapshot(); + }); + }); + + describe('behavior', () => { + it('triggers the onRead callback', () => { + const onRead = jest.fn(); + + const component = mount( + 2 min ago} + isRead={true} + onRead={onRead} + /> + ); + + findTestSubject(component, 'notificationEventReadButton').simulate( + 'click' + ); + + expect(onRead).toHaveBeenCalledTimes(1); }); }); }); From d0692f4e2db230817a91f461a2e6dfeb0ed84d72 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 10 Feb 2021 22:43:54 +0000 Subject: [PATCH 22/23] Update src/components/notification/notification_event_meta.tsx Co-authored-by: Chandler Prall --- src/components/notification/notification_event_meta.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx index 9fe7a67f0e39..62820af60b9e 100644 --- a/src/components/notification/notification_event_meta.tsx +++ b/src/components/notification/notification_event_meta.tsx @@ -100,7 +100,7 @@ export const EuiNotificationEventMeta: FunctionComponent { - onRead && onRead(); + onRead?.(); }; const ariaAttribute = iconAriaLabel From 70c26a7c76ce2582e6e20dbd2d3697d7b34671da Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 10 Feb 2021 22:44:12 +0000 Subject: [PATCH 23/23] Update src/components/notification/notification_event_read_button.tsx Co-authored-by: Chandler Prall --- src/components/notification/notification_event_read_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification_event_read_button.tsx b/src/components/notification/notification_event_read_button.tsx index 8a5d548fbf7a..6d82346a179f 100644 --- a/src/components/notification/notification_event_read_button.tsx +++ b/src/components/notification/notification_event_read_button.tsx @@ -35,7 +35,7 @@ export type EuiNotificationEventReadButtonProps = Omit< */ onClick: () => void; /** - * A unique name for the event to be used in aria attributes (e.g. "alert-critical-01", "cloud-no-severity-12", etc..). + * A unique, human-friendly name for the event to be used in aria attributes (e.g. "alert-critical-01", "cloud-no-severity-12", etc..). */ eventName: string; };