From 2faaf487a9ae4954bff487a3a9eaa709ac9ec886 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 21 Dec 2023 12:27:29 -0800 Subject: [PATCH] Remove `EuiNotificationEvent` component --- src-docs/src/routes.js | 3 - src-docs/src/views/_index.scss | 1 - .../_notification_event.scss | 78 -- .../notification_event/notification_event.js | 59 -- .../notification_event_example.js | 34 - .../notification_event_flexible.js | 148 ---- .../notification_event_props_methods.js | 71 -- .../notification_event/notifications_feed.js | 169 ---- src/components/index.scss | 1 - src/components/index.ts | 2 - .../notification_event.test.tsx.snap | 775 ------------------ .../notification_event_meta.test.tsx.snap | 187 ----- ...tification_event_read_button.test.tsx.snap | 35 - src/components/notification/_index.scss | 5 - .../notification/_notification_event.scss | 40 - .../_notification_event_messages.scss | 17 - .../_notification_event_meta.scss | 44 - .../_notification_event_read_button.scss | 5 - .../_notification_event_read_icon.scss | 12 - src/components/notification/index.ts | 9 - .../notification/notification_event.a11y.tsx | 111 --- .../notification/notification_event.test.tsx | 219 ----- .../notification/notification_event.tsx | 216 ----- .../notification_event_messages.tsx | 95 --- .../notification_event_meta.test.tsx | 108 --- .../notification/notification_event_meta.tsx | 169 ---- .../notification_event_read_button.test.tsx | 55 -- .../notification_event_read_button.tsx | 80 -- .../notification_event_read_icon.tsx | 72 -- 29 files changed, 2820 deletions(-) delete mode 100644 src-docs/src/views/notification_event/_notification_event.scss delete mode 100644 src-docs/src/views/notification_event/notification_event.js delete mode 100644 src-docs/src/views/notification_event/notification_event_example.js delete mode 100644 src-docs/src/views/notification_event/notification_event_flexible.js delete mode 100644 src-docs/src/views/notification_event/notification_event_props_methods.js delete mode 100644 src-docs/src/views/notification_event/notifications_feed.js delete mode 100644 src/components/notification/__snapshots__/notification_event.test.tsx.snap delete mode 100644 src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap delete mode 100644 src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap delete mode 100644 src/components/notification/_index.scss delete mode 100644 src/components/notification/_notification_event.scss delete mode 100644 src/components/notification/_notification_event_messages.scss delete mode 100644 src/components/notification/_notification_event_meta.scss delete mode 100644 src/components/notification/_notification_event_read_button.scss delete mode 100644 src/components/notification/_notification_event_read_icon.scss delete mode 100644 src/components/notification/index.ts delete mode 100644 src/components/notification/notification_event.a11y.tsx delete mode 100644 src/components/notification/notification_event.test.tsx delete mode 100644 src/components/notification/notification_event.tsx delete mode 100644 src/components/notification/notification_event_messages.tsx delete mode 100644 src/components/notification/notification_event_meta.test.tsx delete mode 100644 src/components/notification/notification_event_meta.tsx delete mode 100644 src/components/notification/notification_event_read_button.test.tsx delete mode 100644 src/components/notification/notification_event_read_button.tsx delete mode 100644 src/components/notification/notification_event_read_icon.tsx diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 7f8e6d7f38f..e4747466471 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -169,8 +169,6 @@ import { ModalExample } from './views/modal/modal_example'; import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example'; -import { NotificationEventExample } from './views/notification_event/notification_event_example'; - import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example'; import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example'; @@ -577,7 +575,6 @@ const navigation = [ ImageExample, ListGroupExample, LoadingExample, - NotificationEventExample, ProgressExample, SkeletonExample, StatExample, diff --git a/src-docs/src/views/_index.scss b/src-docs/src/views/_index.scss index 0fd9e4dbd8b..cfb24aa99a1 100644 --- a/src-docs/src/views/_index.scss +++ b/src-docs/src/views/_index.scss @@ -9,7 +9,6 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9); @import './empty_prompt/empty_prompt'; @import './horizontal_rule/horizontal_rule'; @import './page_template/page'; -@import './notification_event/notification_event'; @import './spacer/spacer'; @import './text/text_scaling'; @import './tree_view/tree_view'; diff --git a/src-docs/src/views/notification_event/_notification_event.scss b/src-docs/src/views/notification_event/_notification_event.scss deleted file mode 100644 index 17ac843b87a..00000000000 --- a/src-docs/src/views/notification_event/_notification_event.scss +++ /dev/null @@ -1,78 +0,0 @@ -.guideDemo__notificationEventCircleIndicator { - display: inline-block; - width: $euiSize; - height: $euiSize; - background: $euiColorPrimary; - color: $euiColorEmptyShade; - font-size: $euiSizeM; - line-height: $euiSize; - text-align: center; - border-radius: 50%; -} - -.guideDemo__notificationEventHighlight { - background: transparentize($euiColorPrimary, .9); - border-radius: $euiBorderRadiusSmall; - padding: $euiSizeXS; -} - -.guideDemo__notificationEvent { - @include euiFontSizeS; - display: flex; - flex-direction: column; - - > * { - display: flex; - } - - .guideDemo__notificationEventCircleIndicator { - margin-right: $euiSizeXS; - } -} - -.guideDemo__notificationEventTopRow { - display: flex; - - > * { - position: relative; - margin-right: $euiSizeXS; - - &:last-child { - margin-right: 0; - } - } - - .guideDemo__notificationEventIcon { - margin: 0 $euiSizeXS; - } - - .guideDemo__notificationEventCircleIndicator { - position: absolute; - top: -$euiSizeS; - left: 0; - } -} - -.guideDemo__notificationEventMeta { - display: flex; - width: 100%; - margin: 0 $euiSizeS; - - .euiNotificationEventMeta { - width: 100%; - } -} - -.guideDemo__notificationEventSections { - margin-left: $euiSizeXL + $euiSizeXS; - display: flex; - flex-direction: column; - - > * { - margin-top: $euiSizeS; - } -} - -.guideDemo__notificationEventBadge { - flex: 1; -} diff --git a/src-docs/src/views/notification_event/notification_event.js b/src-docs/src/views/notification_event/notification_event.js deleted file mode 100644 index f9adf183d27..00000000000 --- a/src-docs/src/views/notification_event/notification_event.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useState } from 'react'; -import { EuiPanel } from '../../../../src/components/panel'; -import { EuiContextMenuItem } from '../../../../src/components/context_menu'; -import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event'; -import { useGeneratedHtmlId } from '../../../../src/services'; - -export default () => { - const [isRead, setIsRead] = useState(false); - - const onRead = (id, isRead) => { - setIsRead(!isRead); - }; - - const reportNotificationEventId = useGeneratedHtmlId({ - prefix: 'reportNotificationEvent', - }); - - const onOpenContextMenu = (id) => { - return [ - onRead(id, isRead)} - > - {isRead ? 'Mark as unread' : 'Mark as read'} - , - - {}}> - View messages like this - , - - {}}> - Don’t notify me about this - , - ]; - }; - - return ( - - {}} - onClickTitle={() => {}} - /> - - ); -}; diff --git a/src-docs/src/views/notification_event/notification_event_example.js b/src-docs/src/views/notification_event/notification_event_example.js deleted file mode 100644 index cb952dd5bef..00000000000 --- a/src-docs/src/views/notification_event/notification_event_example.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import { EuiCallOut, EuiLink } from '../../../../src/components'; - -export const NotificationEventExample = { - title: 'Notification event', - isDeprecated: true, - sections: [ - { - text: ( - -

- EuiNotificationEvent is being deprecated due to low - usage and high maintenance requirements. -

-

- If necessary, we recommend{' '} - - copying the component to your application - - . The component will be permanently removed in December 2023. -

- - ), - }, - ], -}; diff --git a/src-docs/src/views/notification_event/notification_event_flexible.js b/src-docs/src/views/notification_event/notification_event_flexible.js deleted file mode 100644 index d8b88b6ad17..00000000000 --- a/src-docs/src/views/notification_event/notification_event_flexible.js +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useState } from 'react'; -import { EuiPanel } from '../../../../src/components/panel'; -import { EuiSpacer } from '../../../../src/components/spacer'; -import { EuiButtonGroup } from '../../../../src/components/button'; -import { EuiContextMenuItem } from '../../../../src/components/context_menu'; -import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event'; - -const notificationEventsData = [ - { - id: 'report', - type: 'Report', - iconType: 'logoKibana', - iconAriaLabel: 'Kibana', - time: '1 min ago', - title: '[Error Monitoring Report] is generated', - primaryAction: 'Download', - primaryActionProps: { - iconType: 'download', - }, - messages: ['The reported was generated at 17:12:16 GMT+4'], - isRead: false, - }, - { - id: 'alert', - type: 'Alert', - iconType: 'logoMaps', - severity: 'Warning', - iconAriaLabel: 'Maps', - badgeColor: 'warning', - time: '2 min ago', - title: '[Maps] Geo Alert', - messages: [ - 'The request completed at 12:32:33 GMT+4', - 'The request completed at 12:32:33 GMT+4', - 'A background request started at 12:32:33 GMT+4', - ], - isRead: false, - }, - - { - id: 'news', - type: 'News', - iconType: 'logoElastic', - iconAriaLabel: 'Elastic', - time: '3 min ago', - badgeColor: 'accent', - title: 'Search more, spend less', - messages: [ - 'Retain and search more data with searchable snapshots on low-cost object stores + a new cold data tier in 7.11.', - ], - isRead: false, - primaryAction: 'View and go', - }, -]; - -export default () => { - const [event, setEvent] = useState(notificationEventsData[0]); - - const onRead = (id, isRead) => { - const nextState = { ...event, isRead: !isRead }; - - setEvent(nextState); - }; - - const onOpenContextMenu = (id) => { - const { isRead } = event; - - return [ - onRead(id, isRead)} - > - {isRead ? 'Mark as unread' : 'Mark as read'} - , - - {}}> - View messages like this - , - - {}}> - Don’t notify me about this - , - ]; - }; - - const [toggleIdSelected, setToggleIdSelected] = useState('reportButton'); - - const toggleButtons = [ - { - id: 'reportButton', - label: 'Report', - }, - { - id: 'alertButton', - label: 'Alert', - }, - { - id: 'newsButton', - label: 'News', - }, - ]; - - const onChangeButtonGroup = (optionId) => { - setToggleIdSelected(optionId); - const eventId = optionId.replace('Button', ''); - const event = notificationEventsData.find((event) => event.id === eventId); - setEvent(event); - }; - - return ( - <> - - - - {}} - onClickTitle={event.id !== 'news' ? () => {} : undefined} - /> - - - ); -}; diff --git a/src-docs/src/views/notification_event/notification_event_props_methods.js b/src-docs/src/views/notification_event/notification_event_props_methods.js deleted file mode 100644 index 943a248861a..00000000000 --- a/src-docs/src/views/notification_event/notification_event_props_methods.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { EuiPanel } from '../../../../src/components/panel'; -import { EuiBadge } from '../../../../src/components/badge'; -import { EuiButtonIcon } from '../../../../src/components/button'; -import { EuiIcon } from '../../../../src/components/icon'; - -const CircleIndicator = ({ name }) => ( - {name} -); - -export default () => { - return ( - -
-
-
- -
- -
- - -
- -
- - - type: severity - -
- -
- - time -
- -
- -
-
-
-
- title -
-
- messages -
-
- primaryAction -
-
-
- - ); -}; diff --git a/src-docs/src/views/notification_event/notifications_feed.js b/src-docs/src/views/notification_event/notifications_feed.js deleted file mode 100644 index b532cc1a0f7..00000000000 --- a/src-docs/src/views/notification_event/notifications_feed.js +++ /dev/null @@ -1,169 +0,0 @@ -import React, { useState } from 'react'; -import { EuiPanel } from '../../../../src/components/panel'; -import { EuiSpacer } from '../../../../src/components/spacer'; -import { EuiButton } from '../../../../src/components/button'; -import { EuiContextMenuItem } from '../../../../src/components/context_menu'; -import { EuiNotificationEvent } from '../../../../src/components/notification/notification_event'; - -const notificationEventsData = [ - { - id: 'alert-01', - type: 'Alert', - severity: 'Warning', - iconType: 'logoMaps', - iconAriaLabel: 'Maps', - badgeColor: 'warning', - time: '1 min ago', - title: '[Maps] Geo Alert', - messages: [ - 'The request completed at 12:32:33 GMT+4', - 'The request completed at 12:32:33 GMT+4', - 'A background request started at 12:32:33 GMT+4', - ], - isRead: false, - }, - { - id: 'report-01', - type: 'Report', - iconType: 'logoKibana', - iconAriaLabel: 'Kibana', - time: '3 min ago', - title: '[Error Monitoring Report] is generated', - primaryAction: 'Download', - primaryActionProps: { - iconType: 'download', - }, - messages: [ - 'The reported was generated at 17:12:16 GMT+4 and due to an error it was was generated again at 17:13:17 GMT+4', - ], - isRead: false, - }, - { - id: 'news-01', - type: 'News', - iconType: 'logoElastic', - iconAriaLabel: 'Elastic', - time: '6 min ago', - badgeColor: 'accent', - title: 'Search more, spend less', - messages: [ - 'Retain and search more data with searchable snapshots on low-cost object stores + a new cold data tier in 7.11.', - ], - isRead: false, - primaryAction: 'View and go', - }, - { - id: 'alert-02', - type: 'Alert', - severity: 'Critical', - iconType: 'logoKibana', - iconAriaLabel: 'Kibana', - badgeColor: 'danger', - time: '8 min ago', - title: 'Index Threshold Alert', - messages: [ - '[prod-server-001] is above 300', - '[prod-server-001] is above 700', - ], - isRead: false, - }, - { - id: 'background-search-01', - type: 'Background Search', - iconType: 'logoKibana', - iconAriaLabel: 'Kibana', - time: '10 min ago', - title: '[Flights] Flight Count and Average Ticket Price', - messages: ['The request completed at 12:32:33 GMT+4'], - isRead: false, - }, -]; - -export default () => { - const [events, setEvents] = useState(notificationEventsData); - - const onRead = (id, isRead) => { - const nextState = events.map((event) => { - return event.id === id ? { ...event, isRead: !isRead } : event; - }); - - setEvents(nextState); - }; - - const onFilterByType = (type) => { - const nextState = events.filter((event) => type.includes(event.type)); - - setEvents(nextState); - }; - - const onOpenContextMenu = (id) => { - const { isRead, type } = events.find(({ id: eventId }) => eventId === id); - - return [ - onRead(id, isRead)} - > - {isRead ? 'Mark as unread' : 'Mark as read'} - , - - onFilterByType(type)} - > - View messages like this - , - - {}}> - Don’t notify me about this - , - ]; - }; - - const onResetData = () => { - setEvents(notificationEventsData); - }; - - const notificationEvents = events.map((event) => { - // we want to make the news title unclickable - const onClickTitle = event.type === 'News' ? undefined : () => {}; - - return ( - {}} - onClickTitle={onClickTitle} - /> - ); - }); - - return ( - <> - - Reset data - - - - {notificationEvents} - - - ); -}; diff --git a/src/components/index.scss b/src/components/index.scss index 4060be38d41..4286aaf51eb 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -8,7 +8,6 @@ @import 'empty_prompt/index'; @import 'form/index'; @import 'markdown_editor/index'; -@import 'notification/index'; @import 'tree_view/index'; @import 'side_nav/index'; @import 'search_bar/index'; diff --git a/src/components/index.ts b/src/components/index.ts index 8bb0c034309..6df86b5f8ac 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -112,8 +112,6 @@ export * from './modal'; export * from './observer/mutation_observer'; -export * from './notification'; - export * from './outside_click_detector'; export * from './overlay_mask'; diff --git a/src/components/notification/__snapshots__/notification_event.test.tsx.snap b/src/components/notification/__snapshots__/notification_event.test.tsx.snap deleted file mode 100644 index 2d2a2009c54..00000000000 --- a/src/components/notification/__snapshots__/notification_event.test.tsx.snap +++ /dev/null @@ -1,775 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiNotificationEvent is rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props badgeColor is rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props contextMenuItems are rendered 1`] = ` -
-
-
- - Context menu 1 for id: id - -
-
- - Context menu 2 for id: id - -
-
- - Context menu 3 for id: id - -
-
-
-`; - -exports[`EuiNotificationEvent props headingLevel is rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props iconAriaLabel is rendered 1`] = ` -
-
-
-
- - my icon aria label - - - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props iconType is rendered 1`] = ` -
-
-
-
-
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props isRead is rendered 1`] = ` -
-
- -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; - -exports[`EuiNotificationEvent props multiple messages are rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message 1 -

-
-
-
- -
-
-
-
-
-

- message 2 -

-
-
-

- message 3 -

-
-
-
-
-
-
-
-
-`; - -exports[`EuiNotificationEvent props primaryAction is rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
- -
-
-
-`; - -exports[`EuiNotificationEvent props primaryActionProps is rendered 1`] = ` -
-
-
-
- - - - Alert - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
- -
-
-
-`; - -exports[`EuiNotificationEvent props severity is rendered 1`] = ` -
-
-
-
- - - - Alert: severity - - - -
-
- - 1 min ago - -
-
-

- title -

-
-
-

- message -

-
-
-
-
-`; diff --git a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap b/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap deleted file mode 100644 index 3375b7a8bfe..00000000000 --- a/src/components/notification/__snapshots__/notification_event_meta.test.tsx.snap +++ /dev/null @@ -1,187 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiNotificationEventMeta is rendered 1`] = ` -
-
- - - - Alert - - - -
-
- - - 2 min ago - - -
-
-`; - -exports[`EuiNotificationEventMeta props badgeColor is rendered 1`] = ` -
-
- - - - Alert - - - -
-
- - - 2 min ago - - -
-
-`; - -exports[`EuiNotificationEventMeta props contextMenuItems are rendered 1`] = ` -
-
-
- - Mark as read - -
-
- - View messages like this - -
-
- - Don’t notify me about this - -
-
-
-`; - -exports[`EuiNotificationEventMeta props logoCloud is rendered 1`] = ` -
-
-
-
- - - 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 deleted file mode 100644 index 40409bdb818..00000000000 --- a/src/components/notification/__snapshots__/notification_event_read_button.test.tsx.snap +++ /dev/null @@ -1,35 +0,0 @@ -// 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/_index.scss b/src/components/notification/_index.scss deleted file mode 100644 index cb90b32d9db..00000000000 --- a/src/components/notification/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import './notification_event'; -@import './notification_event_meta'; -@import './notification_event_messages'; -@import './notification_event_read_button'; -@import './notification_event_read_icon'; diff --git a/src/components/notification/_notification_event.scss b/src/components/notification/_notification_event.scss deleted file mode 100644 index ae46569a817..00000000000 --- a/src/components/notification/_notification_event.scss +++ /dev/null @@ -1,40 +0,0 @@ -.euiNotificationEvent { - display: flex; - padding: $euiSizeM 0 $euiSizeM $euiSizeM; - border-bottom: $euiBorderThin; - - &:last-child { - border-bottom: none; - } - - &--withReadState { - padding: $euiSizeM 0 $euiSizeM $euiSizeS; - } -} - -.euiNotificationEvent__title { - @include euiTitle('xs'); - display: flex; - - // ensure links get the right color - &.euiLink { - color: $euiLinkColor; - } - - &--isRead { - color: $euiColorDarkShade !important; // stylelint-disable-line declaration-no-important - } -} - -.euiNotificationEvent__readButton { - margin-right: $euiSizeS; -} - -.euiNotificationEvent__content { - flex: 1; - - > * + * { - margin-top: $euiSizeS; - margin-right: $euiSizeM; - } -} diff --git a/src/components/notification/_notification_event_messages.scss b/src/components/notification/_notification_event_messages.scss deleted file mode 100644 index d36efef044b..00000000000 --- a/src/components/notification/_notification_event_messages.scss +++ /dev/null @@ -1,17 +0,0 @@ -.euiNotificationEventMessages { - font-size: $euiFontSizeS; - - &__accordion { - color: $euiColorDarkShade; - } - - &__accordionButton { - color: $euiLinkColor; - } - - &__accordionContent { - > * { - padding-top: $euiSizeS; - } - } -} \ No newline at end of file diff --git a/src/components/notification/_notification_event_meta.scss b/src/components/notification/_notification_event_meta.scss deleted file mode 100644 index 25f2e3ebb27..00000000000 --- a/src/components/notification/_notification_event_meta.scss +++ /dev/null @@ -1,44 +0,0 @@ -.euiNotificationEventMeta { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - margin-right: $euiSizeXS; - min-height: $euiSizeL; // ensures the same size of the read button to properly center align - - &--hasContextMenu { - padding-right: $euiSizeL; - } - - &__contextMenuWrapper { - position: absolute; - top: 0; - right: 0; - } - - &__section { - margin-right: $euiSizeS; - - &:first-child { - display: flex; - flex: 1; - align-items: center; - } - } - - &__icon { - margin-right: $euiSizeS; - } - - &__badge { - max-width: 100%; - display: inline-grid; // forces truncation of the badge - } - - &__time { - font-size: $euiFontSizeXS; - color: $euiTextSubduedColor; - } -} diff --git a/src/components/notification/_notification_event_read_button.scss b/src/components/notification/_notification_event_read_button.scss deleted file mode 100644 index d9c0331b822..00000000000 --- a/src/components/notification/_notification_event_read_button.scss +++ /dev/null @@ -1,5 +0,0 @@ -.euiNotificationEventReadButton--isRead svg { - fill: transparent; - stroke-width: 1px; - stroke: $euiBorderColor; -} diff --git a/src/components/notification/_notification_event_read_icon.scss b/src/components/notification/_notification_event_read_icon.scss deleted file mode 100644 index d8f5b721458..00000000000 --- a/src/components/notification/_notification_event_read_icon.scss +++ /dev/null @@ -1,12 +0,0 @@ -.euiNotificationEventReadIcon { - display: flex; - align-items: center; - height: $euiSizeL; - margin: 0 $euiSizeXS; -} - -.euiNotificationEventReadIcon--isRead svg { - fill: transparent; - stroke-width: 1px; - stroke: $euiBorderColor; -} diff --git a/src/components/notification/index.ts b/src/components/notification/index.ts deleted file mode 100644 index ef4487d0501..00000000000 --- a/src/components/notification/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export { EuiNotificationEvent } from './notification_event'; diff --git a/src/components/notification/notification_event.a11y.tsx b/src/components/notification/notification_event.a11y.tsx deleted file mode 100644 index 9078045967a..00000000000 --- a/src/components/notification/notification_event.a11y.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -/// -/// -/// - -import React, { useState } from 'react'; -import { EuiContextMenuItem } from '../context_menu'; -import { EuiNotificationEvent } from './notification_event'; -import { EuiPanel } from '../panel'; - -const NotificationEvent = () => { - const [isRead, setIsRead] = useState(false); - - const onRead = (id: string, isRead: boolean) => { - setIsRead(!isRead); - }; - - const onOpenContextMenu = (id: string) => { - return [ - onRead(id, isRead)} - > - {isRead ? 'Mark as unread' : 'Mark as read'} - , - - {}}> - View messages like this - , - - {}}> - Don’t notify me about this - , - ]; - }; - - return ( - - {}} - onClickTitle={() => {}} - /> - - ); -}; - -describe('EuiNotificationEvent', () => { - beforeEach(() => { - cy.viewport(1024, 768); // medium breakpoint - cy.realMount(); - cy.get('article.euiNotificationEvent').should('exist'); - }); - - describe('Automated accessibility check', () => { - it('has zero violations on first render', () => { - cy.checkAxe(); - }); - - it('has zero violations when popover is open', () => { - cy.get( - 'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]' - ).realClick(); - cy.get('div.euiPopover__panel').should('exist'); - cy.checkAxe(); - }); - - it('has zero violations after the Mark as read button is clicked', () => { - cy.get( - 'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]' - ).realClick(); - cy.get('div.euiPopover__panel').should('exist'); - cy.get('div.euiPopover__panel button').first().realClick(); - cy.checkAxe(); - }); - }); - - describe('Keyboard accessibility', () => { - it('has zero violations when the popover is opened by keyboard', () => { - cy.get( - 'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]' - ).focus(); - cy.realPress('Enter'); - cy.get('div.euiPopover__panel').should('exist'); - cy.checkAxe(); - cy.realPress('Escape'); - cy.get('div.euiPopover__panel').should('not.exist'); - cy.checkAxe(); - }); - }); -}); diff --git a/src/components/notification/notification_event.test.tsx b/src/components/notification/notification_event.test.tsx deleted file mode 100644 index 69c4ae5b1d4..00000000000 --- a/src/components/notification/notification_event.test.tsx +++ /dev/null @@ -1,219 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { mount } from 'enzyme'; -import { render } from '../../test/rtl'; - -import { - findTestSubject, - takeMountedSnapshot, - requiredProps, -} from '../../test'; -import { shouldRenderCustomStyles } from '../../test/internal'; - -import { EuiNotificationEvent } from './notification_event'; -import { EuiContextMenuPanel, EuiContextMenuItem } from '../context_menu'; - -describe('EuiNotificationEvent', () => { - const props = { - id: 'id', - type: 'Alert', - time: '1 min ago', - title: 'title', - messages: ['message'], - }; - - shouldRenderCustomStyles( - {}} - />, - { childProps: ['primaryActionProps'] } - ); - - test('is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('props', () => { - test('multiple messages are rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('isRead is rendered', () => { - const { container } = render( - {}} /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('severity is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('badgeColor is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('iconType is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('headingLevel is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('iconAriaLabel is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('primaryAction is rendered', () => { - const { container } = render( - {}} - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('primaryActionProps is rendered', () => { - const { container } = render( - {}} - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('contextMenuItems are rendered', () => { - const onOpenContextMenu = (id: string) => { - return [ - - Context menu 1 for id: {id} - , - - Context menu 2 for id: {id} - , - - Context menu 3 for id: {id} - , - ]; - }; - - const component = mount( - - ); - - expect(component.find(EuiContextMenuPanel)).toHaveLength(0); - findTestSubject(component, 'id-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( - - ); - - findTestSubject(component, 'id-notificationEventReadButton').simulate( - 'click' - ); - - expect(onRead).toHaveBeenCalledTimes(1); - }); - - it('triggers the onClickPrimaryAction callback', () => { - const onClickPrimaryAction = jest.fn(); - - const component = mount( - {}} - onClickPrimaryAction={onClickPrimaryAction} - primaryAction="primary action label" - /> - ); - - findTestSubject(component, 'id-notificationEventPrimaryAction').simulate( - 'click' - ); - - expect(onClickPrimaryAction).toHaveBeenCalledTimes(1); - }); - - it('triggers the onClickTitle callback', () => { - const onClickTitle = jest.fn(); - - const component = mount( - - ); - - findTestSubject(component, 'id-notificationEventTitle').simulate('click'); - - expect(onClickTitle).toHaveBeenCalledTimes(1); - }); - }); -}); diff --git a/src/components/notification/notification_event.tsx b/src/components/notification/notification_event.tsx deleted file mode 100644 index 3ec68e37535..00000000000 --- a/src/components/notification/notification_event.tsx +++ /dev/null @@ -1,216 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { - FunctionComponent, - ReactElement, - createElement, - HTMLAttributes, -} from 'react'; -import classNames from 'classnames'; - -import { CommonProps } from '../common'; - -import { - EuiNotificationEventMeta, - EuiNotificationEventMetaProps, -} from './notification_event_meta'; -import { - EuiNotificationEventMessages, - EuiNotificationEventMessagesProps, -} from './notification_event_messages'; -import { - EuiNotificationEventReadButton, - EuiNotificationEventReadButtonProps, -} from './notification_event_read_button'; -import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button'; -import { EuiLink } from '../link'; -import { EuiContextMenuItem, EuiContextMenuItemProps } from '../context_menu'; -import { useGeneratedHtmlId } from '../../services'; -import { EuiNotificationEventReadIcon } from './notification_event_read_icon'; - -export type EuiNotificationHeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - -/** - * @deprecated - */ -export type EuiNotificationEventProps = Omit< - EuiNotificationEventMetaProps, - 'onOpenContextMenu' | 'onRead' | 'eventName' | 'id' -> & - Omit< - EuiNotificationEventReadButtonProps, - 'onClick' | 'color' | 'eventName' | 'isRead' | 'id' - > & - CommonProps & - Omit, 'title'> & { - /** - * A unique identifier - */ - id: string; - /** - * The title of the event. - */ - title: string; - /** - * The heading level of the title. - */ - headingLevel?: EuiNotificationHeadingLevel; - /** - * Returns the `id` and applies an `onClick` handler to the title. - */ - onClickTitle?: (id: string) => void; - /** - * The label of the primary action - */ - primaryAction?: string; - /** - * Apply more props to the `primaryAction` button. See #EuiPrimaryActionProps. - */ - primaryActionProps?: EuiButtonEmptyProps; - /** - * Returns the `id` and applies an `onClick` handler to the `primaryAction`. - */ - onClickPrimaryAction?: (id: string) => void; - /** - * Notification messages as an array of strings. More than one message wraps in an accordion. - */ - messages: EuiNotificationEventMessagesProps['messages']; - /** - * Shows an indicator of the read state of the event. Leave as `undefined` to hide the indicator. - */ - isRead?: boolean | undefined; - /** - * Returns the `id` and `isRead` state. Applies an `onClick` handler to the `read` indicator. - */ - onRead?: (id: string, isRead: boolean) => void; - /** - * Provided the `id` of the event must return an array of #EuiContextMenuItem elements. - */ - onOpenContextMenu?: ( - id: string - ) => Array< - ReactElement - >; - }; - -/** - * @deprecated - EuiNotificationEvent is scheduled for deprecation due to low internal usage and high - * maintenance requirements. If necessary, we recommend copying this component into your own application. - * - * The component will be permanently removed in December 2023. - */ -export const EuiNotificationEvent: FunctionComponent< - EuiNotificationEventProps -> = ({ - id, - type, - severity, - badgeColor, - iconType, - iconAriaLabel, - time, - title, - isRead, - primaryAction, - primaryActionProps, - messages, - onRead, - onOpenContextMenu, - onClickTitle, - onClickPrimaryAction, - headingLevel = 'h2', - className, - ...rest -}) => { - const classes = classNames( - 'euiNotificationEvent', - { 'euiNotificationEvent--withReadState': typeof isRead === 'boolean' }, - className - ); - - const classesTitle = classNames('euiNotificationEvent__title', { - 'euiNotificationEvent__title--isRead': isRead, - }); - - const randomHeadingId = useGeneratedHtmlId(); - - const titleProps = { - id: randomHeadingId, - className: classesTitle, - 'data-test-subj': `${id}-notificationEventTitle`, - }; - - return ( -
- {typeof isRead === 'boolean' && ( -
- {!!onRead ? ( - onRead(id, isRead)} - eventName={title} - id={id} - /> - ) : ( - - )} -
- )} - -
- onOpenContextMenu(id) : undefined - } - eventName={title} - /> - - {onClickTitle ? ( - onClickTitle(id)} {...titleProps}> - {createElement(headingLevel, null, title)} - - ) : ( - createElement(headingLevel, titleProps, title) - )} - - - - {onClickPrimaryAction && primaryAction && ( -
- onClickPrimaryAction?.(id)} - data-test-subj={`${id}-notificationEventPrimaryAction`} - > - {primaryAction} - -
- )} -
-
- ); -}; diff --git a/src/components/notification/notification_event_messages.tsx b/src/components/notification/notification_event_messages.tsx deleted file mode 100644 index 7f2f791dcaa..00000000000 --- a/src/components/notification/notification_event_messages.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, useState } from 'react'; -import { EuiAccordion } from '../accordion'; -import { useGeneratedHtmlId } from '../../services'; -import { useEuiI18n } from '../i18n'; -import { EuiText } from '../text'; - -export type EuiNotificationEventMessagesProps = { - /* - * An array of strings that get individually wrapped in `

` tags - */ - messages: string[]; - /** - * 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; -}; - -export const EuiNotificationEventMessages: FunctionComponent< - EuiNotificationEventMessagesProps -> = ({ messages, eventName }) => { - const [isOpen, setIsOpen] = useState(false); - const messagesLength = messages.length; - - const accordionId = useGeneratedHtmlId({ - prefix: 'euiNotificationEventMessagesAccordion', - }); - - const accordionButtonText = useEuiI18n( - 'euiNotificationEventMessages.accordionButtonText', - '+ {messagesLength} more', - { messagesLength: messagesLength - 1 } - ); - - const accordionAriaLabelButtonText = useEuiI18n( - 'euiNotificationEventMessages.accordionAriaLabelButtonText', - '+ {messagesLength} messages for {eventName}', - { - messagesLength: messagesLength - 1, - eventName, - } - ); - - const accordionHideText = useEuiI18n( - 'euiNotificationEventMessages.accordionHideText', - 'hide' - ); - - const buttonContentText = isOpen - ? `${accordionButtonText} (${accordionHideText})` - : accordionButtonText; - - return ( -

- {messages && messagesLength === 1 ? ( - -

{messages}

- - ) : ( - <> - -

{messages[0]}

- - - -
- {messages - .map((notification, index) => ( - -

{notification}

- - )) - .slice(1)} -
- - - )} -
- ); -}; diff --git a/src/components/notification/notification_event_meta.test.tsx b/src/components/notification/notification_event_meta.test.tsx deleted file mode 100644 index 65d29cb8c4b..00000000000 --- a/src/components/notification/notification_event_meta.test.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { mount } from 'enzyme'; -import { EuiNotificationEventMeta } from './notification_event_meta'; -import { EuiContextMenuPanel, EuiContextMenuItem } from '../context_menu'; -import { findTestSubject, takeMountedSnapshot } from '../../test'; -import { render } from '../../test/rtl'; - -describe('EuiNotificationEventMeta', () => { - test('is rendered', () => { - const { container } = render( - 2 min ago} - eventName="eventName" - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('props', () => { - test('severity is rendered', () => { - const { container } = render( - 2 min ago} - severity="severity" - eventName="eventName" - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('badgeColor is rendered', () => { - const { container } = render( - 2 min ago} - eventName="eventName" - badgeColor="success" - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('logoCloud is rendered', () => { - const { container } = render( - 2 min ago} - iconType="logoCloud" - eventName="eventName" - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('contextMenuItems are rendered', () => { - const contextMenuItems = [ - - Mark as read - , - - View messages like this - , - - Don’t notify me about this - , - ]; - - const component = mount( - 2 min ago} - iconType="logoCloud" - eventName="eventName" - onOpenContextMenu={() => contextMenuItems} - /> - ); - - expect(component.find(EuiContextMenuPanel)).toHaveLength(0); - findTestSubject(component, 'id-notificationEventMetaButton').simulate( - 'click' - ); - expect(component.find(EuiContextMenuPanel)).toHaveLength(1); - - expect( - takeMountedSnapshot(component.find(EuiContextMenuPanel)) - ).toMatchSnapshot(); - }); - }); -}); diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx deleted file mode 100644 index 03332cf8add..00000000000 --- a/src/components/notification/notification_event_meta.tsx +++ /dev/null @@ -1,169 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { - FunctionComponent, - useState, - ReactNode, - ReactElement, -} from 'react'; -import classNames from 'classnames'; -import { EuiIcon, IconType } from '../icon'; -import { EuiBadge, EuiBadgeProps } from '../badge'; -import { EuiPopover } from '../popover'; -import { EuiButtonIcon } from '../button'; -import { - EuiContextMenuItem, - EuiContextMenuItemProps, - EuiContextMenuPanel, -} from '../context_menu'; -import { EuiI18n } from '../i18n'; -import { useGeneratedHtmlId } from '../../services'; - -export type EuiNotificationEventMetaProps = { - id: string; - /** - * Type of event (e.g. "Alert", "Cloud", etc..). Shows inside a badge. - */ - type: string; - /** - * 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; - /** - * Type of severity (e.g. "Critical", "Warning", etc..). Shows as a text after the `type` following the format "Alert: Critical". - */ - severity?: string; - /** - * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`. - */ - badgeColor?: EuiBadgeProps['color']; - /** - * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`. - */ - iconType?: IconType; - /** - * Specify an `aria-label` for the icon. - * If no `aria-label` is passed we assume the icon is purely decorative. - */ - iconAriaLabel?: string; - /** - * Indicates when the event was received. - */ - time: ReactNode; - /** - * Necessary to trigger `onOpenContextMenu` from #EuiNotificationEvent - */ - onOpenContextMenu?: () => Array< - ReactElement - >; -}; - -export const EuiNotificationEventMeta: FunctionComponent< - EuiNotificationEventMetaProps -> = ({ - id, - iconType, - type, - time, - badgeColor = 'hollow', - severity, - eventName, - iconAriaLabel, - onOpenContextMenu, -}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const classes = classNames('euiNotificationEventMeta', { - 'euiNotificationEventMeta--hasContextMenu': onOpenContextMenu, - }); - - const [contextMenuItems, setContextMenuItems] = useState< - ReturnType> - >([]); - - const randomPopoverId = useGeneratedHtmlId(); - - const ariaAttribute = iconAriaLabel - ? { 'aria-label': iconAriaLabel } - : { 'aria-hidden': true }; - - const onOpenPopover = () => { - setIsPopoverOpen(!isPopoverOpen); - if (onOpenContextMenu) { - setContextMenuItems(onOpenContextMenu()); - } - }; - - return ( -
-
- {iconType && ( - - )} - - {type && ( - - {severity ? `${type}: ${severity}` : type} - - )} -
- -
- {time} -
- - {onOpenContextMenu && ( -
- - {(contextMenuButton: string) => ( - - )} - - } - closePopover={() => setIsPopoverOpen(false)} - > - {/* The EuiContextMenu is wrapped with a div so it closes after an item is clicked */} -
setIsPopoverOpen(false)}> - -
- -
- )} -
- ); -}; diff --git a/src/components/notification/notification_event_read_button.test.tsx b/src/components/notification/notification_event_read_button.test.tsx deleted file mode 100644 index f4d7b26665b..00000000000 --- a/src/components/notification/notification_event_read_button.test.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { mount } from 'enzyme'; -import { render } from '../../test/rtl'; - -import { EuiNotificationEventReadButton } from './notification_event_read_button'; - -describe('EuiNotificationEventReadButton', () => { - test('is rendered', () => { - const { container } = render( - {}} - /> - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('renders isRead to false', () => { - const { container } = render( - {}} - /> - ); - - expect(container.firstChild).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 deleted file mode 100644 index 83284fbdc58..00000000000 --- a/src/components/notification/notification_event_read_button.tsx +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent } from 'react'; -import { EuiButtonIcon, EuiButtonIconProps } from '../button'; -import { useEuiI18n } from '../i18n'; -import classNames from 'classnames'; - -export type EuiNotificationEventReadButtonProps = Omit< - EuiButtonIconProps, - 'iconType' | 'isDisabled' | 'isSelected' | 'size' -> & { - id: string; - /** - * Shows an indicator of the read state of the event - */ - isRead: boolean; - /** - * Applies an `onClick` handler to the `read` indicator. - */ - onClick: () => void; - /** - * 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; -}; - -export const EuiNotificationEventReadButton: FunctionComponent< - EuiNotificationEventReadButtonProps -> = ({ id, isRead, onClick, eventName, ...rest }) => { - const classesReadState = classNames('euiNotificationEventReadButton', { - 'euiNotificationEventReadButton--isRead': isRead, - }); - - const markAsReadAria = useEuiI18n( - 'euiNotificationEventReadButton.markAsReadAria', - 'Mark {eventName} as read', - { - eventName, - } - ); - - const markAsUnreadAria = useEuiI18n( - 'euiNotificationEventReadButton.markAsUnreadAria', - 'Mark {eventName} as unread', - { - eventName, - } - ); - - const markAsRead = useEuiI18n( - 'euiNotificationEventReadButton.markAsRead', - 'Mark as read' - ); - - const markAsUnread = useEuiI18n( - 'euiNotificationEventReadButton.markAsUnread', - 'Mark as unread' - ); - - const buttonAriaLabel = isRead ? markAsUnreadAria : markAsReadAria; - const buttonTitle = isRead ? markAsUnread : markAsRead; - - return ( - - ); -}; diff --git a/src/components/notification/notification_event_read_icon.tsx b/src/components/notification/notification_event_read_icon.tsx deleted file mode 100644 index 5239f561038..00000000000 --- a/src/components/notification/notification_event_read_icon.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent } from 'react'; -import { useEuiI18n } from '../i18n'; -import classNames from 'classnames'; -import { EuiIcon, EuiIconProps } from '../icon'; - -export type EuiNotificationEventReadIconProps = Omit< - EuiIconProps, - 'type' | 'color' | 'size' -> & { - id: string; - /** - * Shows an indicator of the read state of the event - */ - isRead: boolean; - /** - * 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; -}; - -export const EuiNotificationEventReadIcon: FunctionComponent< - EuiNotificationEventReadIconProps -> = ({ id, isRead, eventName, ...rest }) => { - const classesReadState = classNames('euiNotificationEventReadIcon', { - 'euiNotificationEventReadIcon--isRead': isRead, - }); - - const readAria = useEuiI18n( - 'euiNotificationEventReadIcon.readAria', - '{eventName} is read', - { - eventName, - } - ); - - const unreadAria = useEuiI18n( - 'euiNotificationEventReadIcon.unreadAria', - '{eventName} is unread', - { - eventName, - } - ); - const readTitle = useEuiI18n('euiNotificationEventReadIcon.read', 'Read'); - const unreadTitle = useEuiI18n( - 'euiNotificationEventReadIcon.unread', - 'Unread' - ); - - const iconAriaLabel = isRead ? readAria : unreadAria; - const iconTitle = isRead ? readTitle : unreadTitle; - - return ( -
- -
- ); -};