From 29ba6044646312d67404e9f0c5aaf7020ae1f34f Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 12 Nov 2024 21:28:20 +0200
Subject: [PATCH] fix: [Search:SearchApplications:Connect page]Button behind
 modal dialog is announced (#199668)

Closes: #199634

## Summary

This PR apply similar with #197212 changes to
[generate_search_application_api_key_modal.tsx](https://github.com/elastic/kibana/pull/199668/files#diff-2d651cfb54cad235005b4a9361f2dc25784a4d2842dfaa02fa301e8889d7825b)
dialog.

## What was changed:

1. Dialog was slightly updated to be more accessibility (a11y) friendly:
- To differentiate the two UI states, we now use two colors for the
panel: `primary` for the initial state and `success` when the API key is
generated.
- An `EuiCallOut` with `role="alert"` was added to announce status
updates for screen reader users.
- After creating an API key, the focus now moves to the `Download API
key` button.

## Screen:

https://github.com/user-attachments/assets/41285198-9ee9-4201-a1fd-35b7192b439f
(cherry picked from commit fbe926cfd395d09fd0e312805306eb9c019f465b)
---
 ..._search_application_api_key_modal.test.tsx |  6 ++-
 ...erate_search_application_api_key_modal.tsx | 46 ++++++++++++++++---
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx
index 1ebd426b8b9c1..1f23866261b5f 100644
--- a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx
@@ -9,7 +9,7 @@ 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';
 
@@ -17,6 +17,8 @@ const mockActions = { makeRequest: jest.fn(), setKeyName: jest.fn() };
 
 const mockValues = { apiKey: '', isLoading: false, isSuccess: false, keyName: '' };
 
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+
 import { GenerateSearchApplicationApiKeyModal } from './generate_search_application_api_key_modal';
 
 const onCloseMock = jest.fn();
@@ -50,7 +52,7 @@ describe('GenerateSearchApplicationApiKeyModal', () => {
     });
 
     it('pre-set the key name with search application name', () => {
-      mount(
+      mountWithIntl(
         <GenerateSearchApplicationApiKeyModal
           searchApplicationName="puggles"
           onClose={onCloseMock}
diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
index 806b37d809186..16cb7a45bca35 100644
--- a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { useValues, useActions } from 'kea';
 
@@ -24,12 +24,12 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiText,
-  EuiSpacer,
-  EuiFormLabel,
+  EuiCallOut,
   EuiCodeBlock,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { GenerateSearchApplicationApiKeyLogic } from '../../../../api/search_applications/generate_search_application_api_key_logic';
 
@@ -46,11 +46,18 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
   const { keyName, apiKey, isLoading, isSuccess } = useValues(GenerateApiKeyModalLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
   const { makeRequest } = useActions(GenerateSearchApplicationApiKeyLogic);
+  const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     setKeyName(`${searchApplicationName} read-only API key`);
   }, [searchApplicationName]);
 
+  useEffect(() => {
+    if (isSuccess) {
+      copyApiKeyRef.current?.focus();
+    }
+  }, [isSuccess]);
+
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
@@ -65,15 +72,24 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
       </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.generateSearchApplicationApiKeyModal.euiFormRow.nameYourAPIKeyLabel"
+                              defaultMessage="Name your API key"
+                            />
+                          }
+                          fullWidth
+                        >
                           <EuiFieldText
+                            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalFieldText"
                             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-editName"
                             fullWidth
                             placeholder="Type a name for your API key"
@@ -110,8 +126,20 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
                     </>
                   ) : (
                     <EuiFlexItem>
-                      <EuiFormLabel>{keyName}</EuiFormLabel>
-                      <EuiSpacer size="xs" />
+                      <EuiCallOut
+                        title={
+                          <FormattedMessage
+                            id="xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.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
@@ -126,6 +154,8 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
+                            buttonRef={copyApiKeyRef}
+                            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalButton"
                             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-csvDownloadButton"
                             aria-label={i18n.translate(
                               'xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.csvDownloadButton',
@@ -165,6 +195,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
       <EuiModalFooter>
         {apiKey ? (
           <EuiButton
+            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalDoneButton"
             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-done"
             fill
             onClick={onClose}
@@ -178,6 +209,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
           </EuiButton>
         ) : (
           <EuiButtonEmpty
+            data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalCancelButton"
             data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-cancel"
             onClick={onClose}
           >