Add support for href and target props in EuiBasicTable actions. (#1347)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346))
 - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346))
+- Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347))
 
 ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0)
 

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

@@ -203,12 +203,13 @@ export class Table extends Component {
           }
         }]
         : [{
-          name: 'Delete',
-          description: 'Delete this user',
-          icon: 'trash',
-          color: 'danger',
+          name: 'Elastic.co',
+          description: 'Go to elastic.co',
+          icon: 'editorLink',
+          color: 'primary',
           type: 'icon',
-          onClick: this.deleteUser
+          href: 'https://elastic.co',
+          target: '_blank',
         }];
     }
 

src/components/basic_table/basic_table.js

@@ -63,7 +63,9 @@ const DefaultItemActionType = PropTypes.shape({
   type: PropTypes.oneOf(['icon', 'button']), // default is 'button'
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired, // (item) => void,
+  onClick: PropTypes.func, // (item) => void,
+  href: PropTypes.string,
+  target: PropTypes.string,
   available: PropTypes.func, // (item) => boolean;
   enabled: PropTypes.func, // (item) => boolean;
   isPrimary: PropTypes.bool,

src/components/basic_table/default_item_action.js

@@ -15,11 +15,13 @@ export class DefaultItemAction extends Component {
 
   render() {
     const { action, enabled, item, className } = this.props;
-    if (!action.onClick) {
-      throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback. If you want
-      to provide a custom action control, make sure to define the 'render' callback`);
+
+    if (!action.onClick && !action.href) {
+      throw new Error(`Cannot render item action [${action.name}]. Missing required 'onClick' callback
+        or 'href' string. If you want to provide a custom action control, make sure to define the 'render' callback`);
     }
-    const onClick = () => action.onClick(item);
+
+    const onClick = action.onClick ? () => action.onClick(item) : undefined;
     const color = this.resolveActionColor();
     const icon = this.resolveActionIcon();
 
@@ -37,6 +39,8 @@ export class DefaultItemAction extends Component {
           color={color}
           iconType={icon}
           onClick={onClick}
+          href={action.href}
+          target={action.target}
         />
       );
     } else {
@@ -48,6 +52,8 @@ export class DefaultItemAction extends Component {
           color={color}
           iconType={icon}
           onClick={onClick}
+          href={action.href}
+          target={action.target}
           flush="right"
         >
           {action.name}