[Data Explorer][Discover 2.0] Append popout icon to oui link for doc …

…viewer links (#4855) * [Data Explorer][Discover 2.0] Append popout icon to oui link for doc viewer links Issue Resolve #4825 Signed-off-by: ananzh <[email protected]> * fix all failed ut Signed-off-by: ananzh <[email protected]> --------- Signed-off-by: ananzh <[email protected]>
opensearch-project · Aug 31, 2023 · e9ad10f · e9ad10f
1 parent 89013da
commit e9ad10f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 52 deletions.
diff --git a/...plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx b/...plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx
@@ -57,9 +57,12 @@ describe('Testing buildDataGridColumns function ', () => {
       Array [
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -69,9 +72,12 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -98,9 +104,9 @@ describe('Testing buildDataGridColumns function ', () => {
       Array [
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": "Time (order_date)",
@@ -111,9 +117,12 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -123,9 +132,12 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -135,9 +147,9 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": "Source",
@@ -162,9 +174,12 @@ describe('Testing buildDataGridColumns function ', () => {
       Array [
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -174,9 +189,12 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": Object {
+              "iconType": "cross",
+              "label": "Remove column",
+            },
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": undefined,
@@ -186,9 +204,9 @@ describe('Testing buildDataGridColumns function ', () => {
         },
         Object {
           "actions": Object {
-            "showHide": true,
-            "showMoveLeft": false,
-            "showMoveRight": false,
+            "showHide": false,
+            "showMoveLeft": true,
+            "showMoveRight": true,
           },
           "cellActions": undefined,
           "display": "Time (order_date)",

diff --git a/...blic/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap b/...blic/application/components/doc_viewer_links/__snapshots__/doc_viewer_links.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx b/src/plugins/discover/public/application/components/doc_viewer_links/doc_viewer_links.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiListGroupItem, EuiListGroupItemProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiListGroupItemProps, EuiLink } from '@elastic/eui';
 import { getDocViewsLinksRegistry } from '../../../opensearch_dashboards_services';
 import { DocViewLinkRenderProps } from '../../doc_views_links/doc_views_links_types';
 
@@ -24,10 +24,12 @@ export function DocViewerLinks(renderProps: DocViewLinkRenderProps) {
     });
 
   return (
-    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+    <EuiFlexGroup gutterSize="m" justifyContent="flexEnd">
       {listItems.map((item, index) => (
         <EuiFlexItem key={index} grow={false}>
-          <EuiListGroupItem {...item} />
+          <EuiLink href={item.href} target="_blank" style={{ fontWeight: 'normal' }}>
+            {item.label}
+          </EuiLink>
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>

diff --git a/src/plugins/discover/public/application/utils/state_management/common.test.ts b/src/plugins/discover/public/application/utils/state_management/common.test.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { addColumn, removeColumn, reorderColumn, setColumns } from './common';
+import { addColumn, removeColumn, reorderColumn } from './common';
 
 describe('commonUtils', () => {
   it('should handle addColumn', () => {
@@ -22,12 +22,4 @@ describe('commonUtils', () => {
       'column1',
     ]);
   });
-
-  it('should handle setColumns', () => {
-    expect(setColumns('timeField', ['timeField', 'column1', 'column2'])).toEqual([
-      'column1',
-      'column2',
-    ]);
-    expect(setColumns(undefined, ['column1', 'column2'])).toEqual(['column1', 'column2']);
-  });
 });
diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.test.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.test.tsx
@@ -58,7 +58,7 @@ describe('discoverSlice', () => {
   it('should handle setColumns', () => {
     const action = {
       type: 'discover/setColumns',
-      payload: { timeField: 'timeField', columns: ['timeField', 'column1', 'column2'] },
+      payload: { columns: ['column1', 'column2'] },
     };
     const result = discoverSlice.reducer(initialState, action);
     expect(result.columns).toEqual(['column1', 'column2']);