Add DocView links pluggable injection capability

Signed-off-by: sitbubu <[email protected]>

src/plugins/discover/public/application/angular/doc_table/components/table_row/details.html

@@ -15,28 +15,12 @@
         </div>
       </div>
     </div>
-    <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
-      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow">
-        <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
-          <a
-            class="euiLink"
-            data-test-subj="docTableRowAction"
-            ng-href="{{ getContextAppHref() }}"
-            ng-if="indexPattern.isTimeBased()"
-            i18n-id="discover.docTable.tableRow.viewSurroundingDocumentsLinkText"
-            i18n-default-message="View surrounding documents"
-          ></a>
-        </div>
-        <div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
-          <a
-            class="euiLink"
-            data-test-subj="docTableRowAction"
-            ng-href="#/doc/{{indexPattern.id}}/{{row._index}}?id={{uriEncodedId}}"
-            i18n-id="discover.docTable.tableRow.viewSingleDocumentLinkText"
-            i18n-default-message="View single document"
-          ></a>
-        </div>
-      </div>
+    <div data-test-subj="docViewerLinks">
+      <doc-viewer-links
+        columns="columns"
+        hit="hit"
+        index-pattern="indexPattern"
+      ></doc-viewer-links>
     </div>
   </div>
   <div data-test-subj="docViewer">

src/plugins/discover/public/application/angular/doc_viewer_links.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { DocViewerLinks } from '../components/doc_viewer_links/doc_viewer_links';
+
+export function createDocViewerLinksDirective(reactDirective: any) {
+  return reactDirective(
+    (props: any) => {
+      return <DocViewerLinks {...props} />;
+    },
+    [
+      'hit',
+      ['indexPattern', { watchDepth: 'reference' }],
+      ['columns', { watchDepth: 'collection' }],
+    ],
+    {
+      restrict: 'E',
+      scope: {
+        hit: '=',
+        indexPattern: '=',
+        columns: '=?',
+      },
+    }
+  );
+}

src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.scss

