Skip to content

Commit

Permalink
Use new header icon badge for newsfeed button (#77946)
Browse files Browse the repository at this point in the history 
* Use new header icon badge for newsfeed button

* add i18n, fix flyout level

* fix i18n namespace, fix badge test

* update newfeed badge test
  • Loading branch information
@ryankeairns
ryankeairns committed Sep 21, 2020
1 parent 034d76e commit beb1f83
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 72 deletions.
134 changes: 70 additions & 64 deletions src/plugins/newsfeed/public/components/flyout_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
EuiText,
EuiBadge,
EuiHeaderAlert,
EuiPortal,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { NewsfeedContext } from './newsfeed_header_nav_button';
Expand All @@ -42,70 +43,75 @@ export const NewsfeedFlyout = () => {
const closeFlyout = useCallback(() => setFlyoutVisible(false), [setFlyoutVisible]);

return (
<EuiFlyout
onClose={closeFlyout}
size="s"
aria-labelledby="flyoutSmallTitle"
className="kbnNews__flyout"
data-test-subj="NewsfeedFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutSmallTitle">
<FormattedMessage
id="newsfeed.flyoutList.whatsNewTitle"
defaultMessage="What's new at Elastic"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
{!newsFetchResult ? (
<NewsLoadingPrompt />
) : newsFetchResult.feedItems.length > 0 ? (
newsFetchResult.feedItems.map((item: NewsfeedItem) => {
return (
<EuiHeaderAlert
key={item.hash}
title={item.title}
text={item.description}
data-test-subj="newsHeadAlert"
action={
<EuiLink target="_blank" href={item.linkUrl} external>
{item.linkText}
</EuiLink>
}
date={item.publishOn.format('DD MMMM YYYY')}
badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
<EuiPortal>
<EuiFlyout
onClose={closeFlyout}
size="s"
aria-labelledby="flyoutSmallTitle"
className="kbnNews__flyout"
data-test-subj="NewsfeedFlyout"
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2 id="flyoutSmallTitle">
<FormattedMessage
id="newsfeed.flyoutList.whatsNewTitle"
defaultMessage="What's new at Elastic"
/>
);
})
) : (
<NewsEmptyPrompt />
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
<FormattedMessage id="newsfeed.flyoutList.closeButtonLabel" defaultMessage="Close" />
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{newsFetchResult ? (
<EuiText color="subdued" size="s">
<p>
<FormattedMessage
id="newsfeed.flyoutList.versionTextLabel"
defaultMessage="{version}"
values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
/>
</p>
</EuiText>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
{!newsFetchResult ? (
<NewsLoadingPrompt />
) : newsFetchResult.feedItems.length > 0 ? (
newsFetchResult.feedItems.map((item: NewsfeedItem) => {
return (
<EuiHeaderAlert
key={item.hash}
title={item.title}
text={item.description}
data-test-subj="newsHeadAlert"
action={
<EuiLink target="_blank" href={item.linkUrl} external>
{item.linkText}
</EuiLink>
}
date={item.publishOn.format('DD MMMM YYYY')}
badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
/>
);
})
) : (
<NewsEmptyPrompt />
)}
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
<FormattedMessage
id="newsfeed.flyoutList.closeButtonLabel"
defaultMessage="Close"
/>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{newsFetchResult ? (
<EuiText color="subdued" size="s">
<p>
<FormattedMessage
id="newsfeed.flyoutList.versionTextLabel"
defaultMessage="{version}"
values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
/>
</p>
</EuiText>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiPortal>
);
};
19 changes: 12 additions & 7 deletions src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@

import React, { useState, Fragment, useEffect } from 'react';
import * as Rx from 'rxjs';
import { EuiHeaderSectionItemButton, EuiIcon, EuiNotificationBadge } from '@elastic/eui';
import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { NewsfeedFlyout } from './flyout_list';
import { FetchResult } from '../types';

Expand Down Expand Up @@ -65,15 +66,19 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
aria-controls="keyPadMenu"
aria-expanded={flyoutVisible}
aria-haspopup="true"
aria-label="Newsfeed menu"
aria-label={
showBadge
? i18n.translate('newsfeed.headerButton.unreadAriaLabel', {
defaultMessage: 'Newsfeed menu - unread items available',
})
: i18n.translate('newsfeed.headerButton.readAriaLabel', {
defaultMessage: 'Newsfeed menu - all items read',
})
}
notification={showBadge ? true : null}
onClick={showFlyout}
>
<EuiIcon type="cheer" size="m" />
{showBadge ? (
<EuiNotificationBadge className="euiHeaderNotification" data-test-subj="showBadgeNews">
&#9642;
</EuiNotificationBadge>
) : null}
</EuiHeaderSectionItemButton>
{flyoutVisible ? <NewsfeedFlyout /> : null}
</Fragment>
Expand Down
3 changes: 2 additions & 1 deletion test/functional/page_objects/newsfeed_page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { FtrProviderContext } from '../ftr_provider_context';

export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProviderContext) {
const log = getService('log');
const find = getService('find');
const retry = getService('retry');
const flyout = getService('flyout');
const testSubjects = getService('testSubjects');
Expand Down Expand Up @@ -49,7 +50,7 @@ export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProvider
}

async getRedButtonSign() {
return await testSubjects.exists('showBadgeNews');
return await find.existsByCssSelector('.euiHeaderSectionItemButton__notification--dot');
}

async getNewsfeedList() {
Expand Down

0 comments on commit beb1f83

Please sign in to comment.