From ed8412c1d3b00b41b028773097b5672540373193 Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Sun, 3 Mar 2024 21:27:49 +0000 Subject: [PATCH 1/2] [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: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6006 Signed-off-by: Anan Zhuang --- CHANGELOG.md | 3 ++- .../application/components/data_grid/data_grid_table.tsx | 4 ++++ .../default_discover_table/default_discover_table.tsx | 4 +++- .../view_components/canvas/discover_table.tsx | 5 +++-- .../public/application/view_components/canvas/index.tsx | 9 ++++++++- 5 files changed, 20 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e67c86790f9..32a8411e1af0 100644 --- 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 index a0c1851e7716..d4b8de6ad211 100644 --- 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(); @@ -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/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..d563f1c1d098 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 @@ -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 }} /> - window.scrollTo(0, 0)}> + 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 index 17f9f26e8b54..ccf82e4ccba0 100644 --- 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(); 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 index e3efe878aa83..1c2681995f98 100644 --- 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(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 ( - + )} From 780f0bf97e05582d6caaebb7e3a2c1c9bf46c18e Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Sun, 3 Mar 2024 18:05:08 -0800 Subject: [PATCH 2/2] Update CHANGELOG.md Co-authored-by: Miki Signed-off-by: Anan Zhuang --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32a8411e1af0..90bbbb708a60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +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 ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008)) +- [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008)) ### 🚞 Infrastructure