Adapt the newsfeed button to the updated header

Also: * renamed a private variable with theme's menu button for consistency Signed-off-by: Miki <[email protected]>
opensearch-project · Aug 20, 2024 · 7aaf514 · 7aaf514
1 parent 9d3ca79
commit 7aaf514
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 19 deletions.
diff --git a/src/plugins/advanced_settings/public/header_user_theme_menu.tsx b/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
@@ -66,7 +66,7 @@ export const HeaderUserThemeMenu = () => {
       : screenModeOptions[0].value
   );
 
-  const legacyAppearance = !uiSettings.get('home:useNewHomePage');
+  const useLegacyAppearance = !uiSettings.get('home:useNewHomePage');
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -105,7 +105,7 @@ export const HeaderUserThemeMenu = () => {
     setPopover(false);
   };
 
-  const innerButton = legacyAppearance ? (
+  const innerButton = useLegacyAppearance ? (
     <EuiHeaderSectionItemButton
       aria-expanded="false"
       aria-haspopup="true"
@@ -193,7 +193,7 @@ export const HeaderUserThemeMenu = () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      anchorPosition={legacyAppearance ? 'downLeft' : 'rightDown'}
+      anchorPosition={useLegacyAppearance ? 'downLeft' : 'rightDown'}
       panelPaddingSize="s"
     >
       <EuiPopoverTitle>

diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.scss b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.scss
@@ -0,0 +1,14 @@
+/*
+* Copyright OpenSearch Contributors
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+.osdNewsfeedButtonWrapper {
+  position: relative;
+
+  &--dot {
+    position: absolute;
+    right: -1 * $euiSizeXS;
+    top: -1 * $euiSizeXS;
+  }
+}
diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
@@ -30,10 +30,12 @@
 
 import React, { useState, Fragment, useEffect } from 'react';
 import * as Rx from 'rxjs';
-import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiHeaderSectionItemButton, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { NewsfeedFlyout } from './flyout_list';
 import { FetchResult } from '../types';
+import { CoreStart } from '../../../../core/public';
+import './newsfeed_header_nav_button.scss';
 
 export interface INewsfeedContext {
   setFlyoutVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -44,18 +46,19 @@ export const NewsfeedContext = React.createContext({} as INewsfeedContext);
 export type NewsfeedApiFetchResult = Rx.Observable<void | FetchResult | null>;
 
 export interface Props {
+  coreStart: CoreStart;
   apiFetchResult: NewsfeedApiFetchResult;
 }
 
-export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
+export const NewsfeedNavButton = ({ coreStart, apiFetchResult }: Props) => {
   const [showBadge, setShowBadge] = useState<boolean>(false);
   const [flyoutVisible, setFlyoutVisible] = useState<boolean>(false);
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
 
   useEffect(() => {
     function handleStatusChange(fetchResult: FetchResult | void | null) {
       if (fetchResult) {
-        setShowBadge(fetchResult.hasNew);
+        setShowBadge(fetchResult.hasNew || true);
       }
       setNewsFetchResult(fetchResult);
     }
@@ -69,11 +72,40 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
     setFlyoutVisible(!flyoutVisible);
   }
 
-  return (
-    <NewsfeedContext.Provider value={{ setFlyoutVisible, newsFetchResult }}>
-      <Fragment>
-        <EuiHeaderSectionItemButton
-          data-test-subj="newsfeed"
+  const useLegacyAppearance = !coreStart.uiSettings.get('home:useNewHomePage');
+  const innerElement = useLegacyAppearance ? (
+    <EuiHeaderSectionItemButton
+      data-test-subj="newsfeed"
+      aria-controls="keyPadMenu"
+      aria-expanded={flyoutVisible}
+      aria-haspopup="true"
+      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" />
+    </EuiHeaderSectionItemButton>
+  ) : (
+    <EuiToolTip
+      content={i18n.translate('newsfeed.headerButton.menuButtonTooltip', {
+        defaultMessage: 'Newsfeed',
+      })}
+      delay="long"
+      position="bottom"
+    >
+      <div className="osdNewsfeedButtonWrapper">
+        <EuiButtonIcon
+          iconType="cheer"
+          color="primary"
+          size="xs"
           aria-controls="keyPadMenu"
           aria-expanded={flyoutVisible}
           aria-haspopup="true"
@@ -86,11 +118,17 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
                   defaultMessage: 'Newsfeed menu - all items read',
                 })
           }
-          notification={showBadge ? true : null}
           onClick={showFlyout}
-        >
-          <EuiIcon type="cheer" size="m" />
-        </EuiHeaderSectionItemButton>
+        />
+        <EuiIcon className="osdNewsfeedButtonWrapper--dot" color="accent" type="dot" size="s" />
+      </div>
+    </EuiToolTip>
+  );
+
+  return (
+    <NewsfeedContext.Provider value={{ setFlyoutVisible, newsFetchResult }}>
+      <Fragment>
+        {innerElement}
         {flyoutVisible ? <NewsfeedFlyout /> : null}
       </Fragment>
     </NewsfeedContext.Provider>

diff --git a/src/plugins/newsfeed/public/plugin.tsx b/src/plugins/newsfeed/public/plugin.tsx
@@ -64,10 +64,11 @@ export class NewsfeedPublicPlugin
   }
 
   public start(core: CoreStart) {
+    const useLegacyAppearance = !core.uiSettings.get('home:useNewHomePage');
     const api$ = this.fetchNewsfeed(core, this.config).pipe(share());
-    core.chrome.navControls.registerRight({
+    core.chrome.navControls[useLegacyAppearance ? 'registerRight' : 'registerLeftBottom']({
       order: 1000,
-      mount: (target) => this.mount(api$, target),
+      mount: (target) => this.mount(core, api$, target),
     });
 
     return {
@@ -95,10 +96,10 @@ export class NewsfeedPublicPlugin
     );
   }
 
-  private mount(api$: NewsfeedApiFetchResult, targetDomElement: HTMLElement) {
+  private mount(coreStart: CoreStart, api$: NewsfeedApiFetchResult, targetDomElement: HTMLElement) {
     ReactDOM.render(
       <I18nProvider>
-        <NewsfeedNavButton apiFetchResult={api$} />
+        <NewsfeedNavButton coreStart={coreStart} apiFetchResult={api$} />
       </I18nProvider>,
       targetDomElement
     );