From fb9a814fe3175b65581404d1df92b7175bde2412 Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Fri, 27 Dec 2024 16:04:19 +0800
Subject: [PATCH] [workspace] fix the UI of delete modal in the save
 objects(assets) page (#8237)

* fix/fix_UI_of_Assets_modal

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* correct tests

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* Changeset file for PR #8237 created/updated

* disable button

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* update test

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix tests

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* update snapshot

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* update snapshot

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* add snapshot

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

---------

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Yulong Ruan <ruanyl@amazon.com>
---
 changelogs/fragments/8237.yml                 |   2 +
 .../saved_objects_table.test.tsx.snap         | 487 +++++++++++-------
 .../saved_objects_table.test.tsx              |  38 +-
 .../objects_table/saved_objects_table.tsx     | 157 +++---
 4 files changed, 409 insertions(+), 275 deletions(-)
 create mode 100644 changelogs/fragments/8237.yml

diff --git a/changelogs/fragments/8237.yml b/changelogs/fragments/8237.yml
new file mode 100644
index 000000000000..a4466d7b6500
--- /dev/null
+++ b/changelogs/fragments/8237.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix the UI of delete modal in the save objects(assets) page ([#8237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8237))
\ No newline at end of file
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
index 23f8a7b89724..2c4d95760138 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
@@ -1,229 +1,324 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SavedObjectsTable delete should show a confirm modal 1`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-      values={Object {}}
-    />
-  }
-  confirmButtonText={
-    <FormattedMessage
-      defaultMessage="Delete"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-      values={Object {}}
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 1`] = `
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
+>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
+      <FormattedMessage
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
+        values={Object {}}
+      />
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "meta": Object {
+              "icon": "configApp",
+            },
+            "type": "config",
+          },
+          Object {
+            "id": "3",
+            "meta": Object {
+              "icon": "dashboardApp",
+            },
+            "type": "dashboard",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
     />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      data-test-subj="confirmModalConfirmButton"
+      disabled={false}
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 2`] = `
+<EuiModalHeader>
+  <EuiModalHeaderTitle>
     <FormattedMessage
-      defaultMessage="Delete saved objects"
+      defaultMessage="Delete assets"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
       values={Object {}}
     />
-  }
->
-  <EuiText
-    size="s"
-  >
-    <p>
-      <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
-        values={Object {}}
-      />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-        Object {
-          "id": "3",
-          "type": "dashboard",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+  </EuiModalHeaderTitle>
+</EuiModalHeader>
 `;
 
-exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 3`] = `
+<EuiModalFooter>
+  <EuiButtonEmpty
+    onClick={[Function]}
+  >
     <FormattedMessage
       defaultMessage="Cancel"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
       values={Object {}}
     />
-  }
-  confirmButtonText={
+  </EuiButtonEmpty>
+  <EuiButton
+    color="danger"
+    data-test-subj="confirmModalConfirmButton"
+    disabled={false}
+    fill={true}
+    onClick={[Function]}
+    type="submit"
+  >
     <FormattedMessage
       defaultMessage="Delete"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
       values={Object {}}
     />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
-    <FormattedMessage
-      defaultMessage="Delete saved objects"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-      values={Object {}}
-    />
-  }
+  </EuiButton>
+</EuiModalFooter>
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 4`] = `null`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 5`] = `null`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 6`] = `null`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 7`] = `null`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 8`] = `null`;
+
+exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
 >
-  <EuiText
-    size="s"
-  >
-    <p>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
       <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
         values={Object {}}
       />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "type": "index-pattern",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
+    />
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      data-test-subj="confirmModalConfirmButton"
+      disabled={false}
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
 `;
 
 exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-      values={Object {}}
-    />
-  }
-  confirmButtonText={
-    <FormattedMessage
-      defaultMessage="Delete"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-      values={Object {}}
-    />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
-    <FormattedMessage
-      defaultMessage="Delete saved objects"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-      values={Object {}}
-    />
-  }
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
 >
-  <EuiText
-    size="s"
-  >
-    <p>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
       <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
         values={Object {}}
       />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "type": "index-pattern",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
