From bf5b37b3ce2579b26081943cf8002f75236f2608 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
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.tsx       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.tsx
index 03da29c7e04ea..dbdbc18d653dd 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.tsx
+++ b/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_degraded_docs_chart.tsx
@@ -174,16 +174,20 @@ export const useDegradedDocsChart = ({ dataStream }: DegradedDocsChartDeps) => {
 
   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,