[UnifiedDocViewer] Move Discover doc viewer into plugin/package

.github/CODEOWNERS

@@ -740,6 +740,8 @@ test/plugin_functional/plugins/ui_settings_plugin @elastic/kibana-core
 packages/kbn-ui-shared-deps-npm @elastic/kibana-operations
 packages/kbn-ui-shared-deps-src @elastic/kibana-operations
 packages/kbn-ui-theme @elastic/kibana-operations
+packages/kbn-unified-doc-viewer @elastic/kibana-data-discovery
+src/plugins/unified_doc_viewer @elastic/kibana-data-discovery
 packages/kbn-unified-field-list @elastic/kibana-data-discovery
 examples/unified_field_list_examples @elastic/kibana-data-discovery
 src/plugins/unified_histogram @elastic/kibana-data-discovery

.i18nrc.json

@@ -120,6 +120,7 @@
     "visTypeXy": "src/plugins/vis_types/xy",
     "visualizations": "src/plugins/visualizations",
     "visualizationUiComponents": "packages/kbn-visualization-ui-components",
+    "unifiedDocViewer": ["src/plugins/unified_doc_viewer", "packages/kbn-unified-doc-viewer"],
     "unifiedSearch": "src/plugins/unified_search",
     "unifiedFieldList": "packages/kbn-unified-field-list",
     "unifiedHistogram": "src/plugins/unified_histogram"

docs/developer/plugin-list.asciidoc

@@ -332,6 +332,10 @@ In general this plugin provides:
 |Registers commercially licensed generic actions like per panel time range and contains some code that supports drilldown work.
 
 
+|{kib-repo}blob/{branch}/src/plugins/unified_doc_viewer/README.md[unifiedDocViewer]
+|This plugin contains services reliant on the plugin lifecycle for the unified doc viewer component (see @kbn/unified-doc-viewer).
+
+
 |{kib-repo}blob/{branch}/src/plugins/unified_histogram/README.md[unifiedHistogram]
 |Unified Histogram is a UX Building Block including a layout with a resizable histogram and a main display.
 It manages its own state and data fetching, and can easily be dropped into pages with minimal setup.

package.json

@@ -729,6 +729,8 @@
     "@kbn/ui-shared-deps-npm": "link:packages/kbn-ui-shared-deps-npm",
     "@kbn/ui-shared-deps-src": "link:packages/kbn-ui-shared-deps-src",
     "@kbn/ui-theme": "link:packages/kbn-ui-theme",
+    "@kbn/unified-doc-viewer": "link:packages/kbn-unified-doc-viewer",
+    "@kbn/unified-doc-viewer-plugin": "link:src/plugins/unified_doc_viewer",
     "@kbn/unified-field-list": "link:packages/kbn-unified-field-list",
     "@kbn/unified-field-list-examples-plugin": "link:examples/unified_field_list_examples",
     "@kbn/unified-histogram-plugin": "link:src/plugins/unified_histogram",

packages/kbn-discover-utils/src/index.ts

@@ -9,3 +9,4 @@
 export * from './constants';
 export * from './hooks';
 export * from './utils';
+export * from './constants';

packages/kbn-optimizer/limits.yml

@@ -140,6 +140,7 @@ pageLoadAssetSize:
   triggersActionsUi: 135613
   uiActions: 35121
   uiActionsEnhanced: 38494
+  unifiedDocViewer: 66289
   unifiedHistogram: 19928
   unifiedSearch: 71059
   upgradeAssistant: 81241

packages/kbn-unified-doc-viewer/README.md

