[8.x] [React@18 failing test] Navigate to dataset details should navi…

…gate to details page from a main page. (#196384) (#196734)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[React@18 failing test] Navigate to dataset details should navigate
to details page from a main page.
(#196384)](#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":"[email protected]"},"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-minor","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"}}]}]
BACKPORT-->

Co-authored-by: Anton Dosov <[email protected]>

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,