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..0c49e4f7cb9e 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,302 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SavedObjectsTable delete should show a confirm modal 1`] = `
-
- }
- confirmButtonText={
-
+
+
+
+
+
+
+
+
+
+
+
+
- }
- defaultFocusedButton="confirm"
- onCancel={[Function]}
- onConfirm={[Function]}
- title={
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal 2`] = `
+
+
- }
->
-
-
-
-
-
-
-
+
+
`;
-exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
-
+
- }
- confirmButtonText={
+
+
- }
- defaultFocusedButton="confirm"
- onCancel={[Function]}
- onConfirm={[Function]}
- title={
-
- }
+
+
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal 4`] = `null`;
+
+exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
+
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = `
-
- }
- confirmButtonText={
-
- }
- defaultFocusedButton="confirm"
- onCancel={[Function]}
- onConfirm={[Function]}
- title={
-
- }
+
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
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..44c00b173bca 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
@@ -586,7 +586,10 @@ 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();
});
it('should delete selected objects', async () => {
@@ -675,14 +678,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 8c77f9dd3eff..75135ef5f059 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,
@@ -890,80 +890,84 @@ export class SavedObjectsTable extends Component
- }
- onCancel={onCancel}
- onConfirm={onConfirm}
- buttonColor="danger"
- cancelButtonText={
-
- }
- confirmButtonText={
- isDeleting ? (
+
+
+
- ) : (
-
- )
- }
- defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
- >
-
-
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+ ),
+ },
+ {
+ 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}
+ />
+
+
+
+
-
-
- (
-
-
-
- ),
- },
- {
- 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}
- />
-
+
+
+
+ {isDeleting ? (
+
+ ) : (
+
+ )}
+
+
+
);
}