From c8e9cdbb99ce3ca1ce9a5200638b28c16c7d8912 Mon Sep 17 00:00:00 2001
From: Anan Zhuang <ananzh@amazon.com>
Date: Sun, 3 Mar 2024 20:39:50 +0000
Subject: [PATCH] [BUG] Allow clicking back to top in Discover

The original window.scrollTo(0, 0) will reset the window back but not
table. In this PR, we add a table wrapper to allow scroll back on table.

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

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
---
 .../default_discover_table/_doc_table.scss          |  5 +++++
 .../default_discover_table.tsx                      | 13 ++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
index 1e780a7e4d8a..de68db0f9357 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
@@ -163,3 +163,8 @@ table {
     }
   }
 }
+
+.tableWrapper {
+  max-height: 75vh;
+  overflow-y: auto;
+}
diff --git a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx
index fe8092ed8c9c..5839d0712ecd 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx
+++ b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -53,6 +53,7 @@ export const LegacyDiscoverTable = ({
   defaultSortOrder,
   showPagination,
 }: DefaultDiscoverTableProps) => {
+  const scrollableDivRef = useRef<HTMLDivElement>(null);
   const displayedColumns = getLegacyDisplayedColumns(
     columns,
     indexPattern,
@@ -113,9 +114,15 @@ export const LegacyDiscoverTable = ({
     setActivePage(pageNumber);
   };
 
+  const backToTop = () => {
+    if (scrollableDivRef.current) {
+      scrollableDivRef.current.scrollTop = 0;
+    }
+  };
+
   return (
     indexPattern && (
-      <>
+      <div ref={scrollableDivRef} className="tableWrapper">
         {showPagination ? (
           <Pagination
             pageCount={pageCount}
@@ -173,7 +180,7 @@ export const LegacyDiscoverTable = ({
               values={{ sampleSize }}
             />
 
-            <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
+            <EuiButtonEmpty onClick={backToTop}>
               <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
             </EuiButtonEmpty>
           </EuiCallOut>
@@ -189,7 +196,7 @@ export const LegacyDiscoverTable = ({
             sampleSize={sampleSize}
           />
         ) : null}
-      </>
+      </div>
     )
   );
 };