Unified doc viewer export component of start contract

src/plugins/discover/public/__mocks__/services.ts

@@ -225,6 +225,10 @@ export function createDiscoverServicesMock(): DiscoverServices {
     },
     contextLocator: { getRedirectUrl: jest.fn(() => '') },
     singleDocLocator: { getRedirectUrl: jest.fn(() => '') },
+    unifiedDocViewer: {
+      getDocViews: () => [],
+      DocViewerComponent: () => void 0,
+    },
   } as unknown as DiscoverServices;
 }
 

src/plugins/discover/public/application/doc/components/doc.test.tsx

@@ -67,6 +67,7 @@ async function mountDoc(update = false) {
     chrome: { setBreadcrumbs: jest.fn() },
     unifiedDocViewer: {
       getDocViews: () => [],
+      DocViewerComponent: () => <div>test</div>,
     },
   };
   await act(async () => {

src/plugins/discover/public/application/doc/components/doc.tsx

@@ -13,11 +13,7 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import { i18n } from '@kbn/i18n';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import { ElasticRequestState } from '@kbn/unified-doc-viewer';
-import {
-  UnifiedDocViewer,
-  useEsDocSearch,
-  useUnifiedDocViewerServices,
-} from '@kbn/unified-doc-viewer-plugin/public';
+import { useEsDocSearch } from '@kbn/unified-doc-viewer-plugin/public';
 import { setBreadcrumbs } from '../../../utils/breadcrumbs';
 import { useDiscoverServices } from '../../../hooks/use_discover_services';
 
@@ -52,7 +48,6 @@ export function Doc(props: DocProps) {
   const { dataView } = props;
   const [reqState, hit] = useEsDocSearch(props);
   const services = useDiscoverServices();
-  const docViewerServices = useUnifiedDocViewerServices();
   const { locator, chrome, docLinks } = services;
   const indexExistsLink = docLinks.links.apis.indexExists;
 
@@ -145,7 +140,7 @@ export function Doc(props: DocProps) {
 
         {reqState === ElasticRequestState.Found && hit !== null && dataView && (
           <div data-test-subj="doc-hit">
-            <UnifiedDocViewer services={docViewerServices} hit={hit} dataView={dataView} />
+            <services.unifiedDocViewer.DocViewerComponent hit={hit} dataView={dataView} />
           </div>
         )}
       </EuiPageBody>

src/plugins/discover/public/build_services.ts

@@ -53,6 +53,7 @@ import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import type { ContentClient } from '@kbn/content-management-plugin/public';
 import type { ServerlessPluginStart } from '@kbn/serverless/public';
+import type { UnifiedDocViewerStart } from '@kbn/unified-doc-viewer-plugin/public';
 import { getHistory } from './kibana_services';
 import { DiscoverStartPlugins } from './plugin';
 import { DiscoverContextAppLocator } from './application/context/services/locator';
@@ -111,6 +112,7 @@ export interface DiscoverServices {
   uiActions: UiActionsStart;
   contentClient: ContentClient;
   serverless?: ServerlessPluginStart;
+  unifiedDocViewer: UnifiedDocViewerStart;
 }
 
 export const buildServices = memoize(function (
@@ -171,5 +173,6 @@ export const buildServices = memoize(function (
     uiActions: plugins.uiActions,
     contentClient: plugins.contentManagement.client,
     serverless: plugins.serverless,
+    unifiedDocViewer: plugins.unifiedDocViewer,
   };
 });

src/plugins/discover/public/components/discover_grid/discover_grid_flyout.test.tsx

@@ -57,6 +57,7 @@ describe('Discover flyout', function () {
       singleDocLocator: { getRedirectUrl: jest.fn(() => 'mock-doc-redirect-url') },
       unifiedDocViewer: {
         getDocViews: () => [],
+        DocViewerComponent: () => <div>test</div>,
       },
     } as unknown as DiscoverServices;
 

src/plugins/discover/public/components/discover_grid/discover_grid_flyout.tsx

@@ -28,10 +28,6 @@ import {
 import type { Filter, Query, AggregateQuery } from '@kbn/es-query';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-import {
-  UnifiedDocViewer,
-  useUnifiedDocViewerServices,
-} from '@kbn/unified-doc-viewer-plugin/public';
 import { useNavigationProps } from '../../hooks/use_navigation_props';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { isTextBasedQuery } from '../../application/main/utils/is_text_based_query';
@@ -74,6 +70,7 @@ export function DiscoverGridFlyout({
   setExpandedDoc,
 }: DiscoverGridFlyoutProps) {
   const services = useDiscoverServices();
+  const UnifiedDocViewer = services.unifiedDocViewer.DocViewerComponent;
   const isPlainRecord = isTextBasedQuery(query);
   // Get actual hit with updated highlighted searches
   const actualHit = useMemo(() => hits?.find(({ id }) => id === hit?.id) || hit, [hit, hits]);
@@ -229,7 +226,6 @@ export function DiscoverGridFlyout({
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <UnifiedDocViewer
-            services={useUnifiedDocViewerServices()}
             hit={actualHit}
             columns={columns}
             dataView={dataView}

src/plugins/discover/public/components/doc_table/components/table_row.test.tsx

@@ -45,6 +45,7 @@ const mountComponent = (props: TableRowProps) => {
         },
         unifiedDocViewer: {
           getDocViews: () => [],
+          DocViewerComponent: () => <div>test</div>,
         },
       }}
     >

src/plugins/discover/public/components/doc_table/components/table_row.tsx

@@ -21,7 +21,6 @@ import { formatFieldValue } from '@kbn/discover-utils';
 import { DOC_HIDE_TIME_COLUMN_SETTING, MAX_DOC_FIELDS_DISPLAYED } from '@kbn/discover-utils';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DocViewerProps } from '@kbn/unified-doc-viewer/src/components/doc_viewer/doc_viewer';
-import { useUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public';
 import { TableCell } from './table_row/table_cell';
 import { formatRow, formatTopLevelObject } from '../utils/row_formatter';
 import { TableRowDetails } from './table_row_details';
@@ -62,8 +61,8 @@ export const TableRow = ({
   onRemoveColumn,
   DocViewer,
 }: TableRowProps) => {
-  const { uiSettings, fieldFormats } = useDiscoverServices();
-  const { unifiedDocViewer } = useUnifiedDocViewerServices();
+  const { uiSettings, fieldFormats, unifiedDocViewer } = useDiscoverServices();
+
   const [maxEntries, hideTimeColumn] = useMemo(
     () => [
       uiSettings.get(MAX_DOC_FIELDS_DISPLAYED),
@@ -225,8 +224,7 @@ export const TableRow = ({
             savedSearchId={savedSearchId}
             isPlainRecord={isPlainRecord}
           >
-            <DocViewer
-              docViews={unifiedDocViewer.getDocViews(row)}
+            <unifiedDocViewer.DocViewerComponent
               columns={columns}
               filter={filter}
               hit={row}

src/plugins/discover/public/plugin.tsx

@@ -44,6 +44,7 @@ import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import type { LensPublicStart } from '@kbn/lens-plugin/public';
 import { TRUNCATE_MAX_HEIGHT } from '@kbn/discover-utils';
 import type { ServerlessPluginStart } from '@kbn/serverless/public';
+import { UnifiedDocViewerStart } from '@kbn/unified-doc-viewer-plugin/public';
 import { PLUGIN_ID } from '../common';
 import {
   setHeaderActionMenuMounter,
@@ -192,6 +193,7 @@ export interface DiscoverStartPlugins {
   lens: LensPublicStart;
   contentManagement: ContentManagementPublicStart;
   serverless?: ServerlessPluginStart;
+  unifiedDocViewer: UnifiedDocViewerStart;
 }
 
 /**

src/plugins/unified_doc_viewer/kibana.jsonc

@@ -7,6 +7,6 @@
     "id": "unifiedDocViewer",
     "server": false,
     "browser": true,
-    "requiredBundles": ["kibanaReact", "kibanaUtils"]
+    "requiredBundles": ["kibanaReact"]
   }
 }

src/plugins/unified_doc_viewer/public/components/doc_viewer/doc_viewer.tsx

@@ -8,15 +8,14 @@
 
 import React from 'react';
 import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
-import { DocViewer } from '@kbn/unified-doc-viewer';
-import type { UnifiedDocViewerServices } from '../../types';
+import { DocViewer, DocViewsRegistry } from '@kbn/unified-doc-viewer';
 
-interface UnifiedDocViewerProps extends DocViewRenderProps {
-  services: UnifiedDocViewerServices;
+export interface UnifiedDocViewerProps extends DocViewRenderProps {
+  registry: DocViewsRegistry;
 }
 
-export function UnifiedDocViewer({ services, ...renderProps }: UnifiedDocViewerProps) {
+export function UnifiedDocViewer({ registry, ...renderProps }: UnifiedDocViewerProps) {
   const { hit } = renderProps;
-  const { unifiedDocViewer } = services;
-  return <DocViewer docViews={unifiedDocViewer.getDocViews(hit)} {...renderProps} />;
+
+  return <DocViewer docViews={registry.getDocViewsSorted(hit)} {...renderProps} />;
 }

src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -117,7 +117,6 @@ export const DocViewerTable = ({
   const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS);
   const currentDataViewId = dataView.id!;
   const isSingleDocView = !filter;
-
   const [searchText, setSearchText] = useState(getSearchText(storage));
   const [pinnedFields, setPinnedFields] = useState<string[]>(
     getPinnedFields(currentDataViewId, storage)

src/plugins/unified_doc_viewer/public/hooks/use_doc_viewer_services.ts

@@ -12,19 +12,16 @@ import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import type { UnifiedDocViewerStart } from '../plugin';
-
 export interface UnifiedDocViewerServices {
   analytics: AnalyticsServiceStart;
   data: DataPublicPluginStart;
   fieldFormats: FieldFormatsStart;
   storage: Storage;
   uiSettings: IUiSettingsClient;
-  unifiedDocViewer: UnifiedDocViewerStart;
 }
 
 export function useUnifiedDocViewerServices(): UnifiedDocViewerServices {
   const { services } = useKibana<UnifiedDocViewerServices>();
-  const { analytics, data, fieldFormats, storage, uiSettings, unifiedDocViewer } = services;
-  return { analytics, data, fieldFormats, storage, uiSettings, unifiedDocViewer };
+  const { analytics, data, fieldFormats, storage, uiSettings } = services;
+  return { analytics, data, fieldFormats, storage, uiSettings };
 }

src/plugins/unified_doc_viewer/public/index.tsx

@@ -13,7 +13,6 @@ import type { JsonCodeEditorProps } from './components';
 import { UnifiedDocViewerPublicPlugin } from './plugin';
 
 export type { UnifiedDocViewerSetup, UnifiedDocViewerStart } from './plugin';
-export { UnifiedDocViewer } from './components';
 
 const LazyJsonCodeEditor = React.lazy(
   () => import('./components/json_code_editor/json_code_editor')

src/plugins/unified_doc_viewer/public/plugin.tsx

@@ -10,9 +10,9 @@ import React from 'react';
 import type { Plugin } from '@kbn/core/public';
 import { DOC_TABLE_LEGACY } from '@kbn/discover-utils';
 import { i18n } from '@kbn/i18n';
-import { withSuspense } from '@kbn/shared-ux-utility';
-import { DeferredSpinner, DocViewsRegistry } from '@kbn/unified-doc-viewer';
+import { DeferredSpinner, DocViewer, DocViewsRegistry } from '@kbn/unified-doc-viewer';
 import { EuiSkeletonText } from '@elastic/eui';
+import { DocViewRenderProps } from '@kbn/unified-doc-viewer/src/services/types';
 import { useUnifiedDocViewerServices } from './hooks';
 
 const DocViewerLegacyTable = React.lazy(() => import('./components/doc_viewer_table/legacy'));
@@ -25,6 +25,7 @@ export interface UnifiedDocViewerSetup {
 
 export interface UnifiedDocViewerStart {
   getDocViews: DocViewsRegistry['getDocViewsSorted'];
+  DocViewerComponent: (props: DocViewRenderProps) => JSX.Element;
 }
 
 export class UnifiedDocViewerPublicPlugin
@@ -43,12 +44,17 @@ export class UnifiedDocViewerPublicPlugin
         const { uiSettings } = useUnifiedDocViewerServices();
         const DocView = uiSettings.get(DOC_TABLE_LEGACY) ? DocViewerLegacyTable : DocViewerTable;
 
-        return withSuspense(
-          DocView,
-          <DeferredSpinner>
-            <EuiSkeletonText />
-          </DeferredSpinner>
-        )(props);
+        return (
+          <React.Suspense
+            fallback={
+              <DeferredSpinner>
+                <EuiSkeletonText />
+              </DeferredSpinner>
+            }
+          >
+            <DocView {...props} />
+          </React.Suspense>
+        );
       },
     });
 
@@ -87,6 +93,14 @@ export class UnifiedDocViewerPublicPlugin
   public start() {
     return {
       getDocViews: this.docViewsRegistry.getDocViewsSorted.bind(this.docViewsRegistry),
+      DocViewerComponent: (renderProps: DocViewRenderProps) => {
+        return (
+          <DocViewer
+            docViews={this.docViewsRegistry.getDocViewsSorted(renderProps.hit)}
+            {...renderProps}
+          />
+        );
+      },
     };
   }
 }

src/plugins/unified_doc_viewer/tsconfig.json

@@ -14,14 +14,14 @@
     "@kbn/i18n",
     "@kbn/unified-doc-viewer",
     "@kbn/unified-field-list",
-    "@kbn/kibana-utils-plugin",
     "@kbn/data-plugin",
     "@kbn/core-analytics-browser",
     "@kbn/field-formats-plugin",
     "@kbn/core-ui-settings-browser",
     "@kbn/ebt-tools",
     "@kbn/core",
-    "@kbn/shared-ux-utility"
+    "@kbn/shared-ux-utility",
+    "@kbn/kibana-utils-plugin"
   ],
   "exclude": [
     "target/**/*",