[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: opensearch-project#6006 Signed-off-by: Anan Zhuang <[email protected]>
ananzh · Mar 3, 2024 · c8e9cdb · c8e9cdb
1 parent 2c8d9d3
commit c8e9cdb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -163,3 +163,8 @@ table {
     }
   }
 }
+
+.tableWrapper {
+  max-height: 75vh;
+  overflow-y: auto;
+}
diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../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>
     )
   );
 };