Skip to content

Commit beb1f83

Browse files
ryankeairnsryankeairns
authored
Use new header icon badge for newsfeed button (#77946)
* Use new header icon badge for newsfeed button * add i18n, fix flyout level * fix i18n namespace, fix badge test * update newfeed badge test
1 parent 034d76e commit beb1f83

3 files changed

Lines changed: 84 additions & 72 deletions

File tree

‎src/plugins/newsfeed/public/components/flyout_list.tsx‎

Lines changed: 70 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
EuiText,
3131
EuiBadge,
3232
EuiHeaderAlert,
33+
EuiPortal,
3334
} from '@elastic/eui';
3435
import { FormattedMessage } from '@kbn/i18n/react';
3536
import { NewsfeedContext } from './newsfeed_header_nav_button';
@@ -42,70 +43,75 @@ export const NewsfeedFlyout = () => {
4243
const closeFlyout = useCallback(() => setFlyoutVisible(false), [setFlyoutVisible]);
4344

4445
return (
45-
<EuiFlyout
46-
onClose={closeFlyout}
47-
size="s"
48-
aria-labelledby="flyoutSmallTitle"
49-
className="kbnNews__flyout"
50-
data-test-subj="NewsfeedFlyout"
51-
>
52-
<EuiFlyoutHeader hasBorder>
53-
<EuiTitle size="s">
54-
<h2 id="flyoutSmallTitle">
55-
<FormattedMessage
56-
id="newsfeed.flyoutList.whatsNewTitle"
57-
defaultMessage="What's new at Elastic"
58-
/>
59-
</h2>
60-
</EuiTitle>
61-
</EuiFlyoutHeader>
62-
<EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
63-
{!newsFetchResult ? (
64-
<NewsLoadingPrompt />
65-
) : newsFetchResult.feedItems.length > 0 ? (
66-
newsFetchResult.feedItems.map((item: NewsfeedItem) => {
67-
return (
68-
<EuiHeaderAlert
69-
key={item.hash}
70-
title={item.title}
71-
text={item.description}
72-
data-test-subj="newsHeadAlert"
73-
action={
74-
<EuiLink target="_blank" href={item.linkUrl} external>
75-
{item.linkText}
76-
</EuiLink>
77-
}
78-
date={item.publishOn.format('DD MMMM YYYY')}
79-
badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
46+
<EuiPortal>
47+
<EuiFlyout
48+
onClose={closeFlyout}
49+
size="s"
50+
aria-labelledby="flyoutSmallTitle"
51+
className="kbnNews__flyout"
52+
data-test-subj="NewsfeedFlyout"
53+
>
54+
<EuiFlyoutHeader hasBorder>
55+
<EuiTitle size="s">
56+
<h2 id="flyoutSmallTitle">
57+
<FormattedMessage
58+
id="newsfeed.flyoutList.whatsNewTitle"
59+
defaultMessage="What's new at Elastic"
8060
/>
81-
);
82-
})
83-
) : (
84-
<NewsEmptyPrompt />
85-
)}
86-
</EuiFlyoutBody>
87-
<EuiFlyoutFooter>
88-
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
89-
<EuiFlexItem grow={false}>
90-
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
91-
<FormattedMessage id="newsfeed.flyoutList.closeButtonLabel" defaultMessage="Close" />
92-
</EuiButtonEmpty>
93-
</EuiFlexItem>
94-
<EuiFlexItem grow={false}>
95-
{newsFetchResult ? (
96-
<EuiText color="subdued" size="s">
97-
<p>
98-
<FormattedMessage
99-
id="newsfeed.flyoutList.versionTextLabel"
100-
defaultMessage="{version}"
101-
values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
102-
/>
103-
</p>
104-
</EuiText>
105-
) : null}
106-
</EuiFlexItem>
107-
</EuiFlexGroup>
108-
</EuiFlyoutFooter>
109-
</EuiFlyout>
61+
</h2>
62+
</EuiTitle>
63+
</EuiFlyoutHeader>
64+
<EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
65+
{!newsFetchResult ? (
66+
<NewsLoadingPrompt />
67+
) : newsFetchResult.feedItems.length > 0 ? (
68+
newsFetchResult.feedItems.map((item: NewsfeedItem) => {
69+
return (
70+
<EuiHeaderAlert
71+
key={item.hash}
72+
title={item.title}
73+
text={item.description}
74+
data-test-subj="newsHeadAlert"
75+
action={
76+
<EuiLink target="_blank" href={item.linkUrl} external>
77+
{item.linkText}
78+
</EuiLink>
79+
}
80+
date={item.publishOn.format('DD MMMM YYYY')}
81+
badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
82+
/>
83+
);
84+
})
85+
) : (
86+
<NewsEmptyPrompt />
87+
)}
88+
</EuiFlyoutBody>
89+
<EuiFlyoutFooter>
90+
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
91+
<EuiFlexItem grow={false}>
92+
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
93+
<FormattedMessage
94+
id="newsfeed.flyoutList.closeButtonLabel"
95+
defaultMessage="Close"
96+
/>
97+
</EuiButtonEmpty>
98+
</EuiFlexItem>
99+
<EuiFlexItem grow={false}>
100+
{newsFetchResult ? (
101+
<EuiText color="subdued" size="s">
102+
<p>
103+
<FormattedMessage
104+
id="newsfeed.flyoutList.versionTextLabel"
105+
defaultMessage="{version}"
106+
values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
107+
/>
108+
</p>
109+
</EuiText>
110+
) : null}
111+
</EuiFlexItem>
112+
</EuiFlexGroup>
113+
</EuiFlyoutFooter>
114+
</EuiFlyout>
115+
</EuiPortal>
110116
);
111117
};

