Display error connecting prompt on Overview page instead of blank page

x-pack/plugins/enterprise_search/public/applications/enterprise_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);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 { EuiPage, EuiPageContent } from '@elastic/eui';
+
+import { ErrorStatePrompt } from '../../../shared/error_state';
+
+export const ErrorConnecting: React.FC = () => (
+  <EuiPage restrictWidth>
+    <EuiPageContent>
+      <ErrorStatePrompt />
+    </EuiPageContent>
+  </EuiPage>
+);

x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ErrorConnecting } from './error_connecting';

x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.test.tsx

@@ -6,13 +6,20 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-
 import { EuiPage } from '@elastic/eui';
 
+import '../__mocks__/kea.mock';
+import { useValues } from 'kea';
+
 import { EnterpriseSearch } from './';
+import { ErrorConnecting } from './components/error_connecting';
 import { ProductCard } from './components/product_card';
 
 describe('EnterpriseSearch', () => {
+  beforeEach(() => {
+    (useValues as jest.Mock).mockReturnValue({ errorConnecting: false });
+  });
+
   it('renders the overview page and product cards', () => {
     const wrapper = shallow(
       <EnterpriseSearch access={{ hasAppSearchAccess: true, hasWorkplaceSearchAccess: true }} />
@@ -22,6 +29,14 @@ describe('EnterpriseSearch', () => {
     expect(wrapper.find(ProductCard)).toHaveLength(2);
   });
 
+  it('renders the error connecting prompt', () => {
+    (useValues as jest.Mock).mockReturnValueOnce({ errorConnecting: true });
+    const wrapper = shallow(<EnterpriseSearch />);
+
+    expect(wrapper.find(ErrorConnecting)).toHaveLength(1);
+    expect(wrapper.find(EuiPage)).toHaveLength(0);
+  });
+
   describe('access checks', () => {
     it('does not render the App Search card if the user does not have access to AS', () => {
       const wrapper = shallow(

x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.tsx

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { useValues } from 'kea';
 import {
   EuiPage,
   EuiPageBody,
@@ -21,19 +22,24 @@ import { i18n } from '@kbn/i18n';
 import { IInitialAppData } from '../../../common/types';
 import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../common/constants';
 
+import { HttpLogic } from '../shared/http';
 import { SetEnterpriseSearchChrome as SetPageChrome } from '../shared/kibana_chrome';
 import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../shared/telemetry';
 
+import { ErrorConnecting } from './components/error_connecting';
 import { ProductCard } from './components/product_card';
 
 import AppSearchImage from './assets/app_search.png';
 import WorkplaceSearchImage from './assets/workplace_search.png';
 import './index.scss';
 
 export const EnterpriseSearch: React.FC<IInitialAppData> = ({ access = {} }) => {
+  const { errorConnecting } = useValues(HttpLogic);
   const { hasAppSearchAccess, hasWorkplaceSearchAccess } = access;
 
-  return (
+  return errorConnecting ? (
+    <ErrorConnecting />
+  ) : (
     <EuiPage restrictWidth className="enterpriseSearchOverview">
       <SetPageChrome isRoot />
       <SendTelemetry action="viewed" metric="overview" />