[Enterprise Search] Create HttpLogic Kea store, add http interceptors, and manage error connecting at top app-level (#75790)

* [Setup] Change error connecting status code to 502

- For clearer error handling

* Set up new HttpProvider/Logic Kea store & listeners

- This allows us to:
  - connect() directly to HttpLogic in other Kea logic files that need to make http calls, instead of passing in http manually via args
  - Set http interceptors & remove them interceptors on unmount within Kea
  - Share state derived from http (e.g. errorConnecting, readOnlyMode) between both AS & WS (but allow each app to handle that state differently if needed)

+ Refactors necessary for these changes:
  - Kea types - add events key, clarify that mount returns an unmount function, fix reducer state type
  - ReactDOM unmount - remove resetContext({}), was preventing logic from unmounting properly

* Update AS & WS to show error connecting component at app level

* [WS] Remove errorConnecting logic & http arg from Overview

- Since main app is now handling errorConnecting
- http can now be connected directly from HttpLogic Kea store, so no need to pass it
+ minor cleanup in logic_overview.test.ts - remove unneeded unmount(), act(), switch to HttpLogic mock

* [AS] Add top-level ErrorConnecting component & remove error logic from EngineOverview

* [AS] Clean up/move EngineOverview child components into subfolder

- delete old ErrorState component
- move LoadingState, EmptyState, and EngineOverviewHeader into subfolders in engine_overview

* PR feedback: Update test assertions 404 copy

Author: Constance

x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.scss renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/empty_state.scss

@@ -4,28 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import '../../../__mocks__/shallow_usecontext.mock';
+import '../../../../__mocks__/shallow_usecontext.mock';
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { EuiEmptyPrompt, EuiButton, EuiLoadingContent } from '@elastic/eui';
-import { ErrorStatePrompt } from '../../../shared/error_state';
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 
-jest.mock('../../../shared/telemetry', () => ({
+jest.mock('../../../../shared/telemetry', () => ({
   sendTelemetry: jest.fn(),
   SendAppSearchTelemetry: jest.fn(),
 }));
-import { sendTelemetry } from '../../../shared/telemetry';
+import { sendTelemetry } from '../../../../shared/telemetry';
 
-import { ErrorState, EmptyState, LoadingState } from './';
-
-describe('ErrorState', () => {
-  it('renders', () => {
-    const wrapper = shallow(<ErrorState />);
-
-    expect(wrapper.find(ErrorStatePrompt)).toHaveLength(1);
-  });
-});
+import { EmptyState } from './';
 
 describe('EmptyState', () => {
   it('renders', () => {
@@ -44,11 +35,3 @@ describe('EmptyState', () => {
     (sendTelemetry as jest.Mock).mockClear();
   });
 });
-
-describe('LoadingState', () => {
-  it('renders', () => {
-    const wrapper = shallow(<LoadingState />);
-
-    expect(wrapper.find(EuiLoadingContent)).toHaveLength(2);
-  });
-});

x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/empty_state.test.tsx

@@ -8,14 +8,14 @@ import React, { useContext } from 'react';
 import { EuiPageContent, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { sendTelemetry } from '../../../shared/telemetry';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { KibanaContext, IKibanaContext } from '../../../index';
-import { CREATE_ENGINES_PATH } from '../../routes';
+import { sendTelemetry } from '../../../../shared/telemetry';
+import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
+import { KibanaContext, IKibanaContext } from '../../../../index';
+import { CREATE_ENGINES_PATH } from '../../../routes';
 
-import { EngineOverviewHeader } from '../engine_overview_header';
+import { EngineOverviewHeader } from './header';
 
-import './empty_states.scss';
+import './empty_state.scss';
 
 export const EmptyState: React.FC = () => {
   const {

x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/empty_state.tsx

@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import '../../../__mocks__/shallow_usecontext.mock';
+import '../../../../__mocks__/shallow_usecontext.mock';
 
 import React from 'react';
 import { shallow } from 'enzyme';
 
-jest.mock('../../../shared/telemetry', () => ({ sendTelemetry: jest.fn() }));
-import { sendTelemetry } from '../../../shared/telemetry';
+jest.mock('../../../../shared/telemetry', () => ({ sendTelemetry: jest.fn() }));
+import { sendTelemetry } from '../../../../shared/telemetry';
 
-import { EngineOverviewHeader } from '../engine_overview_header';
+import { EngineOverviewHeader } from './';
 
 describe('EngineOverviewHeader', () => {
   it('renders', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.test.tsx renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/header.test.tsx

@@ -15,8 +15,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { sendTelemetry } from '../../../shared/telemetry';
-import { KibanaContext, IKibanaContext } from '../../../index';
+import { sendTelemetry } from '../../../../shared/telemetry';
+import { KibanaContext, IKibanaContext } from '../../../../index';
 
 export const EngineOverviewHeader: React.FC = () => {
   const {

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/header.tsx

@@ -4,6 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { EngineOverviewHeader } from './header';
 export { LoadingState } from './loading_state';
 export { EmptyState } from './empty_state';
-export { ErrorState } from './error_state';

x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/index.ts renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiLoadingContent } from '@elastic/eui';
+
+import { LoadingState } from './';
+
+describe('LoadingState', () => {
+  it('renders', () => {
+    const wrapper = shallow(<LoadingState />);
+
+    expect(wrapper.find(EuiLoadingContent)).toHaveLength(2);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/loading_state.test.tsx

@@ -7,17 +7,15 @@
 import React from 'react';
 import { EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';
 
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { EngineOverviewHeader } from '../engine_overview_header';
-
-import './empty_states.scss';
+import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
+import { EngineOverviewHeader } from './header';
 
 export const LoadingState: React.FC = () => {
   return (
     <>
       <SetPageChrome isRoot />
       <EngineOverviewHeader />
-      <EuiPageContent className="emptyState">
+      <EuiPageContent paddingSize="l">
         <EuiLoadingContent lines={5} />
         <EuiSpacer size="xxl" />
         <EuiLoadingContent lines={4} />

x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx renamed to x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/loading_state.tsx

@@ -12,7 +12,7 @@ import { shallow, ReactWrapper } from 'enzyme';
 
 import { mountWithAsyncContext, mockKibanaContext } from '../../../__mocks__';
 
-import { LoadingState, EmptyState, ErrorState } from '../empty_states';
+import { LoadingState, EmptyState } from './components';
 import { EngineTable } from './engine_table';
 
 import { EngineOverview } from './';
@@ -40,16 +40,6 @@ describe('EngineOverview', () => {
 
       expect(wrapper.find(EmptyState)).toHaveLength(1);
     });
-
-    it('hasErrorConnecting', async () => {
-      const wrapper = await mountWithAsyncContext(<EngineOverview />, {
-        http: {
-          ...mockHttp,
-          get: () => ({ invalidPayload: true }),
-        },
-      });
-      expect(wrapper.find(ErrorState)).toHaveLength(1);
-    });
   });
 
   describe('happy-path states', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx

@@ -22,8 +22,7 @@ import { KibanaContext, IKibanaContext } from '../../../index';
 import EnginesIcon from '../../assets/engine.svg';
 import MetaEnginesIcon from '../../assets/meta_engine.svg';
 
-import { LoadingState, EmptyState, ErrorState } from '../empty_states';
-import { EngineOverviewHeader } from '../engine_overview_header';
+import { EngineOverviewHeader, LoadingState, EmptyState } from './components';
 import { EngineTable } from './engine_table';
 
 import './engine_overview.scss';
@@ -42,8 +41,6 @@ export const EngineOverview: React.FC = () => {
   const { license } = useContext(LicenseContext) as ILicenseContext;
 
   const [isLoading, setIsLoading] = useState(true);
-  const [hasErrorConnecting, setHasErrorConnecting] = useState(false);
-
   const [engines, setEngines] = useState([]);
   const [enginesPage, setEnginesPage] = useState(1);
   const [enginesTotal, setEnginesTotal] = useState(0);
@@ -57,16 +54,12 @@ export const EngineOverview: React.FC = () => {
     });
   };
   const setEnginesData = async (params: IGetEnginesParams, callbacks: ISetEnginesCallbacks) => {
-    try {
-      const response = await getEnginesData(params);
+    const response = await getEnginesData(params);
 
-      callbacks.setResults(response.results);
-      callbacks.setResultsTotal(response.meta.page.total_results);
+    callbacks.setResults(response.results);
+    callbacks.setResultsTotal(response.meta.page.total_results);
 
-      setIsLoading(false);
-    } catch (error) {
-      setHasErrorConnecting(true);
-    }
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -85,7 +78,6 @@ export const EngineOverview: React.FC = () => {
     }
   }, [license, metaEnginesPage]);
 
-  if (hasErrorConnecting) return <ErrorState />;
   if (isLoading) return <LoadingState />;
   if (!engines.length) return <EmptyState />;