Add href support for default actions in Basic Table

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions
+
 **Deprecation**
 
 - Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))

src-docs/src/views/tables/actions/actions.js

@@ -194,6 +194,15 @@ export class Table extends Component {
               onClick: () => {},
               'data-test-subj': 'action-share',
             },
+            {
+              name: 'Elastic.co',
+              description: 'Go to elastic.co',
+              icon: 'logoElastic',
+              type: 'icon',
+              href: 'https://elastic.co',
+              target: '_blank',
+              'data-test-subj': 'action-outboundlink',
+            },
           ];
     } else {
       actions = customAction

src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap

@@ -27,3 +27,52 @@ exports[`CollapsedItemActions render 1`] = `
   </div>
 </div>
 `;
+
+exports[`CollapsedItemActions render with href and _target provided 1`] = `
+<EuiPopover
+  anchorPosition="leftCenter"
+  button={
+    <EuiI18n
+      default="All actions"
+      token="euiCollapsedItemActions.allActions"
+    >
+      [Function]
+    </EuiI18n>
+  }
+  closePopover={[Function]}
+  display="inlineBlock"
+  hasArrow={true}
+  id="id-actions"
+  isOpen={true}
+  ownFocus={false}
+  panelPaddingSize="none"
+  popoverRef={[Function]}
+>
+  <EuiContextMenuPanel
+    hasFocus={true}
+    items={
+      Array [
+        <EuiContextMenuItem
+          disabled={false}
+          onClick={[Function]}
+        >
+          default1
+        </EuiContextMenuItem>,
+        <EuiContextMenuItem
+          onClick={[Function]}
+        >
+          <div />
+        </EuiContextMenuItem>,
+        <EuiContextMenuItem
+          disabled={false}
+          href="https://www.elastic.co/"
+          onClick={[Function]}
+          target="_blank"
+        >
+          default2
+        </EuiContextMenuItem>,
+      ]
+    }
+  />
+</EuiPopover>
+`;

src/components/basic_table/collapsed_item_actions.test.tsx

@@ -1,5 +1,5 @@
 import React, { FocusEvent } from 'react';
-import { render } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import { CollapsedItemActions } from './collapsed_item_actions';
 import { Action } from './action_types';
 
@@ -29,4 +29,37 @@ describe('CollapsedItemActions', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('render with href and _target provided', () => {
+    const props = {
+      actions: [
+        {
+          name: 'default1',
+          description: 'default 1',
+          onClick: () => {},
+        },
+        {
+          name: 'custom1',
+          description: 'custom 1',
+          render: () => <div />,
+        },
+        {
+          name: 'default2',
+          description: 'default 2',
+          href: 'https://www.elastic.co/',
+          target: '_blank',
+        },
+      ],
+      itemId: 'id',
+      item: { id: 'xyz' },
+      actionEnabled: (_: Action<{ id: string }>) => true,
+      onFocus: (_: FocusEvent) => {},
+      onBlur: () => {},
+    };
+
+    const component = shallow(<CollapsedItemActions {...props} />);
+    component.setState({ popoverOpen: true });
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/basic_table/collapsed_item_actions.tsx

@@ -118,7 +118,13 @@ export class CollapsedItemActions<T> extends Component<
             </EuiContextMenuItem>
           );
         } else {
-          const { onClick, name, 'data-test-subj': dataTestSubj } = action;
+          const {
+            onClick,
+            name,
+            href,
+            target,
+            'data-test-subj': dataTestSubj,
+          } = action;
 
           const buttonIcon = action.icon;
           let icon;
@@ -130,6 +136,8 @@ export class CollapsedItemActions<T> extends Component<
             <EuiContextMenuItem
               key={key}
               disabled={!enabled}
+              href={href}
+              target={target}
               icon={icon}
               data-test-subj={dataTestSubj}
               onClick={this.onClickItem.bind(