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 fe633ad9180d..85dada1bf0cb 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 @@ -112,6 +112,80 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, ], "thrownError": null, }, @@ -170,7 +244,82 @@ exports[`Header handles visibility and lock changes 1`] = ` "closed": false, "hasError": false, "isStopped": false, - "observers": Array [], + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], "thrownError": null, }, "currentBottomControls$": BehaviorSubject { @@ -188,7 +337,82 @@ exports[`Header handles visibility and lock changes 1`] = ` "closed": false, "hasError": false, "isStopped": false, - "observers": Array [], + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], "thrownError": null, }, "currentDescriptionControls$": BehaviorSubject { @@ -206,34 +430,184 @@ exports[`Header handles visibility and lock changes 1`] = ` "closed": false, "hasError": false, "isStopped": false, - "observers": Array [], - "thrownError": null, - }, - "currentRightControls$": BehaviorSubject { - "_isScalar": false, - "_value": undefined, - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [], - "thrownError": null, - }, - "getComponent": [MockFunction], - "getUrlForApp": [MockFunction], - "history": Object { - "action": "PUSH", - "block": [MockFunction], - "createHref": [MockFunction], - "go": [MockFunction], - "goBack": [MockFunction], - "goForward": [MockFunction], - "length": 1, - "listen": [MockFunction], - "location": Object { - "hash": "", - "key": "", - "pathname": "/", - "search": "", + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], + "thrownError": null, + }, + "currentRightControls$": BehaviorSubject { + "_isScalar": false, + "_value": undefined, + "closed": false, + "hasError": false, + "isStopped": false, + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], + "thrownError": null, + }, + "getComponent": [MockFunction], + "getUrlForApp": [MockFunction], + "history": Object { + "action": "PUSH", + "block": [MockFunction], + "createHref": [MockFunction], + "go": [MockFunction], + "goBack": [MockFunction], + "goForward": [MockFunction], + "length": 1, + "listen": [MockFunction], + "location": Object { + "hash": "", + "key": "", + "pathname": "/", + "search": "", "state": undefined, }, "push": [MockFunction], @@ -295,6 +669,80 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, ], "thrownError": null, } @@ -1784,18 +2232,6 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, - ], - "thrownError": null, - } - } - navControlsExpandedCenter$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ Subscriber { "_parentOrParents": null, "_subscriptions": Array [ @@ -1833,18 +2269,6 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, - ], - "thrownError": null, - } - } - navControlsExpandedRight$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ Subscriber { "_parentOrParents": null, "_subscriptions": Array [ @@ -1886,7 +2310,7 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - navControlsLeft$={ + navControlsExpandedCenter$={ BehaviorSubject { "_isScalar": false, "_value": Array [], @@ -1931,29 +2355,43 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, - ], - "thrownError": null, - } - } - navControlsLeftBottom$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [], - "thrownError": null, - } - } - navControlsRight$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, Subscriber { "_parentOrParents": null, "_subscriptions": Array [ @@ -1995,29 +2433,10 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - navGroupEnabled={false} - navGroupsMap$={ - BehaviorSubject { - "_isScalar": false, - "_value": Object {}, - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [], - "thrownError": null, - } - } - navLinks$={ + navControlsExpandedRight$={ BehaviorSubject { "_isScalar": false, - "_value": Array [ - Object { - "baseUrl": "", - "href": "", - "id": "opensearchDashboards", - "title": "opensearchDashboards", - }, - ], + "_value": Array [], "closed": false, "hasError": false, "isStopped": false, @@ -2137,19 +2556,10 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - onIsLockedUpdate={[Function]} - opensearchDashboardsDocLink="/docs" - opensearchDashboardsVersion="1.0.0" - recentlyAccessed$={ + navControlsLeft$={ BehaviorSubject { "_isScalar": false, - "_value": Array [ - Object { - "id": "dashboard", - "label": "dashboard", - "link": "", - }, - ], + "_value": Array [], "closed": false, "hasError": false, "isStopped": false, @@ -2191,22 +2601,43 @@ exports[`Header handles visibility and lock changes 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, - ], - "thrownError": null, - } - } - setCurrentNavGroup={[MockFunction]} - sidecarConfig$={ - BehaviorSubject { - "_isScalar": false, - "_value": Object { - "dockedMode": "right", - "paddingSize": 640, - }, - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, Subscriber { "_parentOrParents": null, "_subscriptions": Array [ @@ -2248,9 +2679,7 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - survey="/" - useUpdatedHeader={false} - workspaceList$={ + navControlsLeftBottom$={ BehaviorSubject { "_isScalar": false, "_value": Array [], @@ -2261,9120 +2690,60 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } -> - - - , - ], + navControlsRight$={ + BehaviorSubject { + "_isScalar": false, + "_value": Array [], + "closed": false, + "hasError": false, + "isStopped": false, + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], }, - Object { - "borders": "none", - "items": Array [ - - - , - ], + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], }, - Object { - "borders": "none", - "items": Array [ - - - , - , - ], - }, - ] - } - style={ - Object { - "paddingRight": 640, - } - } - theme="dark" - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - , - } - } - 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]} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - test - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } - 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]} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Manage cloud deployment - - - - - - - - - - - - - - - - - - - - Recently viewed - - - - - } - className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading" - data-test-subj="collapsibleNavGroup-recentlyViewed" - id="mockId" - initialIsOpen={true} - isLoading={false} - isLoadingMessage={false} - onToggle={[Function]} - paddingSize="none" - > - - - - - - - - - - - - - - - - Recently viewed - - - - - - - - - - - - - - - - - - - - - dashboard - - - - - - - - - - - - - - - - - - - - - - - - - - - - - opensearchDashboards - - - - - - - - - - - - - - - - - - - Undock navigation - - , - } - } - color="subdued" - data-test-subj="collapsible-nav-lock" - iconType="lock" - label="Undock navigation" - onClick={[Function]} - size="xs" - > - - - - - - - Undock navigation - - - - - - - - - - - - - - - - - - -`; - -exports[`Header renders application header without title and breadcrumbs 1`] = ` - - - - - - - - - - - - - - - - , - } - } - className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" - color="text" - data-test-subj="toggleNavButton" - onClick={[Function]} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - , - } - } - className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l eui-hideFor--xxl eui-hideFor--xxxl" - color="text" - data-test-subj="toggleNavButton" - flush="both" - isSmallScreen={true} - onClick={[Function]} - > - - - - - - - - - - - - - - - - - - - - - - - - - } - workspaceList$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ - Subscriber { - "_parentOrParents": null, - "_subscriptions": Array [ - SubjectSubscription { - "_parentOrParents": [Circular], - "_subscriptions": null, - "closed": false, - "subject": [Circular], - "subscriber": [Circular], - }, - ], - "closed": false, - "destination": SafeSubscriber { - "_complete": undefined, - "_context": [Circular], - "_error": undefined, - "_next": [Function], - "_parentOrParents": null, - "_parentSubscriber": [Circular], - "_subscriptions": null, - "closed": false, - "destination": Object { - "closed": true, - "complete": [Function], - "error": [Function], - "next": [Function], - }, - "isStopped": false, - "syncErrorThrowable": false, - "syncErrorThrown": false, - "syncErrorValue": null, - }, - "isStopped": false, - "syncErrorThrowable": true, - "syncErrorThrown": false, - "syncErrorValue": null, - }, - ], - "thrownError": null, - } - } - > - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - initialFocus={false} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - repositionOnScroll={true} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`Header renders condensed header 1`] = ` - + + + , + ], + }, + Object { + "borders": "none", + "items": Array [ + + + , + ], }, - ], - "closed": false, - "destination": SafeSubscriber { - "_complete": undefined, - "_context": [Circular], - "_error": undefined, - "_next": [Function], - "_parentOrParents": null, - "_parentSubscriber": [Circular], - "_subscriptions": null, - "closed": false, - "destination": Object { - "closed": true, - "complete": [Function], - "error": [Function], - "next": [Function], + Object { + "borders": "none", + "items": Array [ + + + , + , + ], }, - "isStopped": false, - "syncErrorThrowable": false, - "syncErrorThrown": false, - "syncErrorValue": null, - }, - "isStopped": false, - "syncErrorThrowable": true, - "syncErrorThrown": false, - "syncErrorValue": null, - }, - ], - "thrownError": null, - } - } - survey="/" - useUpdatedHeader={false} - workspaceList$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [], - "thrownError": null, - } - } -> - - + ] + } + style={ + Object { + "paddingRight": 640, + } + } + theme="dark" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -12476,11 +5200,7 @@ exports[`Header renders condensed header 1`] = ` className="homeIconContainer" > @@ -12740,7 +5460,11 @@ exports[`Header renders condensed header 1`] = ` breadcrumbs$={ BehaviorSubject { "_isScalar": false, - "_value": Array [], + "_value": Array [ + Object { + "text": "test", + }, + ], "closed": false, "hasError": false, "isStopped": false, @@ -12980,6 +5704,80 @@ exports[`Header renders condensed header 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, ], "thrownError": null, } @@ -13046,6 +5844,80 @@ exports[`Header renders condensed header 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, ], "thrownError": null, } @@ -13110,28 +5982,176 @@ exports[`Header renders condensed header 1`] = ` "syncErrorThrown": false, "syncErrorValue": null, }, - ], - "thrownError": null, - } - } - /> - - - - - + + + + + + - + + + + + + } + 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]} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Manage cloud deployment + + + + + + + + + + + + + + + + + + + + Recently viewed + + + + + } + className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading" + data-test-subj="collapsibleNavGroup-recentlyViewed" + id="mockId" + initialIsOpen={true} + isLoading={false} + isLoadingMessage={false} + onToggle={[Function]} + paddingSize="none" + > + + + + + + + + + + + + + + + + Recently viewed + + + + + + + + + + + + + + + + + + + + + dashboard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + opensearchDashboards + + + + + + + + + + + + + + + + + + + Undock navigation + + , + } + } + color="subdued" + data-test-subj="collapsible-nav-lock" + iconType="lock" + label="Undock navigation" + onClick={[Function]} + size="xs" + > + + + + + + + Undock navigation + + + + + + + + + + + + + + + + + + +`; + +exports[`Header renders application header without title and breadcrumbs 1`] = ` + + + + + + + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton newAppTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l eui-hideFor--xxl eui-hideFor--xxxl" + color="text" + data-test-subj="toggleNavButton" + flush="both" + isSmallScreen={true} + onClick={[Function]} + > + + + + + + + + + + + + + + + + + + + + + + + + + } + workspaceList$={ + BehaviorSubject { + "_isScalar": false, + "_value": Array [], + "closed": false, + "hasError": false, + "isStopped": false, + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, "syncErrorThrown": false, "syncErrorValue": null, - "toRespond": 0, - "values": Array [ - undefined, - "", - ], }, - "syncErrorThrowable": false, + "isStopped": false, + "syncErrorThrowable": true, "syncErrorThrown": false, "syncErrorValue": null, }, @@ -14586,154 +10863,45 @@ exports[`Header renders condensed header 1`] = ` "thrownError": null, } } - intl={ - Object { - "defaultFormats": Object {}, - "defaultLocale": "en", - "formatDate": [Function], - "formatHTMLMessage": [Function], - "formatMessage": [Function], - "formatNumber": [Function], - "formatPlural": [Function], - "formatRelative": [Function], - "formatTime": [Function], - "formats": Object { - "date": Object { - "full": Object { - "day": "numeric", - "month": "long", - "weekday": "long", - "year": "numeric", - }, - "long": Object { - "day": "numeric", - "month": "long", - "year": "numeric", - }, - "medium": Object { - "day": "numeric", - "month": "short", - "year": "numeric", - }, - "short": Object { - "day": "numeric", - "month": "numeric", - "year": "2-digit", - }, - }, - "number": Object { - "currency": Object { - "style": "currency", - }, - "percent": Object { - "style": "percent", - }, - }, - "relative": Object { - "days": Object { - "units": "day", - }, - "hours": Object { - "units": "hour", - }, - "minutes": Object { - "units": "minute", - }, - "months": Object { - "units": "month", - }, - "seconds": Object { - "units": "second", - }, - "years": Object { - "units": "year", - }, - }, - "time": Object { - "full": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - "timeZoneName": "short", - }, - "long": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - "timeZoneName": "short", - }, - "medium": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - }, - "short": Object { - "hour": "numeric", - "minute": "numeric", - }, - }, - }, - "formatters": Object { - "getDateTimeFormat": [Function], - "getMessageFormat": [Function], - "getNumberFormat": [Function], - "getPluralFormat": [Function], - "getRelativeFormat": [Function], - }, - "locale": "en", - "messages": Object {}, - "now": [Function], - "onError": [Function], - "textComponent": Symbol(react.fragment), - "timeZone": null, - } - } - opensearchDashboardsDocLink="/docs" - opensearchDashboardsVersion="1.0.0" - surveyLink="/" - useDefaultContent={true} > - - - + size="xs" + /> } closePopover={[Function]} - data-test-subj="helpMenuButton" display="inlineBlock" hasArrow={true} - id="headerHelpMenu" + initialFocus={false} isOpen={false} ownFocus={true} - panelPaddingSize="s" + panelPaddingSize="m" repositionOnScroll={true} > @@ -14743,111 +10911,71 @@ exports[`Header renders condensed header 1`] = ` onMouseOut={[Function]} onMouseOver={[Function]} > - - - - - - - - - - , - } - } - className="euiHeaderSectionItemButton" - color="text" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - > - + - - - - - - - - - - - - - - + + + + - - - - - - - - + + + + + + + + + + + + `; -exports[`Header renders page header with application title 1`] = ` +exports[`Header renders condensed header 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]} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + - + - - - + test - - , + + + + + + + + + + + + + + + - + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - , - } - } - className="euiHeaderSectionItemButton newPageTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l eui-hideFor--xxl eui-hideFor--xxxl" - color="text" - data-test-subj="toggleNavButton" - flush="both" - isSmallScreen={true} - onClick={[Function]} + side="right" + /> + + + - - - - - - - - - - - - - - - - - - - - - - - - - } - workspaceList$={ - BehaviorSubject { - "_isScalar": false, - "_value": Array [], - "closed": false, - "hasError": false, - "isStopped": false, - "observers": Array [ - Subscriber { - "_parentOrParents": null, - "_subscriptions": Array [ - SubjectSubscription { - "_parentOrParents": [Circular], - "_subscriptions": null, - "closed": false, - "subject": [Circular], - "subscriber": [Circular], - }, - ], - "closed": false, - "destination": SafeSubscriber { - "_complete": undefined, - "_context": [Circular], - "_error": undefined, - "_next": [Function], - "_parentOrParents": null, - "_parentSubscriber": [Circular], - "_subscriptions": null, - "closed": false, - "destination": Object { - "closed": true, - "complete": [Function], - "error": [Function], - "next": [Function], - }, - "isStopped": false, - "syncErrorThrowable": false, + "isStopped": true, + "observables": Array [ + BehaviorSubject { + "_isScalar": false, + "_value": undefined, + "closed": false, + "hasError": false, + "isStopped": false, + "observers": Array [ + InnerSubscriber { + "_parentOrParents": [Circular], + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "index": 1, + "isStopped": false, + "outerIndex": 0, + "outerValue": undefined, + "parent": [Circular], + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], + "thrownError": null, + }, + [Circular], + ], + "resultSelector": undefined, + "syncErrorThrowable": true, "syncErrorThrown": false, "syncErrorValue": null, + "toRespond": 0, + "values": Array [ + undefined, + "", + ], }, - "isStopped": false, - "syncErrorThrowable": true, + "syncErrorThrowable": false, "syncErrorThrown": false, "syncErrorValue": null, }, @@ -17601,45 +16758,154 @@ exports[`Header renders page header with application title 1`] = ` "thrownError": null, } } + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object { + "date": Object { + "full": Object { + "day": "numeric", + "month": "long", + "weekday": "long", + "year": "numeric", + }, + "long": Object { + "day": "numeric", + "month": "long", + "year": "numeric", + }, + "medium": Object { + "day": "numeric", + "month": "short", + "year": "numeric", + }, + "short": Object { + "day": "numeric", + "month": "numeric", + "year": "2-digit", + }, + }, + "number": Object { + "currency": Object { + "style": "currency", + }, + "percent": Object { + "style": "percent", + }, + }, + "relative": Object { + "days": Object { + "units": "day", + }, + "hours": Object { + "units": "hour", + }, + "minutes": Object { + "units": "minute", + }, + "months": Object { + "units": "month", + }, + "seconds": Object { + "units": "second", + }, + "years": Object { + "units": "year", + }, + }, + "time": Object { + "full": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + "timeZoneName": "short", + }, + "long": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + "timeZoneName": "short", + }, + "medium": Object { + "hour": "numeric", + "minute": "numeric", + "second": "numeric", + }, + "short": Object { + "hour": "numeric", + "minute": "numeric", + }, + }, + }, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": Object {}, + "now": [Function], + "onError": [Function], + "textComponent": Symbol(react.fragment), + "timeZone": null, + } + } + opensearchDashboardsDocLink="/docs" + opensearchDashboardsVersion="1.0.0" + surveyLink="/" + useDefaultContent={true} > - + > + + } closePopover={[Function]} + data-test-subj="helpMenuButton" display="inlineBlock" hasArrow={true} - initialFocus={false} + id="headerHelpMenu" isOpen={false} ownFocus={true} - panelPaddingSize="m" + panelPaddingSize="s" repositionOnScroll={true} > @@ -17649,358 +16915,2448 @@ exports[`Header renders page header with application title 1`] = ` onMouseOut={[Function]} onMouseOver={[Function]} > - - + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} - type="button" > - - - - - + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + +`; + +exports[`Header renders page header with application title 1`] = ` + + + + + + + - + + + + + + + + , + } } - data-test-subj="breadcrumbs" - max={10} - simplify={true} + className="euiHeaderSectionItemButton newPageTopNavExpander navToggleInLargeScreen eui-hideFor--xs eui-hideFor--s eui-hideFor--m" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} > - - - - - + + + + + + + + + + + + + + + - test + + + - - - - - - - - - - - - - - - - + + , + } + } + className="euiHeaderSectionItemButton newPageTopNavExpander navToggleInSmallScreen eui-hideFor--xl eui-hideFor--l eui-hideFor--xxl eui-hideFor--xxxl" + color="text" + data-test-subj="toggleNavButton" + flush="both" + isSmallScreen={true} + onClick={[Function]} > - - - - - testTitle - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } - /> - - - - - - - + + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + initialFocus={false} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" + repositionOnScroll={true} + > + + + + + + + + + + + + + + + + + - - - + + - - - + + - - + + + test + + + + + + - - - - - - - - - + + + + + + + + + + + - - + className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" + > + + + + + + + testTitle + + + + + + + + - - + - + + + - + - + + + + + +`; + +exports[`Header toggles primary navigation menu when clicked 1`] = ` + - - - - -`; - -exports[`Header toggles primary navigation menu when clicked 1`] = ` - { 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()).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="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="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()).toBeTruthy(); + expect(component.find('HeaderActionMenu').exists()).toBeFalsy(); expect(component.find('RecentItems').exists()).toBeTruthy(); - expect(component.find('[data-test-subj="headerRightControl"]').exists()).toBeTruthy(); + expect(component.find('[data-test-subj="headerRightControl"]').exists()).toBeFalsy(); expect(component).toMatchSnapshot(); }); }); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 24f19806daef..b0efce3fe6c6 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -29,6 +29,8 @@ */ import { EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, EuiHeader, EuiHeaderProps, EuiHeaderSection, @@ -122,6 +124,14 @@ 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, @@ -281,93 +291,186 @@ export function Header({ ); }; - const renderLeftControls = () => ( - <> - {useUpdatedHeader && ( - - - - )} + const renderLeftControls = () => { + let hasLeftControls; + let hasNavControlsLeft; - {/* Nav controls left */} - - - - > - ); + application.currentLeftControls$.subscribe((value) => { + hasLeftControls = hasValue(value); + }); + observables.navControlsLeft$.subscribe((value) => { + hasNavControlsLeft = hasValue(value); + }); - const renderCenterControls = () => ( - <> - {useUpdatedHeader && ( - - - - )} + if (!hasLeftControls && !hasNavControlsLeft && useUpdatedHeader) { + return null; + } - {useUpdatedHeader && ( - - - - )} + return ( + <> + {useUpdatedHeader && ( + + + + )} - - - - > - ); + {/* Nav controls left */} - const renderRightControls = () => ( - <> - {useUpdatedHeader && ( - - + + - )} + > + ); + }; - {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 && ( + + + + )} + + + - )} + > + ); + }; - - + 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 && ( + + + + )} + + + + + > + ); + }; + const renderActionMenu = () => { + let hasActionMenu; + application.currentActionMenu$.subscribe((value) => { + hasActionMenu = hasValue(value); + }); + + if (!hasActionMenu && useUpdatedHeader) { + return null; + } + + return ( + + - > - ); + ); + }; - const renderActionMenu = () => ( - - - - ); + const renderBadge = () => { + let hasBadge; + let hasCurrentBadgeControls; - const renderBadge = () => ( - <> - {useUpdatedHeader && ( + application.currentBadgeControls$.subscribe((value) => { + hasBadge = hasValue(value); + }); + observables.badge$.subscribe((value) => { + hasCurrentBadgeControls = hasValue(value); + }); + + if (!hasBadge && !hasCurrentBadgeControls && useUpdatedHeader) { + return null; + } + + return ( + <> + {useUpdatedHeader && ( + + + + )} + + {/* Nav controls badge */} - + - )} - - {/* Nav controls badge */} - - - - > - ); + > + ); + }; const renderHelp = () => ( @@ -396,6 +499,12 @@ export function Header({ ); + const leftControls = renderLeftControls(); + const centerControls = renderCenterControls(); + const rightControls = renderRightControls(); + const actionMenu = renderActionMenu(); + const badge = renderBadge(); + const renderLegacyHeader = () => ( @@ -403,7 +512,7 @@ export function Header({ {renderNavToggle()} - {renderLeftControls()} + {leftControls} {/* Home loader left */} @@ -420,12 +529,12 @@ export function Header({ {renderBreadcrumbs()} - {renderBadge()} + {badge} - {renderActionMenu()} - {renderCenterControls()} - {renderRightControls()} + {actionMenu} + {centerControls} + {rightControls} {renderHelp()} @@ -443,22 +552,39 @@ export function Header({ {/* Secondary header */} - - - - {breadcrumbs && {breadcrumbs[breadcrumbs.length - 1]?.text}} - - - - {renderBadge()} - {renderLeftControls()} - - - - {renderCenterControls()} - {renderActionMenu()} - {renderRightControls()} - + + {/* Left Section */} + + + + + + {breadcrumbs && {breadcrumbs[breadcrumbs.length - 1]?.text}} + + + + + {badge && {badge}} + + {leftControls && {leftControls}} + + + + {/* Right Section */} + + + {centerControls && {centerControls}} + + {actionMenu && {actionMenu}} + + {rightControls && {rightControls}} + + + @@ -485,9 +611,9 @@ export function Header({ {renderNavToggle()} {renderRecentItems()} - {renderActionMenu()} + {actionMenu} - {renderRightControls()} + {rightControls} 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 1d053c0449b7..436d34466510 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 ( - +