From b113732f8643afc4f4eae3c5b3cc31f501516fce Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Wed, 13 Oct 2021 09:33:43 +0200
Subject: [PATCH 1/6] Improve doc viewer code in Discover

---
 .../public/__mocks__/index_patterns.ts        |  2 ++
 .../apps/context/context_app_route.tsx        | 25 +++++++++++++-
 .../application/apps/doc/components/doc.tsx   | 16 ++++-----
 .../application/apps/doc/single_doc_route.tsx | 34 ++++++++++++++-----
 .../__snapshots__/source_viewer.test.tsx.snap |  6 +++-
 .../source_viewer/source_viewer.test.tsx      | 14 ++++----
 .../source_viewer/source_viewer.tsx           | 17 ++++------
 .../application/doc_views/doc_views_types.ts  |  2 +-
 .../helpers/use_index_pattern.test.tsx        | 11 +++++-
 .../application/helpers/use_index_pattern.tsx | 11 ++++--
 .../services/use_es_doc_search.test.tsx       | 24 ++++---------
 .../application/services/use_es_doc_search.ts | 15 +++-----
 src/plugins/discover/public/plugin.tsx        |  2 +-
 13 files changed, 106 insertions(+), 73 deletions(-)

diff --git a/src/plugins/discover/public/__mocks__/index_patterns.ts b/src/plugins/discover/public/__mocks__/index_patterns.ts
index 88447eacc884d..4f7dffcf7c4d7 100644
--- a/src/plugins/discover/public/__mocks__/index_patterns.ts
+++ b/src/plugins/discover/public/__mocks__/index_patterns.ts
@@ -16,6 +16,8 @@ export const indexPatternsMock = {
   get: (id: string) => {
     if (id === 'the-index-pattern-id') {
       return indexPatternMock;
+    } else if (id === 'invalid-index-pattern-id') {
+      return Promise.reject(new Error('Invalid index pattern id'));
     }
   },
   updateSavedObject: jest.fn(),
diff --git a/src/plugins/discover/public/application/apps/context/context_app_route.tsx b/src/plugins/discover/public/application/apps/context/context_app_route.tsx
index d124fd6cfa395..c4d6670bde2b3 100644
--- a/src/plugins/discover/public/application/apps/context/context_app_route.tsx
+++ b/src/plugins/discover/public/application/apps/context/context_app_route.tsx
@@ -8,6 +8,8 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { DiscoverServices } from '../../../build_services';
 import { ContextApp } from './context_app';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
@@ -43,7 +45,28 @@ export function ContextAppRoute(props: ContextAppProps) {
     ]);
   }, [chrome]);
 
-  const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId);
+  const { indexPattern, error } = useIndexPattern(services.indexPatterns, indexPatternId);
+
+  if (error) {
+    return (
+      <EuiEmptyPrompt
+        iconType="alert"
+        title={
+          <FormattedMessage
+            id="discover.singleDocRoute.errorTitle"
+            defaultMessage="An error occured"
+          />
+        }
+        body={
+          <FormattedMessage
+            id="discover.singleDocRoute.errorMessage"
+            defaultMessage="No matching index pattern for id {indexPatternId}"
+            values={{ indexPatternId }}
+          />
+        }
+      />
+    );
+  }
 
   if (!indexPattern) {
     return <LoadingIndicator />;
diff --git a/src/plugins/discover/public/application/apps/doc/components/doc.tsx b/src/plugins/discover/public/application/apps/doc/components/doc.tsx
index f33ffe561e490..c6cfad3953e95 100644
--- a/src/plugins/discover/public/application/apps/doc/components/doc.tsx
+++ b/src/plugins/discover/public/application/apps/doc/components/doc.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiPageContent, EuiPage } from '@elastic/eui';
-import { IndexPatternsContract } from 'src/plugins/data/public';
+import { IndexPattern } from 'src/plugins/data/public';
 import { getServices } from '../../../../kibana_services';
 import { DocViewer } from '../../../components/doc_viewer/doc_viewer';
 import { ElasticRequestState } from '../types';
