From b47b321add65f64fd9f201c487c3422a17c35d70 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 18 Oct 2024 04:48:26 +1100
Subject: [PATCH] [8.16] [React@18 failing test] Navigate to dataset details
 should navigate to details page from a main page.  (#196384) (#196739)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[React@18 failing test] Navigate to dataset details should navigate
to details page from a main page.
(#196384)](https://github.com/elastic/kibana/pull/196384)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2024-10-17T15:47:47Z","message":"[React@18
failing test] Navigate to dataset details should navigate to details
page from a main page. (#196384)\n\n## Summary\r\n\r\nHi team, we're
working on upgrading Kibana to React@18 in legacy
mode\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
addressing remaining functional tests when running with React@18
in\r\nLegacy Mode.\r\n\r\nOne failure we've found is happening on the
dataset quality page:\r\nnavigate to dataset details should navigate to
details page from a
main\r\npage.\r\n[Failure](https://buildkite.com/elastic/kibana-pull-request/builds/236562#019222ec-e95e-44aa-a754-fd9f736accce).\r\n\r\nI
tracked it down to infinite re-render of `DegradedDocs`
component.\r\nLooks like there is an infinite useEffect loop that is
also happening\r\nwith react@17, but the results of it are not so severe
so the tests are\r\nstill passing and the page is still functioning with
react@17, wheres\r\nwith react@18 it becomes completely
unresponsive.\r\n\r\nThis effect causes the inifite loop because
`breakdown` is new object\r\nwith each
render:\r\n\r\n\r\nhttps://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\r\n\r\nTo
reproduce the loop, I used the setup from the following
functional\r\ntests
suite:\r\nx-pack/test/functional/apps/dataset_quality/dataset_quality_details.ts","sha":"6f4346e4e6f61cf67db50fbe7ce0836c0317cc09","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-major","ci:project-deploy-observability"],"title":"[React@18
failing test] Navigate to dataset details should navigate to details
page from a main page.
","number":196384,"url":"https://github.com/elastic/kibana/pull/196384","mergeCommit":{"message":"[React@18
failing test] Navigate to dataset details should navigate to details
page from a main page. (#196384)\n\n## Summary\r\n\r\nHi team, we're
working on upgrading Kibana to React@18 in legacy
mode\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
addressing remaining functional tests when running with React@18
in\r\nLegacy Mode.\r\n\r\nOne failure we've found is happening on the
dataset quality page:\r\nnavigate to dataset details should navigate to
details page from a
main\r\npage.\r\n[Failure](https://buildkite.com/elastic/kibana-pull-request/builds/236562#019222ec-e95e-44aa-a754-fd9f736accce).\r\n\r\nI
tracked it down to infinite re-render of `DegradedDocs`
component.\r\nLooks like there is an infinite useEffect loop that is
also happening\r\nwith react@17, but the results of it are not so severe
so the tests are\r\nstill passing and the page is still functioning with
react@17, wheres\r\nwith react@18 it becomes completely
unresponsive.\r\n\r\nThis effect causes the inifite loop because
`breakdown` is new object\r\nwith each
render:\r\n\r\n\r\nhttps://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\r\n\r\nTo
reproduce the loop, I used the setup from the following
functional\r\ntests
suite:\r\nx-pack/test/functional/apps/dataset_quality/dataset_quality_details.ts","sha":"6f4346e4e6f61cf67db50fbe7ce0836c0317cc09"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196384","number":196384,"mergeCommit":{"message":"[React@18
failing test] Navigate to dataset details should navigate to details
page from a main page. (#196384)\n\n## Summary\r\n\r\nHi team, we're
working on upgrading Kibana to React@18 in legacy
mode\r\nhttps://github.com/elastic/kibana-team/issues/1016#issuecomment-2399310175\r\nand
addressing remaining functional tests when running with React@18
in\r\nLegacy Mode.\r\n\r\nOne failure we've found is happening on the
dataset quality page:\r\nnavigate to dataset details should navigate to
details page from a
main\r\npage.\r\n[Failure](https://buildkite.com/elastic/kibana-pull-request/builds/236562#019222ec-e95e-44aa-a754-fd9f736accce).\r\n\r\nI
tracked it down to infinite re-render of `DegradedDocs`
component.\r\nLooks like there is an infinite useEffect loop that is
also happening\r\nwith react@17, but the results of it are not so severe
so the tests are\r\nstill passing and the page is still functioning with
react@17, wheres\r\nwith react@18 it becomes completely
unresponsive.\r\n\r\nThis effect causes the inifite loop because
`breakdown` is new object\r\nwith each
render:\r\n\r\n\r\nhttps://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\r\n\r\nTo
reproduce the loop, I used the setup from the following
functional\r\ntests
suite:\r\nx-pack/test/functional/apps/dataset_quality/dataset_quality_details.ts","sha":"6f4346e4e6f61cf67db50fbe7ce0836c0317cc09"}},{"url":"https://github.com/elastic/kibana/pull/196734","number":196734,"branch":"8.x","state":"OPEN"}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
---
 .../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,