@@ -0,0 +1,15 @@
+# @kbn/unified-doc-viewer
+
+This package contains components and services for the unified doc viewer component.
+
+Discover (Classic view → Expanded document)
+
+![image](https://github.com/elastic/kibana/assets/1178348/a0a360bf-2697-4427-a32e-c728f06f5a7e)
+
+Discover (Document explorer → Toggle dialog with details)
+
+![image](https://github.com/elastic/kibana/assets/1178348/c9c11587-c53f-4bcd-8d48-aaceb64981ea)
+
+Discover (View single document)
+
+![image](https://github.com/elastic/kibana/assets/1178348/4a8ea694-d4f5-4c9c-9259-1212f0d50a18)

src/plugins/discover/public/application/doc/types.ts → packages/kbn-unified-doc-viewer/index.ts

@@ -6,10 +6,4 @@
  * Side Public License, v 1.
  */
 
-export enum ElasticRequestState {
-  Loading,
-  NotFound,
-  Found,
-  Error,
-  NotFoundDataView,
-}
+export { DeferredSpinner, DocViewer, DocViewsRegistry, ElasticRequestState } from './src';

packages/kbn-unified-doc-viewer/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-unified-doc-viewer'],
+};

packages/kbn-unified-doc-viewer/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/unified-doc-viewer",
+  "owner": "@elastic/kibana-data-discovery"
+}

packages/kbn-unified-doc-viewer/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/unified-doc-viewer",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

src/plugins/discover/public/components/index.ts → packages/kbn-unified-doc-viewer/src/components/deferred_spinner/index.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { DeferredSpinner } from './common/deferred_spinner';
+export * from './deferred_spinner';

packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.test.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { DocViewer } from './doc_viewer';
+import { findTestSubject } from '@elastic/eui/lib/test';
+import type { DocViewRenderProps } from '../../types';
+import { buildDataTableRecord } from '@kbn/discover-utils';
+import { DocViewsRegistry } from '../..';
+
+describe('<DocViewer />', () => {
+  test('Render <DocViewer/> with 3 different tabs', () => {
+    const registry = new DocViewsRegistry();
+    registry.addDocView({ order: 10, title: 'Render function', render: jest.fn() });
+    registry.addDocView({ order: 20, title: 'React component', component: () => <div>test</div> });
+    // @ts-expect-error This should be invalid and will throw an error when rendering
+    registry.addDocView({ order: 30, title: 'Invalid doc view' });
+
+    const renderProps = { hit: {} } as DocViewRenderProps;
+
+    const wrapper = shallow(<DocViewer docViewsRegistry={registry} {...renderProps} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Render <DocViewer/> with 1 tab displaying error message', () => {
+    function SomeComponent() {
+      // this is just a placeholder
+      return null;
+    }
+
+    const registry = new DocViewsRegistry();
+    registry.addDocView({
+      order: 10,
+      title: 'React component',
+      component: SomeComponent,
+    });
+
+    const renderProps = {
+      hit: buildDataTableRecord({ _index: 't', _id: '1' }),
+    } as DocViewRenderProps;
+    const errorMsg = 'Catch me if you can!';
+
+    const wrapper = mount(<DocViewer docViewsRegistry={registry} {...renderProps} />);
+    const error = new Error(errorMsg);
+    wrapper.find(SomeComponent).simulateError(error);
+    const errorMsgComponent = findTestSubject(wrapper, 'docViewerError');
+    expect(errorMsgComponent.text()).toMatch(new RegExp(`${errorMsg}`));
+  });
+});

src/plugins/discover/public/services/doc_views/components/doc_viewer/doc_viewer.tsx → packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer.tsx

@@ -8,18 +8,21 @@
 
 import React from 'react';
 import { EuiTabbedContent } from '@elastic/eui';
-import { getDocViewsRegistry } from '../../../../kibana_services';
+import type { DocViewsRegistry } from '../../..';
 import { DocViewerTab } from './doc_viewer_tab';
-import { DocView, DocViewRenderProps } from '../../doc_views_types';
+import type { DocView, DocViewRenderProps } from '../../types';
+
+export interface DocViewerProps extends DocViewRenderProps {
+  docViewsRegistry: DocViewsRegistry;
+}
 
 /**
  * Rendering tabs with different views of 1 Elasticsearch hit in Discover.
  * The tabs are provided by the `docs_views` registry.
  * A view can contain a React `component`, or any JS framework by using
  * a `render` function.
  */
-export function DocViewer(renderProps: DocViewRenderProps) {
-  const docViewsRegistry = getDocViewsRegistry();
+export function DocViewer({ docViewsRegistry, ...renderProps }: DocViewerProps) {
   const tabs = docViewsRegistry
     .getDocViewsSorted(renderProps.hit)
     .map(({ title, render, component }: DocView, idx: number) => {

packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_error.test.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { DocViewerError } from './doc_viewer_error';
+
+test('DocViewerError should wrap error in boundary', () => {
+  const props = {
+    error: new Error('my error'),
+  };
+
+  expect(() => {
+    const wrapper = mount(<DocViewerError {...props} />);
+    const html = wrapper.html();
+    expect(html).toContain('euiErrorBoundary');
+    expect(html).toContain('my error');
+  }).not.toThrowError();
+});

src/plugins/discover/public/services/doc_views/components/doc_viewer/doc_viewer_render_tab.test.tsx → packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_render_tab.test.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { DocViewRenderTab } from './doc_viewer_render_tab';
-import { DocViewRenderProps } from '../../doc_views_types';
+import type { DocViewRenderProps } from '../../types';
 
 test('Mounting and unmounting DocViewerRenderTab', () => {
   const unmountFn = jest.fn();

src/plugins/discover/public/services/doc_views/components/doc_viewer/doc_viewer_render_tab.tsx → packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_render_tab.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useRef, useEffect } from 'react';
-import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views_types';
+import type { DocViewRenderFn, DocViewRenderProps } from '../../types';
 
 interface Props {
   render: DocViewRenderFn;

src/plugins/discover/public/services/doc_views/components/doc_viewer/doc_viewer_tab.tsx → packages/kbn-unified-doc-viewer/src/components/doc_viewer/doc_viewer_tab.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import { isEqual } from 'lodash';
 import { DocViewRenderTab } from './doc_viewer_render_tab';
-import { DocViewerError } from './doc_viewer_render_error';
-import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views_types';
+import { DocViewerError } from './doc_viewer_error';
+import type { DocViewRenderFn, DocViewRenderProps } from '../../types';
 
 interface Props {
   id: number;

packages/kbn-unified-doc-viewer/src/components/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './deferred_spinner';
+export * from './doc_viewer';

packages/kbn-unified-doc-viewer/src/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './components';
+export * from './services';

src/plugins/discover/public/services/doc_views/doc_views_registry.ts → packages/kbn-unified-doc-viewer/src/services/doc_views_registry.ts

@@ -7,7 +7,15 @@
  */
 
 import type { DataTableRecord } from '@kbn/discover-utils/types';
-import { DocView, DocViewInput, DocViewInputFn } from './doc_views_types';
+import { DocView, DocViewInput, DocViewInputFn } from './types';
+
+export enum ElasticRequestState {
+  Loading,
+  NotFound,
+  Found,
+  Error,
+  NotFoundDataView,
+}
 
 export class DocViewsRegistry {
   private docViews: DocView[] = [];
@@ -17,10 +25,10 @@ export class DocViewsRegistry {
    */
   addDocView(docViewRaw: DocViewInput | DocViewInputFn) {
     const docView = typeof docViewRaw === 'function' ? docViewRaw() : docViewRaw;
-    if (typeof docView.shouldShow !== 'function') {
-      docView.shouldShow = () => true;
-    }
-    this.docViews.push(docView as DocView);
+    this.docViews.push({
+      ...docView,
+      shouldShow: docView.shouldShow ?? (() => true),
+    });
   }
   /**
    * Returns a sorted array of doc_views for rendering tabs

packages/kbn-unified-doc-viewer/src/services/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { DocViewsRegistry, ElasticRequestState } from './doc_views_registry';

src/plugins/discover/public/services/doc_views/doc_views_types.ts → packages/kbn-unified-doc-viewer/src/services/types.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import type { AggregateQuery, Query } from '@kbn/es-query';
 import type { DataTableRecord, IgnoredReason } from '@kbn/discover-utils/types';
 

packages/kbn-unified-doc-viewer/src/types.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type {
+  DocView,
+  DocViewFilterFn,
+  DocViewRenderFn,
+  DocViewRenderProps,
+  FieldRecordLegacy,
+} from './services/types';

packages/kbn-unified-doc-viewer/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/discover-utils",
+    "@kbn/data-views-plugin",
+    "@kbn/es-query",
+  ]
+}

packages/kbn-unified-doc-viewer/types.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { ElasticRequestState } from '.';
+export type { DocViewFilterFn, DocViewRenderProps, FieldRecordLegacy } from './src/types';

src/plugins/discover/kibana.jsonc

@@ -24,6 +24,7 @@
       "dataViewFieldEditor",
       "dataViewEditor",
       "expressions",
+      "unifiedDocViewer",
       "unifiedSearch",
       "unifiedHistogram"
     ],