[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
elastic · Aug 24, 2020 · 90bd654 · 90bd654
1 parent 3256992
commit 90bd654
Show file tree

Hide file tree

Showing 34 changed files with 460 additions and 207 deletions.
diff --git a/...components/empty_states/empty_states.scss → ...gine_overview/components/empty_state.scss b/...components/empty_states/empty_states.scss → ...gine_overview/components/empty_state.scss
diff --git a/...onents/empty_states/empty_states.test.tsx → ..._overview/components/empty_state.test.tsx b/...onents/empty_states/empty_states.test.tsx → ..._overview/components/empty_state.test.tsx
@@ -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);
-  });
-});
diff --git a/...h/components/empty_states/empty_state.tsx → ...ngine_overview/components/empty_state.tsx b/...h/components/empty_states/empty_state.tsx → ...ngine_overview/components/empty_state.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 {

diff --git a/...ew_header/engine_overview_header.test.tsx → ...ngine_overview/components/header.test.tsx b/...ew_header/engine_overview_header.test.tsx → ...ngine_overview/components/header.test.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', () => {

diff --git a/...verview_header/engine_overview_header.tsx → ...nts/engine_overview/components/header.tsx b/...verview_header/engine_overview_header.tsx → ...nts/engine_overview/components/header.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 {

diff --git a/...p_search/components/empty_states/index.ts → ...nents/engine_overview/components/index.ts b/...p_search/components/empty_states/index.ts → ...nents/engine_overview/components/index.ts
@@ -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';
diff --git a/...blic/applications/app_search/components/engine_overview/components/loading_state.test.tsx b/...blic/applications/app_search/components/engine_overview/components/loading_state.test.tsx
@@ -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);
+  });
+});
diff --git a/...components/empty_states/loading_state.tsx → ...ine_overview/components/loading_state.tsx b/...components/empty_states/loading_state.tsx → ...ine_overview/components/loading_state.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} />

diff --git a/...search/public/applications/app_search/components/engine_overview/engine_overview.test.tsx b/...search/public/applications/app_search/components/engine_overview/engine_overview.test.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', () => {

diff --git a/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.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 />;
 

diff --git a/...arch/public/applications/app_search/components/error_connecting/error_connecting.test.tsx b/...arch/public/applications/app_search/components/error_connecting/error_connecting.test.tsx
@@ -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 { ErrorStatePrompt } from '../../../shared/error_state';
+import { ErrorConnecting } from './';
+
+describe('ErrorConnecting', () => {
+  it('renders', () => {
+    const wrapper = shallow(<ErrorConnecting />);
+
+    expect(wrapper.find(ErrorStatePrompt)).toHaveLength(1);
+  });
+});
diff --git a/...h/components/empty_states/error_state.tsx → ...nts/error_connecting/error_connecting.tsx b/...h/components/empty_states/error_state.tsx → ...nts/error_connecting/error_connecting.tsx
@@ -10,17 +10,13 @@ import { EuiPageContent } from '@elastic/eui';
 import { ErrorStatePrompt } from '../../../shared/error_state';
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
 import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
-import { EngineOverviewHeader } from '../engine_overview_header';
 
