Conditionally change where avatar shows up

Signed-off-by: Miki <miki@amazon.com>

public/apps/account/account-app.tsx

@@ -107,9 +107,10 @@ export async function setupTopNavButton(coreStart: CoreStart, config: ClientConf
 
     setShouldShowTenantPopup(shouldShowTenantPopup);
 
-    coreStart.chrome.navControls.registerRight({
-      // Pin to rightmost, since newsfeed plugin is using 1000, here needs a number > 1000
-      order: 2000,
+    const isPlacedInLeftNav = coreStart.uiSettings.get('home:useNewHomePage');
+
+    coreStart.chrome.navControls[isPlacedInLeftNav ? 'registerLeftBottom' : 'registerRight']({
+      order: isPlacedInLeftNav ? 10000 : 2000,
       mount: (element: HTMLElement) => {
         ReactDOM.render(
           <AccountNavButton

public/apps/account/account-nav-button.scss

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+.euiButtonEmpty.accountNavButton {
+  border: 0;
+}

public/apps/account/account-nav-button.tsx

@@ -36,6 +36,7 @@ import { LogoutButton } from './log-out-button';
 import { resolveTenantName } from '../configuration/utils/tenant-utils';
 import { getShouldShowTenantPopup, setShouldShowTenantPopup } from '../../utils/storage-utils';
 import { getDashboardsInfo } from '../../utils/dashboards-info-utils';
+import './account-nav-button.scss';
 
 export function AccountNavButton(props: {
   coreStart: CoreStart;
@@ -73,7 +74,7 @@ export function AccountNavButton(props: {
     const fetchData = async () => {
       try {
         setIsMultiTenancyEnabled(
-          (await getDashboardsInfo(props.coreStart.http)).multitenancy_enabled
+          Boolean((await getDashboardsInfo(props.coreStart.http)).multitenancy_enabled)
         );
       } catch (e) {
         // TODO: switch to better error display.
@@ -167,12 +168,31 @@ export function AccountNavButton(props: {
       />
     </div>
   );
-  return (
-    <EuiHeaderSectionItemButton id="user-icon-btn">
+
+  const isPlacedInLeftNav = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+  // ToDo: Add aria-label and tooltip when isPlacedInLeftNav is true
+  const innerElement = isPlacedInLeftNav ? (
+    <EuiButtonEmpty
+      size="xs"
+      flush="both"
+      className="accountNavButton"
+      aria-expanded={isPopoverOpen}
+      aria-haspopup="true"
+    >
+      <EuiAvatar name={username} size="s" />
+    </EuiButtonEmpty>
+  ) : (
+    <EuiAvatar name={username} size="m" />
+  );
+
+  const popover = (
+    <>
       <EuiPopover
         data-test-subj="account-popover"
         id="actionsMenu"
-        button={<EuiAvatar name={username} />}
+        anchorPosition={isPlacedInLeftNav ? 'rightDown' : undefined}
+        button={innerElement}
         isOpen={isPopoverOpen}
         closePopover={() => {
           setPopoverOpen(false);
@@ -185,6 +205,14 @@ export function AccountNavButton(props: {
         <EuiContextMenuPanel>{contextMenuPanel}</EuiContextMenuPanel>
       </EuiPopover>
       {modal}
+    </>
+  );
+
+  return isPlacedInLeftNav ? (
+    popover
+  ) : (
+    <EuiHeaderSectionItemButton id="user-icon-btn" size="l">
+      {popover}
     </EuiHeaderSectionItemButton>
   );
 }