[8.13] [Search] Fix infinite loop on search index page (#178244) (#17…

…8301)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[Search] Fix infinite loop on search index page
(#178244)](#178244)

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

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

<!--BACKPORT [{"author":{"name":"Sander
Philipse","email":"94373878+sphilipse@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-03-08T12:12:31Z","message":"[Search]
Fix infinite loop on search index page (#178244)\n\n##
Summary\r\n\r\nThis fixes a bug on the search index page where we were
inadvertently\r\nclearing index data every time it was
loaded.","sha":"cc2c364d6061d514415d213b9a7540345e88e13c","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.13.0","v8.14.0"],"title":"[Search]
Fix infinite loop on search index
page","number":178244,"url":"https://github.com/elastic/kibana/pull/178244","mergeCommit":{"message":"[Search]
Fix infinite loop on search index page (#178244)\n\n##
Summary\r\n\r\nThis fixes a bug on the search index page where we were
inadvertently\r\nclearing index data every time it was
loaded.","sha":"cc2c364d6061d514415d213b9a7540345e88e13c"}},"sourceBranch":"main","suggestedTargetBranches":["8.13"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/178244","number":178244,"mergeCommit":{"message":"[Search]
Fix infinite loop on search index page (#178244)\n\n##
Summary\r\n\r\nThis fixes a bug on the search index page where we were
inadvertently\r\nclearing index data every time it was
loaded.","sha":"cc2c364d6061d514415d213b9a7540345e88e13c"}}]}]
BACKPORT-->

Co-authored-by: Sander Philipse <94373878+sphilipse@users.noreply.github.com>

x-pack/plugins/enterprise_search/common/utils/strip_search_prefix.ts

@@ -6,5 +6,7 @@
  */
 
 export function stripSearchPrefix(input: string, replacement?: string): string {
-  return input?.startsWith('search-') ? `${replacement || ''}${input.substring(7)}` : input || '';
+  return input?.startsWith('search-')
+    ? `${replacement || ''}${input.substring(7)}`
+    : `${replacement || ''}${input}` || '';
 }

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/api/index/cached_fetch_index_api_logic.ts

@@ -13,6 +13,7 @@ import { Status } from '../../../../../common/types/api';
 import { ElasticsearchIndexWithIngestion } from '../../../../../common/types/indices';
 
 import { Actions } from '../../../shared/api_logic/create_api_logic';
+import { IndexNameLogic } from '../../components/search_index/index_name_logic';
 
 import {
   FetchIndexApiParams,
@@ -56,7 +57,12 @@ export const CachedFetchIndexApiLogic = kea<
   },
   connect: {
     actions: [FetchIndexApiLogic, ['apiSuccess', 'apiError', 'apiReset', 'makeRequest']],
-    values: [FetchIndexApiLogic, ['data as fetchIndexApiData', 'status']],
+    values: [
+      FetchIndexApiLogic,
+      ['data as fetchIndexApiData', 'status'],
+      IndexNameLogic,
+      ['indexName'],
+    ],
   },
   events: ({ values }) => ({
     beforeUnmount: () => {
@@ -114,13 +120,6 @@ export const CachedFetchIndexApiLogic = kea<
         },
       },
     ],
-    indexName: [
-      '',
-      {
-        apiReset: () => '',
-        startPolling: (_, { indexName }) => indexName,
-      },
-    ],
     pollTimeoutId: [
       null,
       {

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx

@@ -48,7 +48,7 @@ export const ConnectorDetail: React.FC = () => {
   const { startConnectorPoll } = useActions(ConnectorViewLogic);
   useEffect(() => {
     startConnectorPoll(connectorId);
-  }, []);
+  }, [connectorId]);
 
   const { tabId = ConnectorDetailTabId.OVERVIEW } = useParams<{
     tabId?: string;

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_detail_router.tsx

@@ -15,24 +15,37 @@ import { CONNECTOR_DETAIL_PATH, CONNECTOR_DETAIL_TAB_PATH } from '../../routes';
 
 import { IndexNameLogic } from '../search_index/index_name_logic';
 
+import { IndexViewLogic } from '../search_index/index_view_logic';
+
 import { ConnectorDetail } from './connector_detail';
 import { ConnectorViewLogic } from './connector_view_logic';
 
 export const ConnectorDetailRouter: React.FC = () => {
   useEffect(() => {
     const unmountName = IndexNameLogic.mount();
     const unmountView = ConnectorViewLogic.mount();
+    const unmountIndexView = IndexViewLogic.mount();
     return () => {
       unmountName();
       unmountView();
+      unmountIndexView();
     };
   }, []);
   const { setIndexName } = useActions(IndexNameLogic);
   const { connector } = useValues(ConnectorViewLogic);
+  const { startFetchIndexPoll, stopFetchIndexPoll, resetFetchIndexApi } =
+    useActions(IndexViewLogic);
   const indexName = connector?.index_name || '';
   useEffect(() => {
     setIndexName(indexName);
+    if (indexName) {
+      startFetchIndexPoll(indexName);
+    } else {
+      stopFetchIndexPoll();
+      resetFetchIndexApi();
+    }
   }, [indexName]);
+
   return (
     <Routes>
       <Route path={CONNECTOR_DETAIL_PATH} exact>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/connector_view_logic.ts

@@ -96,20 +96,15 @@ export const ConnectorViewLogic = kea<MakeLogicType<ConnectorViewValues, Connect
     ],
   },
   events: ({ actions }) => ({
-    beforeMount: () => {
-      actions.fetchConnectorApiReset();
-      actions.fetchIndexApiReset();
-    },
     beforeUnmount: () => {
-      actions.fetchConnectorApiReset();
-      actions.fetchIndexApiReset();
       actions.stopConnectorPoll();
+      actions.fetchConnectorApiReset();
     },
   }),
-  listeners: ({ actions, values }) => ({
-    fetchConnectorApiSuccess: () => {
-      if (values.indexName) {
-        actions.fetchIndex({ indexName: values.indexName });
+  listeners: ({ actions }) => ({
+    fetchConnectorApiSuccess: (response) => {
+      if (response.connector?.index_name) {
+        actions.setIndexName(response.connector.index_name);
       }
     },
   }),

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx

@@ -27,16 +27,16 @@ import { BetaBadge } from '../../../../../shared/beta/beta_badge';
 
 import { docLinks } from '../../../../../shared/doc_links';
 
+import { ConnectorViewLogic } from '../../../connector_detail/connector_view_logic';
 import { FilteringRulesTable } from '../../../shared/filtering_rules_table/filtering_rules_table';
-import { IndexViewLogic } from '../../index_view_logic';
 
 import { ConnectorFilteringLogic } from './connector_filtering_logic';
 import { EditSyncRulesFlyout } from './edit_sync_rules_flyout';
 import { SyncRulesStateCallouts } from './sync_rules_callouts';
 
 export const ConnectorSyncRules: React.FC = () => {
   const { indexName, hasAdvancedFilteringFeature, hasBasicFilteringFeature } =
-    useValues(IndexViewLogic);
+    useValues(ConnectorViewLogic);
   const { applyDraft, setLocalFilteringRules, setLocalAdvancedSnippet, setIsEditing } =
     useActions(ConnectorFilteringLogic);
   const { advancedSnippet, draftErrors, draftState, filteringRules, hasDraft, isEditing } =

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/search_index_router.tsx

@@ -8,7 +8,7 @@
 import React, { useEffect } from 'react';
 import { Redirect, useParams } from 'react-router-dom';
 
-import { useActions } from 'kea';
+import { useActions, useValues } from 'kea';
 
 import { Routes, Route } from '@kbn/shared-ux-router';
 
@@ -19,26 +19,53 @@ import {
   SEARCH_INDEX_TAB_PATH,
 } from '../../routes';
 
+import { ConnectorViewLogic } from '../connector_detail/connector_view_logic';
+
 import { IndexNameLogic } from './index_name_logic';
 import { IndexViewLogic } from './index_view_logic';
 import { SearchIndex } from './search_index';
 
 export const SearchIndexRouter: React.FC = () => {
   const indexName = decodeURIComponent(useParams<{ indexName: string }>().indexName);
   const { setIndexName } = useActions(IndexNameLogic);
-  const { stopFetchIndexPoll } = useActions(IndexViewLogic);
+  const { startFetchIndexPoll, stopFetchIndexPoll, resetFetchIndexApi } =
+    useActions(IndexViewLogic);
+  const { connector } = useValues(IndexViewLogic);
+  const { startConnectorPoll, stopConnectorPoll, fetchConnectorApiReset } =
+    useActions(ConnectorViewLogic);
+
   useEffect(() => {
     const unmountName = IndexNameLogic.mount();
     const unmountView = IndexViewLogic.mount();
+    const unmountConnectorView = ConnectorViewLogic.mount();
     return () => {
       stopFetchIndexPoll();
+      stopConnectorPoll();
+      resetFetchIndexApi();
+      fetchConnectorApiReset();
       unmountName();
       unmountView();
+      unmountConnectorView();
     };
   }, []);
 
   useEffect(() => {
+    stopConnectorPoll();
+    fetchConnectorApiReset();
+    if (connector?.id) {
+      startConnectorPoll(connector.id);
+    }
+  }, [connector?.id]);
+
+  useEffect(() => {
+    stopFetchIndexPoll();
+    resetFetchIndexApi();
     setIndexName(indexName);
+    if (indexName) {
+      startFetchIndexPoll(indexName);
+    } else {
+      stopFetchIndexPoll();
+    }
   }, [indexName]);
 
   return (