-import './empty_states.scss';
-
-export const ErrorState: React.FC = () => {
+export const ErrorConnecting: React.FC = () => {
   return (
     <>
       <SetPageChrome isRoot />
       <SendTelemetry action="error" metric="cannot_connect" />
 
-      <EngineOverviewHeader />
       <EuiPageContent>
         <ErrorStatePrompt />
       </EuiPageContent>

diff --git a/...omponents/engine_overview_header/index.ts → ...arch/components/error_connecting/index.ts b/...omponents/engine_overview_header/index.ts → ...arch/components/error_connecting/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { EngineOverviewHeader } from './engine_overview_header';
+export { ErrorConnecting } from './error_connecting';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
@@ -12,8 +12,10 @@ import { Redirect } from 'react-router-dom';
 import { shallow } from 'enzyme';
 import { useValues, useActions } from 'kea';
 
-import { SetupGuide } from './components/setup_guide';
 import { Layout, SideNav, SideNavLink } from '../shared/layout';
+import { SetupGuide } from './components/setup_guide';
+import { ErrorConnecting } from './components/error_connecting';
+import { EngineOverview } from './components/engine_overview';
 import { AppSearch, AppSearchUnconfigured, AppSearchConfigured, AppSearchNav } from './';
 
 describe('AppSearch', () => {
@@ -42,12 +44,17 @@ describe('AppSearchUnconfigured', () => {
 });
 
 describe('AppSearchConfigured', () => {
-  it('renders with layout', () => {
+  beforeEach(() => {
+    // Mock resets
+    (useValues as jest.Mock).mockImplementation(() => ({}));
     (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData: () => {} }));
+  });
 
+  it('renders with layout', () => {
     const wrapper = shallow(<AppSearchConfigured />);
 
     expect(wrapper.find(Layout)).toHaveLength(1);
+    expect(wrapper.find(EngineOverview)).toHaveLength(1);
   });
 
   it('initializes app data with passed props', () => {
@@ -62,12 +69,20 @@ describe('AppSearchConfigured', () => {
   it('does not re-initialize app data', () => {
     const initializeAppData = jest.fn();
     (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
-    (useValues as jest.Mock).mockImplementationOnce(() => ({ hasInitialized: true }));
+    (useValues as jest.Mock).mockImplementation(() => ({ hasInitialized: true }));
 
     shallow(<AppSearchConfigured />);
 
     expect(initializeAppData).not.toHaveBeenCalled();
   });
+
+  it('renders ErrorConnecting', () => {
+    (useValues as jest.Mock).mockImplementation(() => ({ errorConnecting: true }));
+
+    const wrapper = shallow(<AppSearchConfigured />);
+
+    expect(wrapper.find(ErrorConnecting)).toHaveLength(1);
+  });
 });
 
 describe('AppSearchNav', () => {

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -11,6 +11,7 @@ import { useActions, useValues } from 'kea';
 import { i18n } from '@kbn/i18n';
 
 import { KibanaContext, IKibanaContext } from '../index';
+import { HttpLogic, IHttpLogicValues } from '../shared/http';
 import { AppLogic, IAppLogicActions, IAppLogicValues } from './app_logic';
 import { IInitialAppData } from '../../../common/types';
 
@@ -27,6 +28,7 @@ import {
 } from './routes';
 
 import { SetupGuide } from './components/setup_guide';
+import { ErrorConnecting } from './components/error_connecting';
 import { EngineOverview } from './components/engine_overview';
 
 export const AppSearch: React.FC<IInitialAppData> = (props) => {
@@ -48,6 +50,7 @@ export const AppSearchUnconfigured: React.FC = () => (
 export const AppSearchConfigured: React.FC<IInitialAppData> = (props) => {
   const { hasInitialized } = useValues(AppLogic) as IAppLogicValues;
   const { initializeAppData } = useActions(AppLogic) as IAppLogicActions;
+  const { errorConnecting } = useValues(HttpLogic) as IHttpLogicValues;
 
   useEffect(() => {
     if (!hasInitialized) initializeAppData(props);
@@ -60,14 +63,18 @@ export const AppSearchConfigured: React.FC<IInitialAppData> = (props) => {
       </Route>
       <Route>
         <Layout navigation={<AppSearchNav />}>
-          <Switch>
-            <Route exact path={ROOT_PATH}>
-              <Redirect to={ENGINES_PATH} />
-            </Route>
-            <Route exact path={ENGINES_PATH}>
-              <EngineOverview />
-            </Route>
-          </Switch>
+          {errorConnecting ? (
+            <ErrorConnecting />
+          ) : (
+            <Switch>
+              <Route exact path={ROOT_PATH}>
+                <Redirect to={ENGINES_PATH} />
+              </Route>
+              <Route exact path={ENGINES_PATH}>
+                <EngineOverview />
+              </Route>
+            </Switch>
+          )}
         </Layout>
       </Route>
     </Switch>