Skip to content

Commit

Permalink
move reset functionality to flyout
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonelizabeth
alisonelizabeth committed Sep 28, 2020
1 parent 87ab6db commit 39c7d79
Show file tree
Hide file tree
Showing 21 changed files with 375 additions and 380 deletions.
6 changes: 3 additions & 3 deletions ...blic/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,9 +193,9 @@ const createActions = (testBed: TestBed<TestSubject>) => {
component.update();
},

clickResetButton() {
clickClearAllButton() {
act(() => {
find('resetButton').simulate('click');
find('clearAllDocumentsButton').simulate('click');
});
component.update();
},
Expand Down Expand Up @@ -285,7 +285,7 @@ type TestSubject =
| 'outputTab'
| 'processorOutputTabContent'
| 'editDocumentsButton'
| 'resetButton'
| 'clearAllDocumentsButton'
| 'addDocumentsAccordion'
| 'addDocumentButton'
| 'addDocumentError'
Expand Down
9 changes: 5 additions & 4 deletions .../public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -300,17 +300,18 @@ 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(
'[data-test-subj="resetDocumentsConfirmationModal"]'
);

expect(modal).not.toBe(null);
expect(modal!.textContent).toContain('Reset');
expect(modal!.textContent).toContain('Clear documents');

// Confirm reset and close modal
await actions.clickConfirmResetButton();
Expand Down
2 changes: 1 addition & 1 deletion ...n/components/pipeline_processors_editor/components/test_pipeline/add_documents_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
159 changes: 62 additions & 97 deletions ...line_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -57,18 +55,15 @@ interface Props {
selectedDocumentIndex: number;
updateSelectedDocument: (index: number) => void;
openFlyout: (activeFlyoutTab: TestPipelineFlyoutTab) => void;
stopPipelineSimulation: () => void;
}

export const DocumentsDropdown: FunctionComponent<Props> = ({
documents,
selectedDocumentIndex,
updateSelectedDocument,
stopPipelineSimulation,
openFlyout,
}) => {
const [showPopover, setShowPopover] = useState<boolean>(false);
const [showResetModal, setShowResetModal] = useState<boolean>(false);

const managePipelineButton = (
<EuiButtonEmpty
Expand All @@ -87,97 +82,67 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
);

return (
<>
<EuiPopover
isOpen={showPopover}
closePopover={() => setShowPopover(false)}
button={managePipelineButton}
panelPaddingSize="none"
withTitle
repositionOnScroll
data-test-subj="documentsDropdown"
panelClassName="documentsDropdownPanel"
<EuiPopover
isOpen={showPopover}
closePopover={() => setShowPopover(false)}
button={managePipelineButton}
panelPaddingSize="none"
withTitle
repositionOnScroll
data-test-subj="documentsDropdown"
panelClassName="documentsDropdownPanel"
>
<EuiSelectable
singleSelection
data-test-subj="documentList"
options={documents.map((doc, index) => ({
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);
}}
>
<EuiSelectable
singleSelection
data-test-subj="documentList"
options={documents.map((doc, index) => ({
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) => (
<>
<EuiPopoverTitle>{i18nTexts.popoverTitle}</EuiPopoverTitle>
{list}
</>
)}
</EuiSelectable>

<EuiHorizontalRule margin="xs" />

<EuiSpacer size="s" />

<EuiFlexGroup justifyContent="center" gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiButton
size="s"
onClick={() => {
openFlyout('documents');
setShowPopover(false);
}}
data-test-subj="editDocumentsButton"
>
{i18nTexts.addDocumentsButtonLabel}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />

<EuiFlexGroup justifyContent="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
color="danger"
onClick={() => {
setShowResetModal(true);
setShowPopover(false);
}}
data-test-subj="resetButton"
>
{i18nTexts.resetButtonLabel}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />
</EuiPopover>

{showResetModal && (
<ResetDocumentsModal
stopPipelineSimulation={stopPipelineSimulation}
closeModal={() => setShowResetModal(false)}
/>
)}
</>
{(list) => (
<>
<EuiPopoverTitle>{i18nTexts.popoverTitle}</EuiPopoverTitle>
{list}
</>
)}
</EuiSelectable>

<EuiHorizontalRule margin="xs" />

<EuiSpacer size="s" />

<EuiFlexGroup justifyContent="center" gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiButton
size="s"
onClick={() => {
openFlyout('documents');
setShowPopover(false);
}}
data-test-subj="editDocumentsButton"
>
{i18nTexts.addDocumentsButtonLabel}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />
</EuiPopover>
);
};
2 changes: 1 addition & 1 deletion ...ion/components/pipeline_processors_editor/components/test_pipeline/test_output_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
9 changes: 1 addition & 8 deletions .../components/pipeline_processors_editor/components/test_pipeline/test_pipeline_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -49,12 +49,6 @@ export const TestPipelineActions: FunctionComponent = () => {
});
};

const stopPipelineSimulation = () => {
setCurrentTestPipelineData({
type: 'reset',
});
};

const openFlyout = (activeTab: TestPipelineFlyoutTab) => {
setOpenTestPipelineFlyout(true);
setActiveFlyoutTab(activeTab);
Expand All @@ -77,7 +71,6 @@ export const TestPipelineActions: FunctionComponent = () => {
documents={documents}
selectedDocumentIndex={selectedDocumentIndex}
updateSelectedDocument={updateSelectedDocument}
stopPipelineSimulation={stopPipelineSimulation}
openFlyout={openFlyout}
/>
) : (
Expand Down
11 changes: 8 additions & 3 deletions ...ts/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -48,7 +47,6 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
} = testPipelineData;

const { form } = useForm({
schema: documentsSchema,
defaultValue: {
documents: cachedDocuments || '',
},
Expand Down Expand Up @@ -157,6 +155,12 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
}
};

const resetTestOutput = () => {
setCurrentTestPipelineData({
type: 'reset',
});
};

useEffect(() => {
if (cachedDocuments && activeTab === 'output') {
handleTestPipeline({ documents: cachedDocuments, verbose: cachedVerbose }, true);
Expand All @@ -169,6 +173,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
return (
<ViewComponent
handleTestPipeline={handleTestPipeline}
resetTestOutput={resetTestOutput}
isRunningTest={isRunningTest}
cachedVerbose={cachedVerbose}
cachedDocuments={cachedDocuments}
Expand Down
10 changes: 7 additions & 3 deletions ...n/components/pipeline_processors_editor/components/test_pipeline/test_pipeline_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ import {
import { FormHook } from '../../../../../shared_imports';
import { Document } from '../../types';

import { Tabs, TestPipelineFlyoutTab, OutputTab, DocumentsTab } from './test_pipeline_flyout_tabs';

import { Tabs, TestPipelineFlyoutTab, OutputTab, DocumentsTab } from './test_pipeline_tabs';
export interface Props {
onClose: () => void;
handleTestPipeline: (
Expand All @@ -31,11 +30,14 @@ export interface Props {
cachedVerbose?: boolean;
cachedDocuments?: Document[];
testOutput?: any;
form: FormHook;
form: FormHook<{
documents: string | Document[];
}>;
validateAndTestPipeline: () => Promise<void>;
selectedTab: TestPipelineFlyoutTab;
setSelectedTab: (selectedTa: TestPipelineFlyoutTab) => void;
testingError: any;
resetTestOutput: () => void;
}

export interface TestPipelineConfig {
Expand All @@ -45,6 +47,7 @@ export interface TestPipelineConfig {

export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
handleTestPipeline,
resetTestOutput,
isRunningTest,
cachedVerbose,
cachedDocuments,
Expand Down Expand Up @@ -75,6 +78,7 @@ export const TestPipelineFlyout: React.FunctionComponent<Props> = ({
form={form}
validateAndTestPipeline={validateAndTestPipeline}
isRunningTest={isRunningTest}
resetTestOutput={resetTestOutput}
/>
);
}
Expand Down
Loading

0 comments on commit 39c7d79

Please sign in to comment.