From 810a3e243068dc5f7ef96723c88520c532d4c16b Mon Sep 17 00:00:00 2001 From: Daniil Pankratev Date: Wed, 18 Mar 2020 12:59:44 +0300 Subject: [PATCH 1/4] Add href support for default actions in --- src/components/basic_table/collapsed_item_actions.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 7586465172c..29ee1e01e38 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -122,7 +122,7 @@ export class CollapsedItemActions extends Component< ); } else { - const { onClick, name, 'data-test-subj': dataTestSubj } = action; + const { onClick, name, href, 'data-test-subj': dataTestSubj } = action; controls.push( extends Component< icon={ (action as DefaultItemIconButtonAction).icon as EuiIconType } + href={href} + target="_blank" data-test-subj={dataTestSubj} onClick={this.onClickItem.bind( null, - onClick ? onClick.bind(null, item) : undefined + onClick && !href ? onClick.bind(null, item) : undefined )}> {name} From d996c431e03580a0454c2d39c325d7e6d3584eed Mon Sep 17 00:00:00 2001 From: Daniil Pankratev Date: Wed, 18 Mar 2020 18:37:36 +0300 Subject: [PATCH 2/4] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e4322aff072..6fad6bc4b15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Default actions in `EuiBasicTable` support both props `href` and `onClick` - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048)) ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0) From 891a9142e9345b6057cc86beb705f323ef3fb295 Mon Sep 17 00:00:00 2001 From: Daniil Pankratev Date: Thu, 19 Mar 2020 17:28:42 +0300 Subject: [PATCH 3/4] Move target to props, add test case for collapsed_item_actions, update docs --- src-docs/src/views/tables/actions/actions.js | 9 ++++ .../collapsed_item_actions.test.tsx.snap | 49 +++++++++++++++++++ .../collapsed_item_actions.test.tsx | 35 ++++++++++++- .../basic_table/collapsed_item_actions.tsx | 10 +++- 4 files changed, 100 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js index c3d9340e912..8218132e6c0 100644 --- a/src-docs/src/views/tables/actions/actions.js +++ b/src-docs/src/views/tables/actions/actions.js @@ -193,6 +193,15 @@ export class Table extends Component { onClick: () => {}, 'data-test-subj': 'action-share', }, + { + name: 'Elastic.co', + description: 'Go to elastic.co', + icon: 'logoCloud', + type: 'icon', + href: 'https://elastic.co', + target: '_blank', + 'data-test-subj': 'action-outboundlink', + }, ]; } else { actions = customAction diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index 3268b0b4941..775331b52a1 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -27,3 +27,52 @@ exports[`CollapsedItemActions render 1`] = ` `; + +exports[`CollapsedItemActions render with href and _target provided 1`] = ` + + [Function] + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="id-actions" + isOpen={true} + ownFocus={false} + panelPaddingSize="none" + popoverRef={[Function]} +> + + default1 + , + +
+ , + + default2 + , + ] + } + /> + +`; diff --git a/src/components/basic_table/collapsed_item_actions.test.tsx b/src/components/basic_table/collapsed_item_actions.test.tsx index cc925df9265..dcf2807aadd 100644 --- a/src/components/basic_table/collapsed_item_actions.test.tsx +++ b/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: () =>
, + }, + { + 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(); + component.setState({ popoverOpen: true }); + + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 29ee1e01e38..9dddeee22fa 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -122,7 +122,13 @@ export class CollapsedItemActions extends Component< ); } else { - const { onClick, name, href, 'data-test-subj': dataTestSubj } = action; + const { + onClick, + name, + href, + target, + 'data-test-subj': dataTestSubj, + } = action; controls.push( extends Component< (action as DefaultItemIconButtonAction).icon as EuiIconType } href={href} - target="_blank" + target={target} data-test-subj={dataTestSubj} onClick={this.onClickItem.bind( null, From 12d1f52b733e52a70f8f807fd6d139d7c7738968 Mon Sep 17 00:00:00 2001 From: Daniil Pankratev Date: Sat, 21 Mar 2020 19:26:49 +0300 Subject: [PATCH 4/4] Update changelog, fix actions and logo in docs --- CHANGELOG.md | 2 +- src-docs/src/views/tables/actions/actions.js | 2 +- src/components/basic_table/collapsed_item_actions.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fad6bc4b15..68db1be2bbc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Default actions in `EuiBasicTable` support both props `href` and `onClick` +- Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048)) ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0) diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js index 8218132e6c0..62088afab90 100644 --- a/src-docs/src/views/tables/actions/actions.js +++ b/src-docs/src/views/tables/actions/actions.js @@ -196,7 +196,7 @@ export class Table extends Component { { name: 'Elastic.co', description: 'Go to elastic.co', - icon: 'logoCloud', + icon: 'logoElastic', type: 'icon', href: 'https://elastic.co', target: '_blank', diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 9dddeee22fa..b354cb1435d 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -141,7 +141,7 @@ export class CollapsedItemActions extends Component< data-test-subj={dataTestSubj} onClick={this.onClickItem.bind( null, - onClick && !href ? onClick.bind(null, item) : undefined + onClick ? onClick.bind(null, item) : undefined )}> {name}