+
+ {
const component = mountWithIntl();
expect(component.find('[data-test-subj="headerApplicationTitle"]').exists()).toBeTruthy();
expect(component.find('[data-test-subj="breadcrumb first"]').exists()).toBeTruthy();
- expect(component.find('[data-test-subj="headerBadgeControl"]').exists()).toBeFalsy();
- expect(component.find('HeaderBadge').exists()).toBeFalsy();
- expect(component.find('[data-test-subj="headerLeftControl"]').exists()).toBeFalsy();
- expect(component.find('HeaderNavControls').exists()).toBeFalsy();
- expect(component.find('[data-test-subj="headerCenterControl"]').exists()).toBeFalsy();
- expect(component.find('[data-test-subj="headerRightControl"]').exists()).toBeFalsy();
- expect(component.find('HeaderActionMenu').exists()).toBeFalsy();
+ expect(component.find('[data-test-subj="headerBadgeControl"]').exists()).toBeTruthy();
+ expect(component.find('HeaderBadge').exists()).toBeTruthy();
+ expect(component.find('[data-test-subj="headerLeftControl"]').exists()).toBeTruthy();
+ expect(component.find('HeaderNavControls').exists()).toBeTruthy();
+ expect(component.find('[data-test-subj="headerCenterControl"]').exists()).toBeTruthy();
+ expect(component.find('[data-test-subj="headerRightControl"]').exists()).toBeTruthy();
+ expect(component.find('HeaderActionMenu').exists()).toBeTruthy();
expect(component.find('[data-test-subj="headerDescriptionControl"]').exists()).toBeTruthy();
expect(component.find('[data-test-subj="headerBottomControl"]').exists()).toBeTruthy();
expect(component).toMatchSnapshot();
@@ -252,9 +252,9 @@ describe('Header', () => {
const component = mountWithIntl();
expect(component.find('[data-test-subj="headerApplicationTitle"]').exists()).toBeFalsy();
expect(component.find('[data-test-subj="breadcrumb first"]').exists()).toBeFalsy();
- expect(component.find('HeaderActionMenu').exists()).toBeFalsy();
+ expect(component.find('HeaderActionMenu').exists()).toBeTruthy();
expect(component.find('RecentItems').exists()).toBeTruthy();
- expect(component.find('[data-test-subj="headerRightControl"]').exists()).toBeFalsy();
+ expect(component.find('[data-test-subj="headerRightControl"]').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 556fb830a740..72d9ba6be3fc 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -29,8 +29,6 @@
*/
import {
EuiButtonIcon,
- EuiFlexGroup,
- EuiFlexItem,
EuiHeader,
EuiHeaderProps,
EuiHeaderSection,
@@ -124,14 +122,6 @@ export interface HeaderProps {
useUpdatedHeader?: boolean;
}
-const hasValue = (value: any) => {
- if (Array.isArray(value) && value.length === 0) {
- return false;
- }
-
- return Boolean(value);
-};
-
export function Header({
http,
opensearchDashboardsVersion,
@@ -291,186 +281,93 @@ export function Header({
);
};
- const renderLeftControls = () => {
- let hasLeftControls;
- let hasNavControlsLeft;
-
- application.currentLeftControls$.subscribe((value) => {
- hasLeftControls = hasValue(value);
- });
- observables.navControlsLeft$.subscribe((value) => {
- hasNavControlsLeft = hasValue(value);
- });
-
- if (!hasLeftControls && !hasNavControlsLeft && useUpdatedHeader) {
- return null;
- }
-
- return (
- <>
- {useUpdatedHeader && (
-
-
-
- )}
-
- {/* Nav controls left */}
-
-
-
+ const renderLeftControls = () => (
+ <>
+ {useUpdatedHeader && (
+
+
-
- );
- };
+ )}
- const renderCenterControls = () => {
- let hasCenterControls;
- let hasNavControlsExpandedCenter;
- let hasNavControlsCenter;
-
- application.currentCenterControls$.subscribe((value) => {
- hasCenterControls = hasValue(value);
- });
- observables.navControlsExpandedCenter$.subscribe((value) => {
- hasNavControlsExpandedCenter = hasValue(value);
- });
- observables.navControlsCenter$.subscribe((value) => {
- hasNavControlsCenter = hasValue(value);
- });
-
- if (
- !hasCenterControls &&
- !hasNavControlsExpandedCenter &&
- !hasNavControlsCenter &&
- useUpdatedHeader
- ) {
- return null;
- }
-
- return (
- <>
- {useUpdatedHeader && (
-
-
-
- )}
-
- {useUpdatedHeader && (
-
-
-
- )}
+ {/* Nav controls left */}
+
+
+
+
+ );
-
-
+ const renderCenterControls = () => (
+ <>
+ {useUpdatedHeader && (
+
+
-
- );
- };
-
- const renderRightControls = () => {
- let hasNavControlsExpandedRight;
- let hasRightControls;
- let hasNavControlsRight;
-
- application.currentRightControls$.subscribe((value) => {
- hasRightControls = hasValue(value);
- });
- observables.navControlsExpandedRight$.subscribe((value) => {
- hasNavControlsExpandedRight = hasValue(value);
- });
- observables.navControlsRight$.subscribe((value) => {
- hasNavControlsRight = hasValue(value);
- });
-
- if (
- !hasRightControls &&
- !hasNavControlsExpandedRight &&
- !hasNavControlsRight &&
- useUpdatedHeader
- ) {
- return null;
- }
-
- return (
- <>
- {useUpdatedHeader && (
-
-
-
- )}
+ )}
- {useUpdatedHeader && (
-
-
-
- )}
-
-
-
+ {useUpdatedHeader && (
+
+
-
- );
- };
- const renderActionMenu = () => {
- let hasActionMenu;
- application.currentActionMenu$.subscribe((value) => {
- hasActionMenu = hasValue(value);
- });
-
- if (!hasActionMenu && useUpdatedHeader) {
- return null;
- }
-
- return (
-
-
+ )}
+
+
+
- );
- };
+
+ );
- const renderBadge = () => {
- let hasBadge;
- let hasCurrentBadgeControls;
+ const renderRightControls = () => (
+ <>
+ {useUpdatedHeader && (
+
+
+
+ )}
- application.currentBadgeControls$.subscribe((value) => {
- hasBadge = hasValue(value);
- });
- observables.badge$.subscribe((value) => {
- hasCurrentBadgeControls = hasValue(value);
- });
+ {useUpdatedHeader && (
+
+
+
+ )}
- if (!hasBadge && !hasCurrentBadgeControls && useUpdatedHeader) {
- return null;
- }
+
+
+
+
+ );
- return (
- <>
- {useUpdatedHeader && (
-
-
-
- )}
+ const renderActionMenu = () => (
+
+
+
+ );
- {/* Nav controls badge */}
+ const renderBadge = () => (
+ <>
+ {useUpdatedHeader && (
-
+
-
- );
- };
+ )}
+
+ {/* Nav controls badge */}
+
+
+
+
+ );
const renderHelp = () => (
@@ -499,12 +396,6 @@ export function Header({
);
- const leftControls = renderLeftControls();
- const centerControls = renderCenterControls();
- const rightControls = renderRightControls();
- const actionMenu = renderActionMenu();
- const badge = renderBadge();
-
const renderLegacyHeader = () => (
@@ -512,7 +403,7 @@ export function Header({
{renderNavToggle()}
- {leftControls}
+ {renderLeftControls()}
{/* Home loader left */}
@@ -529,12 +420,12 @@ export function Header({
{renderBreadcrumbs()}
- {badge}
+ {renderBadge()}
- {actionMenu}
- {centerControls}
- {rightControls}
+ {renderActionMenu()}
+ {renderCenterControls()}
+ {renderRightControls()}
{renderHelp()}
@@ -552,39 +443,22 @@ export function Header({
{/* Secondary header */}
-
- {/* Left Section */}
-
-
-
-
-
- {breadcrumbs && {breadcrumbs[breadcrumbs.length - 1]?.text}
}
-
-
-
-
- {badge && {badge}}
-
- {leftControls && {leftControls}}
-
-
-
- {/* Right Section */}
-
-
- {centerControls && {centerControls}}
-
- {actionMenu && {actionMenu}}
-
- {rightControls && {rightControls}}
-
-
-
+
+
+
+ {breadcrumbs && {breadcrumbs[breadcrumbs.length - 1]?.text}
}
+
+
+
+ {renderBadge()}
+ {renderLeftControls()}
+
+
+
+ {renderCenterControls()}
+ {renderActionMenu()}
+ {renderRightControls()}
+
@@ -611,9 +485,9 @@ export function Header({
{renderNavToggle()}
{renderRecentItems()}
- {actionMenu}
+ {renderActionMenu()}
- {rightControls}
+ {renderRightControls()}
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
index 436d34466510..1d053c0449b7 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
@@ -20,7 +20,7 @@ export function createDataSourceMenu() {
if (props.setMenuMountPoint) {
return (
-
+