[Enterprise Search] Fix index delete modal (#142447) (#142705)

* Disable index delete button during process * Change cancel to close during delete process (cherry picked from commit cc26353) Co-authored-by: Nav <13634519+navarone-feekery@users.noreply.github.com>
elastic · Oct 5, 2022 · 3fa9cb4 · 3fa9cb4
1 parent 77fdc26
commit 3fa9cb4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 7 deletions.
diff --git a/...c/applications/enterprise_search_content/components/search_indices/delete_index_modal.tsx b/...c/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 ? (
     <EuiConfirmModal
@@ -35,12 +36,21 @@ export const DeleteIndexModal: React.FC = () => {
       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}
     >
       <p>
         {i18n.translate(

diff --git a/...ic/applications/enterprise_search_content/components/search_indices/indices_logic.test.ts b/...ic/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/.../public/applications/enterprise_search_content/components/search_indices/indices_logic.ts b/.../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<MakeLogicType<IndicesValues, IndicesActions>>({
       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<MakeLogicType<IndicesValues, IndicesActions>>({
       () => [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,