From 5a849b0af3ec1f06d4e94a2df5e072a5cfd88b41 Mon Sep 17 00:00:00 2001 From: Dan Dong <58446449+danieldong51@users.noreply.github.com> Date: Fri, 26 Jul 2024 09:59:47 -0700 Subject: [PATCH] [Look&Feel] Revert tooltip addition for navigation menu (#7493) --- .../header/__snapshots__/header.test.tsx.snap | 5884 ++++++++++++++++- .../public/chrome/ui/header/header.test.tsx | 14 + src/core/public/chrome/ui/header/header.tsx | 35 +- .../dashboard_listing_plugin.ts | 2 +- 4 files changed, 5731 insertions(+), 204 deletions(-) diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 9180cba86580..5489d9fcfdc5 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3134,118 +3134,102 @@ exports[`Header handles visibility and lock changes 1`] = `
- - + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} > - - - - - - - - - - , + "className": "euiButtonEmpty__text", } } - className="euiHeaderSectionItemButton" - color="text" - data-test-subj="toggleNavButton" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} > - - - - - + + + + + +
- - + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} > - - - - - - - - - - , + "className": "euiButtonEmpty__text", } } - className="euiHeaderSectionItemButton" - color="text" - data-test-subj="toggleNavButton" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} > - - - - - + + + + + + `; + +exports[`Header toggles primary navigation menu when clicked 1`] = ` +
+
+
+ +
+ +
+ +
+ + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} + > + + + +
+ + +
+ +
+ + +
+ + + + + + + + +
+ +
+
+
+ + + + , + } + } + className="euiHeaderSectionItemButton header__homeLoaderNavButton" + color="text" + data-test-subj="homeLoader" + href="/" + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + > + + + + + +
+ + + + + +
+
+ + + + + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + +
+ +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + + + + } + closePopover={[Function]} + data-test-subj="helpMenuButton" + display="inlineBlock" + hasArrow={true} + id="headerHelpMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + repositionOnScroll={true} + > +
+
+ + + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + > + + + + + +
+
+ + + +
+ +
+ +
+ +
+ + + +
+
+ +
+
+
+ +
+ +
+

+ No recently viewed items +

+
+ +
+ +
+
+
+ +
+ + + + +
+ + +
+ + +
+
+ +
    + + + + Dock navigation + + , + } + } + color="subdued" + data-test-subj="collapsible-nav-lock" + iconType="lockOpen" + label="Dock navigation" + onClick={[Function]} + size="xs" + > +
  • + +
    • +     +
+ +
+
+ + +
+ + + + + +
+
+`; diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx index bef0f152c6a4..1cfcc84acee5 100644 --- a/src/core/public/chrome/ui/header/header.test.tsx +++ b/src/core/public/chrome/ui/header/header.test.tsx @@ -37,6 +37,7 @@ import { applicationServiceMock, chromeServiceMock } from '../../../mocks'; import { Header } from './header'; import { StubBrowserStorage } from 'test_utils/stub_browser_storage'; import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../../../overlays'; +import { EuiHeaderSectionItemButton } from '@elastic/eui'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ htmlIdGenerator: () => () => 'mockId', @@ -205,4 +206,17 @@ describe('Header', () => { expect(component.find('.header__toggleNavButtonSection').exists()).toBeFalsy(); }); + + it('toggles primary navigation menu when clicked', () => { + const branding = { + useExpandedHeader: false, + }; + const props = { + ...mockProps(), + branding, + }; + const component = mountWithIntl(
); + component.find(EuiHeaderSectionItemButton).first().simulate('click'); + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index adcbba00fe8c..9c4ae18d4a39 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -37,7 +37,6 @@ import { EuiHideFor, EuiIcon, EuiShowFor, - EuiToolTip, htmlIdGenerator, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; @@ -208,27 +207,25 @@ export function Header({ {shouldHideExpandIcon ? null : ( - setIsNavOpen(!isNavOpen)} + aria-expanded={isNavOpen} + aria-pressed={isNavOpen} + aria-controls={navId} + ref={toggleCollapsibleNavRef} > - setIsNavOpen(!isNavOpen)} - aria-expanded={isNavOpen} - aria-pressed={isNavOpen} - aria-controls={navId} - ref={toggleCollapsibleNavRef} - > - - - + /> + )} diff --git a/test/plugin_functional/test_suites/dashboard_listing_plugin/dashboard_listing_plugin.ts b/test/plugin_functional/test_suites/dashboard_listing_plugin/dashboard_listing_plugin.ts index 3b26c08b2ff7..da92a958797b 100644 --- a/test/plugin_functional/test_suites/dashboard_listing_plugin/dashboard_listing_plugin.ts +++ b/test/plugin_functional/test_suites/dashboard_listing_plugin/dashboard_listing_plugin.ts @@ -55,7 +55,7 @@ export default function ({ getService, getPageObjects }) { it('should be able to navigate to edit dashboard', async () => { await listingTable.searchForItemWithName(dashboardName); const editBttn = await find.allByCssSelector('.euiToolTipAnchor'); - await editBttn[4].click(); + await editBttn[3].click(); await PageObjects.dashboard.clickCancelOutOfEditMode(); await PageObjects.dashboard.gotoDashboardLandingPage(); });