[Enterprise Search] Provide UX feedback for rechecking connector (#13…

…8432) (#138444) (cherry picked from commit 59b403c) Co-authored-by: Sander Philipse <94373878+sphilipse@users.noreply.github.com>
elastic · Aug 9, 2022 · 716d0f3 · 716d0f3
1 parent 9b27de2
commit 716d0f3
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 5 deletions.
diff --git a/...s/enterprise_search_content/components/search_index/connector/connector_configuration.tsx b/...s/enterprise_search_content/components/search_index/connector/connector_configuration.tsx
@@ -33,23 +33,22 @@ import { generateEncodedPath } from '../../../../shared/encode_path_params';
 import { EuiButtonTo, EuiLinkTo } from '../../../../shared/react_router_helpers';
 
 import { GenerateConnectorApiKeyApiLogic } from '../../../api/connector_package/generate_connector_api_key_api_logic';
-import { FetchIndexApiLogic } from '../../../api/index/fetch_index_api_logic';
 import { SEARCH_INDEX_TAB_PATH } from '../../../routes';
 import { isConnectorIndex } from '../../../utils/indices';
 
 import { IndexNameLogic } from '../index_name_logic';
 
+import { IndexViewLogic } from '../index_view_logic';
 import { SearchIndexTabId } from '../search_index';
 
 import { ApiKeyConfig } from './api_key_configuration';
 import { ConnectorConfigurationConfig } from './connector_configuration_config';
 
 export const ConnectorConfiguration: React.FC = () => {
   const { data: apiKeyData } = useValues(GenerateConnectorApiKeyApiLogic);
-  const { data: indexData } = useValues(FetchIndexApiLogic);
+  const { index: indexData, recheckIndexLoading } = useValues(IndexViewLogic);
   const { indexName } = useValues(IndexNameLogic);
-  const { makeRequest: fetchIndex } = useActions(FetchIndexApiLogic);
-
+  const { recheckIndex } = useActions(IndexViewLogic);
   if (!isConnectorIndex(indexData)) {
     return <></>;
   }
@@ -192,7 +191,11 @@ export const ConnectorConfiguration: React.FC = () => {
             }
           )}
           <EuiSpacer size="s" />
