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 7d351bcfc26..06814083b1e 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
@@ -189,14 +189,15 @@ exports[`CollapsedItemActions default actions 1`] = `
diff --git a/src/components/basic_table/collapsed_item_actions.test.tsx b/src/components/basic_table/collapsed_item_actions.test.tsx
index f369e459f9f..4055595c38a 100644
--- a/src/components/basic_table/collapsed_item_actions.test.tsx
+++ b/src/components/basic_table/collapsed_item_actions.test.tsx
@@ -16,12 +16,14 @@ import {
import { CollapsedItemActions } from './collapsed_item_actions';
+type Item = { id: string };
+
describe('CollapsedItemActions', () => {
it('renders', () => {
const props = {
actions: [
{
- name: (item: { id: string }) => `default${item.id}`,
+ name: (item: Item) => `default${item.id}`,
description: 'default 1',
onClick: () => {},
},
@@ -51,10 +53,11 @@ describe('CollapsedItemActions', () => {
'data-test-subj': 'defaultAction',
},
{
- name: 'default2',
- description: 'default 2',
- href: 'https://www.elastic.co/',
+ name: ({ id }: Item) => `name ${id}`,
+ description: ({ id }: Item) => `description ${id}`,
+ href: ({ id }: Item) => `#/${id}`,
target: '_blank',
+ 'data-test-subj': ({ id }: Item) => `${id}-link`,
},
],
itemId: 'id',
@@ -70,6 +73,9 @@ describe('CollapsedItemActions', () => {
expect(baseElement).toMatchSnapshot();
+ expect(getByTestSubject('link-xyz')).toHaveAttribute('href', '#/xyz');
+ expect(getByTestSubject('link-xyz')).toHaveTextContent('name xyz');
+
fireEvent.click(getByTestSubject('defaultAction'));
await waitForEuiPopoverClose();
});
diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx
index ec112f58023..639e0c3d497 100644
--- a/src/components/basic_table/collapsed_item_actions.tsx
+++ b/src/components/basic_table/collapsed_item_actions.tsx
@@ -75,20 +75,19 @@ export const CollapsedItemActions = ({
);
} else {
- const {
- onClick,
- name,
- href,
- target,
- 'data-test-subj': dataTestSubj,
- } = action;
-
const buttonIcon = action.icon;
let icon;
if (buttonIcon) {
icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
}
- const buttonContent = typeof name === 'function' ? name(item) : name;
+
+ const buttonContent = callWithItemIfFunction(item)(action.name);
+ const href = callWithItemIfFunction(item)(action.href);
+ const dataTestSubj = callWithItemIfFunction(item)(
+ action['data-test-subj']
+ );
+
+ const { onClick, target } = action;
controls.push(