From 39c7d795a21bc1460091fe422b08ca735d85527e Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Mon, 28 Sep 2020 11:14:15 -0400 Subject: [PATCH] move reset functionality to flyout --- .../__jest__/test_pipeline.helpers.tsx | 6 +- .../__jest__/test_pipeline.test.tsx | 9 +- .../test_pipeline/add_documents_button.tsx | 2 +- .../documents_dropdown/documents_dropdown.tsx | 159 +++++------ .../test_pipeline/test_output_button.tsx | 2 +- .../test_pipeline/test_pipeline_actions.tsx | 9 +- .../test_pipeline_flyout.container.tsx | 11 +- .../test_pipeline/test_pipeline_flyout.tsx | 10 +- .../documents_schema.tsx | 111 -------- .../tab_documents.tsx | 134 ---------- .../index.ts | 0 .../tab_documents}/add_document_form.tsx | 6 +- .../add_documents_accordion.scss | 0 .../add_documents_accordion.tsx | 15 +- .../add_documents_accordion/index.ts | 0 .../test_pipeline_tabs/tab_documents/index.ts | 7 + .../tab_documents}/reset_documents_modal.tsx | 12 +- .../tab_documents/tab_documents.scss | 11 + .../tab_documents/tab_documents.tsx | 251 ++++++++++++++++++ .../tab_output.tsx | 0 .../test_pipeline_tabs.tsx | 0 21 files changed, 375 insertions(+), 380 deletions(-) delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/documents_schema.tsx delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_documents.tsx rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs}/index.ts (100%) rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs/tab_documents}/add_document_form.tsx (97%) rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs/tab_documents}/add_documents_accordion/add_documents_accordion.scss (100%) rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs/tab_documents}/add_documents_accordion/add_documents_accordion.tsx (88%) rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs/tab_documents}/add_documents_accordion/index.ts (100%) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/index.ts rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{documents_dropdown => test_pipeline_tabs/tab_documents}/reset_documents_modal.tsx (86%) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.scss create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.tsx rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs}/tab_output.tsx (100%) rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/{test_pipeline_flyout_tabs => test_pipeline_tabs}/test_pipeline_tabs.tsx (100%) diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx index 66bce628d1927d..7f1b203869c70d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx @@ -193,9 +193,9 @@ const createActions = (testBed: TestBed) => { component.update(); }, - clickResetButton() { + clickClearAllButton() { act(() => { - find('resetButton').simulate('click'); + find('clearAllDocumentsButton').simulate('click'); }); component.update(); }, @@ -285,7 +285,7 @@ type TestSubject = | 'outputTab' | 'processorOutputTabContent' | 'editDocumentsButton' - | 'resetButton' + | 'clearAllDocumentsButton' | 'addDocumentsAccordion' | 'addDocumentButton' | 'addDocumentError' diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx index b6bb92ce43c995..69a1b7c2c126d5 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx @@ -290,7 +290,7 @@ describe('Test pipeline', () => { expect(exists('documentsTabContent')).toBe(true); }); - it('should reset documents and stop pipeline simulation', async () => { + it('should clear all documents and stop pipeline simulation', async () => { const { exists, actions, find } = testBed; // Dropdown should be visible and processor status should equal "success" @@ -300,9 +300,10 @@ describe('Test pipeline', () => { ]; expect(initialProcessorStatusLabel).toEqual('Success'); - // Open dropdown and click "reset" button + // Open flyout and click clear all button actions.clickDocumentsDropdown(); - actions.clickResetButton(); + actions.clickEditDocumentsButton(); + actions.clickClearAllButton(); // Verify modal const modal = document.body.querySelector( @@ -310,7 +311,7 @@ describe('Test pipeline', () => { ); expect(modal).not.toBe(null); - expect(modal!.textContent).toContain('Reset'); + expect(modal!.textContent).toContain('Clear documents'); // Confirm reset and close modal await actions.clickConfirmResetButton(); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx index 26492454cbcf5d..1a8f1258404e76 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; import React, { FunctionComponent } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; -import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs'; +import { TestPipelineFlyoutTab } from './test_pipeline_tabs'; const i18nTexts = { buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.buttonLabel', { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx index a61ffdf616f8d7..ba00f74fbc7565 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx @@ -19,9 +19,7 @@ import { import { Document } from '../../../types'; -import { TestPipelineFlyoutTab } from '../test_pipeline_flyout_tabs'; - -import { ResetDocumentsModal } from './reset_documents_modal'; +import { TestPipelineFlyoutTab } from '../test_pipeline_tabs'; import './documents_dropdown.scss'; @@ -57,18 +55,15 @@ interface Props { selectedDocumentIndex: number; updateSelectedDocument: (index: number) => void; openFlyout: (activeFlyoutTab: TestPipelineFlyoutTab) => void; - stopPipelineSimulation: () => void; } export const DocumentsDropdown: FunctionComponent = ({ documents, selectedDocumentIndex, updateSelectedDocument, - stopPipelineSimulation, openFlyout, }) => { const [showPopover, setShowPopover] = useState(false); - const [showResetModal, setShowResetModal] = useState(false); const managePipelineButton = ( = ({ ); return ( - <> - setShowPopover(false)} - button={managePipelineButton} - panelPaddingSize="none" - withTitle - repositionOnScroll - data-test-subj="documentsDropdown" - panelClassName="documentsDropdownPanel" + setShowPopover(false)} + button={managePipelineButton} + panelPaddingSize="none" + withTitle + repositionOnScroll + data-test-subj="documentsDropdown" + panelClassName="documentsDropdownPanel" + > + ({ + key: index.toString(), + 'data-test-subj': 'documentListItem', + checked: selectedDocumentIndex === index ? 'on' : undefined, + label: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.documentLabel', { + defaultMessage: 'Document {documentNumber}', + values: { + documentNumber: index + 1, + }, + }), + }))} + onChange={(newOptions) => { + const selectedOption = newOptions.find((option) => option.checked === 'on'); + if (selectedOption) { + updateSelectedDocument(Number(selectedOption.key!)); + } + + setShowPopover(false); + }} > - ({ - key: index.toString(), - 'data-test-subj': 'documentListItem', - checked: selectedDocumentIndex === index ? 'on' : undefined, - label: i18n.translate( - 'xpack.ingestPipelines.pipelineEditor.testPipeline.documentLabel', - { - defaultMessage: 'Document {documentNumber}', - values: { - documentNumber: index + 1, - }, - } - ), - }))} - onChange={(newOptions) => { - const selectedOption = newOptions.find((option) => option.checked === 'on'); - if (selectedOption) { - updateSelectedDocument(Number(selectedOption.key!)); - } - - setShowPopover(false); - }} - > - {(list) => ( - <> - {i18nTexts.popoverTitle} - {list} - - )} - - - - - - - - - { - openFlyout('documents'); - setShowPopover(false); - }} - data-test-subj="editDocumentsButton" - > - {i18nTexts.addDocumentsButtonLabel} - - - - - - - - - { - setShowResetModal(true); - setShowPopover(false); - }} - data-test-subj="resetButton" - > - {i18nTexts.resetButtonLabel} - - - - - - - - {showResetModal && ( - setShowResetModal(false)} - /> - )} - + {(list) => ( + <> + {i18nTexts.popoverTitle} + {list} + + )} + + + + + + + + + { + openFlyout('documents'); + setShowPopover(false); + }} + data-test-subj="editDocumentsButton" + > + {i18nTexts.addDocumentsButtonLabel} + + + + + + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx index 90180422295904..d2fc9c51be6994 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; import React, { FunctionComponent } from 'react'; import { EuiButton } from '@elastic/eui'; -import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs'; +import { TestPipelineFlyoutTab } from './test_pipeline_tabs'; const i18nTexts = { buttonLabel: i18n.translate( diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx index a03eae4f76af94..534a8babdd8839 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import { useTestPipelineContext, usePipelineProcessorsContext } from '../../context'; import { DocumentsDropdown } from './documents_dropdown'; -import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs'; +import { TestPipelineFlyoutTab } from './test_pipeline_tabs'; import { AddDocumentsButton } from './add_documents_button'; import { TestOutputButton } from './test_output_button'; import { TestPipelineFlyout } from './test_pipeline_flyout.container'; @@ -49,12 +49,6 @@ export const TestPipelineActions: FunctionComponent = () => { }); }; - const stopPipelineSimulation = () => { - setCurrentTestPipelineData({ - type: 'reset', - }); - }; - const openFlyout = (activeTab: TestPipelineFlyoutTab) => { setOpenTestPipelineFlyout(true); setActiveFlyoutTab(activeTab); @@ -77,7 +71,6 @@ export const TestPipelineActions: FunctionComponent = () => { documents={documents} selectedDocumentIndex={selectedDocumentIndex} updateSelectedDocument={updateSelectedDocument} - stopPipelineSimulation={stopPipelineSimulation} openFlyout={openFlyout} /> ) : ( diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx index 23dda55db41f81..840d8d7e812d36 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx @@ -15,8 +15,7 @@ import { Document } from '../../types'; import { useIsMounted } from '../../use_is_mounted'; import { TestPipelineFlyout as ViewComponent } from './test_pipeline_flyout'; -import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs'; -import { documentsSchema } from './test_pipeline_flyout_tabs/documents_schema'; +import { TestPipelineFlyoutTab } from './test_pipeline_tabs'; export interface Props { activeTab: TestPipelineFlyoutTab; @@ -48,7 +47,6 @@ export const TestPipelineFlyout: React.FunctionComponent = ({ } = testPipelineData; const { form } = useForm({ - schema: documentsSchema, defaultValue: { documents: cachedDocuments || '', }, @@ -157,6 +155,12 @@ export const TestPipelineFlyout: React.FunctionComponent = ({ } }; + const resetTestOutput = () => { + setCurrentTestPipelineData({ + type: 'reset', + }); + }; + useEffect(() => { if (cachedDocuments && activeTab === 'output') { handleTestPipeline({ documents: cachedDocuments, verbose: cachedVerbose }, true); @@ -169,6 +173,7 @@ export const TestPipelineFlyout: React.FunctionComponent = ({ return ( void; handleTestPipeline: ( @@ -31,11 +30,14 @@ export interface Props { cachedVerbose?: boolean; cachedDocuments?: Document[]; testOutput?: any; - form: FormHook; + form: FormHook<{ + documents: string | Document[]; + }>; validateAndTestPipeline: () => Promise; selectedTab: TestPipelineFlyoutTab; setSelectedTab: (selectedTa: TestPipelineFlyoutTab) => void; testingError: any; + resetTestOutput: () => void; } export interface TestPipelineConfig { @@ -45,6 +47,7 @@ export interface TestPipelineConfig { export const TestPipelineFlyout: React.FunctionComponent = ({ handleTestPipeline, + resetTestOutput, isRunningTest, cachedVerbose, cachedDocuments, @@ -75,6 +78,7 @@ export const TestPipelineFlyout: React.FunctionComponent = ({ form={form} validateAndTestPipeline={validateAndTestPipeline} isRunningTest={isRunningTest} + resetTestOutput={resetTestOutput} /> ); } diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/documents_schema.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/documents_schema.tsx deleted file mode 100644 index d0e0596375cb22..00000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/documents_schema.tsx +++ /dev/null @@ -1,111 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ -import React from 'react'; - -import { FormattedMessage } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; -import { EuiCode } from '@elastic/eui'; - -import { FormSchema, fieldValidators, ValidationFuncArg } from '../../../../../../shared_imports'; -import { parseJson, stringifyJson } from '../../../../../lib'; - -const { emptyField, isJsonField } = fieldValidators; - -export const documentsSchema: FormSchema = { - documents: { - label: i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.documentsFieldLabel', - { - defaultMessage: 'Documents', - } - ), - helpText: ( - - {JSON.stringify([ - { - _index: 'index', - _id: 'id', - _source: { - foo: 'bar', - }, - }, - ])} - - ), - }} - /> - ), - serializer: parseJson, - deserializer: stringifyJson, - validations: [ - { - validator: emptyField( - i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.noDocumentsError', - { - defaultMessage: 'Documents are required.', - } - ) - ), - }, - { - validator: isJsonField( - i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.documentsJsonError', - { - defaultMessage: 'The documents JSON is not valid.', - } - ) - ), - }, - { - validator: ({ value }: ValidationFuncArg) => { - const parsedJSON = JSON.parse(value); - - if (!parsedJSON.length) { - return { - message: i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.oneDocumentRequiredError', - { - defaultMessage: 'At least one document is required.', - } - ), - }; - } - }, - }, - { - validator: ({ value }: ValidationFuncArg) => { - const parsedJSON = JSON.parse(value); - - const isMissingSourceField = parsedJSON.find((document: { _source?: object }) => { - if (!document._source) { - return true; - } - - return false; - }); - - if (isMissingSourceField) { - return { - message: i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.sourceFieldRequiredError', - { - defaultMessage: 'Documents require a _source field.', - } - ), - }; - } - }, - }, - ], - }, -}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_documents.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_documents.tsx deleted file mode 100644 index 6fd340054d2a4d..00000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_documents.tsx +++ /dev/null @@ -1,134 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { FunctionComponent, useCallback } from 'react'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; - -import { EuiSpacer, EuiText, EuiButton, EuiLink } from '@elastic/eui'; - -import { - getUseField, - Field, - JsonEditorField, - useKibana, - useFormData, - FormHook, - Form, -} from '../../../../../../shared_imports'; - -import { AddDocumentsAccordion } from './add_documents_accordion'; - -const UseField = getUseField({ component: Field }); - -interface Props { - validateAndTestPipeline: () => Promise; - isRunningTest: boolean; - form: FormHook; -} - -export const DocumentsTab: FunctionComponent = ({ - validateAndTestPipeline, - isRunningTest, - form, -}) => { - const { services } = useKibana(); - - const [, formatData] = useFormData({ form }); - - const onAddDocumentHandler = useCallback( - (document) => { - const { documents: existingDocuments = [] } = formatData(); - - form.reset({ defaultValue: { documents: [...existingDocuments, document] } }); - }, - [form, formatData] - ); - - return ( -
-
- -

- - {i18n.translate( - 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.simulateDocumentionLink', - { - defaultMessage: 'Learn more.', - } - )} - - ), - }} - /> -

- - - - - - - - - {/* Documents editor */} - - - - - - {isRunningTest ? ( - - ) : ( - - )} - -
-
- ); -}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/index.ts similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/index.ts rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/index.ts diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_document_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_document_form.tsx similarity index 97% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_document_form.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_document_form.tsx index 340cf1af92300f..7bb860facfeb29 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_document_form.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_document_form.tsx @@ -25,9 +25,9 @@ import { TextField, fieldValidators, FieldConfig, -} from '../../../../../../shared_imports'; -import { useIsMounted } from '../../../use_is_mounted'; -import { Document } from '../../../types'; +} from '../../../../../../../shared_imports'; +import { useIsMounted } from '../../../../use_is_mounted'; +import { Document } from '../../../../types'; const UseField = getUseField({ component: Field }); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/add_documents_accordion.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/add_documents_accordion.scss similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/add_documents_accordion.scss rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/add_documents_accordion.scss diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/add_documents_accordion.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/add_documents_accordion.tsx similarity index 88% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/add_documents_accordion.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/add_documents_accordion.tsx index 88ced6e9e94dd0..c425a41fe6ee95 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/add_documents_accordion.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/add_documents_accordion.tsx @@ -11,8 +11,8 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiAccordion, EuiText, EuiSpacer, EuiLink } from '@elastic/eui'; import { UrlGeneratorsDefinition } from 'src/plugins/share/public'; -import { useKibana } from '../../../../../../../shared_imports'; -import { useIsMounted } from '../../../../use_is_mounted'; +import { useKibana } from '../../../../../../../../shared_imports'; +import { useIsMounted } from '../../../../../use_is_mounted'; import { AddDocumentForm } from '../add_document_form'; import './add_documents_accordion.scss'; @@ -26,6 +26,12 @@ const i18nTexts = { defaultMessage: 'Add documents from index', } ), + addDocumentsDescription: i18n.translate( + 'xpack.ingestPipelines.pipelineEditor.addDocumentsAccordion.contentDescriptionText', + { + defaultMessage: 'Provide the index name and document ID of the indexed document to test.', + } + ), }; interface Props { @@ -79,10 +85,7 @@ export const AddDocumentsAccordion: FunctionComponent = ({ onAddDocuments

- + {i18nTexts.addDocumentsDescription} {discoverLink && ( <> {' '} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/index.ts similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/add_documents_accordion/index.ts rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/add_documents_accordion/index.ts diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/index.ts new file mode 100644 index 00000000000000..1c3b6df577f4dd --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { DocumentsTab } from './tab_documents'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/reset_documents_modal.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/reset_documents_modal.tsx similarity index 86% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/reset_documents_modal.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/reset_documents_modal.tsx index 8860fc7d50dc52..d3f969c5ebb232 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/reset_documents_modal.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/reset_documents_modal.tsx @@ -8,7 +8,7 @@ import React, { FunctionComponent } from 'react'; import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui'; interface Props { - stopPipelineSimulation: () => void; + confirmResetTestOutput: () => void; closeModal: () => void; } @@ -16,13 +16,13 @@ const i18nTexts = { modalTitle: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.testPipeline.resetDocumentsModal.title', { - defaultMessage: 'Reset', + defaultMessage: 'Clear documents', } ), modalDescription: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.testPipeline.resetDocumentsModal.description', { - defaultMessage: 'Reset documents and stop pipeline simulation.', + defaultMessage: 'This will stop pipeline simulation.', } ), cancelButtonLabel: i18n.translate( @@ -34,13 +34,13 @@ const i18nTexts = { resetButtonLabel: i18n.translate( 'xpack.ingestPipelines.pipelineEditor.testPipeline.resetDocumentsModal.resetButtonLabel', { - defaultMessage: 'Reset', + defaultMessage: 'Clear documents', } ), }; export const ResetDocumentsModal: FunctionComponent = ({ - stopPipelineSimulation, + confirmResetTestOutput, closeModal, }) => { return ( @@ -50,7 +50,7 @@ export const ResetDocumentsModal: FunctionComponent = ({ data-test-subj="resetDocumentsConfirmationModal" title={i18nTexts.modalTitle} onCancel={closeModal} - onConfirm={stopPipelineSimulation} + onConfirm={confirmResetTestOutput} cancelButtonText={i18nTexts.cancelButtonLabel} confirmButtonText={i18nTexts.resetButtonLabel} > diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.scss new file mode 100644 index 00000000000000..c07f58d280e2a2 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.scss @@ -0,0 +1,11 @@ +.documentsTab { + &__documentField { + position: relative; + + &__button { + position: absolute; + right: 0; + top: 0; + } + } +} diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.tsx new file mode 100644 index 00000000000000..ae784472ebbd9f --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_documents/tab_documents.tsx @@ -0,0 +1,251 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent, useCallback, useState } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import { EuiSpacer, EuiText, EuiButton, EuiLink, EuiCode, EuiButtonEmpty } from '@elastic/eui'; + +import { parseJson, stringifyJson } from '../../../../../../lib'; +import { + getUseField, + Field, + JsonEditorField, + useKibana, + FieldConfig, + fieldValidators, + ValidationFuncArg, + FormHook, + Form, + useFormData, +} from '../../../../../../../shared_imports'; +import { Document } from '../../../../types'; +import { AddDocumentsAccordion } from './add_documents_accordion'; +import { ResetDocumentsModal } from './reset_documents_modal'; + +import './tab_documents.scss'; + +const UseField = getUseField({ component: Field }); + +const { emptyField, isJsonField } = fieldValidators; + +interface Props { + validateAndTestPipeline: () => Promise; + resetTestOutput: () => void; + isRunningTest: boolean; + form: FormHook<{ + documents: string | Document[]; + }>; +} + +const i18nTexts = { + learnMoreLink: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.simulateDocumentionLink', + { + defaultMessage: 'Learn more.', + } + ), + documentsEditorAriaLabel: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.editorFieldAriaLabel', + { + defaultMessage: 'Documents JSON editor', + } + ), + documentsEditorClearAllButton: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.editorFieldClearAllButtonLabel', + { + defaultMessage: 'Clear all', + } + ), + runButton: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.runButtonLabel', + { + defaultMessage: 'Run the pipeline', + } + ), + runningButton: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsTab.runningButtonLabel', + { + defaultMessage: 'Running', + } + ), +}; + +const documentFieldConfig: FieldConfig = { + label: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.documentsFieldLabel', + { + defaultMessage: 'Documents', + } + ), + helpText: ( + + {JSON.stringify([ + { + _index: 'index', + _id: 'id', + _source: { + foo: 'bar', + }, + }, + ])} + + ), + }} + /> + ), + serializer: parseJson, + deserializer: stringifyJson, + validations: [ + { + validator: emptyField( + i18n.translate('xpack.ingestPipelines.testPipelineFlyout.documentsForm.noDocumentsError', { + defaultMessage: 'Documents are required.', + }) + ), + }, + { + validator: isJsonField( + i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.documentsJsonError', + { + defaultMessage: 'The documents JSON is not valid.', + } + ) + ), + }, + { + validator: ({ value }: ValidationFuncArg) => { + const parsedJSON = JSON.parse(value); + + if (!parsedJSON.length) { + return { + message: i18n.translate( + 'xpack.ingestPipelines.testPipelineFlyout.documentsForm.oneDocumentRequiredError', + { + defaultMessage: 'At least one document is required.', + } + ), + }; + } + }, + }, + ], +}; + +export const DocumentsTab: FunctionComponent = ({ + validateAndTestPipeline, + isRunningTest, + form, + resetTestOutput, +}) => { + const { services } = useKibana(); + + const [, formatData] = useFormData({ form }); + + const onAddDocumentHandler = useCallback( + (document) => { + const { documents: existingDocuments = [] } = formatData(); + + form.reset({ defaultValue: { documents: [...existingDocuments, document] } }); + }, + [form, formatData] + ); + + const [showResetModal, setShowResetModal] = useState(false); + + return ( +

+
+ +

+ + {i18nTexts.learnMoreLink} + + ), + }} + /> +

+ + + + + + + + + {/* Documents editor */} + + {(field) => ( +
+ setShowResetModal(true)} + data-test-subj="clearAllDocumentsButton" + className="documentsTab__documentField__button" + > + {i18nTexts.documentsEditorClearAllButton} + + +
+ )} + + + + + + {isRunningTest ? i18nTexts.runningButton : i18nTexts.runButton} + + + {showResetModal && ( + { + resetTestOutput(); + form.reset({ defaultValue: { documents: [] } }); + setShowResetModal(false); + }} + closeModal={() => setShowResetModal(false)} + /> + )} +
+
+ ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_output.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_output.tsx similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/tab_output.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/tab_output.tsx diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/test_pipeline_tabs.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/test_pipeline_tabs.tsx similarity index 100% rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout_tabs/test_pipeline_tabs.tsx rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_tabs/test_pipeline_tabs.tsx