@@ -25,14 +25,9 @@ export interface DocProps {
    */
   index: string;
   /**
-   * IndexPattern ID used to get IndexPattern entity
-   * that's used for adding additional fields (stored_fields, script_fields, docvalue_fields)
+   * IndexPattern entity
    */
-  indexPatternId: string;
-  /**
-   * IndexPatternService to get a given index pattern by ID
-   */
-  indexPatternService: IndexPatternsContract;
+  indexPattern: IndexPattern;
   /**
    * If set, will always request source, regardless of the global `fieldsFromSource` setting
    */
@@ -40,7 +35,8 @@ export interface DocProps {
 }
 
 export function Doc(props: DocProps) {
-  const [reqState, hit, indexPattern] = useEsDocSearch(props);
+  const { indexPattern } = props;
+  const [reqState, hit] = useEsDocSearch(props);
   const indexExistsLink = getServices().docLinks.links.apis.indexExists;
   return (
     <EuiPage>
@@ -54,7 +50,7 @@ export function Doc(props: DocProps) {
               <FormattedMessage
                 id="discover.doc.failedToLocateIndexPattern"
                 defaultMessage="No index pattern matches ID {indexPatternId}."
-                values={{ indexPatternId: props.indexPatternId }}
+                values={{ indexPatternId: indexPattern.id }}
               />
             }
           />
diff --git a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
index 8398f6255e0f9..95f266e5e11ff 100644
--- a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
+++ b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
@@ -7,6 +7,8 @@
  */
 import React, { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { DiscoverServices } from '../../../build_services';
 import { getRootBreadcrumbs } from '../../helpers/breadcrumbs';
 import { Doc } from './components/doc';
@@ -31,7 +33,7 @@ function useQuery() {
 
 export function SingleDocRoute(props: SingleDocRouteProps) {
   const { services } = props;
-  const { chrome, timefilter, indexPatterns } = services;
+  const { chrome, timefilter } = services;
 
   const { indexPatternId, index } = useParams<DocUrlParams>();
 
@@ -52,7 +54,28 @@ export function SingleDocRoute(props: SingleDocRouteProps) {
     timefilter.disableTimeRangeSelector();
   });
 
-  const indexPattern = useIndexPattern(services.indexPatterns, indexPatternId);
+  const { indexPattern, error } = useIndexPattern(services.indexPatterns, indexPatternId);
+
+  if (error) {
+    return (
+      <EuiEmptyPrompt
+        iconType="alert"
+        title={
+          <FormattedMessage
+            id="discover.singleDocRoute.errorTitle"
+            defaultMessage="An error occured"
+          />
+        }
+        body={
+          <FormattedMessage
+            id="discover.singleDocRoute.errorMessage"
+            defaultMessage="No matching index pattern for id {indexPatternId}"
+            values={{ indexPatternId }}
+          />
+        }
+      />
+    );
+  }
 
   if (!indexPattern) {
     return <LoadingIndicator />;
@@ -60,12 +83,7 @@ export function SingleDocRoute(props: SingleDocRouteProps) {
 
   return (
     <div className="app-container">
-      <Doc
-        id={docId}
-        index={index}
-        indexPatternId={indexPatternId}
-        indexPatternService={indexPatterns}
-      />
+      <Doc id={docId} index={index} indexPattern={indexPattern} />
     </div>
   );
 }
diff --git a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
index 3d4a9923fa8c8..9258c4024149b 100644
--- a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
+++ b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
@@ -264,7 +264,11 @@ exports[`Source Viewer component renders json code editor 1`] = `
   hasLineNumbers={true}
   id="1"
   index="index1"
-  indexPatternId="xyz"
+  indexPattern={
+    Object {
+      "getComputedFields": [Function],
+    }
+  }
   intl={
     Object {
       "defaultFormats": Object {},
diff --git a/src/plugins/discover/public/application/components/source_viewer/source_viewer.test.tsx b/src/plugins/discover/public/application/components/source_viewer/source_viewer.test.tsx
index 7895c1025dda9..a98c2de6197d8 100644
--- a/src/plugins/discover/public/application/components/source_viewer/source_viewer.test.tsx
+++ b/src/plugins/discover/public/application/components/source_viewer/source_viewer.test.tsx
@@ -43,13 +43,13 @@ const mockIndexPatternService = {
 }));
 describe('Source Viewer component', () => {
   test('renders loading state', () => {
-    jest.spyOn(hooks, 'useEsDocSearch').mockImplementation(() => [0, null, null, () => {}]);
+    jest.spyOn(hooks, 'useEsDocSearch').mockImplementation(() => [0, null, () => {}]);
 
     const comp = mountWithIntl(
       <SourceViewer
         id={'1'}
         index={'index1'}
-        indexPatternId={'xyz'}
+        indexPattern={mockIndexPattern}
         width={123}
         hasLineNumbers={true}
       />
@@ -60,13 +60,13 @@ describe('Source Viewer component', () => {
   });
 
   test('renders error state', () => {
-    jest.spyOn(hooks, 'useEsDocSearch').mockImplementation(() => [3, null, null, () => {}]);
+    jest.spyOn(hooks, 'useEsDocSearch').mockImplementation(() => [3, null, () => {}]);
 
     const comp = mountWithIntl(
       <SourceViewer
         id={'1'}
         index={'index1'}
-        indexPatternId={'xyz'}
+        indexPattern={mockIndexPattern}
         width={123}
         hasLineNumbers={true}
       />
@@ -97,9 +97,7 @@ describe('Source Viewer component', () => {
         _underscore: 123,
       },
     } as never;
-    jest
-      .spyOn(hooks, 'useEsDocSearch')
-      .mockImplementation(() => [2, mockHit, mockIndexPattern, () => {}]);
+    jest.spyOn(hooks, 'useEsDocSearch').mockImplementation(() => [2, mockHit, () => {}]);
     jest.spyOn(useUiSettingHook, 'useUiSetting').mockImplementation(() => {
       return false;
     });
@@ -107,7 +105,7 @@ describe('Source Viewer component', () => {
       <SourceViewer
         id={'1'}
         index={'index1'}
-        indexPatternId={'xyz'}
+        indexPattern={mockIndexPattern}
         width={123}
         hasLineNumbers={true}
       />
diff --git a/src/plugins/discover/public/application/components/source_viewer/source_viewer.tsx b/src/plugins/discover/public/application/components/source_viewer/source_viewer.tsx
index 9e37ae8f8bf93..31d4d866df21e 100644
--- a/src/plugins/discover/public/application/components/source_viewer/source_viewer.tsx
+++ b/src/plugins/discover/public/application/components/source_viewer/source_viewer.tsx
@@ -17,11 +17,12 @@ import { getServices } from '../../../kibana_services';
 import { SEARCH_FIELDS_FROM_SOURCE } from '../../../../common';
 import { ElasticRequestState } from '../../apps/doc/types';
 import { useEsDocSearch } from '../../services/use_es_doc_search';
+import { IndexPattern } from '../../../../../data_views/common';
 
 interface SourceViewerProps {
   id: string;
   index: string;
-  indexPatternId: string;
+  indexPattern: IndexPattern;
   hasLineNumbers: boolean;
   width?: number;
 }
@@ -29,19 +30,17 @@ interface SourceViewerProps {
 export const SourceViewer = ({
   id,
   index,
-  indexPatternId,
+  indexPattern,
   width,
   hasLineNumbers,
 }: SourceViewerProps) => {
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
   const [jsonValue, setJsonValue] = useState<string>('');
-  const indexPatternService = getServices().data.indexPatterns;
   const useNewFieldsApi = !getServices().uiSettings.get(SEARCH_FIELDS_FROM_SOURCE);
-  const [reqState, hit, , requestData] = useEsDocSearch({
+  const [reqState, hit, requestData] = useEsDocSearch({
     id,
     index,
-    indexPatternId,
-    indexPatternService,
+    indexPattern,
     requestSource: useNewFieldsApi,
   });
 
@@ -106,11 +105,7 @@ export const SourceViewer = ({
     <EuiEmptyPrompt iconType="alert" title={errorMessageTitle} body={errorMessage} />
   );
 
-  if (
-    reqState === ElasticRequestState.Error ||
-    reqState === ElasticRequestState.NotFound ||
-    reqState === ElasticRequestState.NotFoundIndexPattern
-  ) {
+  if (reqState === ElasticRequestState.Error || reqState === ElasticRequestState.NotFound) {
     return errorState;
   }
 
diff --git a/src/plugins/discover/public/application/doc_views/doc_views_types.ts b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
index 48bebec22b9b5..d3e482c0f2e1d 100644
--- a/src/plugins/discover/public/application/doc_views/doc_views_types.ts
+++ b/src/plugins/discover/public/application/doc_views/doc_views_types.ts
@@ -32,7 +32,7 @@ export interface DocViewRenderProps {
   columns?: string[];
   filter?: DocViewFilterFn;
   hit: ElasticSearchHit;
-  indexPattern?: IndexPattern;
+  indexPattern: IndexPattern;
   onAddColumn?: (columnName: string) => void;
   onRemoveColumn?: (columnName: string) => void;
 }
diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
index 85282afb6fc37..775531bd75c16 100644
--- a/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
+++ b/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
@@ -14,6 +14,15 @@ describe('Use Index Pattern', () => {
   test('returning a valid index pattern', async () => {
     const { result } = renderHook(() => useIndexPattern(indexPatternsMock, 'the-index-pattern-id'));
     await act(() => Promise.resolve());
-    expect(result.current).toBe(indexPatternMock);
+    expect(result.current.indexPattern).toBe(indexPatternMock);
+  });
+
+  test('returning an error', async () => {
+    const { result } = renderHook(() =>
+      useIndexPattern(indexPatternsMock, 'invalid-index-pattern-id')
+    );
+    await act(() => Promise.resolve());
+    expect(result.current.indexPattern).toBe(undefined);
+    expect(result.current.error).toBeTruthy();
   });
 });
diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
index f53d131920c5c..dc99a419dd579 100644
--- a/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
+++ b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
@@ -10,13 +10,18 @@ import { IndexPattern, IndexPatternsContract } from '../../../../data/common';
 
 export const useIndexPattern = (indexPatterns: IndexPatternsContract, indexPatternId: string) => {
   const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
+  const [error, setError] = useState();
 
   useEffect(() => {
     async function loadIndexPattern() {
-      const ip = await indexPatterns.get(indexPatternId);
-      setIndexPattern(ip);
+      try {
+        const ip = await indexPatterns.get(indexPatternId);
+        setIndexPattern(ip);
+      } catch (e) {
+        setError(e);
+      }
     }
     loadIndexPattern();
   });
-  return indexPattern;
+  return { indexPattern, error };
 };
diff --git a/src/plugins/discover/public/application/services/use_es_doc_search.test.tsx b/src/plugins/discover/public/application/services/use_es_doc_search.test.tsx
index af7d189e62882..ca57b470b471a 100644
--- a/src/plugins/discover/public/application/services/use_es_doc_search.test.tsx
+++ b/src/plugins/discover/public/application/services/use_es_doc_search.test.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-hooks';
 import { buildSearchBody, useEsDocSearch } from './use_es_doc_search';
 import { Observable } from 'rxjs';
 import { IndexPattern } from 'src/plugins/data/common';
@@ -175,26 +175,14 @@ describe('Test of <Doc /> helper / hook', () => {
     const indexPattern = {
       getComputedFields: () => [],
     };
-    const getMock = jest.fn(() => Promise.resolve(indexPattern));
-    const indexPatternService = {
-      get: getMock,
-    } as unknown as IndexPattern;
     const props = {
       id: '1',
       index: 'index1',
-      indexPatternId: 'xyz',
-      indexPatternService,
-    } as unknown as DocProps;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let hook: any;
-    await act(async () => {
-      hook = renderHook((p: DocProps) => useEsDocSearch(p), { initialProps: props });
-    });
-    expect(hook.result.current.slice(0, 3)).toEqual([
-      ElasticRequestState.Loading,
-      null,
       indexPattern,
-    ]);
-    expect(getMock).toHaveBeenCalled();
+    } as unknown as DocProps;
+
+    const { result } = renderHook((p: DocProps) => useEsDocSearch(p), { initialProps: props });
+
+    expect(result.current.slice(0, 2)).toEqual([ElasticRequestState.Loading, null]);
   });
 });
diff --git a/src/plugins/discover/public/application/services/use_es_doc_search.ts b/src/plugins/discover/public/application/services/use_es_doc_search.ts
index a2f0cd6f8442b..16a24ff27292b 100644
--- a/src/plugins/discover/public/application/services/use_es_doc_search.ts
+++ b/src/plugins/discover/public/application/services/use_es_doc_search.ts
@@ -64,11 +64,9 @@ export function buildSearchBody(
 export function useEsDocSearch({
   id,
   index,
-  indexPatternId,
-  indexPatternService,
+  indexPattern,
   requestSource,
-}: DocProps): [ElasticRequestState, ElasticSearchHit | null, IndexPattern | null, () => void] {
-  const [indexPattern, setIndexPattern] = useState<IndexPattern | null>(null);
+}: DocProps): [ElasticRequestState, ElasticSearchHit | null | null, () => void] {
   const [status, setStatus] = useState(ElasticRequestState.Loading);
   const [hit, setHit] = useState<ElasticSearchHit | null>(null);
   const { data, uiSettings } = useMemo(() => getServices(), []);
@@ -76,14 +74,11 @@ export function useEsDocSearch({
 
   const requestData = useCallback(async () => {
     try {
-      const indexPatternEntity = await indexPatternService.get(indexPatternId);
-      setIndexPattern(indexPatternEntity);
-
       const { rawResponse } = await data.search
         .search({
           params: {
             index,
-            body: buildSearchBody(id, indexPatternEntity, useNewFieldsApi, requestSource)?.body,
+            body: buildSearchBody(id, indexPattern, useNewFieldsApi, requestSource)?.body,
           },
         })
         .toPromise();
@@ -105,11 +100,11 @@ export function useEsDocSearch({
         setStatus(ElasticRequestState.Error);
       }
     }
-  }, [id, index, indexPatternId, indexPatternService, data.search, useNewFieldsApi, requestSource]);
+  }, [id, index, indexPattern, data.search, useNewFieldsApi, requestSource]);
 
   useEffect(() => {
     requestData();
   }, [requestData]);
 
-  return [status, hit, indexPattern, requestData];
+  return [status, hit, requestData];
 }
diff --git a/src/plugins/discover/public/plugin.tsx b/src/plugins/discover/public/plugin.tsx
index afb83d6cbd667..b1b05aa94f470 100644
--- a/src/plugins/discover/public/plugin.tsx
+++ b/src/plugins/discover/public/plugin.tsx
@@ -268,7 +268,7 @@ export class DiscoverPlugin
           <SourceViewer
             index={hit._index}
             id={hit._id}
-            indexPatternId={indexPattern?.id || ''}
+            indexPattern={indexPattern}
             hasLineNumbers
           />
         </React.Suspense>

From e523622e11db6b7cc3163ef59e1956e4f5457eb1 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Wed, 13 Oct 2021 13:55:45 +0200
Subject: [PATCH 2/6] Fix types

---
 .../apps/doc/components/doc.test.tsx          | 21 +++----------------
 .../doc_viewer/doc_viewer_tab.test.tsx        |  3 +++
 .../application/components/table/table.tsx    |  2 +-
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/plugins/discover/public/application/apps/doc/components/doc.test.tsx b/src/plugins/discover/public/application/apps/doc/components/doc.test.tsx
index 31ff39ea6b577..68c012ddd92e9 100644
--- a/src/plugins/discover/public/application/apps/doc/components/doc.test.tsx
+++ b/src/plugins/discover/public/application/apps/doc/components/doc.test.tsx
@@ -14,6 +14,7 @@ import { ReactWrapper } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Doc, DocProps } from './doc';
 import { SEARCH_FIELDS_FROM_SOURCE as mockSearchFieldsFromSource } from '../../../../../common';
+import { indexPatternMock } from '../../../../__mocks__/index_pattern';
 
 const mockSearchApi = jest.fn();
 
@@ -74,21 +75,11 @@ const waitForPromises = async () =>
  * this works but logs ugly error messages until we're using React 16.9
  * should be adapted when we upgrade
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-async function mountDoc(update = false, indexPatternGetter: any = null) {
-  const indexPattern = {
-    getComputedFields: () => [],
-  };
-  const indexPatternService = {
-    get: indexPatternGetter ? indexPatternGetter : jest.fn(() => Promise.resolve(indexPattern)),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } as any;
-
+async function mountDoc(update = false) {
   const props = {
     id: '1',
     index: 'index1',
-    indexPatternId: 'xyz',
-    indexPatternService,
+    indexPattern: indexPatternMock,
   } as DocProps;
   let comp!: ReactWrapper;
   await act(async () => {
@@ -108,12 +99,6 @@ describe('Test of <Doc /> of Discover', () => {
     expect(findTestSubject(comp, 'doc-msg-loading').length).toBe(1);
   });
 
-  test('renders IndexPattern notFound msg', async () => {
-    const indexPatternGetter = jest.fn(() => Promise.reject({ savedObjectId: '007' }));
-    const comp = await mountDoc(true, indexPatternGetter);
-    expect(findTestSubject(comp, 'doc-msg-notFoundIndexPattern').length).toBe(1);
-  });
-
   test('renders notFound msg', async () => {
     mockSearchApi.mockImplementation(() => throwError({ status: 404 }));
     const comp = await mountDoc(true);
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.test.tsx b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.test.tsx
index a2434170acdd7..188deba755445 100644
--- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.test.tsx
+++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.test.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { DocViewerTab } from './doc_viewer_tab';
 import { ElasticSearchHit } from '../../doc_views/doc_views_types';
+import { indexPatternMock } from '../../../__mocks__/index_pattern';
 
 describe('DocViewerTab', () => {
   test('changing columns triggers an update', () => {
@@ -21,6 +22,7 @@ describe('DocViewerTab', () => {
       renderProps: {
         hit: {} as ElasticSearchHit,
         columns: ['test'],
+        indexPattern: indexPatternMock,
       },
     };
 
@@ -31,6 +33,7 @@ describe('DocViewerTab', () => {
       renderProps: {
         hit: {} as ElasticSearchHit,
         columns: ['test2'],
+        indexPattern: indexPatternMock,
       },
     };
 
diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx
index eab3ba6e3d29a..f597b7ff1c861 100644
--- a/src/plugins/discover/public/application/components/table/table.tsx
+++ b/src/plugins/discover/public/application/components/table/table.tsx
@@ -24,7 +24,7 @@ export interface DocViewerTableProps {
   columns?: string[];
   filter?: DocViewFilterFn;
   hit: ElasticSearchHit;
-  indexPattern?: IndexPattern;
+  indexPattern: IndexPattern;
   onAddColumn?: (columnName: string) => void;
   onRemoveColumn?: (columnName: string) => void;
 }

From ff402c367baad9aba8d9c5f0688dbb9e61a666b7 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 14 Oct 2021 17:26:01 +0200
Subject: [PATCH 3/6] Fix test

---
 .../discover/public/__mocks__/index_patterns.ts     |  8 ++++----
 .../__snapshots__/source_viewer.test.tsx.snap       |  6 +++++-
 .../application/helpers/use_index_pattern.test.tsx  | 13 ++++++++-----
 .../application/helpers/use_index_pattern.tsx       |  6 +++---
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/plugins/discover/public/__mocks__/index_patterns.ts b/src/plugins/discover/public/__mocks__/index_patterns.ts
index 4f7dffcf7c4d7..b90338e895623 100644
--- a/src/plugins/discover/public/__mocks__/index_patterns.ts
+++ b/src/plugins/discover/public/__mocks__/index_patterns.ts
@@ -10,14 +10,14 @@ import { IndexPatternsService } from '../../../data/common';
 import { indexPatternMock } from './index_pattern';
 
 export const indexPatternsMock = {
-  getCache: () => {
+  getCache: async () => {
     return [indexPatternMock];
   },
-  get: (id: string) => {
+  get: async (id: string) => {
     if (id === 'the-index-pattern-id') {
-      return indexPatternMock;
+      return Promise.resolve(indexPatternMock);
     } else if (id === 'invalid-index-pattern-id') {
-      return Promise.reject(new Error('Invalid index pattern id'));
+      return Promise.reject('Invald');
     }
   },
   updateSavedObject: jest.fn(),
diff --git a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
index 9258c4024149b..bdb19066fea15 100644
--- a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
+++ b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
@@ -619,7 +619,11 @@ exports[`Source Viewer component renders loading state 1`] = `
   hasLineNumbers={true}
   id="1"
   index="index1"
-  indexPatternId="xyz"
+  indexPattern={
+    Object {
+      "getComputedFields": [Function],
+    }
+  }
   intl={
     Object {
       "defaultFormats": Object {},
diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
index 775531bd75c16..dfc54d8630742 100644
--- a/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
+++ b/src/plugins/discover/public/application/helpers/use_index_pattern.test.tsx
@@ -8,20 +8,23 @@
 import { useIndexPattern } from './use_index_pattern';
 import { indexPatternMock } from '../../__mocks__/index_pattern';
 import { indexPatternsMock } from '../../__mocks__/index_patterns';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react-hooks';
 
 describe('Use Index Pattern', () => {
   test('returning a valid index pattern', async () => {
-    const { result } = renderHook(() => useIndexPattern(indexPatternsMock, 'the-index-pattern-id'));
-    await act(() => Promise.resolve());
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useIndexPattern(indexPatternsMock, 'the-index-pattern-id')
+    );
+    await waitForNextUpdate();
     expect(result.current.indexPattern).toBe(indexPatternMock);
+    expect(result.current.error).toBe(undefined);
   });
 
   test('returning an error', async () => {
-    const { result } = renderHook(() =>
+    const { result, waitForNextUpdate } = renderHook(() =>
       useIndexPattern(indexPatternsMock, 'invalid-index-pattern-id')
     );
-    await act(() => Promise.resolve());
+    await waitForNextUpdate();
     expect(result.current.indexPattern).toBe(undefined);
     expect(result.current.error).toBeTruthy();
   });
diff --git a/src/plugins/discover/public/application/helpers/use_index_pattern.tsx b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
index dc99a419dd579..374f83cbbfe72 100644
--- a/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
+++ b/src/plugins/discover/public/application/helpers/use_index_pattern.tsx
@@ -15,13 +15,13 @@ export const useIndexPattern = (indexPatterns: IndexPatternsContract, indexPatte
   useEffect(() => {
     async function loadIndexPattern() {
       try {
-        const ip = await indexPatterns.get(indexPatternId);
-        setIndexPattern(ip);
+        const item = await indexPatterns.get(indexPatternId);
+        setIndexPattern(item);
       } catch (e) {
         setError(e);
       }
     }
     loadIndexPattern();
-  });
+  }, [indexPatternId, indexPatterns]);
   return { indexPattern, error };
 };

From e1c09a04f8234b942b314742258df54c775ac9da Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 14 Oct 2021 19:50:59 +0200
Subject: [PATCH 4/6] Update snapshot

---
 .../source_viewer/__snapshots__/source_viewer.test.tsx.snap | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
index bdb19066fea15..74bf3a3996416 100644
--- a/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
+++ b/src/plugins/discover/public/application/components/source_viewer/__snapshots__/source_viewer.test.tsx.snap
@@ -5,7 +5,11 @@ exports[`Source Viewer component renders error state 1`] = `
   hasLineNumbers={true}
   id="1"
   index="index1"
-  indexPatternId="xyz"
+  indexPattern={
+    Object {
+      "getComputedFields": [Function],
+    }
+  }
   intl={
     Object {
       "defaultFormats": Object {},

From b75af0082448c6b65fe2b016e8322c5e1055e025 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 18 Oct 2021 23:19:49 +0200
Subject: [PATCH 5/6] Update
 src/plugins/discover/public/application/apps/context/context_app_route.tsx

Co-authored-by: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
---
 .../public/application/apps/context/context_app_route.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/discover/public/application/apps/context/context_app_route.tsx b/src/plugins/discover/public/application/apps/context/context_app_route.tsx
index c4d6670bde2b3..6c4722418be14 100644
--- a/src/plugins/discover/public/application/apps/context/context_app_route.tsx
+++ b/src/plugins/discover/public/application/apps/context/context_app_route.tsx
@@ -51,6 +51,7 @@ export function ContextAppRoute(props: ContextAppProps) {
     return (
       <EuiEmptyPrompt
         iconType="alert"
+        iconColor="danger"
         title={
           <FormattedMessage
             id="discover.singleDocRoute.errorTitle"

From 9e5736433ee35e25623b485213f341fd54693f9c Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 18 Oct 2021 23:20:04 +0200
Subject: [PATCH 6/6] Update
 src/plugins/discover/public/application/apps/doc/single_doc_route.tsx

Co-authored-by: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
---
 .../discover/public/application/apps/doc/single_doc_route.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
index 95f266e5e11ff..aef928d523515 100644
--- a/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
+++ b/src/plugins/discover/public/application/apps/doc/single_doc_route.tsx
@@ -60,6 +60,7 @@ export function SingleDocRoute(props: SingleDocRouteProps) {
     return (
       <EuiEmptyPrompt
         iconType="alert"
+        iconColor="danger"
         title={
           <FormattedMessage
             id="discover.singleDocRoute.errorTitle"