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

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

@@ -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';
@@ -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>
   );
 };

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

@@ -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';
 
@@ -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>

test/functional/page_objects/newsfeed_page.ts

@@ -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');
@@ -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() {