[BUG] Fix Discover table panel size auto adjust in both Discover and …

…Dashboard

* Add React.memo on parent comp
* Restore embeddable panel style

Issue Resolve
opensearch-project#5440
opensearch-project#5415

Signed-off-by: ananzh <ananzh@amazon.com>

src/plugins/data_explorer/public/components/app_container.tsx

@@ -20,19 +20,23 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa
 
   const { Canvas, Panel, Context } = view;
 
+  const MemorizedCanvas = React.memo(Canvas);
+  const MemorizedPanel = React.memo(Panel);
+  const MemorizedContext = React.memo(Context);
+
   // Render the application DOM.
   return (
     <EuiPage className="deLayout" paddingSize="none">
       {/* TODO: improve fallback state */}
       <Suspense fallback={<div>Loading...</div>}>
-        <Context {...params}>
+        <MemorizedContext {...params}>
           <Sidebar>
-            <Panel {...params} />
+            <MemorizedPanel {...params} />
           </Sidebar>
           <EuiPageBody className="deLayout__canvas">
-            <Canvas {...params} />
+            <MemorizedCanvas {...params} />
           </EuiPageBody>
-        </Context>
+        </MemorizedContext>
       </Suspense>
     </EuiPage>
   );

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -13,7 +13,6 @@ import { DataGridFlyout } from './data_grid_table_flyout';
 import { DiscoverGridContextProvider } from './data_grid_table_context';
 import { toolbarVisibility } from './constants';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
-import { DiscoverServices } from '../../../build_services';
 import { usePagination } from '../utils/use_pagination';
 import { SortOrder } from '../../../saved_searches/types';
 import { buildColumns } from '../../utils/columns';
@@ -177,6 +176,7 @@ export const DataGridTable = ({
         data-title={title}
         data-description={description}
         data-test-subj="discoverTable"
+        className={'dscDiscoverGrid'}
       >
         <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
           <EuiPanel paddingSize="s" style={{ height: '100%' }}>

src/plugins/discover/public/embeddable/search_embeddable.scss

@@ -0,0 +1,20 @@
+/**
+   * 1. We want the osdDocTable__container to scroll only when embedded in an embeddable panel
+   * 2. Force a better looking scrollbar
+   */
+.embPanel {
+  .osdDocTable__container {
+    @include euiScrollBar; /* 2 */
+
+    flex: 1 1 0; /* 1 */
+    overflow: auto; /* 1 */
+
+    .dscDiscoverGrid {
+      flex-direction: column;
+      flex: 1 1 0;
+      overflow: auto;
+
+      @include euiScrollBar;
+    }
+  }
+}

src/plugins/discover/public/embeddable/search_embeddable.tsx

@@ -374,7 +374,9 @@ export class SearchEmbeddable
     const props = {
       searchProps,
     };
-    ReactDOM.render(<SearchEmbeddableComponent {...props} />, node);
+
+    const MemorizedSearchEmbeddableComponent = React.memo(SearchEmbeddableComponent);
+    ReactDOM.render(<MemorizedSearchEmbeddableComponent {...props} />, node);
   }
 
   private async pushContainerStateParamsToProps(searchProps: SearchProps, force: boolean = false) {

src/plugins/discover/public/embeddable/search_embeddable_component.tsx

@@ -12,6 +12,7 @@ import {
   DataGridTableProps,
 } from '../application/components/data_grid/data_grid_table';
 import { VisualizationNoResults } from '../../../visualizations/public';
+import './search_embeddable.scss';
 
 interface SearchEmbeddableProps {
   searchProps: SearchProps;
@@ -51,8 +52,10 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
         data-test-subj="embeddedSavedSearchDocTable"
       >
         {discoverEmbeddableProps.totalHitCount !== 0 ? (
-          <EuiFlexItem>
-            <DataGridTableMemoized {...discoverEmbeddableProps} />
+          <EuiFlexItem style={{ minHeight: 0 }}>
+            <div className="osdDocTable__container">
+              <DataGridTableMemoized {...discoverEmbeddableProps} />
+            </div>
           </EuiFlexItem>
         ) : (
           <EuiFlexItem>