From bbb18a85db29c7d66d661576d9143d4b8d55445b Mon Sep 17 00:00:00 2001 From: Constance Date: Fri, 18 Dec 2020 13:31:21 -0800 Subject: [PATCH] [App Search] Convert DocumentCreationModal to DocumentCreationFlyout (#86508) * Convert DocumentCreationModal to a Flyout - Per discussion w/ Davey - it handles longer/detailed content better * Update instances referencing DocumentCreationFlyout * Update flyout children - modal->flyout - add hasBorder, set EuiTitle sizes, add flexgroup to footer buttons --- .../document_creation/constants.tsx | 10 ++-- .../api_code_example.test.tsx | 22 ++++---- .../api_code_example.tsx | 46 ++++++++------- .../paste_json_text.test.tsx | 22 ++++---- .../paste_json_text.tsx | 56 +++++++++++-------- .../show_creation_modes.test.tsx | 2 +- .../show_creation_modes.tsx | 30 +++++----- .../upload_json_file.test.tsx | 24 ++++---- .../upload_json_file.tsx | 56 +++++++++++-------- .../document_creation_buttons.test.tsx | 2 +- ....tsx => document_creation_flyout.test.tsx} | 32 +++++------ ...modal.tsx => document_creation_flyout.tsx} | 17 +++--- .../document_creation_logic.ts | 2 +- .../components/document_creation/index.ts | 2 +- .../document_creation_button.test.tsx | 4 +- .../documents/document_creation_button.tsx | 4 +- .../engine_overview_empty.test.tsx | 4 +- .../engine_overview/engine_overview_empty.tsx | 4 +- 18 files changed, 181 insertions(+), 158 deletions(-) rename x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/{document_creation_modal.test.tsx => document_creation_flyout.test.tsx} (77%) rename x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/{document_creation_modal.tsx => document_creation_flyout.tsx} (78%) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx index c4237da0d0e80..27c3410767d8a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx @@ -6,12 +6,14 @@ import { i18n } from '@kbn/i18n'; -export const MODAL_CANCEL_BUTTON = i18n.translate( - 'xpack.enterpriseSearch.appSearch.documentCreation.modalCancel', +export const FLYOUT_ARIA_LABEL_ID = 'documentCreationFlyoutHeadingId'; + +export const FLYOUT_CANCEL_BUTTON = i18n.translate( + 'xpack.enterpriseSearch.appSearch.documentCreation.flyoutCancel', { defaultMessage: 'Cancel' } ); -export const MODAL_CONTINUE_BUTTON = i18n.translate( - 'xpack.enterpriseSearch.appSearch.documentCreation.modalContinue', +export const FLYOUT_CONTINUE_BUTTON = i18n.translate( + 'xpack.enterpriseSearch.appSearch.documentCreation.flyoutContinue', { defaultMessage: 'Continue' } ); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx index 2dd46419528c1..ddce27789b82c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import { EuiCode, EuiCodeBlock, EuiButtonEmpty } from '@elastic/eui'; -import { ApiCodeExample, ModalHeader, ModalBody, ModalFooter } from './api_code_example'; +import { ApiCodeExample, FlyoutHeader, FlyoutBody, FlyoutFooter } from './api_code_example'; describe('ApiCodeExample', () => { const values = { @@ -29,23 +29,23 @@ describe('ApiCodeExample', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find(ModalHeader)).toHaveLength(1); - expect(wrapper.find(ModalBody)).toHaveLength(1); - expect(wrapper.find(ModalFooter)).toHaveLength(1); + expect(wrapper.find(FlyoutHeader)).toHaveLength(1); + expect(wrapper.find(FlyoutBody)).toHaveLength(1); + expect(wrapper.find(FlyoutFooter)).toHaveLength(1); }); - describe('ModalHeader', () => { + describe('FlyoutHeader', () => { it('renders', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('h2').text()).toEqual('Indexing by API'); }); }); - describe('ModalBody', () => { + describe('FlyoutBody', () => { let wrapper: ShallowWrapper; beforeAll(() => { - wrapper = shallow(); + wrapper = shallow(); }); it('renders with the full remote Enterprise Search API URL', () => { @@ -64,9 +64,9 @@ describe('ApiCodeExample', () => { }); }); - describe('ModalFooter', () => { - it('closes the modal', () => { - const wrapper = shallow(); + describe('FlyoutFooter', () => { + it('closes the flyout', () => { + const wrapper = shallow(); wrapper.find(EuiButtonEmpty).simulate('click'); expect(actions.closeDocumentCreation).toHaveBeenCalled(); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx index 1dd57ffe8bc01..9ebe404659ca2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx @@ -11,10 +11,10 @@ import { useValues, useActions } from 'kea'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { - EuiModalHeader, - EuiModalHeaderTitle, - EuiModalBody, - EuiModalFooter, + EuiFlyoutHeader, + EuiTitle, + EuiFlyoutBody, + EuiFlyoutFooter, EuiButtonEmpty, EuiText, EuiLink, @@ -30,39 +30,43 @@ import { EngineLogic } from '../../engine'; import { EngineDetails } from '../../engine/types'; import { DOCS_PREFIX } from '../../../routes'; -import { DOCUMENTS_API_JSON_EXAMPLE, MODAL_CANCEL_BUTTON } from '../constants'; +import { + DOCUMENTS_API_JSON_EXAMPLE, + FLYOUT_ARIA_LABEL_ID, + FLYOUT_CANCEL_BUTTON, +} from '../constants'; import { DocumentCreationLogic } from '../'; export const ApiCodeExample: React.FC = () => ( <> - - - + + + ); -export const ModalHeader: React.FC = () => { +export const FlyoutHeader: React.FC = () => { return ( - - -

+ + +

{i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.api.title', { defaultMessage: 'Indexing by API', })}

- - + + ); }; -export const ModalBody: React.FC = () => { +export const FlyoutBody: React.FC = () => { const { engineName, engine } = useValues(EngineLogic); const { apiKey } = engine as EngineDetails; const documentsApiUrl = getEnterpriseSearchUrl(`/api/as/v1/engines/${engineName}/documents`); return ( - +

{ # ] `)} - + ); }; -export const ModalFooter: React.FC = () => { +export const FlyoutFooter: React.FC = () => { const { closeDocumentCreation } = useActions(DocumentCreationLogic); return ( - - {MODAL_CANCEL_BUTTON} - + + {FLYOUT_CANCEL_BUTTON} + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx index ede1529c049d7..50e4d473e5f78 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { EuiTextArea, EuiButtonEmpty, EuiButton } from '@elastic/eui'; -import { PasteJsonText, ModalHeader, ModalBody, ModalFooter } from './paste_json_text'; +import { PasteJsonText, FlyoutHeader, FlyoutBody, FlyoutFooter } from './paste_json_text'; describe('PasteJsonText', () => { const values = { @@ -35,22 +35,22 @@ describe('PasteJsonText', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find(ModalHeader)).toHaveLength(1); - expect(wrapper.find(ModalBody)).toHaveLength(1); - expect(wrapper.find(ModalFooter)).toHaveLength(1); + expect(wrapper.find(FlyoutHeader)).toHaveLength(1); + expect(wrapper.find(FlyoutBody)).toHaveLength(1); + expect(wrapper.find(FlyoutFooter)).toHaveLength(1); }); - describe('ModalHeader', () => { + describe('FlyoutHeader', () => { it('renders', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('h2').text()).toEqual('Create documents'); }); }); - describe('ModalBody', () => { + describe('FlyoutBody', () => { it('renders and updates the textarea value', () => { setMockValues({ ...values, textInput: 'lorem ipsum' }); - const wrapper = shallow(); + const wrapper = shallow(); const textarea = wrapper.find(EuiTextArea); expect(textarea.prop('value')).toEqual('lorem ipsum'); @@ -60,16 +60,16 @@ describe('PasteJsonText', () => { }); }); - describe('ModalFooter', () => { + describe('FlyoutFooter', () => { it('closes the modal', () => { - const wrapper = shallow(); + const wrapper = shallow(); wrapper.find(EuiButtonEmpty).simulate('click'); expect(actions.closeDocumentCreation).toHaveBeenCalled(); }); it('disables/enables the Continue button based on whether text has been entered', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(false); setMockValues({ ...values, textInput: '' }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx index 614704701222b..ad83e0eb1a286 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx @@ -9,10 +9,12 @@ import { useValues, useActions } from 'kea'; import { i18n } from '@kbn/i18n'; import { - EuiModalHeader, - EuiModalHeaderTitle, - EuiModalBody, - EuiModalFooter, + EuiFlyoutHeader, + EuiTitle, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlexGroup, + EuiFlexItem, EuiButton, EuiButtonEmpty, EuiTextArea, @@ -22,34 +24,34 @@ import { import { AppLogic } from '../../../app_logic'; -import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants'; +import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON, FLYOUT_CONTINUE_BUTTON } from '../constants'; import { DocumentCreationLogic } from '../'; import './paste_json_text.scss'; export const PasteJsonText: React.FC = () => ( <> - - - + + + ); -export const ModalHeader: React.FC = () => { +export const FlyoutHeader: React.FC = () => { return ( - - -

+ + +

{i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.title', { defaultMessage: 'Create documents', })}

- - + + ); }; -export const ModalBody: React.FC = () => { +export const FlyoutBody: React.FC = () => { const { configuredLimits } = useValues(AppLogic); const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize; @@ -57,7 +59,7 @@ export const ModalBody: React.FC = () => { const { setTextInput } = useActions(DocumentCreationLogic); return ( - +

{i18n.translate( @@ -82,20 +84,26 @@ export const ModalBody: React.FC = () => { fullWidth rows={12} /> - + ); }; -export const ModalFooter: React.FC = () => { +export const FlyoutFooter: React.FC = () => { const { textInput } = useValues(DocumentCreationLogic); const { closeDocumentCreation } = useActions(DocumentCreationLogic); return ( - - {MODAL_CANCEL_BUTTON} - - {MODAL_CONTINUE_BUTTON} - - + + + + {FLYOUT_CANCEL_BUTTON} + + + + {FLYOUT_CONTINUE_BUTTON} + + + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx index eadcf6df473e5..d02545625345d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx @@ -30,7 +30,7 @@ describe('ShowCreationModes', () => { expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1); }); - it('closes the modal', () => { + it('closes the flyout', () => { wrapper.find(EuiButtonEmpty).simulate('click'); expect(actions.closeDocumentCreation).toHaveBeenCalled(); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx index 1f7c4db83ab06..f923661a57bcc 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx @@ -9,14 +9,14 @@ import { useActions } from 'kea'; import { i18n } from '@kbn/i18n'; import { - EuiModalHeader, - EuiModalHeaderTitle, - EuiModalBody, - EuiModalFooter, + EuiFlyoutHeader, + EuiTitle, + EuiFlyoutBody, + EuiFlyoutFooter, EuiButtonEmpty, } from '@elastic/eui'; -import { MODAL_CANCEL_BUTTON } from '../constants'; +import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON } from '../constants'; import { DocumentCreationLogic, DocumentCreationButtons } from '../'; export const ShowCreationModes: React.FC = () => { @@ -24,22 +24,22 @@ export const ShowCreationModes: React.FC = () => { return ( <> - - -

+ + +

{i18n.translate( 'xpack.enterpriseSearch.appSearch.documentCreation.showCreationModes.title', { defaultMessage: 'Add new documents' } )}

- - - + + + - - - {MODAL_CANCEL_BUTTON} - + + + {FLYOUT_CANCEL_BUTTON} + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx index dae085617cad8..72a245df817ba 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { EuiFilePicker, EuiButtonEmpty, EuiButton } from '@elastic/eui'; -import { UploadJsonFile, ModalHeader, ModalBody, ModalFooter } from './upload_json_file'; +import { UploadJsonFile, FlyoutHeader, FlyoutBody, FlyoutFooter } from './upload_json_file'; describe('UploadJsonFile', () => { const mockFile = new File(['mock'], 'mock.json', { type: 'application/json' }); @@ -41,21 +41,21 @@ describe('UploadJsonFile', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find(ModalHeader)).toHaveLength(1); - expect(wrapper.find(ModalBody)).toHaveLength(1); - expect(wrapper.find(ModalFooter)).toHaveLength(1); + expect(wrapper.find(FlyoutHeader)).toHaveLength(1); + expect(wrapper.find(FlyoutBody)).toHaveLength(1); + expect(wrapper.find(FlyoutFooter)).toHaveLength(1); }); - describe('ModalHeader', () => { + describe('FlyoutHeader', () => { it('renders', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('h2').text()).toEqual('Drag and drop .json'); }); }); - describe('ModalBody', () => { + describe('FlyoutBody', () => { it('updates fileInput when files are added & removed', () => { - const wrapper = shallow(); + const wrapper = shallow(); wrapper.find(EuiFilePicker).simulate('change', [mockFile]); expect(actions.setFileInput).toHaveBeenCalledWith(mockFile); @@ -65,16 +65,16 @@ describe('UploadJsonFile', () => { }); }); - describe('ModalFooter', () => { - it('closes the modal', () => { - const wrapper = shallow(); + describe('FlyoutFooter', () => { + it('closes the flyout', () => { + const wrapper = shallow(); wrapper.find(EuiButtonEmpty).simulate('click'); expect(actions.closeDocumentCreation).toHaveBeenCalled(); }); it('disables/enables the Continue button based on whether files have been uploaded', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(true); setMockValues({ ...values, fineInput: mockFile }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx index d4c005d5cfa2b..6c5b1de79c320 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/upload_json_file.tsx @@ -14,10 +14,12 @@ import { useValues, useActions } from 'kea'; import { i18n } from '@kbn/i18n'; import { - EuiModalHeader, - EuiModalHeaderTitle, - EuiModalBody, - EuiModalFooter, + EuiFlyoutHeader, + EuiTitle, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiFlexGroup, + EuiFlexItem, EuiButton, EuiButtonEmpty, EuiFilePicker, @@ -27,40 +29,40 @@ import { import { AppLogic } from '../../../app_logic'; -import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants'; +import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON, FLYOUT_CONTINUE_BUTTON } from '../constants'; import { DocumentCreationLogic } from '../'; export const UploadJsonFile: React.FC = () => ( <> - - - + + + ); -export const ModalHeader: React.FC = () => { +export const FlyoutHeader: React.FC = () => { return ( - - -

+ + +

{i18n.translate( 'xpack.enterpriseSearch.appSearch.documentCreation.uploadJsonFile.title', { defaultMessage: 'Drag and drop .json' } )}

- - + + ); }; -export const ModalBody: React.FC = () => { +export const FlyoutBody: React.FC = () => { const { configuredLimits } = useValues(AppLogic); const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize; const { setFileInput } = useActions(DocumentCreationLogic); return ( - +

{i18n.translate( @@ -79,20 +81,26 @@ export const ModalBody: React.FC = () => { accept="application/json" fullWidth /> - + ); }; -export const ModalFooter: React.FC = () => { +export const FlyoutFooter: React.FC = () => { const { fileInput } = useValues(DocumentCreationLogic); const { closeDocumentCreation } = useActions(DocumentCreationLogic); return ( - - {MODAL_CANCEL_BUTTON} - - {MODAL_CONTINUE_BUTTON} - - + + + + {FLYOUT_CANCEL_BUTTON} + + + + {FLYOUT_CONTINUE_BUTTON} + + + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx index 8bd473c003eb1..32655c7fbce1e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_buttons.test.tsx @@ -43,7 +43,7 @@ describe('DocumentCreationButtons', () => { expect(wrapper.find(EuiCardTo).prop('isDisabled')).toEqual(true); }); - it('opens the DocumentCreationModal on click', () => { + it('opens the DocumentCreationFlyout on click', () => { const wrapper = shallow(); wrapper.find(EuiCard).at(0).simulate('click'); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx similarity index 77% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx index a0bca62dc7419..f2799cde41e97 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.test.tsx @@ -8,7 +8,7 @@ import { setMockValues, setMockActions } from '../../../__mocks__/kea.mock'; import React from 'react'; import { shallow } from 'enzyme'; -import { EuiModal } from '@elastic/eui'; +import { EuiFlyout } from '@elastic/eui'; import { ShowCreationModes, @@ -18,9 +18,9 @@ import { } from './creation_mode_components'; import { DocumentCreationStep } from './types'; -import { DocumentCreationModal, ModalContent } from './document_creation_modal'; +import { DocumentCreationFlyout, FlyoutContent } from './document_creation_flyout'; -describe('DocumentCreationModal', () => { +describe('DocumentCreationFlyout', () => { const values = { isDocumentCreationOpen: true, creationMode: 'text', @@ -36,25 +36,25 @@ describe('DocumentCreationModal', () => { setMockActions(actions); }); - it('renders a closeable modal', () => { - const wrapper = shallow(); - expect(wrapper.find(EuiModal)).toHaveLength(1); + it('renders a closeable flyout', () => { + const wrapper = shallow(); + expect(wrapper.find(EuiFlyout)).toHaveLength(1); - wrapper.find(EuiModal).prop('onClose')(); + wrapper.find(EuiFlyout).prop('onClose')(); expect(actions.closeDocumentCreation).toHaveBeenCalled(); }); it('does not render if isDocumentCreationOpen is false', () => { setMockValues({ ...values, isDocumentCreationOpen: false }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.isEmptyRender()).toBe(true); }); - describe('ModalContent', () => { + describe('FlyoutContent', () => { it('renders ShowCreationModes', () => { setMockValues({ ...values, creationStep: DocumentCreationStep.ShowCreationModes }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(ShowCreationModes)).toHaveLength(1); }); @@ -62,21 +62,21 @@ describe('DocumentCreationModal', () => { describe('creation modes', () => { it('renders ApiCodeExample', () => { setMockValues({ ...values, creationMode: 'api' }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(ApiCodeExample)).toHaveLength(1); }); it('renders PasteJsonText', () => { setMockValues({ ...values, creationMode: 'text' }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(PasteJsonText)).toHaveLength(1); }); it('renders UploadJsonFile', () => { setMockValues({ ...values, creationMode: 'file' }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find(UploadJsonFile)).toHaveLength(1); }); @@ -85,21 +85,21 @@ describe('DocumentCreationModal', () => { describe('creation steps', () => { it('renders an error page', () => { setMockValues({ ...values, creationStep: DocumentCreationStep.ShowError }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.text()).toBe('DocumentCreationError'); // TODO: actual component }); it('renders an error summary', () => { setMockValues({ ...values, creationStep: DocumentCreationStep.ShowErrorSummary }); - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component }); it('renders a success summary', () => { setMockValues({ ...values, creationStep: DocumentCreationStep.ShowSuccessSummary }); - const wrapper = shallow(); + const wrapper = shallow(); // TODO: Figure out if the error and success summary should remain the same vs different components expect(wrapper.text()).toBe('DocumentCreationSummary'); // TODO: actual component diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx similarity index 78% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx rename to x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx index e6662a7c30407..ca52d14befb38 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_modal.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_flyout.tsx @@ -7,10 +7,11 @@ import React from 'react'; import { useValues, useActions } from 'kea'; -import { EuiOverlayMask, EuiModal } from '@elastic/eui'; +import { EuiPortal, EuiFlyout } from '@elastic/eui'; import { DocumentCreationLogic } from './'; import { DocumentCreationStep } from './types'; +import { FLYOUT_ARIA_LABEL_ID } from './constants'; import { ShowCreationModes, @@ -19,20 +20,20 @@ import { UploadJsonFile, } from './creation_mode_components'; -export const DocumentCreationModal: React.FC = () => { +export const DocumentCreationFlyout: React.FC = () => { const { closeDocumentCreation } = useActions(DocumentCreationLogic); const { isDocumentCreationOpen } = useValues(DocumentCreationLogic); return isDocumentCreationOpen ? ( - - - - - + + + + + ) : null; }; -export const ModalContent: React.FC = () => { +export const FlyoutContent: React.FC = () => { const { creationStep, creationMode } = useValues(DocumentCreationLogic); switch (creationStep) { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts index a5e015391d8fd..5b85e7f2ab54e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/document_creation_logic.ts @@ -30,7 +30,7 @@ interface DocumentCreationActions { export const DocumentCreationLogic = kea< MakeLogicType >({ - path: ['enterprise_search', 'app_search', 'document_creation_modal_logic'], + path: ['enterprise_search', 'app_search', 'document_creation_logic'], actions: () => ({ showCreationModes: () => null, openDocumentCreation: (creationMode) => ({ creationMode }), diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts index 0f4eaaeda0e1a..d443b02393c05 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/index.ts @@ -5,5 +5,5 @@ */ export { DocumentCreationButtons } from './document_creation_buttons'; -export { DocumentCreationModal } from './document_creation_modal'; +export { DocumentCreationFlyout } from './document_creation_flyout'; export { DocumentCreationLogic } from './document_creation_logic'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx index 17e6e2538f044..52fa0d03a9719 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.test.tsx @@ -10,7 +10,7 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import { EuiButton } from '@elastic/eui'; -import { DocumentCreationModal } from '../document_creation'; +import { DocumentCreationFlyout } from '../document_creation'; import { DocumentCreationButton } from './document_creation_button'; describe('DocumentCreationButton', () => { @@ -24,7 +24,7 @@ describe('DocumentCreationButton', () => { it('renders', () => { expect(wrapper.find(EuiButton).length).toEqual(1); - expect(wrapper.find(DocumentCreationModal).length).toEqual(1); + expect(wrapper.find(DocumentCreationFlyout).length).toEqual(1); }); it('opens the document creation modes modal on click', () => { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx index 6d211cf45ca9f..3e4039bafcac7 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_creation_button.tsx @@ -10,7 +10,7 @@ import { useActions } from 'kea'; import { i18n } from '@kbn/i18n'; import { EuiButton } from '@elastic/eui'; -import { DocumentCreationLogic, DocumentCreationModal } from '../document_creation'; +import { DocumentCreationLogic, DocumentCreationFlyout } from '../document_creation'; export const DocumentCreationButton: React.FC = () => { const { showCreationModes } = useActions(DocumentCreationLogic); @@ -27,7 +27,7 @@ export const DocumentCreationButton: React.FC = () => { defaultMessage: 'Index documents', })} - + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx index ad7874c01655b..6c46c849c79bc 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.test.tsx @@ -10,7 +10,7 @@ import { EuiButton } from '@elastic/eui'; import { CURRENT_MAJOR_VERSION } from '../../../../../common/version'; -import { DocumentCreationButtons, DocumentCreationModal } from '../document_creation'; +import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation'; import { EmptyEngineOverview } from './engine_overview_empty'; describe('EmptyEngineOverview', () => { @@ -32,6 +32,6 @@ describe('EmptyEngineOverview', () => { it('renders document creation components', () => { expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1); - expect(wrapper.find(DocumentCreationModal)).toHaveLength(1); + expect(wrapper.find(DocumentCreationFlyout)).toHaveLength(1); }); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx index d65ca4868d282..83dd396e5e080 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_overview_empty.tsx @@ -16,7 +16,7 @@ import { } from '@elastic/eui'; import { DOCS_PREFIX } from '../../routes'; -import { DocumentCreationButtons, DocumentCreationModal } from '../document_creation'; +import { DocumentCreationButtons, DocumentCreationFlyout } from '../document_creation'; export const EmptyEngineOverview: React.FC = () => { return ( @@ -42,7 +42,7 @@ export const EmptyEngineOverview: React.FC = () => { - + );