From cc263538ad20b96ac59b782f7dd9efc6a00319de Mon Sep 17 00:00:00 2001 From: Nav <13634519+navarone-feekery@users.noreply.github.com> Date: Wed, 5 Oct 2022 11:26:32 +0200 Subject: [PATCH] [Enterprise Search] Fix index delete modal (#142447) * Disable index delete button during process * Change cancel to close during delete process --- .../search_indices/delete_index_modal.tsx | 23 +++++++++---- .../search_indices/indices_logic.test.ts | 32 +++++++++++++++++++ .../search_indices/indices_logic.ts | 13 +++++++- 3 files changed, 61 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/delete_index_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/delete_index_modal.tsx index 6dbb44d658b8c..c7b5ebaf66617 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/delete_index_modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/delete_index_modal.tsx @@ -22,6 +22,7 @@ export const DeleteIndexModal: React.FC = () => { deleteModalIndexName: indexName, deleteModalIngestionMethod: ingestionMethod, isDeleteModalVisible, + isDeleteLoading, } = useValues(IndicesLogic); return isDeleteModalVisible ? ( { onConfirm={() => { deleteIndex({ indexName }); }} - cancelButtonText={i18n.translate( - 'xpack.enterpriseSearch.content.searchIndices.deleteModal.cancelButton.title', - { - defaultMessage: 'Cancel', - } - )} + cancelButtonText={ + isDeleteLoading + ? i18n.translate( + 'xpack.enterpriseSearch.content.searchIndices.deleteModal.closeButton.title', + { + defaultMessage: 'Close', + } + ) + : i18n.translate( + 'xpack.enterpriseSearch.content.searchIndices.deleteModal.cancelButton.title', + { + defaultMessage: 'Cancel', + } + ) + } confirmButtonText={i18n.translate( 'xpack.enterpriseSearch.content.searchIndices.deleteModal.confirmButton.title', { @@ -49,6 +59,7 @@ export const DeleteIndexModal: React.FC = () => { )} defaultFocusedButton="confirm" buttonColor="danger" + isLoading={isDeleteLoading} >

{i18n.translate( diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts index a636199dd1e47..ff761b17e7388 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts @@ -31,8 +31,10 @@ const DEFAULT_VALUES = { deleteModalIndex: null, deleteModalIndexName: '', deleteModalIngestionMethod: IngestionMethod.API, + deleteStatus: Status.IDLE, hasNoIndices: false, indices: [], + isDeleteLoading: false, isDeleteModalVisible: false, isFirstRequest: true, isLoading: true, @@ -255,6 +257,36 @@ describe('IndicesLogic', () => { }); }); }); + describe('deleteRequest', () => { + it('should update isDeleteLoading to true on deleteIndex', () => { + IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' }); + expect(IndicesLogic.values).toEqual({ + ...DEFAULT_VALUES, + deleteStatus: Status.LOADING, + isDeleteLoading: true, + }); + }); + it('should update isDeleteLoading to to false on apiError', () => { + IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' }); + IndicesLogic.actions.deleteError({} as HttpError); + + expect(IndicesLogic.values).toEqual({ + ...DEFAULT_VALUES, + deleteStatus: Status.ERROR, + isDeleteLoading: false, + }); + }); + it('should update isDeleteLoading to to false on apiSuccess', () => { + IndicesLogic.actions.deleteIndex({ indexName: 'to-delete' }); + IndicesLogic.actions.deleteSuccess(); + + expect(IndicesLogic.values).toEqual({ + ...DEFAULT_VALUES, + deleteStatus: Status.SUCCESS, + isDeleteLoading: false, + }); + }); + }); }); describe('listeners', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.ts index 5b90b26dba002..a771a29a3c0d9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_indices/indices_logic.ts @@ -72,8 +72,10 @@ export interface IndicesValues { deleteModalIndex: ElasticsearchViewIndex | null; deleteModalIndexName: string; deleteModalIngestionMethod: IngestionMethod; + deleteStatus: typeof DeleteIndexApiLogic.values.status; hasNoIndices: boolean; indices: ElasticsearchViewIndex[]; + isDeleteLoading: boolean; isDeleteModalVisible: boolean; isFirstRequest: boolean; isLoading: boolean; @@ -101,7 +103,12 @@ export const IndicesLogic = kea>({ DeleteIndexApiLogic, ['apiError as deleteError', 'apiSuccess as deleteSuccess', 'makeRequest as deleteIndex'], ], - values: [FetchIndicesAPILogic, ['data', 'status']], + values: [ + FetchIndicesAPILogic, + ['data', 'status'], + DeleteIndexApiLogic, + ['status as deleteStatus'], + ], }, listeners: ({ actions, values }) => ({ apiError: (e) => flashAPIErrors(e), @@ -181,6 +188,10 @@ export const IndicesLogic = kea>({ () => [selectors.data], (data) => (data?.indices ? data.indices.map(indexToViewIndex) : []), ], + isDeleteLoading: [ + () => [selectors.deleteStatus], + (status: IndicesValues['deleteStatus']) => [Status.LOADING].includes(status), + ], isLoading: [ () => [selectors.status, selectors.isFirstRequest], (status, isFirstRequest) => [Status.LOADING, Status.IDLE].includes(status) && isFirstRequest,