[BUG][Discover] Enable 'Back to Top' Feature in Discover for scrollin…

…g to top 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 · 0fda8bb · 0fda8bb
1 parent 2c8d9d3
commit 0fda8bb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Discover] Add key to index pattern options for support deplicate index pattern names([#5946](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5946))
 - [Discover] Fix table cell content overflowing in Safari ([#5948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5948))
 - [BUG][MD]Fix schema for test connection to separate validation based on auth type([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997))
+- [BUG][Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6007](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6007))
 
 ### 🚞 Infrastructure
 

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>
     )
   );
 };