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`] = ` - default2 + name xyz 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(