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`] = `
-
- }
- confirmButtonText={
-
+
+
+
+
+
+
+
+
+
+
+
+
- }
- defaultFocusedButton="confirm"
- onCancel={[Function]}
- onConfirm={[Function]}
- title={
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 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 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`] = `
+
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
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..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
- }
- 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 ? (
+
+ ) : (
+
+ )}
+
+
+
);
}