From 0eded8e616cd6cfbc259cadf490ea17c25235926 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 7 Jan 2021 13:19:04 +0100 Subject: [PATCH 1/4] extract delete confirm modal --- .../components/delete_confirm_modal.test.tsx | 97 ++++++++++++ .../components/delete_confirm_modal.tsx | 149 ++++++++++++++++++ .../objects_table/components/index.ts | 1 + .../objects_table/saved_objects_table.tsx | 113 ++----------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 6 files changed, 260 insertions(+), 102 deletions(-) create mode 100644 src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.test.tsx create mode 100644 src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.test.tsx new file mode 100644 index 0000000000000..db1f83759fad5 --- /dev/null +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.test.tsx @@ -0,0 +1,97 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { mountWithIntl } from '@kbn/test/jest'; +import { SavedObjectWithMetadata } from '../../../../common'; +import { DeleteConfirmModal } from './delete_confirm_modal'; + +const createObject = (): SavedObjectWithMetadata => ({ + id: 'foo', + type: 'bar', + attributes: {}, + references: [], + meta: {}, +}); + +describe('DeleteConfirmModal', () => { + let onConfirm: jest.Mock; + let onCancel: jest.Mock; + + beforeEach(() => { + onConfirm = jest.fn(); + onCancel = jest.fn(); + }); + + it('displays a loader if `isDeleting` is true', () => { + const wrapper = mountWithIntl( + + ); + expect(wrapper.find('EuiLoadingElastic')).toHaveLength(1); + expect(wrapper.find('EuiModal')).toHaveLength(0); + }); + + it('lists the objects to delete', () => { + const objs = [createObject(), createObject(), createObject()]; + const wrapper = mountWithIntl( + + ); + expect(wrapper.find('.euiTableRow')).toHaveLength(3); + }); + + it('calls `onCancel` when clicking on the cancel button', () => { + const wrapper = mountWithIntl( + + ); + wrapper.find('EuiButtonEmpty').simulate('click'); + + expect(onCancel).toHaveBeenCalledTimes(1); + expect(onConfirm).not.toHaveBeenCalled(); + }); + + it('calls `onDelete` when clicking on the delete button', () => { + const wrapper = mountWithIntl( + + ); + wrapper.find('EuiButton').simulate('click'); + + expect(onConfirm).toHaveBeenCalledTimes(1); + expect(onCancel).not.toHaveBeenCalled(); + }); +}); diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx new file mode 100644 index 0000000000000..46e45a08c98f6 --- /dev/null +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx @@ -0,0 +1,149 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { + EuiInMemoryTable, + EuiLoadingElastic, + EuiToolTip, + EuiIcon, + EuiOverlayMask, + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiButton, + EuiSpacer, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { SavedObjectWithMetadata } from '../../../../common'; +import { getSavedObjectLabel } from '../../../lib'; + +export interface DeleteConfirmModalProps { + isDeleting: boolean; + onConfirm: () => void; + onCancel: () => void; + selectedObjects: SavedObjectWithMetadata[]; +} + +export const DeleteConfirmModal: FC = ({ + isDeleting, + onConfirm, + onCancel, + selectedObjects, +}) => { + if (isDeleting) { + return ( + + + + ); + } + return ( + + + + + + + + +

+ +

+ + ( + + + + ), + }, + { + 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} + /> + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts b/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts index 9c8736a9011eb..7b29a081bdaf4 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts @@ -21,3 +21,4 @@ export { Header } from './header'; export { Table } from './table'; export { Flyout } from './flyout'; export { Relationships } from './relationships'; +export { DeleteConfirmModal } from './delete_confirm_modal'; 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 a5a4bcab364af..07d2242a6c792 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 @@ -24,14 +24,8 @@ import { saveAs } from '@elastic/filesaver'; import { EuiSpacer, Query, - EuiInMemoryTable, - EuiIcon, - EuiConfirmModal, - EuiLoadingElastic, EuiOverlayMask, - EUI_MODAL_CONFIRM_BUTTON, EuiCheckboxGroup, - EuiToolTip, EuiPageContent, EuiSwitch, EuiModal, @@ -62,7 +56,6 @@ import { parseQuery, getSavedObjectCounts, getRelationships, - getSavedObjectLabel, fetchExportObjects, fetchExportByTypeAndSearch, findObjects, @@ -77,7 +70,7 @@ import { SavedObjectsManagementActionServiceStart, SavedObjectsManagementColumnServiceStart, } from '../../services'; -import { Header, Table, Flyout, Relationships } from './components'; +import { Header, Table, Flyout, Relationships, DeleteConfirmModal } from './components'; import { DataPublicPluginStart } from '../../../../../plugins/data/public'; interface ExportAllOption { @@ -554,102 +547,22 @@ export class SavedObjectsTable extends Component; - } else { - const onCancel = () => { - this.setState({ isShowingDeleteConfirmModal: false }); - }; - - const onConfirm = () => { - this.delete(); - }; - - modal = ( - - } - onCancel={onCancel} - onConfirm={onConfirm} - buttonColor="danger" - cancelButtonText={ - - } - confirmButtonText={ - isDeleting ? ( - - ) : ( - - ) - } - defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} - > -

- -

- ( - - - - ), - }, - { - 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} - /> - - ); - } - - return {modal}; + return ( + { + this.delete(); + }} + onCancel={() => { + this.setState({ isShowingDeleteConfirmModal: false }); + }} + selectedObjects={selectedSavedObjects} + /> + ); } changeIncludeReferencesDeep = () => { diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index fef61667168a9..be049dc76b6e4 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -3198,7 +3198,6 @@ "savedObjectsManagement.objects.savedObjectsTitle": "保存されたオブジェクト", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel": "キャンセル", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel": "削除", - "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel": "削除中…", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName": "Id", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName": "タイトル", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName": "型", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index d4ec4407080f4..b2ada7157b709 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -3202,7 +3202,6 @@ "savedObjectsManagement.objects.savedObjectsTitle": "已保存对象", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel": "取消", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel": "删除", - "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel": "正在删除……", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName": "ID", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName": "标题", "savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName": "类型", From d0e702f01893d7bbc2efb5465ce9b274b81fb71b Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 7 Jan 2021 14:09:42 +0100 Subject: [PATCH 2/4] extract the export modal --- .../saved_objects_table.test.tsx.snap | 238 ++++-------------- .../components/export_modal.test.tsx | 100 ++++++++ .../objects_table/components/export_modal.tsx | 137 ++++++++++ .../objects_table/components/index.ts | 1 + .../saved_objects_table.test.tsx | 4 +- .../objects_table/saved_objects_table.tsx | 138 +++------- 6 files changed, 319 insertions(+), 299 deletions(-) create mode 100644 src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx create mode 100644 src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.tsx 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 2e262ce43731a..518b1831abda8 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,200 +1,62 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SavedObjectsTable delete should show a confirm modal 1`] = ` - - } - confirmButtonText={ - - } - defaultFocusedButton="confirm" + + selectedObjects={ + Array [ + Object { + "id": "1", + "type": "index-pattern", + }, + Object { + "id": "3", + "type": "dashboard", + }, + ] } -> -

- -

- - +/> `; exports[`SavedObjectsTable export should allow the user to choose when exporting all 1`] = ` - - - - - - - - - } - labelType="legend" - > - - - - - } - name="includeReferencesDeep" - onChange={[Function]} - /> - - - - - - - - - - - - - - - - - - - - + `; exports[`SavedObjectsTable should render normally 1`] = ` diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx new file mode 100644 index 0000000000000..c76c5b68cd66f --- /dev/null +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx @@ -0,0 +1,100 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { mountWithIntl } from '@kbn/test/jest'; +import { ExportModal } from './export_modal'; + +describe('ExportModal', () => { + let onExport: jest.Mock; + let onCancel: jest.Mock; + let onSelectedOptionsChange: jest.Mock; + let onIncludeReferenceChange: jest.Mock; + + const options = [ + { id: '1', label: 'option 1' }, + { id: '2', label: 'option 2' }, + ]; + const selectedOptions = { + 1: true, + 2: false, + }; + + beforeEach(() => { + onExport = jest.fn(); + onCancel = jest.fn(); + onSelectedOptionsChange = jest.fn(); + onIncludeReferenceChange = jest.fn(); + }); + + it('Displays a checkbox for each option', () => { + const wrapper = mountWithIntl( + + ); + + expect(wrapper.find('EuiCheckbox')).toHaveLength(2); + }); + + it('calls `onCancel` when clicking on the cancel button', () => { + const wrapper = mountWithIntl( + + ); + wrapper.find('EuiButtonEmpty').simulate('click'); + + expect(onCancel).toHaveBeenCalledTimes(1); + expect(onExport).not.toHaveBeenCalled(); + }); + + it('calls `onExport` when clicking on the export button', () => { + const wrapper = mountWithIntl( + + ); + wrapper.find('EuiButton').simulate('click'); + + expect(onExport).toHaveBeenCalledTimes(1); + expect(onCancel).not.toHaveBeenCalled(); + }); +}); diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.tsx new file mode 100644 index 0000000000000..01ef145bcd077 --- /dev/null +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.tsx @@ -0,0 +1,137 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { FC } from 'react'; +import { + EuiOverlayMask, + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiButton, + EuiSpacer, + EuiFormRow, + EuiCheckboxGroup, + EuiSwitch, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +export interface ExportModalProps { + onExport: () => void; + onCancel: () => void; + onSelectedOptionsChange: (newSelectedOptions: Record) => void; + filteredItemCount: number; + options: Array<{ id: string; label: string }>; + selectedOptions: Record; + includeReferences: boolean; + onIncludeReferenceChange: (newIncludeReference: boolean) => void; +} + +export const ExportModal: FC = ({ + onCancel, + onExport, + onSelectedOptionsChange, + options, + filteredItemCount, + selectedOptions, + includeReferences, + onIncludeReferenceChange, +}) => { + return ( + + + + + + + + + + } + labelType="legend" + > + { + onSelectedOptionsChange({ + ...selectedOptions, + ...{ + [optionId]: !selectedOptions[optionId], + }, + }); + }} + /> + + + + } + checked={includeReferences} + onChange={() => onIncludeReferenceChange(!includeReferences)} + /> + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts b/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts index 7b29a081bdaf4..23e681b92b269 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/index.ts @@ -22,3 +22,4 @@ export { Table } from './table'; export { Flyout } from './flyout'; export { Relationships } from './relationships'; export { DeleteConfirmModal } from './delete_confirm_modal'; +export { ExportModal } from './export_modal'; 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 0171c13fd974b..1991a60018aa0 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 @@ -325,7 +325,7 @@ describe('SavedObjectsTable', () => { (component.find('Header') as any).prop('onExportAll')(); component.update(); - expect(component.find('EuiModal')).toMatchSnapshot(); + expect(component.find('ExportModal')).toMatchSnapshot(); }); it('should export all', async () => { @@ -504,7 +504,7 @@ describe('SavedObjectsTable', () => { await component.instance().onDelete(); component.update(); - expect(component.find('EuiConfirmModal')).toMatchSnapshot(); + expect(component.find('DeleteConfirmModal')).toMatchSnapshot(); }); it('should delete selected objects', async () => { 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 07d2242a6c792..bb158b7621125 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 @@ -21,26 +21,8 @@ import React, { Component } from 'react'; import { debounce } from 'lodash'; // @ts-expect-error import { saveAs } from '@elastic/filesaver'; -import { - EuiSpacer, - Query, - EuiOverlayMask, - EuiCheckboxGroup, - EuiPageContent, - EuiSwitch, - EuiModal, - EuiModalHeader, - EuiModalBody, - EuiModalFooter, - EuiButtonEmpty, - EuiButton, - EuiModalHeaderTitle, - EuiFormRow, - EuiFlexGroup, - EuiFlexItem, -} from '@elastic/eui'; +import { EuiSpacer, Query, EuiPageContent } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; import { SavedObjectsClientContract, SavedObjectsFindOptions, @@ -70,7 +52,14 @@ import { SavedObjectsManagementActionServiceStart, SavedObjectsManagementColumnServiceStart, } from '../../services'; -import { Header, Table, Flyout, Relationships, DeleteConfirmModal } from './components'; +import { + Header, + Table, + Flyout, + Relationships, + DeleteConfirmModal, + ExportModal, +} from './components'; import { DataPublicPluginStart } from '../../../../../plugins/data/public'; interface ExportAllOption { @@ -565,16 +554,6 @@ export class SavedObjectsTable extends Component { - this.setState((state) => ({ - isIncludeReferencesDeepChecked: !state.isIncludeReferencesDeepChecked, - })); - }; - - closeExportAllModal = () => { - this.setState({ isShowingExportAllOptionsModal: false }); - }; - renderExportAllOptionsModal() { const { isShowingExportAllOptionsModal, @@ -589,85 +568,26 @@ export class SavedObjectsTable extends Component - - - - - - - - - } - labelType="legend" - > - { - const newExportAllSelectedOptions = { - ...exportAllSelectedOptions, - ...{ - [optionId]: !exportAllSelectedOptions[optionId], - }, - }; - - this.setState({ - exportAllSelectedOptions: newExportAllSelectedOptions, - }); - }} - /> - - - - } - checked={isIncludeReferencesDeepChecked} - onChange={this.changeIncludeReferencesDeep} - /> - - - - - - - - - - - - - - - - - - - - - + { + this.setState({ isShowingExportAllOptionsModal: false }); + }} + onSelectedOptionsChange={(newOptions) => { + this.setState({ + exportAllSelectedOptions: newOptions, + }); + }} + filteredItemCount={filteredItemCount} + options={exportAllOptions} + selectedOptions={exportAllSelectedOptions} + includeReferences={isIncludeReferencesDeepChecked} + onIncludeReferenceChange={(newIncludeReferences) => { + this.setState({ + isIncludeReferencesDeepChecked: newIncludeReferences, + }); + }} + /> ); } From c0ee1a04ff73f87392999cc0657b74e321514bf8 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 7 Jan 2021 16:17:06 +0100 Subject: [PATCH 3/4] add data-test-subj to confirm modal --- .../objects_table/components/delete_confirm_modal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx index 46e45a08c98f6..ddcc460d56c0e 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx @@ -119,7 +119,7 @@ export const DeleteConfirmModal: FC = ({ - + = ({ fill color="danger" onClick={onConfirm} + data-test-subj="confirmModalConfirmButton" > Date: Mon, 11 Jan 2021 08:06:36 +0100 Subject: [PATCH 4/4] add comment on why we can't use EuiConfirmModal --- .../objects_table/components/delete_confirm_modal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx index ddcc460d56c0e..07564843e9745 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/delete_confirm_modal.tsx @@ -60,6 +60,9 @@ export const DeleteConfirmModal: FC = ({ ); } + + // can't use `EuiConfirmModal` here as the confirm modal body is wrapped + // inside a `

` element, causing UI glitches with the table. return (