+    />
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      data-test-subj="confirmModalConfirmButton"
+      disabled={false}
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
 `;
 
 exports[`SavedObjectsTable duplicate should allow the user to choose on header when duplicating all 1`] = `
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
index b3e440460428..e3514e33b470 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
@@ -568,12 +568,22 @@ describe('SavedObjectsTable', () => {
   });
 
   describe('delete', () => {
-    it('should show a confirm modal', async () => {
+    it('should show a confirm modal with correct icons and tooltips', async () => {
+      const mockGetSavedObjectLabel = jest.fn((type) => {
+        switch (type) {
+          case 'index-pattern':
+          case 'index-patterns':
+          case 'indexPatterns':
+            return 'index patterns';
+          default:
+            return type;
+        }
+      });
       const component = shallowRender();
 
       const mockSelectedSavedObjects = [
-        { id: '1', type: 'index-pattern' },
-        { id: '3', type: 'dashboard' },
+        { id: '1', type: 'config', meta: { icon: 'configApp' } },
+        { id: '3', type: 'dashboard', meta: { icon: 'dashboardApp' } },
       ] as SavedObjectWithMetadata[];
 
       // Ensure all promises resolve
@@ -586,7 +596,23 @@ describe('SavedObjectsTable', () => {
       await component.instance().onDelete();
       component.update();
 
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
+      expect(component.find('EuiModalHeader')).toMatchSnapshot();
+      expect(component.find('EuiModalFooter')).toMatchSnapshot();
+      expect(component.find('Delete assets')).toMatchSnapshot();
+
+      const table = component.find('EuiInMemoryTable');
+      const columns = table.prop('columns');
+
+      const typeField = columns.find((col) => col.field === 'type');
+      mockSelectedSavedObjects.forEach((savedObject) => {
+        const renderedContent = typeField.render(savedObject.type, savedObject);
+        expect(component.find('EuiToolTip')).toMatchSnapshot();
+        expect(renderedContent.props.content).toBe(mockGetSavedObjectLabel(savedObject.type));
+        const iconElement = renderedContent.props.children;
+        expect(component.find('EuiIcon')).toMatchSnapshot();
+        expect(iconElement.props.type).toBe(savedObject.meta.icon || 'apps');
+      });
     });
 
     it('should delete selected objects', async () => {
@@ -675,14 +701,14 @@ describe('SavedObjectsTable', () => {
       await component.instance().onDelete();
       component.update();
       expect(component.state('isShowingDeleteConfirmModal')).toBe(true);
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
 
       await component.instance().delete();
       component.update();
       expect(notifications.toasts.addDanger).toHaveBeenCalled();
       // If user fail to delete the saved objects, the delete modal will continue to display
       expect(component.state('isShowingDeleteConfirmModal')).toBe(true);
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
       expect(component.state('isDeleting')).toBe(false);
     });
   });
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
index 63436364bb32..aca9d0f39c7a 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -37,16 +37,16 @@ import {
   Query,
   EuiInMemoryTable,
   EuiIcon,
-  EuiConfirmModal,
+  EuiButtonEmpty,
+  EuiModal,
   EuiLoadingSpinner,
   EuiOverlayMask,
-  EUI_MODAL_CONFIRM_BUTTON,
   EuiCompressedCheckboxGroup,
   EuiToolTip,
   EuiPageContent,
   EuiCompressedSwitch,
-  EuiModal,
   EuiModalHeader,
+  EuiButton,
   EuiModalBody,
   EuiModalFooter,
   EuiSmallButtonEmpty,
@@ -889,80 +889,91 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       };
 
       modal = (
-        <EuiConfirmModal
-          title={
-            <FormattedMessage
-              id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-              defaultMessage="Delete saved objects"
-            />
-          }
-          onCancel={onCancel}
-          onConfirm={onConfirm}
-          buttonColor="danger"
-          cancelButtonText={
-            <FormattedMessage
-              id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            isDeleting ? (
+        <EuiModal onClose={onCancel} maxWidth="50vw">
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
               <FormattedMessage
-                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel"
-                defaultMessage="Deleting…"
+                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
+                defaultMessage="Delete assets"
               />
-            ) : (
-              <FormattedMessage
-                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-                defaultMessage="Delete"
-              />
-            )
-          }
-          defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
-        >
-          <EuiText size="s">
-            <p>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+                  defaultMessage="This action will delete the following assets:"
+                />
+              </p>
+            </EuiText>
+            <EuiInMemoryTable
+              items={selectedSavedObjects}
+              columns={[
+                {
+                  field: 'type',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
+                    { defaultMessage: 'Type' }
+                  ),
+                  width: '50px',
+                  render: (type, object) => (
+                    <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
+                      <EuiIcon type={object.meta.icon || 'apps'} />
+                    </EuiToolTip>
+                  ),
+                },
+                {
+                  field: 'meta.title',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
+                    { defaultMessage: 'Title' }
+                  ),
+                },
+                {
+                  field: 'id',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
+                    { defaultMessage: 'ID' }
+                  ),
+                },
+              ]}
+              pagination={true}
+              sorting={false}
+            />
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={onCancel}>
               <FormattedMessage
-                id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
-                defaultMessage="This action will delete the following saved objects:"
+                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+                defaultMessage="Cancel"
               />
-            </p>
-          </EuiText>
-          <EuiInMemoryTable
-            items={selectedSavedObjects}
-            columns={[
-              {
-                field: 'type',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
-                  { defaultMessage: 'Type' }
-                ),
-                width: '50px',
-                render: (type, object) => (
-                  <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
-                    <EuiIcon type={object.meta.icon || 'apps'} />
-                  </EuiToolTip>
-                ),
-              },
-              {
-                field: 'id',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
-                  { defaultMessage: 'Id' }
-                ),
-              },
-              {
-                field: 'meta.title',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
-                  { defaultMessage: 'Title' }
-                ),
-              },
-            ]}
-            pagination={true}
-            sorting={false}
-          />
-        </EuiConfirmModal>
+            </EuiButtonEmpty>
+
+            <EuiButton
+              type="submit"
+              onClick={onConfirm}
+              fill
+              color="danger"
+              data-test-subj="confirmModalConfirmButton"
+              disabled={!!isDeleting}
+            >
+              {isDeleting ? (
+                <FormattedMessage
+                  id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel"
+                  defaultMessage="Deleting…"
+                />
+              ) : (
+                <FormattedMessage
+                  id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+                  defaultMessage="Delete"
+                />
+              )}
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
       );
     }