‎src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919

2020
import React, { useState, Fragment, useEffect } from 'react';
2121
import * as Rx from 'rxjs';
22-
import { EuiHeaderSectionItemButton, EuiIcon, EuiNotificationBadge } from '@elastic/eui';
22+
import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
23+
import { i18n } from '@kbn/i18n';
2324
import { NewsfeedFlyout } from './flyout_list';
2425
import { FetchResult } from '../types';
2526

@@ -65,15 +66,19 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
6566
aria-controls="keyPadMenu"
6667
aria-expanded={flyoutVisible}
6768
aria-haspopup="true"
68-
aria-label="Newsfeed menu"
69+
aria-label={
70+
showBadge
71+
? i18n.translate('newsfeed.headerButton.unreadAriaLabel', {
72+
defaultMessage: 'Newsfeed menu - unread items available',
73+
})
74+
: i18n.translate('newsfeed.headerButton.readAriaLabel', {
75+
defaultMessage: 'Newsfeed menu - all items read',
76+
})
77+
}
78+
notification={showBadge ? true : null}
6979
onClick={showFlyout}
7080
>
7181
<EuiIcon type="cheer" size="m" />
72-
{showBadge ? (
73-
<EuiNotificationBadge className="euiHeaderNotification" data-test-subj="showBadgeNews">
74-
&#9642;
75-
</EuiNotificationBadge>
76-
) : null}
7782
</EuiHeaderSectionItemButton>
7883
{flyoutVisible ? <NewsfeedFlyout /> : null}
7984
</Fragment>

‎test/functional/page_objects/newsfeed_page.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { FtrProviderContext } from '../ftr_provider_context';
2121

2222
export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProviderContext) {
2323
const log = getService('log');
24+
const find = getService('find');
2425
const retry = getService('retry');
2526
const flyout = getService('flyout');
2627
const testSubjects = getService('testSubjects');
@@ -49,7 +50,7 @@ export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProvider
4950
}
5051

5152
async getRedButtonSign() {
52-
return await testSubjects.exists('showBadgeNews');
53+
return await find.existsByCssSelector('.euiHeaderSectionItemButton__notification--dot');
5354
}
5455

5556
async getNewsfeedList() {

0 commit comments

Comments
 (0)