diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx index 9326c4097f0f..519e6e618df0 100644 --- a/src/plugins/data_explorer/public/components/app_container.tsx +++ b/src/plugins/data_explorer/public/components/app_container.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { memo, useRef } from 'react'; +import React, { memo, useRef, useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, @@ -35,6 +35,18 @@ export const AppContainer = React.memo( const topLinkRef = useRef(null); const datePickerRef = useRef(null); + const collapseFn = useRef(() => {}); + const [isExpanded, setIsExpanded] = useState(true); + + const onCollapse = () => { + setIsExpanded(!isExpanded); + }; + + const onChange = () => { + onCollapse(); + collapseFn.current(); + }; + if (!view) { return ; } @@ -79,32 +91,38 @@ export const AppContainer = React.memo( Loading...}> - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - - - - - + {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => { + if (togglePanel) { + collapseFn.current = () => togglePanel('sidebar', { direction: 'left' }); + } + return ( + <> + + + + + + - - - - - - - )} + + + + + + + ); + }} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx index 2e726eb0e964..79c3be497fc8 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx +++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx @@ -48,6 +48,7 @@ import { EuiSmallFilterButton, EuiFilterGroup, EuiFieldSearch, + EuiSmallButtonIcon, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { UI_SETTINGS } from 'src/plugins/data/common'; @@ -327,12 +328,19 @@ export function DiscoverFieldSearch({ ); + const minimizeButton = ; + if (isEnhancementsEnabledOverride) { return ( -
- {fieldSearch} - {fieldPopover} -
+ + +
+ {fieldSearch} + {fieldPopover} +
+
+ {minimizeButton} +
); } else { return (