Conditionally change where avatar shows up

Also update the tests to use good mocks for CoreStart Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Aug 14, 2024 · 17880c6 · 17880c6
1 parent a13b2e6
commit 17880c6
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 23 deletions.
diff --git a/public/apps/account/account-app.tsx b/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

diff --git a/public/apps/account/account-nav-button.scss b/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;
+}
diff --git a/public/apps/account/account-nav-button.tsx b/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>
   );
 }

diff --git a/public/apps/account/test/__snapshots__/account-nav-button.test.tsx.snap b/public/apps/account/test/__snapshots__/account-nav-button.test.tsx.snap
@@ -3,12 +3,14 @@
 exports[`Account navigation button renders 1`] = `
 <EuiHeaderSectionItemButton
   id="user-icon-btn"
+  size="l"
 >
   <EuiPopover
     anchorPosition="downCenter"
     button={
       <EuiAvatar
         name="user1"
+        size="m"
       />
     }
     closePopover={[Function]}
@@ -111,7 +113,34 @@ exports[`Account navigation button renders 1`] = `
               margin="xs"
             />
           }
-          http={1}
+          http={
+            Object {
+              "addLoadingCountSource": [MockFunction],
+              "anonymousPaths": Object {
+                "isAnonymous": [MockFunction],
+                "register": [MockFunction],
+              },
+              "basePath": BasePath {
+                "basePath": "",
+                "clientBasePath": "",
+                "get": [Function],
+                "getBasePath": [Function],
+                "prepend": [Function],
+                "remove": [Function],
+                "serverBasePath": "",
+              },
+              "delete": [MockFunction],
+              "fetch": [MockFunction],
+              "get": [MockFunction],
+              "getLoadingCount$": [MockFunction],
+              "head": [MockFunction],
+              "intercept": [MockFunction],
+              "options": [MockFunction],
+              "patch": [MockFunction],
+              "post": [MockFunction],
+              "put": [MockFunction],
+            }
+          }
         />
       </div>
     </EuiContextMenuPanel>

diff --git a/public/apps/account/test/account-app.test.tsx b/public/apps/account/test/account-app.test.tsx
@@ -19,6 +19,8 @@ import { fetchAccountInfoSafe } from '../utils';
 import { fetchCurrentAuthType } from '../../../utils/logout-utils';
 import { fetchCurrentTenant } from '../../configuration/utils/tenant-utils';
 import { getDashboardsInfoSafe } from '../../../utils/dashboards-info-utils';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { coreMock } from '../../../../../../src/core/public/mocks';
 
 jest.mock('../../../utils/storage-utils', () => ({
   getShouldShowTenantPopup: jest.fn(),
@@ -44,13 +46,7 @@ jest.mock('../../configuration/utils/tenant-utils', () => ({
 }));
 
 describe('Account app', () => {
-  const mockCoreStart = {
-    chrome: {
-      navControls: {
-        registerRight: jest.fn(),
-      },
-    },
-  };
+  const mockCoreStart: CoreStart = coreMock.createStart();
 
   const mockConfig = {
     multitenancy: {

diff --git a/public/apps/account/test/account-nav-button.test.tsx b/public/apps/account/test/account-nav-button.test.tsx
@@ -19,6 +19,8 @@ import { AccountNavButton, reloadAfterTenantSwitch } from '../account-nav-button
 import { getShouldShowTenantPopup } from '../../../utils/storage-utils';
 import { getDashboardsInfo } from '../../../utils/dashboards-info-utils';
 import { render, fireEvent } from '@testing-library/react';
+import { coreMock } from '../../../../../../src/core/public/mocks';
+import { CoreStart } from 'opensearch-dashboards/public';
 
 jest.mock('../../../utils/storage-utils', () => ({
   getShouldShowTenantPopup: jest.fn(),
@@ -38,9 +40,7 @@ const mockDashboardsInfo = {
 };
 
 describe('Account navigation button', () => {
-  const mockCoreStart = {
-    http: 1,
-  };
+  const mockCoreStart: CoreStart = coreMock.createStart();
 
   const config = {
     multitenancy: {
@@ -66,6 +66,7 @@ describe('Account navigation button', () => {
     (getDashboardsInfo as jest.Mock).mockImplementation(() => {
       return mockDashboardsInfo;
     });
+
     component = shallow(
       <AccountNavButton
         coreStart={mockCoreStart}
@@ -133,9 +134,7 @@ describe('Account navigation button', () => {
 });
 
 describe('Account navigation button, multitenancy disabled', () => {
-  const mockCoreStart = {
-    http: 1,
-  };
+  const mockCoreStart: CoreStart = coreMock.createStart();
 
   const config = {
     multitenancy: {
@@ -178,9 +177,11 @@ describe('Account navigation button, multitenancy disabled', () => {
 });
 
 describe('Shows tenant info when multitenancy enabled, and hides it if disabled', () => {
+  const mockCoreStart: CoreStart = coreMock.createStart();
+
   test('Renders "switch-tenants" and "tenant-name" when multi-tenancy is enabled', () => {
     const props = {
-      coreStart: {},
+      coreStart: mockCoreStart,
       isInternalUser: true,
       username: 'example_user',
       tenant: 'example_tenant',
@@ -213,7 +214,7 @@ describe('Shows tenant info when multitenancy enabled, and hides it if disabled'
 
   test('Does not render "switch-tenants" and "tenant-name" when multi-tenancy is disabled', () => {
     const props = {
-      coreStart: {},
+      coreStart: mockCoreStart,
       isInternalUser: true,
       username: 'example_user',
       tenant: 'example_tenant',