-          <EuiButton iconType="refresh" onClick={() => fetchIndex({ indexName })}>
+          <EuiButton
+            iconType="refresh"
+            onClick={() => recheckIndex()}
+            isLoading={recheckIndexLoading}
+          >
             {i18n.translate(
               'xpack.enterpriseSearch.content.indices.configurationConnector.connectorPackage.waitingForConnector.button.label',
               {

diff --git a/...c/applications/enterprise_search_content/components/search_index/index_view_logic.test.ts b/...c/applications/enterprise_search_content/components/search_index/index_view_logic.test.ts
@@ -35,6 +35,7 @@ const DEFAULT_VALUES = {
   isWaitingForSync: false,
   lastUpdated: null,
   localSyncNowValue: false,
+  recheckIndexLoading: false,
   syncStatus: null,
 };
 
@@ -52,6 +53,7 @@ describe('IndexViewLogic', () => {
   const { mount: fetchIndexMount } = new LogicMounter(FetchIndexApiLogic);
   const indexNameLogic = new LogicMounter(IndexNameLogic);
   const { mount } = new LogicMounter(IndexViewLogic);
+  const { flashSuccessToast } = mockFlashMessageHelpers;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -132,6 +134,15 @@ describe('IndexViewLogic', () => {
         expect(IndexViewLogic.actions.createNewFetchIndexTimeout).toHaveBeenCalled();
         expect(IndexViewLogic.actions.fetchCrawlerData).not.toHaveBeenCalled();
       });
+      it('should flash success if recheckFetchIndexLoading', () => {
+        IndexViewLogic.actions.resetRecheckIndexLoading = jest.fn();
+        IndexNameLogic.actions.setIndexName('api');
+        IndexViewLogic.actions.recheckIndex();
+        FetchIndexApiLogic.actions.apiSuccess(apiIndex);
+
+        expect(IndexViewLogic.actions.createNewFetchIndexTimeout).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
+      });
     });
 
     describe('fetchIndex.apiError', () => {
@@ -195,6 +206,28 @@ describe('IndexViewLogic', () => {
     });
   });
 
+  describe('recheckIndexLoading', () => {
+    it('should be set to true on recheckIndex', () => {
+      IndexViewLogic.actions.recheckIndex();
+      expect(IndexViewLogic.values).toEqual(
+        expect.objectContaining({
+          ...DEFAULT_VALUES,
+          recheckIndexLoading: true,
+        })
+      );
+    });
+    it('should be set to false on resetRecheckIndexLoading', () => {
+      IndexViewLogic.actions.recheckIndex();
+      IndexViewLogic.actions.resetRecheckIndexLoading();
+      expect(IndexViewLogic.values).toEqual(
+        expect.objectContaining({
+          ...DEFAULT_VALUES,
+          recheckIndexLoading: false,
+        })
+      );
+    });
+  });
+
   describe('listeners', () => {
     it('calls clearFlashMessages on makeStartSyncRequest', () => {
       IndexViewLogic.actions.makeStartSyncRequest({ connectorId: 'connectorId' });

diff --git a/...public/applications/enterprise_search_content/components/search_index/index_view_logic.ts b/...public/applications/enterprise_search_content/components/search_index/index_view_logic.ts
@@ -49,7 +49,9 @@ export interface IndexViewActions {
   fetchIndexApiSuccess: FetchIndexApiValues['apiSuccess'];
   makeFetchIndexRequest: FetchIndexApiValues['makeRequest'];
   makeStartSyncRequest: StartSyncApiValues['makeRequest'];
+  recheckIndex: () => void;
   resetFetchIndexApi: FetchIndexApiValues['apiReset'];
+  resetRecheckIndexLoading: () => void;
   setFetchIndexTimeoutId(timeoutId: NodeJS.Timeout): { timeoutId: NodeJS.Timeout };
   startFetchIndexPoll(): void;
   startSync(): void;
@@ -69,6 +71,8 @@ export interface IndexViewValues {
   isWaitingForSync: boolean;
   lastUpdated: string | null;
   localSyncNowValue: boolean; // holds local value after update so UI updates correctly
+  recheckIndexLoading: boolean;
+  resetFetchIndexLoading: boolean;
   syncStatus: SyncStatus | null;
 }
 
@@ -77,6 +81,8 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
     clearFetchIndexTimeout: true,
     createNewFetchIndexTimeout: (duration) => ({ duration }),
     fetchIndex: true,
+    recheckIndex: true,
+    resetRecheckIndexLoading: true,
     setFetchIndexTimeoutId: (timeoutId) => ({ timeoutId }),
     startFetchIndexPoll: true,
     startSync: true,
@@ -136,8 +142,20 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
       if (isCrawlerIndex(index) && index.name === values.indexName) {
         actions.fetchCrawlerData();
       }
+      if (values.recheckIndexLoading) {
+        actions.resetRecheckIndexLoading();
+        flashSuccessToast(
+          i18n.translate(
+            'xpack.enterpriseSearch.content.searchIndex.index.recheckSuccess.message',
+            {
+              defaultMessage: 'Successfully rechecked your connector',
+            }
+          )
+        );
+      }
     },
     makeStartSyncRequest: () => clearFlashMessages(),
+    recheckIndex: () => actions.fetchIndex(),
     setIndexName: () => {
       if (values.fetchIndexTimeoutId) {
         clearTimeout(values.fetchIndexTimeoutId);
@@ -188,6 +206,13 @@ export const IndexViewLogic = kea<MakeLogicType<IndexViewValues, IndexViewAction
         startSyncApiSuccess: () => true,
       },
     ],
+    recheckIndexLoading: [
+      false,
+      {
+        recheckIndex: () => true,
+        resetRecheckIndexLoading: () => false,
+      },
+    ],
   },
   selectors: ({ selectors }) => ({
     index: [() => [selectors.data], (data) => (data ? indexToViewIndex(data) : undefined)],