[BUG] Fix Discover table panel size auto adjust in Dashboard (#5441)

* [BUG] Fix Discover table panel size auto adjust in Dashboard * Add React.memo on parent comp * Restore embeddable panel style Issue Resolve #5415 Co-authored-by: Miki <amoo_miki@yahoo.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> --------- Signed-off-by: ananzh <ananzh@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: Miki <amoo_miki@yahoo.com> (cherry picked from commit e0b6006) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Nov 9, 2023 · b5df153 · b5df153
1 parent 2aea421
commit b5df153
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/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';

diff --git a/src/plugins/discover/public/embeddable/search_embeddable.scss b/src/plugins/discover/public/embeddable/search_embeddable.scss
@@ -0,0 +1,12 @@
+/**
+   * 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 */
+  }
+}
diff --git a/src/plugins/discover/public/embeddable/search_embeddable.tsx b/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) {

diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/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,7 +52,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
         data-test-subj="embeddedSavedSearchDocTable"
       >
         {discoverEmbeddableProps.totalHitCount !== 0 ? (
-          <EuiFlexItem>
+          <EuiFlexItem style={{ minHeight: 0 }} className="osdDocTable__container">
             <DataGridTableMemoized {...discoverEmbeddableProps} />
           </EuiFlexItem>
         ) : (