From 983e33aae1dbf8403a474e7b3472bf4f0e19f3ef Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Thu, 19 Sep 2024 15:16:44 +0800 Subject: [PATCH 1/9] fix/fix_UI_of_Assets_modal Signed-off-by: Qxisylolo --- .../saved_objects_table.test.tsx.snap | 226 +----------------- .../objects_table/saved_objects_table.tsx | 150 ++++++------ 2 files changed, 80 insertions(+), 296 deletions(-) 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..1b6137b056e6 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,230 +1,10 @@ // 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 1`] = `null`; -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 error toast when failing to delete saved objects 1`] = `null`; -exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = ` - - } - confirmButtonText={ - - } - defaultFocusedButton="confirm" - onCancel={[Function]} - onConfirm={[Function]} - title={ - - } -> - -

- -

- - - -`; +exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = `null`; exports[`SavedObjectsTable duplicate should allow the user to choose on header when duplicating all 1`] = ` - } - 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 ? ( + + ) : ( + + )} + + + ); } From dd520c28f61c52197d9b6b0f97147588dcd5a35b Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Thu, 24 Oct 2024 15:54:26 +0800 Subject: [PATCH 2/9] correct tests Signed-off-by: Qxisylolo --- .../saved_objects_table.test.tsx.snap | 299 +++++++++++++++++- .../saved_objects_table.test.tsx | 9 +- 2 files changed, 302 insertions(+), 6 deletions(-) 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 1b6137b056e6..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,10 +1,303 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SavedObjectsTable delete should show a confirm modal 1`] = `null`; +exports[`SavedObjectsTable delete should show a confirm modal 1`] = ` + + + + + + + + +

+ +

