diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index bb8baa3462f1..9d8077b50ad4 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,3 +1,3 @@ @import "@elastic/eui/src/global_styling/variables/header"; -$osdHeaderOffset: $euiHeaderHeightCompensation * 2; +$osdHeaderOffset: $euiHeaderHeightCompensation; 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 640cea65f50e..480d364c7abf 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 @@ -1671,234 +1671,123 @@ exports[`Header renders 1`] = ` > +
+ +
+ +
+ + , - , - ], - }, - Object { - "borders": "none", - "items": Array [ - + +
+ + +
- , - ], - }, - Object { - "borders": "none", - "items": Array [ - + + +
- - , - + + + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + > + + + + +
+ +
+ + + + + + + + + +
+ +
+ + +
+ +
+ , - , - ], - }, - ] - } - theme="dark" - > -
- -
+ > +
+ +
+
- - - -
- OpenSearch Dashboards logo -
- - - + />
- - - - - -
- -
- - -
- -
- - - -
- -
- - -
- -
- -
- - -
- - - - - } - 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]} - > - - - -
-
- - - -
- - -
- -
- -
- -
- - -
- -
- -
- - - - - - - - - - , - } - } - className="euiHeaderSectionItemButton" - color="text" - data-test-subj="toggleNavButton" - onClick={[Function]} - > - - - -
- - -
- - - - - - - - - - -
+ + + + } + 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/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap b/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap index 80b66e95bd41..cfd47ac0aba7 100644 --- a/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap +++ b/src/core/public/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Header logo in dark mode rendered using logo dark mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in dark mode rendered using logo default mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in dark mode rendered using mark dark mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in dark mode rendered using mark default mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in dark mode rendered using original opensearch logo 1`] = ` - - custom title logo - + + + + `; exports[`Header logo in default mode rendered using logo default mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in default mode rendered using mark default mode URL 1`] = ` - -
- custom title logo -
- + + `; exports[`Header logo in default mode rendered using the original opensearch logo 1`] = ` - - custom title logo - + + + + `; diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx b/src/core/public/chrome/ui/header/branding/mark.test.tsx similarity index 80% rename from src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx rename to src/core/public/chrome/ui/header/branding/mark.test.tsx index f04679aea6c6..122760d1b0cd 100644 --- a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx +++ b/src/core/public/chrome/ui/header/branding/mark.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; -import { CustomLogo } from './opensearch_dashboards_custom_logo'; +import { Mark } from './mark'; describe('Header logo ', () => { describe('in default mode ', () => { @@ -16,7 +16,7 @@ describe('Header logo ', () => { mark: {}, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -27,7 +27,7 @@ describe('Header logo ', () => { mark: { defaultUrl: '/defaultModeMark' }, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -38,7 +38,7 @@ describe('Header logo ', () => { mark: {}, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); }); @@ -51,7 +51,7 @@ describe('Header logo ', () => { mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' }, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -62,7 +62,7 @@ describe('Header logo ', () => { mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' }, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -73,7 +73,7 @@ describe('Header logo ', () => { mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' }, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -84,7 +84,7 @@ describe('Header logo ', () => { mark: { defaultUrl: '/defaultModeMark' }, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); @@ -95,7 +95,7 @@ describe('Header logo ', () => { mark: {}, applicationTitle: 'custom title', }; - const component = mountWithIntl(); + const component = mountWithIntl(); expect(component).toMatchSnapshot(); }); }); diff --git a/src/core/public/chrome/ui/header/branding/mark.tsx b/src/core/public/chrome/ui/header/branding/mark.tsx new file mode 100644 index 000000000000..7f6ebef6c406 --- /dev/null +++ b/src/core/public/chrome/ui/header/branding/mark.tsx @@ -0,0 +1,39 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiIcon } from '@elastic/eui'; +import { ChromeBranding } from '../../../chrome_service'; + +/** + * Use branding configurations to render the header mark on the nav bar. + * + * @param {ChromeBranding} - branding object consist of mark, darkmode selection, asset path and title + * @returns Mark component which is going to be rendered on the main page header bar. + */ +export const Mark = ({ darkMode, assetFolderUrl, mark, applicationTitle }: ChromeBranding) => { + const { defaultUrl: markUrl, darkModeUrl: darkMarkUrl } = mark ?? {}; + + const customMark = darkMode ? darkMarkUrl ?? markUrl : markUrl; + const altText = `${applicationTitle} logo`; + + return customMark ? ( + + ) : ( + + ); +}; diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx deleted file mode 100644 index 734b2dd3a1cc..000000000000 --- a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import '../header_logo.scss'; -import { ChromeBranding } from '../../../chrome_service'; - -/** - * Use branding configurations to render the header logo on the nav bar. - * - * @param {ChromeBranding} - branding object consist of logo, mark and title - * @returns Custom branding logo component which is going to be rendered on the main page header bar. - * If logo default is valid, the full logo by logo default config will be rendered; - * if not, the logo icon by mark default config will be rendered; if both are not found, - * the default OpenSearch Dashboards logo will be rendered. - */ -export const CustomLogo = ({ ...branding }: ChromeBranding) => { - const darkMode = branding.darkMode; - const assetFolderUrl = branding.assetFolderUrl; - const logoDefault = branding.logo?.defaultUrl; - const logoDarkMode = branding.logo?.darkModeUrl; - const markDefault = branding.mark?.defaultUrl; - const markDarkMode = branding.mark?.darkModeUrl; - const applicationTitle = branding.applicationTitle; - - /** - * Use branding configurations to check which URL to use for rendering - * header logo in nav bar in default mode - * - * @returns a valid custom URL or undefined if no valid URL is provided - */ - const customHeaderLogoDefaultMode = () => { - return logoDefault ?? markDefault ?? undefined; - }; - - /** - * Use branding configurations to check which URL to use for rendering - * header logo in nav bar in dark mode - * - * @returns a valid custom URL or undefined if no valid URL is provided - */ - const customHeaderLogoDarkMode = () => { - return logoDarkMode ?? logoDefault ?? markDarkMode ?? markDefault ?? undefined; - }; - - /** - * Render custom header logo for both default mode and dark mode - * - * @returns a valid custom header logo URL, or undefined - */ - const customHeaderLogo = () => { - return darkMode ? customHeaderLogoDarkMode() : customHeaderLogoDefaultMode(); - }; - - return customHeaderLogo() ? ( -
- {applicationTitle -
- ) : ( - {applicationTitle - ); -}; diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 15a78c7350c8..d10a521d822d 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -33,9 +33,7 @@ import { EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, - EuiHideFor, EuiIcon, - EuiShowFor, htmlIdGenerator, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; @@ -114,51 +112,6 @@ export function Header({ <>
- , - , - ], - borders: 'none', - }, - { - ...(observables.navControlsCenter$ && { - items: [ - - - , - ], - }), - borders: 'none', - }, - { - items: [ - - - , - , - , - ], - borders: 'none', - }, - ]} - /> - @@ -177,7 +130,22 @@ export function Header({ - + {observables.navControlsLeft$ && ( + + + + )} + + + + - + {observables.badge$ && ( + + + + )} + + {observables.navControlsCenter$ && ( + + + + )} + + + + + + {observables.navControlsRight$ && ( + + + + )}
diff --git a/src/core/public/chrome/ui/header/header_logo.scss b/src/core/public/chrome/ui/header/header_logo.scss deleted file mode 100644 index 7835863e60c0..000000000000 --- a/src/core/public/chrome/ui/header/header_logo.scss +++ /dev/null @@ -1,9 +0,0 @@ -.logoContainer { - height: 30px; - padding: 3px 3px 3px 10px; -} - -.logoImage { - height: 100%; - max-width: 100%; -} diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx index bbbd173c7bbd..86d013c8e336 100644 --- a/src/core/public/chrome/ui/header/header_logo.tsx +++ b/src/core/public/chrome/ui/header/header_logo.tsx @@ -33,10 +33,11 @@ import React from 'react'; import useObservable from 'react-use/lib/useObservable'; import { Observable } from 'rxjs'; import Url from 'url'; +import { EuiHeaderSectionItemButton } from '@elastic/eui'; import { ChromeNavLink } from '../..'; -import { CustomLogo } from './branding/opensearch_dashboards_custom_logo'; import { ChromeBranding } from '../../chrome_service'; -import './header_logo.scss'; +import { LoadingIndicator } from '../loading_indicator'; +import { Mark } from './branding/mark'; function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void { let current = element; @@ -102,6 +103,7 @@ interface Props { href: string; navLinks$: Observable; forceNavigation$: Observable; + loadingCount$: Observable; navigateToApp: (appId: string) => void; branding: ChromeBranding; } @@ -109,18 +111,25 @@ interface Props { export function HeaderLogo({ href, navigateToApp, branding, ...observables }: Props) { const forceNavigation = useObservable(observables.forceNavigation$, false); const navLinks = useObservable(observables.navLinks$, []); + const loadingCount = useObservable(observables.loadingCount$, 0); return ( - onClick(e, forceNavigation, navLinks, navigateToApp)} - href={href} - aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', { - defaultMessage: 'Go to home page', - })} - className="logoContainer" - > - - + + {loadingCount > 0 ? ( + + ) : ( + onClick(e, forceNavigation, navLinks, navigateToApp)} + href={href} + aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', { + defaultMessage: 'Go to home page', + })} + className="logoContainer" + > + + + )} + ); }