From ef78e8ff2c2eccdc3e6269091559528e7002d190 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Fri, 17 Jun 2022 01:10:06 +0000 Subject: [PATCH] [UX] Consolidate menu bars - add, update, improve unit tests Signed-off-by: Josh Romero --- .../nav_controls/nav_controls_service.test.ts | 72 +- .../header/__snapshots__/header.test.tsx.snap | 5196 ++++++++++++++++- .../__snapshots__/header_logo.test.tsx.snap | 1017 ++++ .../__snapshots__/home_icon.test.tsx.snap | 995 +++- .../public/chrome/ui/header/header.test.tsx | 43 +- src/core/public/chrome/ui/header/header.tsx | 62 +- .../chrome/ui/header/header_logo.test.tsx | 132 + .../chrome/ui/header/home_icon.test.tsx | 150 +- .../public/chrome/ui/header/home_icon.tsx | 3 +- 9 files changed, 7589 insertions(+), 81 deletions(-) create mode 100644 src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap create mode 100644 src/core/public/chrome/ui/header/header_logo.test.tsx diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.test.ts b/src/core/public/chrome/nav_controls/nav_controls_service.test.ts index 15c94805dc6f..6e2a71537e17 100644 --- a/src/core/public/chrome/nav_controls/nav_controls_service.test.ts +++ b/src/core/public/chrome/nav_controls/nav_controls_service.test.ts @@ -36,7 +36,7 @@ describe('RecentlyAccessed#start()', () => { return new NavControlsService().start(); }; - describe('left side', () => { + describe('left contorols', () => { it('allows registration', async () => { const navControls = getStart(); const nc = { mount: jest.fn() }; @@ -56,7 +56,7 @@ describe('RecentlyAccessed#start()', () => { }); }); - describe('right side', () => { + describe('right controls', () => { it('allows registration', async () => { const navControls = getStart(); const nc = { mount: jest.fn() }; @@ -75,4 +75,72 @@ describe('RecentlyAccessed#start()', () => { expect(await navControls.getRight$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]); }); }); + + describe('center controls', () => { + it('allows registration', async () => { + const navControls = getStart(); + const nc = { mount: jest.fn() }; + navControls.registerCenter(nc); + expect(await navControls.getCenter$().pipe(take(1)).toPromise()).toEqual([nc]); + }); + + it('sorts controls by order property', async () => { + const navControls = getStart(); + const nc1 = { mount: jest.fn(), order: 10 }; + const nc2 = { mount: jest.fn(), order: 0 }; + const nc3 = { mount: jest.fn(), order: 20 }; + navControls.registerCenter(nc1); + navControls.registerCenter(nc2); + navControls.registerCenter(nc3); + expect(await navControls.getCenter$().pipe(take(1)).toPromise()).toEqual([nc2, nc1, nc3]); + }); + }); + + describe('expanded right controls', () => { + it('allows registration', async () => { + const navControls = getStart(); + const nc = { mount: jest.fn() }; + navControls.registerExpandedRight(nc); + expect(await navControls.getExpandedRight$().pipe(take(1)).toPromise()).toEqual([nc]); + }); + + it('sorts controls by order property', async () => { + const navControls = getStart(); + const nc1 = { mount: jest.fn(), order: 10 }; + const nc2 = { mount: jest.fn(), order: 0 }; + const nc3 = { mount: jest.fn(), order: 20 }; + navControls.registerExpandedRight(nc1); + navControls.registerExpandedRight(nc2); + navControls.registerExpandedRight(nc3); + expect(await navControls.getExpandedRight$().pipe(take(1)).toPromise()).toEqual([ + nc2, + nc1, + nc3, + ]); + }); + }); + + describe('expanded center controls', () => { + it('allows registration', async () => { + const navControls = getStart(); + const nc = { mount: jest.fn() }; + navControls.registerExpandedCenter(nc); + expect(await navControls.getExpandedCenter$().pipe(take(1)).toPromise()).toEqual([nc]); + }); + + it('sorts controls by order property', async () => { + const navControls = getStart(); + const nc1 = { mount: jest.fn(), order: 10 }; + const nc2 = { mount: jest.fn(), order: 0 }; + const nc3 = { mount: jest.fn(), order: 20 }; + navControls.registerExpandedCenter(nc1); + navControls.registerExpandedCenter(nc2); + navControls.registerExpandedCenter(nc3); + expect(await navControls.getExpandedCenter$().pipe(take(1)).toPromise()).toEqual([ + nc2, + nc1, + nc3, + ]); + }); + }); }); 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 3fb425c94229..e4be6b8f21e1 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 @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Header renders 1`] = ` +exports[`Header handles visibility and lock changes 1`] = `
`; + +exports[`Header renders expanded header 1`] = ` +
+
+
+ , + ], + }, + Object { + "borders": "none", + "items": Array [ + + + , + ], + }, + Object { + "borders": "none", + "items": Array [ + + + , + , + ], + }, + ] + } + theme="dark" + > +
+ +
+ +
+ +
+ Foobar Dashboards logo +
+ +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} + > + + + +
+ + +
+ +
+ + +
+ + + + + + +
+ +
+
+
+ + + + , + } + } + className="euiHeaderSectionItemButton header__homeLoaderNavButton" + color="text" + data-test-subj="homeLoader" + href="/" + onClick={[Function]} + title="Go to home page" + > + + + + + +
+ + + + + +
+
+ + + + + +
+ + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + +
+ +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + + } + closePopover={[Function]} + data-test-subj="helpMenuButton" + display="inlineBlock" + hasArrow={true} + id="headerHelpMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + repositionOnScroll={true} + > +
+
+ + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + onClick={[Function]} + > + + + +
+
+ + + +
+ +
+ +
+ +
+ + + +
+
+`; diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap new file mode 100644 index 000000000000..b9a8bbeed220 --- /dev/null +++ b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap @@ -0,0 +1,1017 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Header logo in dark mode uses custom logo dark mode URL 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in dark mode uses custom logo default mode URL if no dark mode logo provided 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in dark mode uses opensearch logo if custom mark provided without logo 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in dark mode uses opensearch logo if no logo provided 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in default mode uses custom logo default mode URL 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in default mode uses opensearch logo if custom mark provided without logo 1`] = ` + +
+ custom title logo +
+ +`; + +exports[`Header logo in default mode uses opensearch logo if no branding provided 1`] = ` + +
+ opensearch dashboards logo +
+ +`; + +exports[`Header logo in default mode uses opensearch logo if no logo provided 1`] = ` + +
+ custom title logo +
+ +`; diff --git a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap index c0b4f0953c08..5eff2ee7efbf 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap @@ -1,8 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Header logo in dark mode uses custom mark dark mode URL 1`] = ` +exports[`Home button icon in dark mode uses custom mark dark mode URL 1`] = ` `; -exports[`Header logo in dark mode uses custom mark default mode URL if no dark mode mark 1`] = ` +exports[`Home button icon in dark mode uses custom mark default mode URL if no dark mode mark provided 1`] = ` `; -exports[`Header logo in dark mode uses opensearch logo if custom logo provided without mark 1`] = ` +exports[`Home button icon in dark mode uses opensearch mark if custom logo provided without mark 1`] = ` `; -exports[`Header logo in dark mode uses opensearch logo if no mark provided 1`] = ` +exports[`Home button icon in dark mode uses opensearch mark if no mark provided 1`] = ` `; -exports[`Header logo in default mode uses custom mark default mode URL 1`] = ` +exports[`Home button icon in default mode uses custom mark default mode URL 1`] = ` `; -exports[`Header logo in default mode uses opensearch logo if custom logo provided without mark 1`] = ` +exports[`Home button icon in default mode uses opensearch mark if custom logo provided without mark 1`] = ` `; -exports[`Header logo in default mode uses opensearch logo if no branding 1`] = ` +exports[`Home button icon in default mode uses opensearch mark if no branding provided 1`] = ` `; -exports[`Header logo in default mode uses opensearch logo if no mark provided 1`] = ` +exports[`Home button icon in default mode uses opensearch mark if no mark provided 1`] = ` `; + +exports[`Home button icon in expanded dark mode uses custom mark dark mode URL 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded dark mode uses custom mark default mode URL if no dark mode mark provided 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded dark mode uses home icon if custom logo provided without mark 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded dark mode uses home icon if no mark provided 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded light mode uses custom mark default mode URL 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded light mode uses home icon if custom logo provided without mark 1`] = ` + + + + + +`; + +exports[`Home button icon in expanded light mode uses home icon if no mark provided 1`] = ` + + + + + +`; diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx index b42924b0fa99..597b41107273 100644 --- a/src/core/public/chrome/ui/header/header.test.tsx +++ b/src/core/public/chrome/ui/header/header.test.tsx @@ -85,7 +85,7 @@ describe('Header', () => { }); }); - it('renders', () => { + it('handles visibility and lock changes', () => { const isVisible$ = new BehaviorSubject(false); const breadcrumbs$ = new BehaviorSubject([{ text: 'test' }]); const isLocked$ = new BehaviorSubject(false); @@ -113,10 +113,21 @@ describe('Header', () => { /> ); expect(component.find('EuiHeader').exists()).toBeFalsy(); + expect(component.find('EuiProgress').exists()).toBeTruthy(); act(() => isVisible$.next(true)); component.update(); - expect(component.find('EuiHeader').exists()).toBeTruthy(); + expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy(); + expect(component.find('EuiHeader.expandedHeader').exists()).toBeFalsy(); + expect(component.find('HeaderLogo').exists()).toBeFalsy(); + expect(component.find('HeaderNavControls')).toHaveLength(3); + expect(component.find('[data-test-subj="toggleNavButton"]').exists()).toBeTruthy(); + expect(component.find('HomeLoader').exists()).toBeTruthy(); + expect(component.find('HeaderBreadcrumbs').exists()).toBeTruthy(); + expect(component.find('HeaderBadge').exists()).toBeTruthy(); + expect(component.find('HeaderActionMenu').exists()).toBeTruthy(); + expect(component.find('HeaderHelpMenuUI').exists()).toBeTruthy(); + expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeFalsy(); act(() => isLocked$.next(true)); @@ -124,4 +135,32 @@ describe('Header', () => { expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeTruthy(); expect(component).toMatchSnapshot(); }); + + it('renders expanded header', () => { + const branding = { + darkMode: false, + logo: { defaultUrl: '/foo' }, + mark: { defaultUrl: '/foo' }, + applicationTitle: 'Foobar Dashboards', + useExpandedMenu: true, + }; + const props = { + ...mockProps(), + branding, + }; + const component = mountWithIntl(
); + + expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy(); + expect(component.find('EuiHeader.expandedHeader').exists()).toBeTruthy(); + expect(component.find('HeaderLogo').exists()).toBeTruthy(); + expect(component.find('HeaderNavControls')).toHaveLength(5); + expect(component.find('[data-test-subj="toggleNavButton"]').exists()).toBeTruthy(); + expect(component.find('HomeLoader').exists()).toBeTruthy(); + expect(component.find('HeaderBreadcrumbs').exists()).toBeTruthy(); + expect(component.find('HeaderBadge').exists()).toBeTruthy(); + expect(component.find('HeaderActionMenu').exists()).toBeTruthy(); + expect(component.find('HeaderHelpMenuUI').exists()).toBeTruthy(); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 893b79e197d5..66b84951efa2 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -121,6 +121,7 @@ export function Header({
{useExpandedMenu && ( - - , - ], - }), + items: [ + + + , + ], borders: 'none', }, { - ...((observables.navControlsExpandedCenter$ || - observables.navControlsExpandedRight$) && { - items: [ - - - , - , - ], - }), + items: [ + + + , + , + ], borders: 'none', }, ]} /> )} - + - {observables.navControlsLeft$ && ( - - - - )} + + + - {observables.badge$ && ( - - - - )} + + + - {observables.navControlsCenter$ && ( - - - - )} + + + - {observables.navControlsRight$ && ( - - - - )} + + + { + describe('in default mode ', () => { + it('uses opensearch logo if no branding provided', () => { + const branding = {}; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(defaultOpensearchLogoUrl); + expect(img.prop('alt')).toEqual(`opensearch dashboards logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses opensearch logo if no logo provided', () => { + const branding = { + darkMode: false, + logo: {}, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(`${branding.assetFolderUrl}${defaultOpensearchLogoUrl}`); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses opensearch logo if custom mark provided without logo', () => { + const branding = { + darkMode: false, + logo: {}, + mark: { defaultUrl: '/defaultModeMark' }, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(`${branding.assetFolderUrl}${defaultOpensearchLogoUrl}`); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses custom logo default mode URL', () => { + const branding = { + darkMode: false, + logo: { defaultUrl: '/defaultModeLogo' }, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(branding.logo.defaultUrl); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + }); + + describe('in dark mode ', () => { + it('uses opensearch logo if no logo provided', () => { + const branding = { + darkMode: true, + logo: {}, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(`${branding.assetFolderUrl}${darkOpensearchLogoUrl}`); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses opensearch logo if custom mark provided without logo', () => { + const branding = { + darkMode: true, + logo: {}, + mark: { defaultUrl: '/defaultModeMark' }, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(`${branding.assetFolderUrl}${darkOpensearchLogoUrl}`); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses custom logo default mode URL if no dark mode logo provided', () => { + const branding = { + darkMode: true, + logo: { defaultUrl: '/defaultModeLogo' }, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(branding.logo.defaultUrl); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + + it('uses custom logo dark mode URL', () => { + const branding = { + darkMode: true, + logo: { defaultUrl: '/defaultModeLogo', darkModeUrl: '/darkModeLogo' }, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const img = component.find('.logoContainer img'); + expect(img.prop('src')).toEqual(branding.logo.darkModeUrl); + expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`); + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/core/public/chrome/ui/header/home_icon.test.tsx b/src/core/public/chrome/ui/header/home_icon.test.tsx index 80d979eaea53..0f259a480186 100644 --- a/src/core/public/chrome/ui/header/home_icon.test.tsx +++ b/src/core/public/chrome/ui/header/home_icon.test.tsx @@ -10,9 +10,9 @@ import { HomeIcon } from './home_icon'; const defaultOpensearchMarkUrl = '/opensearch_mark_default_mode.svg'; const darkOpensearchMarkUrl = '/opensearch_mark_dark_mode.svg'; -describe('Header logo ', () => { +describe('Home button icon ', () => { describe('in default mode ', () => { - it('uses opensearch logo if no branding', () => { + it('uses opensearch mark if no branding provided', () => { const branding = {}; const component = mountWithIntl(); const icon = component.find('EuiIcon'); @@ -21,13 +21,13 @@ describe('Header logo ', () => { expect(component).toMatchSnapshot(); }); - it('uses opensearch logo if no mark provided', () => { + it('uses opensearch mark if no mark provided', () => { const branding = { darkMode: false, logo: {}, mark: {}, applicationTitle: 'custom title', - assetFolderUrl: 'ui/assets', + assetFolderUrl: 'base/ui/default_branding', }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); @@ -36,16 +36,17 @@ describe('Header logo ', () => { expect(component).toMatchSnapshot(); }); - it('uses opensearch logo if custom logo provided without mark', () => { + it('uses opensearch mark if custom logo provided without mark', () => { const branding = { darkMode: false, logo: { defaultUrl: '/defaultModeLogo' }, mark: {}, applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); - expect(icon.prop('type')).toEqual(defaultOpensearchMarkUrl); + expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}${defaultOpensearchMarkUrl}`); expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); expect(component).toMatchSnapshot(); }); @@ -56,6 +57,7 @@ describe('Header logo ', () => { logo: {}, mark: { defaultUrl: '/defaultModeMark' }, applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); @@ -66,13 +68,28 @@ describe('Header logo ', () => { }); describe('in dark mode ', () => { - it('uses opensearch logo if no mark provided', () => { + it('uses opensearch mark if no mark provided', () => { const branding = { darkMode: true, logo: {}, mark: {}, - assetFolderUrl: 'ui/assets', applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}${darkOpensearchMarkUrl}`); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + + it('uses opensearch mark if custom logo provided without mark', () => { + const branding = { + darkMode: true, + logo: { defaultUrl: '/defaultModeLogo' }, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); @@ -81,30 +98,138 @@ describe('Header logo ', () => { expect(component).toMatchSnapshot(); }); - it('uses opensearch logo if custom logo provided without mark', () => { + it('uses custom mark default mode URL if no dark mode mark provided', () => { + const branding = { + darkMode: true, + logo: {}, + mark: { defaultUrl: '/defaultModeMark' }, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual(branding.mark.defaultUrl); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + + it('uses custom mark dark mode URL', () => { + const branding = { + darkMode: true, + logo: {}, + mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' }, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + }); + + describe('in expanded light mode ', () => { + it('uses home icon if no mark provided', () => { + const branding = { + darkMode: false, + logo: {}, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual('home'); + expect(icon.prop('size')).toEqual(`m`); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + + it('uses home icon if custom logo provided without mark', () => { + const branding = { + darkMode: false, + logo: { defaultUrl: '/defaultModeLogo' }, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual('home'); + expect(icon.prop('size')).toEqual(`m`); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + + it('uses custom mark default mode URL', () => { + const branding = { + darkMode: false, + logo: {}, + mark: { defaultUrl: '/defaultModeMark' }, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual(branding.mark.defaultUrl); + expect(icon.prop('size')).toEqual(`l`); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + }); + + describe('in expanded dark mode ', () => { + it('uses home icon if no mark provided', () => { + const branding = { + darkMode: true, + logo: {}, + mark: {}, + applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, + }; + const component = mountWithIntl(); + const icon = component.find('EuiIcon'); + expect(icon.prop('type')).toEqual('home'); + expect(icon.prop('size')).toEqual(`m`); + expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); + expect(component).toMatchSnapshot(); + }); + + it('uses home icon if custom logo provided without mark', () => { const branding = { darkMode: true, logo: { defaultUrl: '/defaultModeLogo' }, mark: {}, applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); - expect(icon.prop('type')).toEqual(darkOpensearchMarkUrl); + expect(icon.prop('type')).toEqual('home'); + expect(icon.prop('size')).toEqual(`m`); expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); expect(component).toMatchSnapshot(); }); - it('uses custom mark default mode URL if no dark mode mark', () => { + it('uses custom mark default mode URL if no dark mode mark provided', () => { const branding = { darkMode: true, logo: {}, mark: { defaultUrl: '/defaultModeMark' }, applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); expect(icon.prop('type')).toEqual(branding.mark.defaultUrl); + expect(icon.prop('size')).toEqual(`l`); expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); expect(component).toMatchSnapshot(); }); @@ -115,10 +240,13 @@ describe('Header logo ', () => { logo: {}, mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' }, applicationTitle: 'custom title', + assetFolderUrl: 'base/ui/default_branding', + useExpandedMenu: true, }; const component = mountWithIntl(); const icon = component.find('EuiIcon'); expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl); + expect(icon.prop('size')).toEqual(`l`); expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`); expect(component).toMatchSnapshot(); }); diff --git a/src/core/public/chrome/ui/header/home_icon.tsx b/src/core/public/chrome/ui/header/home_icon.tsx index a76e6da00743..ab78169a5cfc 100644 --- a/src/core/public/chrome/ui/header/home_icon.tsx +++ b/src/core/public/chrome/ui/header/home_icon.tsx @@ -35,7 +35,8 @@ export const HomeIcon = ({ : `${assetFolderUrl}/${defaultMark}`; const testSubj = customMark ? 'customMark' : useExpandedMenu ? 'homeIcon' : 'defaultMark'; const title = `${applicationTitle} home`; - const size = useExpandedMenu ? ('m' as const) : ('l' as const); + // marks look better at the large size, but the home icon should be medium to fit in with other icons + const size = iconType === 'home' ? ('m' as const) : ('l' as const); return { 'data-test-subj': testSubj,