Skip to content

Commit

Permalink
[8.x] fix: [Search:SearchApplications:Connect page]Button behind moda…
Browse files Browse the repository at this point in the history 
…l dialog is announced (#199668) (#199869)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:SearchApplications:Connect page]Button behind modal
dialog is announced
(#199668)](#199668)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-12T19:28:20Z","message":"fix:
[Search:SearchApplications:Connect page]Button behind modal dialog is
announced (#199668)\n\nCloses: #199634\r\n\r\n## Summary\r\n\r\nThis PR
apply similar with #197212 changes
to\r\n[generate_search_application_api_key_modal.tsx](https://github.com/elastic/kibana/pull/199668/files#diff-2d651cfb54cad235005b4a9361f2dc25784a4d2842dfaa02fa301e8889d7825b)\r\ndialog.\r\n\r\n##
What was changed:\r\n\r\n1. Dialog was slightly updated to be more
accessibility (a11y) friendly:\r\n- To differentiate the two UI states,
we now use two colors for the\r\npanel: `primary` for the initial state
and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n- After creating an API key, the focus now moves to the
`Download API\r\nkey` button.\r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/41285198-9ee9-4201-a1fd-35b7192b439f","sha":"fbe926cfd395d09fd0e312805306eb9c019f465b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Search:SearchApplications:Connect page]Button behind modal dialog is
announced","number":199668,"url":"https://github.com/elastic/kibana/pull/199668","mergeCommit":{"message":"fix:
[Search:SearchApplications:Connect page]Button behind modal dialog is
announced (#199668)\n\nCloses: #199634\r\n\r\n## Summary\r\n\r\nThis PR
apply similar with #197212 changes
to\r\n[generate_search_application_api_key_modal.tsx](https://github.com/elastic/kibana/pull/199668/files#diff-2d651cfb54cad235005b4a9361f2dc25784a4d2842dfaa02fa301e8889d7825b)\r\ndialog.\r\n\r\n##
What was changed:\r\n\r\n1. Dialog was slightly updated to be more
accessibility (a11y) friendly:\r\n- To differentiate the two UI states,
we now use two colors for the\r\npanel: `primary` for the initial state
and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n- After creating an API key, the focus now moves to the
`Download API\r\nkey` button.\r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/41285198-9ee9-4201-a1fd-35b7192b439f","sha":"fbe926cfd395d09fd0e312805306eb9c019f465b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199668","number":199668,"mergeCommit":{"message":"fix:
[Search:SearchApplications:Connect page]Button behind modal dialog is
announced (#199668)\n\nCloses: #199634\r\n\r\n## Summary\r\n\r\nThis PR
apply similar with #197212 changes
to\r\n[generate_search_application_api_key_modal.tsx](https://github.com/elastic/kibana/pull/199668/files#diff-2d651cfb54cad235005b4a9361f2dc25784a4d2842dfaa02fa301e8889d7825b)\r\ndialog.\r\n\r\n##
What was changed:\r\n\r\n1. Dialog was slightly updated to be more
accessibility (a11y) friendly:\r\n- To differentiate the two UI states,
we now use two colors for the\r\npanel: `primary` for the initial state
and `success` when the API key is\r\ngenerated.\r\n- An `EuiCallOut`
with `role=\"alert\"` was added to announce status\r\nupdates for screen
reader users.\r\n- After creating an API key, the focus now moves to the
`Download API\r\nkey` button.\r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/41285198-9ee9-4201-a1fd-35b7192b439f","sha":"fbe926cfd395d09fd0e312805306eb9c019f465b"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
  • Loading branch information
@kibanamachine @alexwizp
kibanamachine and alexwizp authored Nov 12, 2024
1 parent 70cbb68 commit 00a829c
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 9 deletions.
6 changes: 4 additions & 2 deletions ...ication/connect/generate_api_key_modal/generate_search_application_api_key_modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,16 @@ 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';

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();
Expand Down Expand Up @@ -50,7 +52,7 @@ describe('GenerateSearchApplicationApiKeyModal', () => {
});

it('pre-set the key name with search application name', () => {
mount(
mountWithIntl(
<GenerateSearchApplicationApiKeyModal
searchApplicationName="puggles"
onClose={onCloseMock}
Expand Down
46 changes: 39 additions & 7 deletions ..._application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useEffect } from 'react';
import React, { useEffect, useRef } from 'react';

import { useValues, useActions } from 'kea';

Expand All @@ -24,13 +24,13 @@ import {
EuiFieldText,
EuiFormRow,
EuiText,
EuiSpacer,
EuiFormLabel,
EuiCallOut,
EuiCodeBlock,
useGeneratedHtmlId,
} 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';

Expand All @@ -48,11 +48,18 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
const { setKeyName } = useActions(GenerateApiKeyModalLogic);
const modalTitleId = useGeneratedHtmlId();
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} aria-labelledby={modalTitleId}>
<EuiModalHeader>
Expand All @@ -67,15 +74,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"
Expand Down Expand Up @@ -112,8 +128,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
Expand All @@ -128,6 +156,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',
Expand Down Expand Up @@ -167,6 +197,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
<EuiModalFooter>
{apiKey ? (
<EuiButton
data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalDoneButton"
data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-done"
fill
onClick={onClose}
Expand All @@ -180,6 +211,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
</EuiButton>
) : (
<EuiButtonEmpty
data-test-subj="enterpriseSearchGenerateSearchApplicationApiKeyModalCancelButton"
data-telemetry-id="entSearchApplications-api-generateSearchApplicationApiKeyModal-cancel"
onClick={onClose}
>
Expand Down

0 comments on commit 00a829c

Please sign in to comment.