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

…g to top (opensearch-project#6008) * [BUG][Discover] Enable 'Back to Top' Feature in Discover for scrolling 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 <ananzh@amazon.com> Co-authored-by: Miki <amoo_miki@yahoo.com>
SuZhou-Joe · Apr 7, 2024 · c8d4966 · c8d4966
1 parent 1480b5d
commit c8d4966
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
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>