Changes

Signed-off-by: Dan Dong <[email protected]>
opensearch-project · Sep 12, 2024 · db649c3 · db649c3
1 parent 9bc2433
commit db649c3
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 30 deletions.
diff --git 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<HTMLDivElement>(null);
     const datePickerRef = useRef<HTMLDivElement>(null);
+    const collapseFn = useRef(() => {});
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const onCollapse = () => {
+      setIsExpanded(!isExpanded);
+    };
+
+    const onChange = () => {
+      onCollapse();
+      collapseFn.current();
+    };
+
     if (!view) {
       return <NoView />;
     }
@@ -79,32 +91,38 @@ export const AppContainer = React.memo(
           <Suspense fallback={<div>Loading...</div>}>
             <Context {...params}>
               <EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
-                {(EuiResizablePanel, EuiResizableButton) => (
-                  <>
-                    <EuiResizablePanel
-                      initialSize={20}
-                      minSize="260px"
-                      mode={['collapsible', { position: 'top' }]}
-                      paddingSize="none"
-                    >
-                      <Sidebar>
-                        <MemoizedPanel {...params} />
-                      </Sidebar>
-                    </EuiResizablePanel>
-                    <EuiResizableButton />
+                {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
+                  if (togglePanel) {
+                    collapseFn.current = () => togglePanel('sidebar', { direction: 'left' });
+                  }
+                  return (
+                    <>
+                      <EuiResizablePanel
+                        id="sidebar"
+                        initialSize={20}
+                        minSize="260px"
+                        mode={['collapsible', { position: 'top' }]}
+                        paddingSize="none"
+                      >
+                        <Sidebar>
+                          <MemoizedPanel {...params} element={minimizeButton} />
+                        </Sidebar>
+                      </EuiResizablePanel>
+                      <EuiResizableButton />
 
-                    <EuiResizablePanel
-                      initialSize={80}
-                      minSize="65%"
-                      mode="main"
-                      paddingSize="none"
-                    >
-                      <EuiPageBody className="deLayout__canvas">
-                        <MemoizedCanvas {...params} />
-                      </EuiPageBody>
-                    </EuiResizablePanel>
-                  </>
-                )}
+                      <EuiResizablePanel
+                        initialSize={80}
+                        minSize="65%"
+                        mode="main"
+                        paddingSize="none"
+                      >
+                        <EuiPageBody className="deLayout__canvas">
+                          <MemoizedCanvas {...params} />
+                        </EuiPageBody>
+                      </EuiResizablePanel>
+                    </>
+                  );
+                }}
               </EuiResizableContainer>
             </Context>
           </Suspense>

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
@@ -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({
     </EuiPopover>
   );
 
+  const minimizeButton = <EuiSmallButtonIcon iconType="menuLeft" />;
+
   if (isEnhancementsEnabledOverride) {
     return (
-      <div className="euiFormControlLayout euiFormControlLayout--group osdDiscoverSideBar__wrap">
-        {fieldSearch}
-        {fieldPopover}
-      </div>
+      <EuiFlexGroup gutterSize="xs" alignItems="center">
+        <EuiFlexItem>
+          <div className="euiFormControlLayout euiFormControlLayout--group osdDiscoverSideBar__wrap">
+            {fieldSearch}
+            {fieldPopover}
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{minimizeButton}</EuiFlexItem>
+      </EuiFlexGroup>
     );
   } else {
     return (