Add DocView links pluggable injection capability (#1200)

* Add DocView links pluggable injection capability
* Add proper e2e + bugfix
* set prop as lower case
* Better name
* Delete prop after usage
* Camel case + avoid mutating
* Added right data-test-subj in order to fix tests
* update snapshot
* Add hide prop in order to mimic ng-if condition
* Add i18n translation support
* Fix tests
* Made text smaller + used eui components instead of custom css
* Snapshots

Signed-off-by: sitbubu <royi.sitbon@logz.io>

.i18nrc.json

@@ -22,6 +22,7 @@
     "interpreter": "src/legacy/core_plugins/interpreter",
     "osd": "src/legacy/core_plugins/opensearch-dashboards",
     "osdDocViews": "src/legacy/core_plugins/osd_doc_views",
+    "osdDocViewsLinks": "src/legacy/core_plugins/osd_doc_views_links",
     "management": [
       "src/legacy/core_plugins/management",
       "src/plugins/management"

src/plugins/discover/public/application/angular/doc_table/components/row_headers.test.js

@@ -41,6 +41,7 @@ import {
   setScopedHistory,
   setServices,
   setDocViewsRegistry,
+  setDocViewsLinksRegistry,
 } from '../../../../opensearch_dashboards_services';
 import { coreMock } from '../../../../../../../core/public/mocks';
 import { dataPluginMock } from '../../../../../../data/public/mocks';
@@ -98,6 +99,18 @@ describe('Doc Table', () => {
       },
     });
 
+    setDocViewsLinksRegistry({
+      addDocViewLink(view) {
+        registry.push(view);
+      },
+      getDocViewsLinksSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    });
+
     getInnerAngularModule(
       'app/discover',
       core,

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/doc.test.tsx

@@ -63,6 +63,17 @@ jest.mock('../../../opensearch_dashboards_services', () => {
         registry = [];
       },
     }),
+    getDocViewsLinksRegistry: () => ({
+      addDocViewLink(view: any) {
+        registry.push(view);
+      },
+      getDocViewsLinksSorted() {
+        return registry;
+      },
+      resetRegistry: () => {
+        registry = [];
+      },
+    }),
   };
 });
 

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

@@ -0,0 +1,68 @@
+/*
+ * 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: 'generateCb link',
+    generateCb: () => ({
+      url: 'aaa',
+    }),
+  });
+  registry.addDocViewLink({ order: 20, label: 'href link', href: 'bbb' });
+
+  const renderProps = { hit: {} } as DocViewLinkRenderProps;
+
+  const wrapper = shallow(<DocViewerLinks {...renderProps} />);
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('Dont Render <DocViewerLink/> if generateCb.hide', () => {
+  const registry = getDocViewsLinksRegistry();
+  registry.addDocViewLink({
+    order: 10,
+    label: 'generateCb link',
+    generateCb: () => ({
+      url: 'aaa',
+      hide: true,
+    }),
+  });
+
+  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,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiListGroupItem, EuiListGroupItemProps } 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()
+    .filter((item) => !(item.generateCb && item.generateCb(renderProps)?.hide))
+    .map((item) => {
+      const { generateCb, href, ...props } = item;
+      const listItem: EuiListGroupItemProps = {
+        'data-test-subj': 'docTableRowAction',
+        ...props,
+        href: generateCb ? generateCb(renderProps).url : href,
+      };
+
+      return listItem;
+    });
+
+  return (
+    <EuiFlexGroup gutterSize="xs">
+      {listItems.map((item, index) => (
+        <EuiFlexItem key={index}>
+          <EuiListGroupItem {...item} />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}

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,25 @@
+/*
+ * 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;
+  generateCb?(
+    renderProps: any
+  ): {
+    url: string;
+    hide?: boolean;
+  };
+}
+
+export interface DocViewLinkRenderProps {
+  columns?: string[];
+  hit: OpenSearchSearchHit;
+  indexPattern: IndexPattern;
+}

src/plugins/discover/public/get_inner_angular.ts

@@ -51,6 +51,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,
@@ -202,5 +203,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/mocks.ts

@@ -38,6 +38,9 @@ const createSetupContract = (): Setup => {
     docViews: {
       addDocView: jest.fn(),
     },
+    docViewsLinks: {
+      addDocViewLink: jest.fn(),
+    },
   };
   return setupContract;
 };

src/plugins/discover/public/opensearch_dashboards_services.ts

@@ -36,6 +36,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;
@@ -81,6 +82,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.
  */