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 2e262ce43731..518b1831abda 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",
+ },
+ ]
}
->
-
= ({
+ isDeleting,
+ onConfirm,
+ onCancel,
+ selectedObjects,
+}) => {
+ if (isDeleting) {
+ return (
+
+
+
+ );
+ }
+
+ // can't use `EuiConfirmModal` here as the confirm modal body is wrapped
+ // inside a `` element, causing UI glitches with the table.
+ 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/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 000000000000..c76c5b68cd66
--- /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 000000000000..01ef145bcd07
--- /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 9c8736a9011e..23e681b92b26 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,5 @@ export { Header } from './header';
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 0171c13fd974..1991a60018aa 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 a5a4bcab364a..bb158b762112 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,32 +21,8 @@ import React, { Component } from 'react';
import { debounce } from 'lodash';
// @ts-expect-error
import { saveAs } from '@elastic/filesaver';
-import {
- EuiSpacer,
- Query,
- EuiInMemoryTable,
- EuiIcon,
- EuiConfirmModal,
- EuiLoadingElastic,
- EuiOverlayMask,
- EUI_MODAL_CONFIRM_BUTTON,
- EuiCheckboxGroup,
- EuiToolTip,
- 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,
@@ -62,7 +38,6 @@ import {
parseQuery,
getSavedObjectCounts,
getRelationships,
- getSavedObjectLabel,
fetchExportObjects,
fetchExportByTypeAndSearch,
findObjects,
@@ -77,7 +52,14 @@ import {
SavedObjectsManagementActionServiceStart,
SavedObjectsManagementColumnServiceStart,
} from '../../services';
-import { Header, Table, Flyout, Relationships } from './components';
+import {
+ Header,
+ Table,
+ Flyout,
+ Relationships,
+ DeleteConfirmModal,
+ ExportModal,
+} from './components';
import { DataPublicPluginStart } from '../../../../../plugins/data/public';
interface ExportAllOption {
@@ -554,114 +536,24 @@ 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 = () => {
- this.setState((state) => ({
- isIncludeReferencesDeepChecked: !state.isIncludeReferencesDeepChecked,
- }));
- };
-
- closeExportAllModal = () => {
- this.setState({ isShowingExportAllOptionsModal: false });
- };
-
renderExportAllOptionsModal() {
const {
isShowingExportAllOptionsModal,
@@ -676,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,
+ });
+ }}
+ />
);
}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index f573e2593196..06fa5f451bfe 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 199c6989687f..aec87aac8408 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": "类型",