From 9a669a2a168d2b1fe87c2b81043a1857c3a807b7 Mon Sep 17 00:00:00 2001
From: ananzh <ananzh@amazon.com>
Date: Mon, 6 Nov 2023 21:22:21 +0000
Subject: [PATCH] [BUG] Fix Discover table panel size auto adjust in Dashboard

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

Issue Resolve
https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5415

Signed-off-by: ananzh <ananzh@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../components/data_grid/data_grid_table.tsx  |  1 -
 .../public/embeddable/search_embeddable.scss  | 20 +++++++++++++++++++
 .../public/embeddable/search_embeddable.tsx   |  4 +++-
 .../search_embeddable_component.tsx           |  7 +++++--
 5 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/plugins/discover/public/embeddable/search_embeddable.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a764c376d1a..408346227f14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG] Add platform "darwin-arm64" to unit test ([#5290](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5290))
 - [BUG][Dev Tool] Add dev tool documentation link to dev tool's help menu [#5166](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5166)
 - Fix navigation issue across dashboards ([#5435](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5435))
+- [BUG] Fix Discover table panel size auto adjust in Dashboard ([#5441](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5441))
 
 ### 🚞 Infrastructure
 
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
index fcb786b23e86..655eb087e842 100644
--- 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
new file mode 100644
index 000000000000..ece620cebc3c
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/plugins/discover/public/embeddable/search_embeddable.tsx b/src/plugins/discover/public/embeddable/search_embeddable.tsx
index 8b8db9079ba6..a37a001ad798 100644
--- 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
index c8ae54a16429..e306254a51e2 100644
--- 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,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>