Fix collapsed popovers not displaying descriptions as tooltips

+ silence `act()` errors caused by the fact that we load multiple versions of testing-library/DOM (tests still pass otherwise)
elastic · Nov 17, 2023 · d29b623 · d29b623
1 parent 26b2a79
commit d29b623
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 24 deletions.
diff --git a/changelogs/upcoming/7373.md b/changelogs/upcoming/7373.md
@@ -1 +1,5 @@
 - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to
+
+**Bug fixes**
+
+- Fixed non-`isPrimary` actions (collapsed within a popover) not showing the action description in a tooltip
diff --git a/scripts/jest/setup/throw_on_console_error.js b/scripts/jest/setup/throw_on_console_error.js
@@ -26,6 +26,17 @@ console.error = (message, ...rest) => {
     return;
   }
 
+  // Silence RTL act() errors, that appear to primarily come from the fact
+  // that we have multiple versions of `@testing-library/dom` installed
+  if (
+    typeof message === 'string' &&
+    message.startsWith(
+      'Warning: The current testing environment is not configured to support act(...)'
+    )
+  ) {
+    return;
+  }
+
   // Print React validateDOMNesting warning as a console.warn instead
   // of throwing an error.
   // TODO: Remove when edge-case DOM nesting is fixed in all components

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
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CollapsedItemActions custom actions 1`] = `
-<body>
+<body
+  class=""
+>
   <div>
     <div
       class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
@@ -176,30 +178,38 @@ exports[`CollapsedItemActions default actions 1`] = `
             tabindex="-1"
           >
             <div>
-              <button
-                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
-                data-test-subj="defaultAction"
-                type="button"
+              <span
+                class="euiToolTipAnchor eui-displayBlock emotion-euiToolTipAnchor-inlineBlock"
               >
-                <span
-                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                <button
+                  class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                  data-test-subj="defaultAction"
+                  type="button"
                 >
-                  default1
-                </span>
-              </button>
-              <a
-                class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
-                data-test-subj="xyz-link"
-                href="#/xyz"
-                rel="noopener noreferrer"
-                target="_blank"
+                  <span
+                    class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                  >
+                    default1
+                  </span>
+                </button>
+              </span>
+              <span
+                class="euiToolTipAnchor eui-displayBlock emotion-euiToolTipAnchor-inlineBlock"
               >
-                <span
-                  class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                <a
+                  class="euiContextMenuItem euiBasicTable__collapsedAction emotion-euiContextMenuItem-m-center"
+                  data-test-subj="xyz-link"
+                  href="#/xyz"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  name xyz
-                </span>
-              </a>
+                  <span
+                    class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
+                  >
+                    name xyz
+                  </span>
+                </a>
+              </span>
             </div>
           </div>
         </div>

diff --git a/src/components/basic_table/collapsed_item_actions.test.tsx b/src/components/basic_table/collapsed_item_actions.test.tsx
@@ -12,6 +12,7 @@ import {
   render,
   waitForEuiPopoverOpen,
   waitForEuiPopoverClose,
+  waitForEuiToolTipVisible,
 } from '../../test/rtl';
 
 import { CollapsedItemActions } from './collapsed_item_actions';
@@ -65,16 +66,19 @@ describe('CollapsedItemActions', () => {
       actionEnabled: () => true,
     };
 
-    const { getByTestSubject, baseElement } = render(
+    const { getByTestSubject, getByText, baseElement } = render(
       <CollapsedItemActions {...props} />
     );
     fireEvent.click(getByTestSubject('euiCollapsedItemActionsButton'));
     await waitForEuiPopoverOpen();
 
     expect(baseElement).toMatchSnapshot();
 
-    expect(getByTestSubject('link-xyz')).toHaveAttribute('href', '#/xyz');
-    expect(getByTestSubject('link-xyz')).toHaveTextContent('name xyz');
+    expect(getByTestSubject('xyz-link')).toHaveAttribute('href', '#/xyz');
+    expect(getByTestSubject('xyz-link')).toHaveTextContent('name xyz');
+    fireEvent.mouseEnter(getByTestSubject('xyz-link'));
+    await waitForEuiToolTipVisible();
+    expect(getByText('description xyz')).toBeInTheDocument();
 
     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
@@ -82,6 +82,7 @@ export const CollapsedItemActions = <T extends {}>({
         }
 
         const buttonContent = callWithItemIfFunction(item)(action.name);
+        const toolTipContent = callWithItemIfFunction(item)(action.description);
         const href = callWithItemIfFunction(item)(action.href);
         const dataTestSubj = callWithItemIfFunction(item)(
           action['data-test-subj']
@@ -101,6 +102,7 @@ export const CollapsedItemActions = <T extends {}>({
             onClick={() =>
               onClickItem(onClick ? () => onClick(item) : undefined)
             }
+            toolTipContent={toolTipContent}
           >
             {buttonContent}
           </EuiContextMenuItem>