[8.x] fix: [Search:BehavioralAnalytics:Integration page]When generati…

…ng API key, button behind dialog modal is announced (#200560) (#201242) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Search:BehavioralAnalytics:Integration page]When generating API key, button behind dialog modal is announced (#200560)](#200560)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alexey Antonov <[email protected]>
elastic · Nov 21, 2024 · 3986c41 · 3986c41
1 parent 0c60c52
commit 3986c41
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/...ew/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx b/...ew/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.test.tsx
@@ -9,9 +9,10 @@ import { setMockValues, setMockActions } from '../../../../../__mocks__/kea_logi
 
 import React from 'react';
 
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import { EuiModal, EuiFieldText, EuiCodeBlock } from '@elastic/eui';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
 
 const mockActions = { makeRequest: jest.fn(), setKeyName: jest.fn() };
 
@@ -47,7 +48,9 @@ describe('GenerateAnalyticsApiKeyModal', () => {
     });
 
     it('pre-set the key name with collection name', () => {
-      mount(<GenerateAnalyticsApiKeyModal collectionName="puggles" onClose={onCloseMock} />);
+      mountWithIntl(
+        <GenerateAnalyticsApiKeyModal collectionName="puggles" onClose={onCloseMock} />
+      );
       expect(mockActions.setKeyName).toHaveBeenCalledWith('puggles API key');
     });
 

diff --git a/...on_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx b/...on_view/analytics_collection_integrate/api_key_modal/generate_analytics_api_key_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 
 import { useValues, useActions } from 'kea';
 
@@ -24,12 +24,13 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiText,
-  EuiSpacer,
-  EuiFormLabel,
   EuiCodeBlock,
+  EuiCallOut,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { generateAnalyticsApiKeyLogic } from '../../../../api/generate_analytics_api_key/generate_analytics_api_key_logic';
 
@@ -47,15 +48,23 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
   const { keyName, apiKey, isLoading, isSuccess } = useValues(GenerateApiKeyModalLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(generateAnalyticsApiKeyLogic);
+  const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
+  const modalTitleId = useGeneratedHtmlId();
+
+  useEffect(() => {
+    if (isSuccess) {
+      copyApiKeyRef.current?.focus();
+    }
+  }, [isSuccess]);
 
   useEffect(() => {
     setKeyName(`${collectionName} API key`);
   }, [collectionName]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate(
             'xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.title',
             {
@@ -66,15 +75,24 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
       </EuiModalHeader>
       <EuiModalBody>
         <>
-          <EuiPanel hasShadow={false} color="primary">
+          <EuiPanel hasShadow={false} color={!isSuccess ? 'primary' : 'success'}>
             <EuiFlexGroup direction="column">
               <EuiFlexItem>
                 <EuiFlexGroup direction="row" alignItems="flexEnd">
                   {!isSuccess ? (
                     <>
                       <EuiFlexItem>
-                        <EuiFormRow label="Name your API key" fullWidth>
+                        <EuiFormRow
+                          label={
+                            <FormattedMessage
+                              id="xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.nameYourAPIKeyLabel"
+                              defaultMessage="Name your API key"
+                            />
+                          }
+                          fullWidth
+                        >
                           <EuiFieldText
+                            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalFieldText"
                             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-editName"
                             fullWidth
                             placeholder="Type a name for your API key"
@@ -111,8 +129,20 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
                     </>
                   ) : (
                     <EuiFlexItem>
-                      <EuiFormLabel>{keyName}</EuiFormLabel>
-                      <EuiSpacer size="xs" />
+                      <EuiCallOut
+                        title={
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.callOutMessage"
+                            defaultMessage="Done! The {name} API key was generated."
+                            values={{
+                              name: <strong>{keyName}</strong>,
+                            }}
+                          />
+                        }
+                        color="success"
+                        iconType="check"
+                        role="alert"
+                      />
                       <EuiFlexGroup alignItems="center">
                         <EuiFlexItem>
                           <EuiCodeBlock
@@ -127,6 +157,8 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
+                            buttonRef={copyApiKeyRef}
+                            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalButton"
                             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-csvDownloadButton"
                             aria-label={i18n.translate(
                               'xpack.enterpriseSearch.content.analytics.api.generateAnalyticsApiKeyModal.csvDownloadButton',
@@ -166,6 +198,7 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
       <EuiModalFooter>
         {apiKey ? (
           <EuiButton
+            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalDoneButton"
             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-done"
             fill
             onClick={onClose}
@@ -179,6 +212,7 @@ export const GenerateAnalyticsApiKeyModal: React.FC<GenerateAnalyticsApiKeyModal
           </EuiButton>
         ) : (
           <EuiButtonEmpty
+            data-test-subj="enterpriseSearchGenerateAnalyticsApiKeyModalCancelButton"
             data-telemetry-id="entSearchContent-analyticss-api-generateAnalyticsApiKeyModal-cancel"
             onClick={onClose}
           >

diff --git a/...rprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx b/...rprise_search_content/components/search_index/components/generate_api_key_modal/modal.tsx
@@ -28,6 +28,7 @@ import {
   EuiLink,
   EuiCodeBlock,
   EuiCallOut,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -51,6 +52,7 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(GenerateApiKeyLogic);
   const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
+  const modalTitleId = useGeneratedHtmlId();
 
   useEffect(() => {
     if (isSuccess) {
@@ -59,9 +61,9 @@ export const GenerateApiKeyModal: React.FC<GenerateApiKeyModalProps> = ({ indexN
   }, [isSuccess]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate('xpack.enterpriseSearch.content.overview.generateApiKeyModal.title', {
             defaultMessage: 'Generate API Key',
           })}