Update default actions in collapsed popover

elastic · Nov 17, 2023 · 26b2a79 · 26b2a79
1 parent 6cf4211
commit 26b2a79
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
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
@@ -189,14 +189,15 @@ exports[`CollapsedItemActions default actions 1`] = `
               </button>
               <a
                 class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
-                href="https://www.elastic.co/"
+                data-test-subj="xyz-link"
+                href="#/xyz"
                 rel="noopener noreferrer"
                 target="_blank"
               >
                 <span
                   class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
                 >
-                  default2
+                  name xyz
                 </span>
               </a>
             </div>

diff --git 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
@@ -75,20 +75,19 @@ export const CollapsedItemActions = <T extends {}>({
           </EuiContextMenuItem>
         );
       } 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(
           <EuiContextMenuItem