From f992f59af2982264af2b163dd3f709a905873c04 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 17 Oct 2024 17:47:47 +0200 Subject: [PATCH] [React@18 failing test] Navigate to dataset details should navigate to details page from a main page. (#196384) ## Summary Hi team, we're working on upgrading Kibana to React@18 in legacy mode https://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175 and addressing remaining functional tests when running with React@18 in Legacy Mode. One failure we've found is happening on the dataset quality page: navigate to dataset details should navigate to details page from a main page. [Failure](https://buildkite.com/elastic/kibana-pull-request/builds/236562#019222ec-e95e-44aa-a754-fd9f736accce). I tracked it down to infinite re-render of `DegradedDocs` component. Looks like there is an infinite useEffect loop that is also happening with react@17, but the results of it are not so severe so the tests are still passing and the page is still functioning with react@17, wheres with react@18 it becomes completely unresponsive. This effect causes the inifite loop because `breakdown` is new object with each render: https://github.com/elastic/kibana/blob/0d19367fdfad5526b5220dfdf18b4991fe6b3abd/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/document_trends/degraded_docs/index.tsx#L85-L91 To reproduce the loop, I used the setup from the following functional tests suite: x-pack/test/functional/apps/dataset_quality/dataset_quality_details.ts (cherry picked from commit 6f4346e4e6f61cf67db50fbe7ce0836c0317cc09) --- .../public/hooks/use_degraded_docs_chart.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.ts b/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.ts index 795700bfc9441..d3fad141335de 100644 --- a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.ts +++ b/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.ts @@ -194,16 +194,20 @@ export const useDegradedDocsChart = () => { const extraActions: Action[] = [getOpenInLensAction, getOpenInLogsExplorerAction]; - return { - attributes, - dataView, - breakdown: { + const breakdown = useMemo(() => { + return { dataViewField: breakdownDataViewField, fieldSupportsBreakdown: breakdownDataViewField ? fieldSupportsBreakdown(breakdownDataViewField) : true, onChange: handleBreakdownFieldChange, - }, + }; + }, [breakdownDataViewField, handleBreakdownFieldChange]); + + return { + attributes, + dataView, + breakdown, extraActions, isChartLoading, onChartLoading: handleChartLoading,