From 47a497cf3671eee56adeb4787cb4c9271671f5e8 Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 21 Oct 2024 16:59:07 +0300 Subject: [PATCH] fix: [Stateful: Indices: Overview page] Missing focus on New button after closing or cancelling Generate API key dialog (#196905) Closes: #196174 ## Description Focus should be visible on any accessible element and in order when navigating through the elements. Especially for the users using assistive technology, only keyboard. For the dialogs, after closing them, focus should be visible on the element which opened it. ## What was changed: 1. Cleaned up `generate_api_key_panel.tsx`. No need to open `GenerateApiKeyModal` from this level. Same logic duplicated in `APIGettingStarted` inner component ## Screen https://github.com/user-attachments/assets/46a23fdd-ba54-4798-9cb7-a78e28d447b8 --- .../search_index/generate_api_key_panel.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx index f1470f37bc8f0..52da11d51c074 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/generate_api_key_panel.tsx @@ -7,27 +7,20 @@ import React from 'react'; -import { useActions, useValues } from 'kea'; +import { useValues } from 'kea'; import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { GenerateApiKeyModal } from './components/generate_api_key_modal/modal'; - import { APIGettingStarted } from './components/getting_started/getting_started'; import { IndexViewLogic } from './index_view_logic'; -import { OverviewLogic } from './overview.logic'; export const GenerateApiKeyPanel: React.FC = () => { - const { isGenerateModalOpen } = useValues(OverviewLogic); - const { indexName, isHiddenIndex } = useValues(IndexViewLogic); - const { closeGenerateModal } = useActions(OverviewLogic); + const { isHiddenIndex } = useValues(IndexViewLogic); + return ( <> - {isGenerateModalOpen && ( - - )}