Skip to content

Commit 39c7d79

Browse files
alisonelizabethalisonelizabeth
committed
move reset functionality to flyout
1 parent 87ab6db commit 39c7d79

File tree

21 files changed

+375
-380
lines changed

21 files changed

+375
-380
lines changed

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -193,9 +193,9 @@ const createActions = (testBed: TestBed<TestSubject>) => {
193193
component.update();
194194
},
195195

196-
clickResetButton() {
196+
clickClearAllButton() {
197197
act(() => {
198-
find('resetButton').simulate('click');
198+
find('clearAllDocumentsButton').simulate('click');
199199
});
200200
component.update();
201201
},
@@ -285,7 +285,7 @@ type TestSubject =
285285
| 'outputTab'
286286
| 'processorOutputTabContent'
287287
| 'editDocumentsButton'
288-
| 'resetButton'
288+
| 'clearAllDocumentsButton'
289289
| 'addDocumentsAccordion'
290290
| 'addDocumentButton'
291291
| 'addDocumentError'

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ describe('Test pipeline', () => {
290290
expect(exists('documentsTabContent')).toBe(true);
291291
});
292292

293-
it('should reset documents and stop pipeline simulation', async () => {
293+
it('should clear all documents and stop pipeline simulation', async () => {
294294
const { exists, actions, find } = testBed;
295295

296296
// Dropdown should be visible and processor status should equal "success"
@@ -300,17 +300,18 @@ describe('Test pipeline', () => {
300300
];
301301
expect(initialProcessorStatusLabel).toEqual('Success');
302302

303-
// Open dropdown and click "reset" button
303+
// Open flyout and click clear all button
304304
actions.clickDocumentsDropdown();
305-
actions.clickResetButton();
305+
actions.clickEditDocumentsButton();
306+
actions.clickClearAllButton();
306307

307308
// Verify modal
308309
const modal = document.body.querySelector(
309310
'[data-test-subj="resetDocumentsConfirmationModal"]'
310311
);
311312

312313
expect(modal).not.toBe(null);
313-
expect(modal!.textContent).toContain('Reset');
314+
expect(modal!.textContent).toContain('Clear documents');
314315

315316
// Confirm reset and close modal
316317
await actions.clickConfirmResetButton();

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { i18n } from '@kbn/i18n';
77
import React, { FunctionComponent } from 'react';
88
import { EuiButtonEmpty } from '@elastic/eui';
9-
import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
9+
import { TestPipelineFlyoutTab } from './test_pipeline_tabs';
1010

1111
const i18nTexts = {
1212
buttonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.buttonLabel', {

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx‎

Lines changed: 62 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@ import {
1919

2020
import { Document } from '../../../types';
2121

22-
import { TestPipelineFlyoutTab } from '../test_pipeline_flyout_tabs';
23-
24-
import { ResetDocumentsModal } from './reset_documents_modal';
22+
import { TestPipelineFlyoutTab } from '../test_pipeline_tabs';
2523

2624
import './documents_dropdown.scss';
2725

@@ -57,18 +55,15 @@ interface Props {
5755
selectedDocumentIndex: number;
5856
updateSelectedDocument: (index: number) => void;
5957
openFlyout: (activeFlyoutTab: TestPipelineFlyoutTab) => void;
60-
stopPipelineSimulation: () => void;
6158
}
6259

6360
export const DocumentsDropdown: FunctionComponent<Props> = ({
6461
documents,
6562
selectedDocumentIndex,
6663
updateSelectedDocument,
67-
stopPipelineSimulation,
6864
openFlyout,
6965
}) => {
7066
const [showPopover, setShowPopover] = useState<boolean>(false);
71-
const [showResetModal, setShowResetModal] = useState<boolean>(false);
7267

7368
const managePipelineButton = (
7469
<EuiButtonEmpty
@@ -87,97 +82,67 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
8782
);
8883

8984
return (
90-
<>
91-
<EuiPopover
92-
isOpen={showPopover}
93-
closePopover={() => setShowPopover(false)}
94-
button={managePipelineButton}
95-
panelPaddingSize="none"
96-
withTitle
97-
repositionOnScroll
98-
data-test-subj="documentsDropdown"
99-
panelClassName="documentsDropdownPanel"
85+
<EuiPopover
86+
isOpen={showPopover}
87+
closePopover={() => setShowPopover(false)}
88+
button={managePipelineButton}
89+
panelPaddingSize="none"
90+
withTitle
91+
repositionOnScroll
92+
data-test-subj="documentsDropdown"
93+
panelClassName="documentsDropdownPanel"
94+
>
95+
<EuiSelectable
96+
singleSelection
97+
data-test-subj="documentList"
98+
options={documents.map((doc, index) => ({
99+
key: index.toString(),
100+
'data-test-subj': 'documentListItem',
101+
checked: selectedDocumentIndex === index ? 'on' : undefined,
102+
label: i18n.translate('xpack.ingestPipelines.pipelineEditor.testPipeline.documentLabel', {
103+
defaultMessage: 'Document {documentNumber}',
104+
values: {
105+
documentNumber: index + 1,
106+
},
107+
}),
108+
}))}
109+
onChange={(newOptions) => {
110+
const selectedOption = newOptions.find((option) => option.checked === 'on');
111+
if (selectedOption) {
112+
updateSelectedDocument(Number(selectedOption.key!));
113+
}
114+
115+
setShowPopover(false);
116+
}}
100117
>
101-
<EuiSelectable
102-
singleSelection
103-
data-test-subj="documentList"
104-
options={documents.map((doc, index) => ({
105-
key: index.toString(),
106-
'data-test-subj': 'documentListItem',
107-
checked: selectedDocumentIndex === index ? 'on' : undefined,
108-
label: i18n.translate(
109-
'xpack.ingestPipelines.pipelineEditor.testPipeline.documentLabel',
110-
{
111-
defaultMessage: 'Document {documentNumber}',
112-
values: {
113-
documentNumber: index + 1,
114-
},
115-
}
116-
),
117-
}))}
118-
onChange={(newOptions) => {
119-
const selectedOption = newOptions.find((option) => option.checked === 'on');
120-
if (selectedOption) {
121-
updateSelectedDocument(Number(selectedOption.key!));
122-
}
123-
124-
setShowPopover(false);
125-
}}
126-
>
127-
{(list) => (
128-
<>
129-
<EuiPopoverTitle>{i18nTexts.popoverTitle}</EuiPopoverTitle>
130-
{list}
131-
</>
132-
)}
133-
</EuiSelectable>
134-
135-
<EuiHorizontalRule margin="xs" />
136-
137-
<EuiSpacer size="s" />
138-
139-
<EuiFlexGroup justifyContent="center" gutterSize="xs">
140-
<EuiFlexItem grow={false}>
141-
<EuiButton
142-
size="s"
143-
onClick={() => {
144-
openFlyout('documents');
145-
setShowPopover(false);
146-
}}
147-
data-test-subj="editDocumentsButton"
148-
>
149-
{i18nTexts.addDocumentsButtonLabel}
150-
</EuiButton>
151-
</EuiFlexItem>
152-
</EuiFlexGroup>
153-
154-
<EuiSpacer size="s" />
155-
156-
<EuiFlexGroup justifyContent="center" gutterSize="s">
157-
<EuiFlexItem grow={false}>
158-
<EuiButtonEmpty
159-
size="s"
160-
color="danger"
161-
onClick={() => {
162-
setShowResetModal(true);
163-
setShowPopover(false);
164-
}}
165-
data-test-subj="resetButton"
166-
>
167-
{i18nTexts.resetButtonLabel}
168-
</EuiButtonEmpty>
169-
</EuiFlexItem>
170-
</EuiFlexGroup>
171-
172-
<EuiSpacer size="s" />
173-
</EuiPopover>
174-
175-
{showResetModal && (
176-
<ResetDocumentsModal
177-
stopPipelineSimulation={stopPipelineSimulation}
178-
closeModal={() => setShowResetModal(false)}
179-
/>
180-
)}
181-
</>
118+
{(list) => (
119+
<>
120+
<EuiPopoverTitle>{i18nTexts.popoverTitle}</EuiPopoverTitle>
121+
{list}
122+
</>
123+
)}
124+
</EuiSelectable>
125+
126+
<EuiHorizontalRule margin="xs" />
127+
128+
<EuiSpacer size="s" />
129+
130+
<EuiFlexGroup justifyContent="center" gutterSize="xs">
131+
<EuiFlexItem grow={false}>
132+
<EuiButton
133+
size="s"
134+
onClick={() => {
135+
openFlyout('documents');
136+
setShowPopover(false);
137+
}}
138+
data-test-subj="editDocumentsButton"
139+
>
140+
{i18nTexts.addDocumentsButtonLabel}
141+
</EuiButton>
142+
</EuiFlexItem>
143+
</EuiFlexGroup>
144+
145+
<EuiSpacer size="s" />
146+
</EuiPopover>
182147
);
183148
};

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { i18n } from '@kbn/i18n';
77
import React, { FunctionComponent } from 'react';
88
import { EuiButton } from '@elastic/eui';
9-
import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
9+
import { TestPipelineFlyoutTab } from './test_pipeline_tabs';
1010

1111
const i18nTexts = {
1212
buttonLabel: i18n.translate(

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
99

1010
import { useTestPipelineContext, usePipelineProcessorsContext } from '../../context';
1111
import { DocumentsDropdown } from './documents_dropdown';
12-
import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
12+
import { TestPipelineFlyoutTab } from './test_pipeline_tabs';
1313
import { AddDocumentsButton } from './add_documents_button';
1414
import { TestOutputButton } from './test_output_button';
1515
import { TestPipelineFlyout } from './test_pipeline_flyout.container';
@@ -49,12 +49,6 @@ export const TestPipelineActions: FunctionComponent = () => {
4949
});
5050
};
5151

52-
const stopPipelineSimulation = () => {
53-
setCurrentTestPipelineData({
54-
type: 'reset',
55-
});
56-
};
57-
5852
const openFlyout = (activeTab: TestPipelineFlyoutTab) => {
5953
setOpenTestPipelineFlyout(true);
6054
setActiveFlyoutTab(activeTab);
@@ -77,7 +71,6 @@ export const TestPipelineActions: FunctionComponent = () => {
7771
documents={documents}
7872
selectedDocumentIndex={selectedDocumentIndex}
7973
updateSelectedDocument={updateSelectedDocument}
80-
stopPipelineSimulation={stopPipelineSimulation}
8174
openFlyout={openFlyout}
8275
/>
8376
) : (

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ import { Document } from '../../types';
1515
import { useIsMounted } from '../../use_is_mounted';
1616
import { TestPipelineFlyout as ViewComponent } from './test_pipeline_flyout';
1717

18-
import { TestPipelineFlyoutTab } from './test_pipeline_flyout_tabs';
19-
import { documentsSchema } from './test_pipeline_flyout_tabs/documents_schema';
18+
import { TestPipelineFlyoutTab } from './test_pipeline_tabs';
2019

2120
export interface Props {
2221
activeTab: TestPipelineFlyoutTab;
@@ -48,7 +47,6 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
4847
} = testPipelineData;
4948

5049
const { form } = useForm({
51-
schema: documentsSchema,
5250
defaultValue: {
5351
documents: cachedDocuments || '',
5452
},
@@ -157,6 +155,12 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
157155
}
158156
};
159157

158+
const resetTestOutput = () => {
159+
setCurrentTestPipelineData({
160+
type: 'reset',
161+
});
162+
};
163+
160164
useEffect(() => {
161165
if (cachedDocuments && activeTab === 'output') {
162166
handleTestPipeline({ documents: cachedDocuments, verbose: cachedVerbose }, true);
@@ -169,6 +173,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
169173
return (
170174
<ViewComponent
171175
handleTestPipeline={handleTestPipeline}
176+
resetTestOutput={resetTestOutput}
172177
isRunningTest={isRunningTest}
173178
cachedVerbose={cachedVerbose}
174179
cachedDocuments={cachedDocuments}

‎x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import {
1919
import { FormHook } from '../../../../../shared_imports';
2020
import { Document } from '../../types';
2121

22-
import { Tabs, TestPipelineFlyoutTab, OutputTab, DocumentsTab } from './test_pipeline_flyout_tabs';
23-
22+
import { Tabs, TestPipelineFlyoutTab, OutputTab, DocumentsTab } from './test_pipeline_tabs';
2423
export interface Props {
2524
onClose: () => void;
2625
handleTestPipeline: (
@@ -31,11 +30,14 @@ export interface Props {
3130
cachedVerbose?: boolean;
3231
cachedDocuments?: Document[];
3332
testOutput?: any;
34-
form: FormHook;
33+
form: FormHook<{
34+
documents: string | Document[];
35+
}>;
3536
validateAndTestPipeline: () => Promise<void>;
3637
selectedTab: TestPipelineFlyoutTab;
3738
setSelectedTab: (selectedTa: TestPipelineFlyoutTab) => void;
3839
testingError: any;
40+
resetTestOutput: () => void;
3941
}
4042

4143
export interface TestPipelineConfig {
@@ -45,6 +47,7 @@ export interface TestPipelineConfig {
4547

4648
export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
4749
handleTestPipeline,
50+
resetTestOutput,
4851
isRunningTest,
4952
cachedVerbose,
5053
cachedDocuments,
@@ -75,6 +78,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
7578
form={form}
7679
validateAndTestPipeline={validateAndTestPipeline}
7780
isRunningTest={isRunningTest}
81+
resetTestOutput={resetTestOutput}
7882
/>
7983
);
8084
}

0 commit comments

Comments
 (0)