[8.x] fix: [Search:Search Applications page]Popover for Create button…

… is inaccessible via keyboard (#201193) (#201466) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Search:Search Applications page]Popover for Create button is inaccessible via keyboard (#201193)](#201193)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
elastic · Nov 22, 2024 · bb09b67 · bb09b67
1 parent 53acc10
commit bb09b67
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 126 deletions.
diff --git a/...ns/applications/components/search_applications/search_applications_create_button.test.tsx b/...ns/applications/components/search_applications/search_applications_create_button.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { type ReactNode } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { waitForEuiToolTipVisible } from '@elastic/eui/lib/test/rtl';
+
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+import { CreateSearchApplicationButton } from './search_applications_list';
+
+function Container({ children }: { children?: ReactNode }) {
+  return <IntlProvider locale="en">{children}</IntlProvider>;
+}
+
+describe('CreateSearchApplicationButton', () => {
+  test('disabled={false}', async () => {
+    render(
+      <Container>
+        <CreateSearchApplicationButton disabled={false} />
+      </Container>
+    );
+
+    await userEvent.hover(
+      await screen.findByTestId('enterprise-search-search-applications-creation-button')
+    );
+
+    await waitForEuiToolTipVisible();
+
+    expect(
+      await screen.findByTestId('create-search-application-button-popover-content')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/...pplications/applications/components/search_applications/search_applications_list.test.tsx b/...pplications/applications/components/search_applications/search_applications_list.test.tsx
@@ -9,7 +9,7 @@ import { setMockActions, setMockValues } from '../../../__mocks__/kea_logic';
 
 import React from 'react';
 
-import { mountWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers';
+import { shallowWithIntl } from '@kbn/test-jest-helpers';
 
 import { Status } from '../../../../../common/types/api';
 
@@ -116,80 +116,3 @@ describe('SearchApplicationsList', () => {
     expect(wrapper.find(LicensingCallout)).toHaveLength(0);
   });
 });
-
-describe('CreateSearchApplicationButton', () => {
-  describe('disabled={true}', () => {
-    it('renders a disabled button that shows a popover when hovered', () => {
-      const wrapper = mountWithIntl(<CreateSearchApplicationButton disabled />);
-
-      const button = wrapper.find(
-        'button[data-test-subj="enterprise-search-search-applications-creation-button"]'
-      );
-
-      expect(button).toHaveLength(1);
-      expect(button.prop('disabled')).toBeTruthy();
-
-      let popover = wrapper.find(
-        'div[data-test-subj="create-search-application-button-popover-content"]'
-      );
-
-      expect(popover).toHaveLength(0);
-
-      const hoverTarget = wrapper.find(
-        'div[data-test-subj="create-search-application-button-hover-target"]'
-      );
-
-      expect(hoverTarget).toHaveLength(1);
-
-      hoverTarget.simulate('mouseEnter');
-
-      wrapper.update();
-
-      popover = wrapper.find(
-        'div[data-test-subj="create-search-application-button-popover-content"]'
-      );
-
-      expect(popover).toHaveLength(1);
-      expect(popover.text()).toMatch(
-        'This functionality may be changed or removed completely in a future release.'
-      );
-    });
-  });
-  describe('disabled={false}', () => {
-    it('renders a button and shows a popover when hovered', () => {
-      const wrapper = mountWithIntl(<CreateSearchApplicationButton disabled={false} />);
-
-      const button = wrapper.find(
-        'button[data-test-subj="enterprise-search-search-applications-creation-button"]'
-      );
-
-      expect(button).toHaveLength(1);
-      expect(button.prop('disabled')).toBeFalsy();
-
-      let popover = wrapper.find(
-        'div[data-test-subj="create-search-application-button-popover-content"]'
-      );
-
-      expect(popover).toHaveLength(0);
-
-      const hoverTarget = wrapper.find(
-        'div[data-test-subj="create-search-application-button-hover-target"]'
-      );
-
-      expect(hoverTarget).toHaveLength(1);
-
-      hoverTarget.simulate('mouseEnter');
-
-      wrapper.update();
-
-      popover = wrapper.find(
-        'div[data-test-subj="create-search-application-button-popover-content"]'
-      );
-
-      expect(popover).toHaveLength(1);
-      expect(popover.text()).toMatch(
-        'This functionality may be changed or removed completely in a future release.'
-      );
-    });
-  });
-});
diff --git a/...lic/applications/applications/components/search_applications/search_applications_list.tsx b/...lic/applications/applications/components/search_applications/search_applications_list.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 import useThrottle from 'react-use/lib/useThrottle';
@@ -17,10 +17,9 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiLink,
-  EuiPopover,
-  EuiPopoverTitle,
   EuiSpacer,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -53,38 +52,10 @@ interface CreateSearchApplicationButtonProps {
 export const CreateSearchApplicationButton: React.FC<CreateSearchApplicationButtonProps> = ({
   disabled,
 }) => {
-  const [showPopover, setShowPopover] = useState<boolean>(false);
-
   return (
-    <EuiPopover
-      isOpen={showPopover}
-      closePopover={() => setShowPopover(false)}
-      button={
-        <div
-          data-test-subj="create-search-application-button-hover-target"
-          onMouseEnter={() => setShowPopover(true)}
-          onMouseLeave={() => setShowPopover(false)}
-          tabIndex={0}
-        >
-          <EuiButton
-            fill
-            iconType="plusInCircle"
-            data-test-subj="enterprise-search-search-applications-creation-button"
-            data-telemetry-id="entSearchApplications-list-createSearchApplication"
-            isDisabled={disabled}
-            onClick={() => KibanaLogic.values.navigateToUrl(SEARCH_APPLICATION_CREATION_PATH)}
-          >
-            {i18n.translate(
-              'xpack.enterpriseSearch.searchApplications.list.createSearchApplicationButton.label',
-              {
-                defaultMessage: 'Create',
-              }
-            )}
-          </EuiButton>
-        </div>
-      }
-    >
-      <EuiPopoverTitle>
+    <EuiToolTip
+      position="top"
+      title={
         <EuiFlexGroup justifyContent="center" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiIcon type="beaker" />
@@ -96,23 +67,35 @@ export const CreateSearchApplicationButton: React.FC<CreateSearchApplicationButt
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPopoverTitle>
-      <div
-        style={{ width: '300px' }}
-        data-test-subj="create-search-application-button-popover-content"
+      }
+      content={
+        <EuiText size="s" data-test-subj="create-search-application-button-popover-content">
+          <FormattedMessage
+            id="xpack.enterpriseSearch.searchApplications.list.createSearchApplicationTechnicalPreviewPopover.body"
+            defaultMessage="This functionality may be changed or removed completely in a future release."
+          />
+        </EuiText>
+      }
+    >
+      <EuiButton
+        fill
+        iconType="plusInCircle"
+        data-test-subj="enterprise-search-search-applications-creation-button"
+        data-telemetry-id="entSearchApplications-list-createSearchApplication"
+        isDisabled={disabled}
+        onClick={() => KibanaLogic.values.navigateToUrl(SEARCH_APPLICATION_CREATION_PATH)}
       >
-        <EuiFlexGroup direction="column" gutterSize="m">
-          <EuiText size="s">
-            <FormattedMessage
-              id="xpack.enterpriseSearch.searchApplications.list.createSearchApplicationTechnicalPreviewPopover.body"
-              defaultMessage="This functionality may be changed or removed completely in a future release."
-            />
-          </EuiText>
-        </EuiFlexGroup>
-      </div>
-    </EuiPopover>
+        {i18n.translate(
+          'xpack.enterpriseSearch.searchApplications.list.createSearchApplicationButton.label',
+          {
+            defaultMessage: 'Create',
+          }
+        )}
+      </EuiButton>
+    </EuiToolTip>
   );
 };
+
 interface ListProps {
   createSearchApplicationFlyoutOpen?: boolean;
 }
@@ -223,6 +206,7 @@ export const SearchApplicationsList: React.FC<ListProps> = ({
           <>
             <div>
               <EuiFieldSearch
+                data-test-subj="enterpriseSearchSearchApplicationsListFieldSearch"
                 value={searchQuery}
                 placeholder={i18n.translate(
                   'xpack.enterpriseSearch.searchApplications.list.searchBar.placeholder',