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

…g to top dscCanvas is the one with scrollable prop. Set window.scrollTo(0, 0) on table will not work. In this PR, we add a ref to EuiPanel directly. Issue Resolve: opensearch-project#6006 Signed-off-by: Anan Zhuang <[email protected]>
ananzh · Mar 4, 2024 · ed8412c · ed8412c
1 parent 2c8d9d3
commit ed8412c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,7 +17,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Discover] Allow saved sort from search embeddable to load in Dashboard ([#5934](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5934))
 - [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][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 ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008))
 
 ### 🚞 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
@@ -46,6 +46,7 @@ export interface DataGridTableProps {
   isContextView?: boolean;
   isLoading?: boolean;
   showPagination?: boolean;
+  scrollToTop?: () => void;
 }
 
 export const DataGridTable = ({
@@ -67,6 +68,7 @@ export const DataGridTable = ({
   isContextView = false,
   isLoading = false,
   showPagination,
+  scrollToTop,
 }: DataGridTableProps) => {
   const services = getServices();
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
@@ -179,6 +181,7 @@ export const DataGridTable = ({
         isShortDots={isShortDots}
         hideTimeColumn={hideTimeColumn}
         defaultSortOrder={defaultSortOrder}
+        scrollToTop={scrollToTop}
       />
     ),
     [
@@ -197,6 +200,7 @@ export const DataGridTable = ({
       defaultSortOrder,
       hideTimeColumn,
       isShortDots,
+      scrollToTop,
     ]
   );
 

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
@@ -33,6 +33,7 @@ export interface DefaultDiscoverTableProps {
   hideTimeColumn: boolean;
   defaultSortOrder: SortDirection;
   showPagination?: boolean;
+  scrollToTop?: () => void;
 }
 
 export const LegacyDiscoverTable = ({
@@ -52,6 +53,7 @@ export const LegacyDiscoverTable = ({
   hideTimeColumn,
   defaultSortOrder,
   showPagination,
+  scrollToTop,
 }: DefaultDiscoverTableProps) => {
   const displayedColumns = getLegacyDisplayedColumns(
     columns,
@@ -173,7 +175,7 @@ export const LegacyDiscoverTable = ({
               values={{ sampleSize }}
             />
 
-            <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
+            <EuiButtonEmpty onClick={scrollToTop}>
               <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
             </EuiButtonEmpty>
           </EuiCallOut>

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -12,7 +12,6 @@ import {
   addColumn,
   moveColumn,
   removeColumn,
-  reorderColumn,
   setColumns,
   setSort,
   useDispatch,
@@ -27,9 +26,10 @@ import { popularizeField } from '../../helpers/popularize_field';
 
 interface Props {
   rows?: OpenSearchSearchHit[];
+  scrollToTop?: () => void;
 }
 
-export const DiscoverTable = ({ rows }: Props) => {
+export const DiscoverTable = ({ rows, scrollToTop }: Props) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
   const {
     uiSettings,
@@ -115,6 +115,7 @@ export const DiscoverTable = ({ rows }: Props) => {
       displayTimeColumn={displayTimeColumn}
       title={savedSearch?.id ? savedSearch.title : ''}
       description={savedSearch?.id ? savedSearch.description : ''}
+      scrollToTop={scrollToTop}
     />
   );
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -24,6 +24,7 @@ import './discover_canvas.scss';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
   const { data$, refetch$, indexPattern } = useDiscoverContext();
   const {
     services: { uiSettings },
@@ -89,9 +90,15 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   }, [dispatch, filteredColumns, indexPattern]);
 
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
+  const scrollToTop = () => {
+    if (panelRef.current) {
+      panelRef.current.scrollTop = 0;
+    }
+  };
 
   return (
     <EuiPanel
+      panelRef={panelRef}
       hasBorder={false}
       hasShadow={false}
       color="transparent"
@@ -114,7 +121,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
       {fetchState.status === ResultStatus.READY && (
         <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
           <MemoizedDiscoverChartContainer {...fetchState} />
-          <MemoizedDiscoverTable rows={rows} />
+          <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
         </EuiPanel>
       )}
     </EuiPanel>