Skip to content

Commit

Permalink
[BUG][Discover] Enable 'Back to Top' Feature in Discover for scrollin…
Browse files Browse the repository at this point in the history
…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]>
  • Loading branch information
ananzh committed Mar 4, 2024
1 parent 2c8d9d3 commit 0dee0d0
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface DataGridTableProps {
isContextView?: boolean;
isLoading?: boolean;
showPagination?: boolean;
scrollToTop?: () => void;
}

export const DataGridTable = ({
Expand All @@ -67,6 +68,7 @@ export const DataGridTable = ({
isContextView = false,
isLoading = false,
showPagination,
scrollToTop,
}: DataGridTableProps) => {
const services = getServices();
const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
Expand Down Expand Up @@ -179,6 +181,7 @@ export const DataGridTable = ({
isShortDots={isShortDots}
hideTimeColumn={hideTimeColumn}
defaultSortOrder={defaultSortOrder}
scrollToTop={scrollToTop}
/>
),
[
Expand All @@ -197,6 +200,7 @@ export const DataGridTable = ({
defaultSortOrder,
hideTimeColumn,
isShortDots,
scrollToTop,
]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface DefaultDiscoverTableProps {
hideTimeColumn: boolean;
defaultSortOrder: SortDirection;
showPagination?: boolean;
scrollToTop?: () => void;
}

export const LegacyDiscoverTable = ({
Expand All @@ -52,6 +53,7 @@ export const LegacyDiscoverTable = ({
hideTimeColumn,
defaultSortOrder,
showPagination,
scrollToTop,
}: DefaultDiscoverTableProps) => {
const displayedColumns = getLegacyDisplayedColumns(
columns,
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
addColumn,
moveColumn,
removeColumn,
reorderColumn,
setColumns,
setSort,
useDispatch,
Expand All @@ -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,
Expand Down Expand Up @@ -115,6 +115,7 @@ export const DiscoverTable = ({ rows }: Props) => {
displayTimeColumn={displayTimeColumn}
title={savedSearch?.id ? savedSearch.title : ''}
description={savedSearch?.id ? savedSearch.description : ''}
scrollToTop={scrollToTop}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 0dee0d0

Please sign in to comment.