+ + + + + + + + + + + + +`; + +exports[`SavedObjectsTable delete should show a confirm modal 2`] = ` + + + + + +`; -exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `null`; +exports[`SavedObjectsTable delete should show a confirm modal 3`] = ` + + + + + + + + +`; + +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`] = `null`; +exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = ` + + + + + + + + +

+ +

+ + + + + + + + + + + + +`; exports[`SavedObjectsTable duplicate should allow the user to choose on header when duplicating all 1`] = ` { 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); }); }); From 7c4f5e60f29ded6d6279f6a795c2de78950d4321 Mon Sep 17 00:00:00 2001 From: "opensearch-changeset-bot[bot]" <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Date: Thu, 24 Oct 2024 07:56:21 +0000 Subject: [PATCH 3/9] Changeset file for PR #8237 created/updated --- changelogs/fragments/8237.yml | 2 ++ 1 file changed, 2 insertions(+) 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 From a7d032b9b3116cfa9074f36334a42ca5bae10e2e Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Thu, 31 Oct 2024 15:37:10 +0800 Subject: [PATCH 4/9] disable button Signed-off-by: Qxisylolo --- .../__snapshots__/saved_objects_table.test.tsx.snap | 4 ++++ .../objects_table/saved_objects_table.tsx | 8 +++++++- 2 files changed, 11 insertions(+), 1 deletion(-) 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 0c49e4f7cb9e..53e1cd2431f1 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 @@ -75,6 +75,7 @@ exports[`SavedObjectsTable delete should show a confirm modal 1`] = ` - + {isDeleting ? ( Date: Fri, 1 Nov 2024 16:59:22 +0800 Subject: [PATCH 5/9] update test Signed-off-by: Qxisylolo --- .../saved_objects_table.test.tsx.snap | 16 +++++++++++----- .../objects_table/saved_objects_table.test.tsx | 17 ++++++++++++++--- 2 files changed, 25 insertions(+), 8 deletions(-) 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 53e1cd2431f1..6bb452ca3986 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,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`SavedObjectsTable delete should show a confirm modal 1`] = ` +exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 1`] = ` `; -exports[`SavedObjectsTable delete should show a confirm modal 2`] = ` +exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 2`] = ` `; -exports[`SavedObjectsTable delete should show a confirm modal 3`] = ` +exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 3`] = ` `; -exports[`SavedObjectsTable delete should show a confirm modal 4`] = `null`; +exports[`SavedObjectsTable delete should show a confirm modal with correct icons and tooltips 4`] = `null`; exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = ` { }); describe('delete', () => { - it('should show a confirm modal', async () => { + it('should show a confirm modal with correct icons and tooltips', async () => { 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 @@ -590,6 +590,17 @@ describe('SavedObjectsTable', () => { 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(renderedContent.props.content).toBe(savedObject.type); + const iconElement = renderedContent.props.children; + expect(iconElement.props.type).toBe(savedObject.meta.icon || 'apps'); + }); }); it('should delete selected objects', async () => { From 1b4bf6fd927f1e597a46a11d7fbb48a029c24495 Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Wed, 25 Dec 2024 13:24:19 +0800 Subject: [PATCH 6/9] fix tests Signed-off-by: Qxisylolo --- .../objects_table/saved_objects_table.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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 46abe804b92a..6771576cd56e 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 @@ -65,6 +65,7 @@ import { Flyout, Relationships } from './components'; import { SavedObjectWithMetadata } from '../../types'; import { WorkspaceObject } from 'opensearch-dashboards/public'; import { TableProps } from './components/table'; +import { EuiToolTip } from '@elastic/eui'; const allowedTypes = ['index-pattern', 'visualization', 'dashboard', 'search']; @@ -569,6 +570,16 @@ describe('SavedObjectsTable', () => { describe('delete', () => { 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 = [ @@ -597,6 +608,8 @@ describe('SavedObjectsTable', () => { const typeField = columns.find((col) => col.field === 'type'); mockSelectedSavedObjects.forEach((savedObject) => { const renderedContent = typeField.render(savedObject.type, savedObject); + expect(renderedContent.type).toBe(EuiToolTip); + expect(renderedContent.props.content).toBe(mockGetSavedObjectLabel(savedObject.type)); expect(renderedContent.props.content).toBe(savedObject.type); const iconElement = renderedContent.props.children; expect(iconElement.props.type).toBe(savedObject.meta.icon || 'apps'); From d79d59a074f92375bd7172421ea65c75755e8fb0 Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Wed, 25 Dec 2024 14:49:33 +0800 Subject: [PATCH 7/9] update snapshot Signed-off-by: Qxisylolo --- .../__snapshots__/saved_objects_table.test.tsx.snap | 8 ++++++++ .../objects_table/saved_objects_table.test.tsx | 5 ++--- 2 files changed, 10 insertions(+), 3 deletions(-) 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 6bb452ca3986..725f4554d3aa 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 @@ -137,6 +137,14 @@ exports[`SavedObjectsTable delete should show a confirm modal with correct icons 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`] = ` { const typeField = columns.find((col) => col.field === 'type'); mockSelectedSavedObjects.forEach((savedObject) => { const renderedContent = typeField.render(savedObject.type, savedObject); - expect(renderedContent.type).toBe(EuiToolTip); + expect(component.find('EuiToolTip')).toMatchSnapshot(); expect(renderedContent.props.content).toBe(mockGetSavedObjectLabel(savedObject.type)); - expect(renderedContent.props.content).toBe(savedObject.type); const iconElement = renderedContent.props.children; + expect(component.find('EuiIcon')).toMatchSnapshot(); expect(iconElement.props.type).toBe(savedObject.meta.icon || 'apps'); }); }); From f886169011ecdc9f8a48430e1b85b0c4eca2a761 Mon Sep 17 00:00:00 2001 From: Qxisylolo Date: Wed, 25 Dec 2024 17:42:18 +0800 Subject: [PATCH 8/9] update snapshot Signed-off-by: Qxisylolo --- .../management_section/objects_table/saved_objects_table.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 39b209230a9e..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 @@ -957,7 +957,8 @@ export class SavedObjectsTable extends Component {isDeleting ? ( Date: Thu, 26 Dec 2024 14:34:50 +0800 Subject: [PATCH 9/9] add snapshot Signed-off-by: Qxisylolo --- .../__snapshots__/saved_objects_table.test.tsx.snap | 4 ++++ 1 file changed, 4 insertions(+) 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 725f4554d3aa..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 @@ -81,6 +81,7 @@ exports[`SavedObjectsTable delete should show a confirm modal with correct icons