Skip to content

Commit

Permalink
Deprecate EuiNotificationEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Aug 25, 2023
1 parent 8549f67 commit cd45a6e
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 213 deletions.
235 changes: 22 additions & 213 deletions src-docs/src/views/notification_event/notification_event_example.js
View file
Original file line number Diff line number Diff line change
@@ -1,225 +1,34 @@
import React from 'react';
import { GuideSectionTypes } from '../../components';
import { Link } from 'react-router-dom';
import {
EuiNotificationEvent,
EuiText,
EuiContextMenuItem,
EuiSpacer,
EuiCode,
EuiAccordion,
EuiCodeBlock,
EuiButtonEmpty as EuiPrimaryActionProps,
} from '../../../../src/components';
import NotificationEventPropsMethods from './notification_event_props_methods';

import NotificationEvent from './notification_event';
const notificationEventSource = require('!!raw-loader!./notification_event');

import NotificationEventFlexible from './notification_event_flexible';
const notificationEventFlexibleSource = require('!!raw-loader!./notification_event_flexible');

import NotificationsFeed from './notifications_feed';
const notificationsFeedSource = require('!!raw-loader!./notifications_feed');

const notificationEventSnippet = `<EuiNotificationEvent
id={id}
type="Alert"
iconType= "logoMaps"
iconAriaLabel="Maps"
time={time}
title={title}
isRead={isRead}
primaryAction={primaryAction}
messages={messages}
onRead={onRead}
onOpenContextMenu={onOpenContextMenu}
onClickPrimaryAction={onClickPrimaryAction}
onClickTitle={onClickTitle}
/>`;

const notificationEventFeedSnippet = `// we're looping through an array of objects to render multiple EuiNotificationEvent
const notificationEvents = events.map((event) => (
<EuiNotificationEvent
key={event.id}
id={event.id}
type={event.type}
iconType={event.iconType}
iconAriaLabel={event.iconAriaLabel}
time={event.time}
title={event.title}
isRead={event.isRead}
primaryAction={event.primaryAction}
messages={event.messages}
onRead={onRead}
onOpenContextMenu={onOpenContextMenu}
onClickPrimaryAction={onClickPrimaryAction}
onClickTitle={onClickTitle}
/>
));
// the multiple EuiNotificationEvent should live inside the same container
<div>
{notificationEvents}
</div>
`;
import { EuiCallOut, EuiLink } from '../../../../src/components';

export const NotificationEventExample = {
title: 'Notification event',
intro: (
<EuiText>
<p>
Use <strong>EuiNotificationEvent</strong> to display notifications about
new events in your product like alerts, support, or news. This component
is meant to live inside a{' '}
<strong>
<Link to="/layout/flyout/">EuiFlyout</Link>
</strong>{' '}
so that users can quickly be informed or take action.
</p>
</EuiText>
),
isDeprecated: true,
sections: [
{
source: [
{
type: GuideSectionTypes.JS,
code: notificationEventSource,
},
],
props: {
EuiNotificationEvent,
EuiContextMenuItem,
EuiPrimaryActionProps,
},
snippet: notificationEventSnippet,
demo: <NotificationEvent />,
},
{
source: [
{
type: GuideSectionTypes.JS,
code: notificationEventFlexibleSource,
},
],
title: 'A flexible component',
text: (
<>
<EuiText>
<p>
The <strong>EuiNotificationEvent</strong> takes into account that
an event can be purely informative or actionable. It is flexible
and adapts the design according to the props passed.
</p>
</EuiText>
<EuiSpacer />
<NotificationEventPropsMethods />
<EuiSpacer size="xs" />
<EuiAccordion
id="propsSnippet"
buttonContent={<small>Code snippet</small>}
>
<EuiSpacer size="xs" />
<EuiCodeBlock language="ts" isCopyable paddingSize="s">
{notificationEventSnippet}
</EuiCodeBlock>
</EuiAccordion>
<EuiSpacer />
<EuiText>
<ul style={{ listStyleType: 'upper-alpha' }}>
<li>
<EuiCode>isRead</EuiCode>: Shows a button or icon that indicates
the current <EuiCode>isRead</EuiCode> state of the event. Use{' '}
<EuiCode>onRead</EuiCode> to allow users to toggle between read
and unread states.
</li>
<li>
<EuiCode>iconType</EuiCode>: Display an icon or logo to help
users quickly identify where the event originated.
</li>
<li>
<EuiCode>type</EuiCode> (required): Shows inside a badge
denoting what type of event it is. Use in conjunction with{' '}
<EuiCode>severity</EuiCode> and <EuiCode>badgeColor</EuiCode> to
indicate the level of urgency.
</li>
<li>
<EuiCode>time</EuiCode> (required): Indicates the time the event
was received. It is recommended to display a relative time
format like &apos;2 hours ago&apos;.
</li>
<li>
<EuiCode>onContextMenu</EuiCode>: Use this prop when you have
multiple events and you need to add individual actions to each
event. You can add filters based on the event type or a more
descriptive read/unread actions as an alternative to the read
indicator.
</li>
<li>
<EuiCode>title</EuiCode> (required): The title of the
notification event. It should be descriptive enough so that
users don&apos;t need to navigate away. But use it in
conjunction with an <EuiCode>onClickTitle</EuiCode> to direct
users to the respective app in case they need more information
about the notification.
</li>
<li>
<EuiCode>messages</EuiCode>: Provides more details about the
event. You can provide a single message or multiple messages if
the event executes in various steps.
</li>
<li>
<EuiCode>primaryAction</EuiCode>: Use this prop in conjunction
with <EuiCode>onClickPrimaryAction</EuiCode> to provide a call
to action, like download a report or link to a page where an
action is required. Most of the time, the clickable title is
enough.
</li>
</ul>
</EuiText>
<EuiSpacer />
<EuiText>
<p>
The following demo shows how you can combine different props to
create different types of events like a report, alert, or simply
news.
</p>
</EuiText>
</>
),
props: {
EuiNotificationEvent,
EuiContextMenuItem,
EuiPrimaryActionProps,
},
snippet: notificationEventSnippet,
demo: <NotificationEventFlexible />,
},
{
source: [
{
type: GuideSectionTypes.JS,
code: notificationsFeedSource,
},
],
title: 'Notifications feed',
text: (
<p>
You can create a notifications feed by rendering multiple{' '}
<strong>EuiNotificationEvent</strong>. These components should live
inside a container without other components on the same level. This
way, we ensure that feed styles are applied correctly. Consuming
applications should implement all the logic to filter and save
read/unread states.
</p>
<EuiCallOut
color="danger"
iconType="warning"
title="EuiNotificationEvent has been scheduled for deprecation"
>
<p>
<strong>EuiNotificationEvent</strong> is being deprecated due to low
usage and high maintenance requirements.
</p>
<p>
If necessary, we recommend{' '}
<EuiLink
href="https://github.com/elastic/eui/tree/main/src/components/notification"
target="_blank"
>
copying the component to your application
</EuiLink>
. The component will be permanently removed in December 2023.
</p>
</EuiCallOut>
),
props: {
EuiNotificationEvent,
EuiContextMenuItem,
EuiPrimaryActionProps,
},
snippet: notificationEventFeedSnippet,
demo: <NotificationsFeed />,
},
],
};
9 changes: 9 additions & 0 deletions src/components/notification/notification_event.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ 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'
Expand Down Expand Up @@ -96,6 +99,12 @@ export type EuiNotificationEventProps = Omit<
>;
};

/**
* @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
> = ({
Expand Down

0 comments on commit cd45a6e

Please sign in to comment.