@@ -0,0 +1,21 @@
+.osdDocViewerLinks {
+    .euiListGroup {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        display: inline;
+
+        .euiListGroupItem {
+        float: left;
+        padding: 0;
+        margin: 0 5px;
+        display: inline-block;
+
+        a {
+            padding: 0;
+            margin: 0;
+        }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DocViewerLinks } from './doc_viewer_links';
+import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
+
+jest.mock('../../../opensearch_dashboards_services', () => {
+  let registry: any[] = [];
+  return {
+    getDocViewsLinksRegistry: () => ({
+      addDocViewLink(view: any) {
+        registry.push(view);
+      },
+      getDocViewsLinksSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
+  };
+});
+
+beforeEach(() => {
+  (getDocViewsLinksRegistry() as any).resetRegistry();
+  jest.clearAllMocks();
+});
+
+test('Render <DocViewerLink/> with 2 different links', () => {
+  const registry = getDocViewsLinksRegistry();
+  registry.addDocViewLink({ order: 10, label: 'generateUrlFn link', generateUrlFn: () => 'aaa' });
+  registry.addDocViewLink({ order: 20, label: 'href link', href: 'bbb' });
+
+  const renderProps = { hit: {} } as DocViewLinkRenderProps;
+
+  const wrapper = shallow(<DocViewerLinks {...renderProps} />);
+
+  expect(wrapper).toMatchSnapshot();
+});

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './doc_viewer_links.scss';
+import React from 'react';
+import { EuiListGroup } from '@elastic/eui';
+import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
+
+export function DocViewerLinks(renderProps: DocViewLinkRenderProps) {
+  const listItems = getDocViewsLinksRegistry()
+    .getDocViewsLinksSorted()
+    .map((item) => {
+      item.href = item.generateUrlFn ? item.generateUrlFn(renderProps) : item.href;
+      return item;
+    });
+
+  return (
+    <div className="osdDocViewerLinks">
+      <EuiListGroup listItems={listItems} />
+    </div>
+  );
+}

src/plugins/discover/public/application/doc_views_links/doc_views_links_registry.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DocViewLink } from './doc_views_links_types';
+
+export class DocViewsLinksRegistry {
+  private docViewsLinks: DocViewLink[] = [];
+
+  addDocViewLink(docViewLink: DocViewLink) {
+    this.docViewsLinks.push(docViewLink);
+  }
+
+  getDocViewsLinksSorted() {
+    return this.docViewsLinks.sort((a, b) => (Number(a.order) > Number(b.order) ? 1 : -1));
+  }
+}

src/plugins/discover/public/application/doc_views_links/doc_views_links_types.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiListGroupItemProps } from '@elastic/eui';
+import { OpenSearchSearchHit } from '../doc_views/doc_views_types';
+import { IndexPattern } from '../../../../data/public';
+
+export interface DocViewLink extends EuiListGroupItemProps {
+  href?: string;
+  order: number;
+  generateUrlFn?(renderProps: any): string;
+}
+
+export interface DocViewLinkRenderProps {
+  columns?: string[];
+  hit: OpenSearchSearchHit;
+  indexPattern: IndexPattern;
+}

src/plugins/discover/public/get_inner_angular.ts

@@ -53,6 +53,7 @@ import { createTableRowDirective } from './application/angular/doc_table/compone
 import { createPagerFactory } from './application/angular/doc_table/lib/pager/pager_factory';
 import { createInfiniteScrollDirective } from './application/angular/doc_table/infinite_scroll';
 import { createDocViewerDirective } from './application/angular/doc_viewer';
+import { createDocViewerLinksDirective } from './application/angular/doc_viewer_links';
 import { createRenderCompleteDirective } from './application/angular/directives/render_complete';
 import {
   initAngularBootstrap,
@@ -203,5 +204,6 @@ function createDocTableModule() {
     .directive('osdTableRow', createTableRowDirective)
     .directive('toolBarPagerButtons', createToolBarPagerButtonsDirective)
     .directive('osdInfiniteScroll', createInfiniteScrollDirective)
-    .directive('docViewer', createDocViewerDirective);
+    .directive('docViewer', createDocViewerDirective)
+    .directive('docViewerLinks', createDocViewerLinksDirective);
 }

src/plugins/discover/public/opensearch_dashboards_services.ts

@@ -38,6 +38,7 @@ import { DiscoverServices } from './build_services';
 import { createGetterSetter } from '../../opensearch_dashboards_utils/public';
 import { search } from '../../data/public';
 import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
+import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
 
 let angularModule: any = null;
 let services: DiscoverServices | null = null;
@@ -83,6 +84,10 @@ export const [getUrlTracker, setUrlTracker] = createGetterSetter<{
 export const [getDocViewsRegistry, setDocViewsRegistry] = createGetterSetter<DocViewsRegistry>(
   'DocViewsRegistry'
 );
+
+export const [getDocViewsLinksRegistry, setDocViewsLinksRegistry] = createGetterSetter<
+  DocViewsLinksRegistry
+>('DocViewsLinksRegistry');
 /**
  * Makes sure discover and context are using one instance of history.
  */

src/plugins/discover/public/plugin.ts

@@ -56,17 +56,22 @@ import {
 import { UrlForwardingSetup, UrlForwardingStart } from 'src/plugins/url_forwarding/public';
 import { HomePublicPluginSetup } from 'src/plugins/home/public';
 import { Start as InspectorPublicPluginStart } from 'src/plugins/inspector/public';
+import { stringify } from 'query-string';
+import rison from 'rison-node';
 import { DataPublicPluginStart, DataPublicPluginSetup, opensearchFilters } from '../../data/public';
 import { SavedObjectLoader } from '../../saved_objects/public';
-import { createOsdUrlTracker } from '../../opensearch_dashboards_utils/public';
+import { createOsdUrlTracker, url } from '../../opensearch_dashboards_utils/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
 import { UrlGeneratorState } from '../../share/public';
 import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types';
+import { DocViewLink } from './application/doc_views_links/doc_views_links_types';
 import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
+import { DocViewsLinksRegistry } from './application/doc_views_links/doc_views_links_registry';
 import { DocViewTable } from './application/components/table/table';
 import { JsonCodeBlock } from './application/components/json_code_block/json_code_block';
 import {
   setDocViewsRegistry,
+  setDocViewsLinksRegistry,
   setUrlTracker,
   setAngularModule,
   setServices,
@@ -105,6 +110,10 @@ export interface DiscoverSetup {
      */
     addDocView(docViewRaw: DocViewInput | DocViewInputFn): void;
   };
+
+  docViewsLinks: {
+    addDocViewLink(docViewLinkRaw: DocViewLink): void;
+  };
 }
 
 export interface DiscoverStart {
@@ -173,6 +182,7 @@ export class DiscoverPlugin
 
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
   private docViewsRegistry: DocViewsRegistry | null = null;
+  private docViewsLinksRegistry: DocViewsLinksRegistry | null = null;
   private embeddableInjector: auto.IInjectorService | null = null;
   private stopUrlTracking: (() => void) | undefined = undefined;
   private servicesInitialized: boolean = false;
@@ -207,6 +217,7 @@ export class DiscoverPlugin
       order: 10,
       component: DocViewTable,
     });
+
     this.docViewsRegistry.addDocView({
       title: i18n.translate('discover.docViews.json.jsonTitle', {
         defaultMessage: 'JSON',
@@ -215,6 +226,44 @@ export class DiscoverPlugin
       component: JsonCodeBlock,
     });
 
+    this.docViewsLinksRegistry = new DocViewsLinksRegistry();
+    setDocViewsLinksRegistry(this.docViewsLinksRegistry);
+
+    this.docViewsLinksRegistry.addDocViewLink({
+      label: 'View surrounding documents',
+      generateUrlFn: (renderProps: any) => {
+        const globalFilters: any = getServices().filterManager.getGlobalFilters();
+        const appFilters: any = getServices().filterManager.getAppFilters();
+
+        const hash = stringify(
+          url.encodeQuery({
+            _g: rison.encode({
+              filters: globalFilters || [],
+            }),
+            _a: rison.encode({
+              columns: renderProps.columns,
+              filters: (appFilters || []).map(opensearchFilters.disableFilter),
+            }),
+          }),
+          { encode: false, sort: false }
+        );
+
+        return `#/context/${encodeURIComponent(renderProps.indexPattern.id)}/${encodeURIComponent(
+          renderProps.hit._id
+        )}?${hash}`;
+      },
+      order: 1,
+    });
+
+    this.docViewsLinksRegistry.addDocViewLink({
+      label: 'View single document',
+      generateUrlFn: (renderProps) =>
+        `#/doc/${renderProps.indexPattern.id}/${renderProps.hit._index}?id=${encodeURIComponent(
+          renderProps.hit._id
+        )}`,
+      order: 2,
+    });
+
     const {
       appMounted,
       appUnMounted,

test/plugin_functional/plugins/doc_views_links_plugin/opensearch_dashboards.json

@@ -0,0 +1,8 @@
+{
+    "id": "docViewLinksPlugin",
+    "version": "0.0.1",
+    "opensearchDashboardsVersion": "opensearchDashboards",
+    "server": false,
+    "ui": true,
+    "requiredPlugins": ["discover"]
+}

test/plugin_functional/plugins/doc_views_links_plugin/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "docViewLinksPlugin",
+    "version": "1.0.0",
+    "main": "target/test/plugin_functional/plugins/doc_views_links_plugin",
+    "opensearchDashboards": {
+      "version": "opensearchDashboards",
+      "templateVersion": "1.0.0"
+    },
+    "license": "Apache-2.0",
+    "scripts": {
+      "osd": "node ../../../../scripts/osd.js",
+      "build": "rm -rf './target' && tsc"
+    },
+    "devDependencies": {
+      "typescript": "4.0.2"
+    }
+}

test/plugin_functional/plugins/doc_views_links_plugin/public/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DocViewsLinksPlugin } from './plugin';
+
+export const plugin = () => new DocViewsLinksPlugin();