From 311ef9c9f7263d6ab3a4908cf74f561269be6cdf Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Thu, 23 Apr 2020 14:06:20 -0400
Subject: [PATCH] some refactoring

---
 .../public/application/components/index.ts    |   2 -
 .../components/pipeline_form/index.ts         |   2 +-
 .../pipeline_form/pipeline_form.tsx           | 203 +++++++++---------
 .../pipeline_form/pipeline_form_error.tsx     |  34 +++
 .../pipeline_form/pipeline_form_fields.tsx    |   6 +-
 .../pipeline_form/pipeline_form_provider.tsx  |  20 ++
 .../pipeline_test_flyout.tsx                  | 184 ++++++----------
 .../pipeline_test_flyout_provider.tsx         |  10 +-
 .../{schema.tsx => tabs/schema.ts}            |  25 +--
 .../tabs/tab_documents.tsx                    | 129 ++++++++---
 .../pipeline_test_flyout/tabs/tab_output.tsx  |  49 +++--
 .../pipeline_form/test_config_context.tsx     |  27 ++-
 .../application/components/section_error.tsx  |  23 --
 .../pipelines_edit/pipelines_edit.tsx         |  28 ++-
 14 files changed, 410 insertions(+), 332 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx
 rename x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/{schema.tsx => tabs/schema.ts} (65%)
 delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/section_error.tsx

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
index 39a9dc8d89e99..ec92d899fd1cd 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
@@ -6,6 +6,4 @@
 
 export { PipelineForm } from './pipeline_form';
 
-export { SectionError } from './section_error';
-
 export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts
index 21a2ee30a84e1..2b007a25667a1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PipelineForm } from './pipeline_form';
+export { PipelineFormProvider as PipelineForm } from './pipeline_form_provider';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
index f0b7f3c782d3b..270c31d49aadb 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
@@ -11,13 +11,14 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from
 import { useForm, Form, FormConfig } from '../../../shared_imports';
 import { Pipeline } from '../../../../common/types';
 
-import { SectionError, PipelineRequestFlyout } from '../';
-import { pipelineFormSchema } from './schema';
+import { PipelineRequestFlyout } from '../';
 import { PipelineTestFlyout } from './pipeline_test_flyout';
-import { TestConfigContextProvider, useTestConfig } from './test_config_context';
+import { useTestConfigContext } from './test_config_context';
 import { PipelineFormFields } from './pipeline_form_fields';
+import { PipelineFormError } from './pipeline_form_error';
+import { pipelineFormSchema } from './schema';
 
-interface Props {
+export interface PipelineFormProps {
   onSave: (pipeline: Pipeline) => void;
   onCancel: () => void;
   isSaving: boolean;
@@ -26,7 +27,7 @@ interface Props {
   isEditing?: boolean;
 }
 
-export const PipelineForm: React.FunctionComponent<Props> = ({
+export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
   defaultValue = {
     name: '',
     description: '',
@@ -41,7 +42,9 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
   onCancel,
 }) => {
   const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
+
   const [isTestingPipeline, setIsTestingPipeline] = useState<boolean>(false);
+  const [shouldExecuteImmediately, setShouldExecuteImmediately] = useState<boolean>(false);
 
   const handleSave: FormConfig['onSubmit'] = (formData, isValid) => {
     if (isValid) {
@@ -49,6 +52,17 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     }
   };
 
+  const { testConfig } = useTestConfigContext();
+  const { documents: cachedDocuments } = testConfig;
+
+  const handleTestPipelineClick = () => {
+    setIsTestingPipeline(true);
+
+    if (cachedDocuments) {
+      setShouldExecuteImmediately(true);
+    }
+  };
+
   const { form } = useForm({
     schema: pipelineFormSchema,
     defaultValue,
@@ -72,110 +86,93 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     />
   );
 
-  const testConfigContextValue = useTestConfig();
-
   return (
     <>
-      <TestConfigContextProvider value={testConfigContextValue}>
-        <Form
-          form={form}
-          data-test-subj="pipelineForm"
-          isInvalid={form.isSubmitted && !form.isValid}
-          error={form.getErrors()}
-        >
-          <EuiSpacer size="l" />
-
-          {/* Request error */}
-          {saveError ? (
-            <>
-              <SectionError
-                title={
+      <Form
+        form={form}
+        data-test-subj="pipelineForm"
+        isInvalid={form.isSubmitted && !form.isValid}
+        error={form.getErrors()}
+      >
+        <EuiSpacer size="l" />
+
+        {/* Request error */}
+        {saveError && <PipelineFormError errorMessage={saveError.message} />}
+
+        {/* All form fields */}
+        <PipelineFormFields
+          hasVersion={Boolean(defaultValue.version)}
+          isTestButtonDisabled={isTestingPipeline || form.isValid === false}
+          onTestPipelineClick={handleTestPipelineClick}
+          hasOnFailure={Boolean(defaultValue.on_failure)}
+          isEditing={isEditing}
+        />
+
+        {/* Form submission */}
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiButton
+                  fill
+                  color="secondary"
+                  iconType="check"
+                  onClick={form.submit}
+                  data-test-subj="submitButton"
+                  disabled={form.isSubmitted && form.isValid === false}
+                  isLoading={isSaving}
+                >
+                  {saveButtonLabel}
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiButtonEmpty color="primary" onClick={onCancel}>
                   <FormattedMessage
-                    id="xpack.ingestPipelines.form.savePipelineError"
-                    defaultMessage="Unable to create pipeline"
+                    id="xpack.ingestPipelines.form.cancelButtonLabel"
+                    defaultMessage="Cancel"
                   />
-                }
-                error={saveError}
-                data-test-subj="savePipelineError"
-              />
-              <EuiSpacer size="m" />
-            </>
-          ) : null}
-
-          {/* All form fields */}
-          <PipelineFormFields
-            hasVersion={Boolean(defaultValue.version)}
-            isTestButtonDisabled={isTestingPipeline || form.isValid === false}
-            onTestClick={() => setIsTestingPipeline(true)}
-            hasOnFailure={Boolean(defaultValue.on_failure)}
-            isEditing={isEditing}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
+            >
+              {isRequestVisible ? (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.hideRequestButtonLabel"
+                  defaultMessage="Hide request"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.showRequestButtonLabel"
+                  defaultMessage="Show request"
+                />
+              )}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        {/* ES request flyout */}
+        {isRequestVisible ? (
+          <PipelineRequestFlyout
+            closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
           />
+        ) : null}
+
+        {/* Test pipeline flyout */}
+        {isTestingPipeline ? (
+          <PipelineTestFlyout
+            shouldExecuteImmediately={shouldExecuteImmediately}
+            closeFlyout={() => {
+              setIsTestingPipeline(prevIsTestingPipeline => !prevIsTestingPipeline);
+            }}
+          />
+        ) : null}
+      </Form>
 
-          {/* Form submission */}
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <EuiButton
-                    fill
-                    color="secondary"
-                    iconType="check"
-                    onClick={form.submit}
-                    data-test-subj="submitButton"
-                    disabled={form.isSubmitted && form.isValid === false}
-                    isLoading={isSaving}
-                  >
-                    {saveButtonLabel}
-                  </EuiButton>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiButtonEmpty color="primary" onClick={onCancel}>
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.cancelButtonLabel"
-                      defaultMessage="Cancel"
-                    />
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
-              >
-                {isRequestVisible ? (
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.form.hideRequestButtonLabel"
-                    defaultMessage="Hide request"
-                  />
-                ) : (
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.form.showRequestButtonLabel"
-                    defaultMessage="Show request"
-                  />
-                )}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          {/* ES request flyout */}
-          {isRequestVisible ? (
-            <PipelineRequestFlyout
-              closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
-            />
-          ) : null}
-
-          {/* Test pipeline flyout */}
-          {isTestingPipeline ? (
-            <PipelineTestFlyout
-              closeFlyout={() => {
-                setIsTestingPipeline(prevIsTestingPipeline => !prevIsTestingPipeline);
-              }}
-            />
-          ) : null}
-        </Form>
-
-        <EuiSpacer size="m" />
-      </TestConfigContextProvider>
+      <EuiSpacer size="m" />
     </>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx
new file mode 100644
index 0000000000000..ef0e2737df24d
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { EuiSpacer, EuiCallOut } from '@elastic/eui';
+
+interface Props {
+  errorMessage: string;
+}
+
+export const PipelineFormError: React.FunctionComponent<Props> = ({ errorMessage }) => {
+  return (
+    <>
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="xpack.ingestPipelines.form.savePipelineError"
+            defaultMessage="Unable to create pipeline"
+          />
+        }
+        color="danger"
+        iconType="alert"
+        data-test-subj="savePipelineError"
+      >
+        <p>{errorMessage}</p>
+      </EuiCallOut>
+      <EuiSpacer size="m" />
+    </>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
index e058a62fcf8f6..045afd52204fa 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -21,7 +21,7 @@ interface Props {
   hasVersion: boolean;
   hasOnFailure: boolean;
   isTestButtonDisabled: boolean;
-  onTestClick: () => void;
+  onTestPipelineClick: () => void;
   isEditing?: boolean;
 }
 
@@ -33,7 +33,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
   hasVersion,
   hasOnFailure,
   isTestButtonDisabled,
-  onTestClick,
+  onTestPipelineClick,
 }) => {
   const { services } = useKibana();
 
@@ -136,7 +136,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
 
             <EuiSpacer />
 
-            <EuiButton size="s" onClick={onTestClick} disabled={isTestButtonDisabled}>
+            <EuiButton size="s" onClick={onTestPipelineClick} disabled={isTestButtonDisabled}>
               <FormattedMessage
                 id="xpack.ingestPipelines.form.testPipelineButtonLabel"
                 defaultMessage="Test pipeline"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx
new file mode 100644
index 0000000000000..9390c427eecc1
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 { PipelineForm, PipelineFormProps } from './pipeline_form';
+import { TestConfigContextProvider, useTestConfig } from './test_config_context';
+
+export const PipelineFormProvider: React.FunctionComponent<PipelineFormProps> = passThroughProps => {
+  const testConfigContextValue = useTestConfig();
+
+  return (
+    <TestConfigContextProvider value={testConfigContextValue}>
+      <PipelineForm {...passThroughProps} />
+    </TestConfigContextProvider>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout.tsx
index 6e518e62176b1..9dd3c9b854558 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout.tsx
@@ -4,124 +4,110 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useContext } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 import {
-  EuiButtonEmpty,
-  EuiButton,
-  EuiFlexItem,
-  EuiFlexGroup,
   EuiFlyout,
   EuiFlyoutBody,
-  EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiSpacer,
   EuiTitle,
   EuiCallOut,
 } from '@elastic/eui';
 
+import { useKibana } from '../../../../shared_imports';
 import { Pipeline } from '../../../../../common/types';
-import { useForm, Form, useKibana, FormConfig } from '../../../../shared_imports';
-import { SectionError } from '../../section_error';
-import { pipelineTestSchema } from './schema';
 import { Tabs, Tab, OutputTab, DocumentsTab } from './tabs';
-import { TestConfigContext, TestConfig } from '../test_config_context';
+import { useTestConfigContext } from '../test_config_context';
 
 export interface PipelineTestFlyoutProps {
   closeFlyout: () => void;
   pipeline: Pipeline;
   isPipelineValid: boolean;
+  shouldExecuteImmediately: boolean;
 }
 
 export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps> = ({
   closeFlyout,
   pipeline,
   isPipelineValid,
+  shouldExecuteImmediately,
 }) => {
   const { services } = useKibana();
 
-  const { setCurrentTestConfig, testConfig } = useContext(TestConfigContext);
-  const {
-    verbose: cachedVerbose,
-    documents: cachedDocuments,
-    executeOutput: cachedExecuteOutput,
-  } = testConfig;
+  const { testConfig } = useTestConfigContext();
+  const { documents: cachedDocuments, verbose: cachedVerbose } = testConfig;
 
-  const initialSelectedTab = cachedExecuteOutput ? 'output' : 'documents';
+  const initialSelectedTab = cachedDocuments ? 'output' : 'documents';
   const [selectedTab, setSelectedTab] = useState<Tab>(initialSelectedTab);
+  const [onInitialMount, setOnInitialMount] = useState<boolean>(true);
 
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
   const [executeError, setExecuteError] = useState<any>(null);
+  const [executeOutput, setExecuteOutput] = useState<any>(undefined);
 
-  const { name: pipelineName, ...pipelineDefinition } = pipeline;
+  const handleExecute = useCallback(
+    async (documents: object[], verbose?: boolean) => {
+      const { name: pipelineName, ...pipelineDefinition } = pipeline;
 
-  const executePipeline: FormConfig['onSubmit'] = async (formData, isValid) => {
-    if (!isValid || !isPipelineValid) {
-      return;
-    }
-
-    const { documents, verbose } = formData as TestConfig;
-    const isDocumentsTab = selectedTab === 'documents';
-    const isOutputTab = selectedTab === 'output';
-    const currentDocuments = isDocumentsTab ? documents : testConfig!.documents;
-    const currentVerbose = isOutputTab ? verbose : testConfig!.verbose;
+      setIsExecuting(true);
+      setExecuteError(null);
 
-    setIsExecuting(true);
-    setExecuteError(null);
+      const { error, data: output } = await services.api.simulatePipeline({
+        documents,
+        verbose,
+        pipeline: pipelineDefinition,
+      });
 
-    const { error, data: output } = await services.api.simulatePipeline({
-      documents: currentDocuments!,
-      pipeline: pipelineDefinition,
-      verbose: currentVerbose,
-    });
+      setIsExecuting(false);
 
-    setIsExecuting(false);
+      if (error) {
+        setExecuteError(error);
+        return;
+      }
 
-    if (error) {
-      setExecuteError(error);
-      return;
-    }
+      setExecuteOutput(output);
 
-    // Update context if successful
-    setCurrentTestConfig({
-      verbose: currentVerbose,
-      documents: currentDocuments,
-      executeOutput: output,
-    });
-
-    services.notifications.toasts.addSuccess(
-      i18n.translate(
-        'xpack.ingestPipelines.testPipelineFlyout.successExecuteNotificationMessageText',
-        {
+      services.notifications.toasts.addSuccess(
+        i18n.translate('xpack.ingestPipelines.execute.successNotificationText', {
           defaultMessage: 'Pipeline executed',
-        }
-      )
-    );
-
-    setSelectedTab('output');
-  };
-
-  const { form } = useForm({
-    schema: pipelineTestSchema,
-    defaultValue: {
-      documents: cachedDocuments || '',
-      verbose: cachedVerbose || false,
+        })
+      );
+
+      setSelectedTab('output');
     },
-    onSubmit: executePipeline,
-  });
+    [pipeline, services.api, services.notifications.toasts]
+  );
+
+  useEffect(() => {
+    // If the user has already tested the pipeline once,
+    // use the cached test config and automatically execute the pipeline
+    if (onInitialMount && shouldExecuteImmediately && Object.entries(pipeline).length > 0) {
+      handleExecute(cachedDocuments!, cachedVerbose);
+      setOnInitialMount(false);
+    }
+  }, [
+    shouldExecuteImmediately,
+    pipeline,
+    handleExecute,
+    cachedDocuments,
+    cachedVerbose,
+    onInitialMount,
+  ]);
 
   // Default to "documents" tab
   let tabContent = (
     <DocumentsTab
-      changeTabs={() => setSelectedTab('output')}
-      isResultsLinkDisabled={isExecuting || Boolean(!cachedExecuteOutput)}
+      isExecuting={isExecuting}
+      isPipelineValid={isPipelineValid}
+      handleExecute={handleExecute}
     />
   );
 
   if (selectedTab === 'output') {
-    tabContent = <OutputTab executeOutput={cachedExecuteOutput!} />;
+    tabContent = <OutputTab executeOutput={executeOutput!} handleExecute={handleExecute} />;
   }
 
   return (
@@ -129,12 +115,12 @@ export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps
       <EuiFlyoutHeader>
         <EuiTitle>
           <h2>
-            {pipelineName ? (
+            {pipeline.name ? (
               <FormattedMessage
                 id="xpack.ingestPipelines.testPipelineFlyout.withPipelineNameTitle"
                 defaultMessage="Test pipeline '{pipelineName}'"
                 values={{
-                  pipelineName,
+                  pipelineName: pipeline.name,
                 }}
               />
             ) : (
@@ -151,7 +137,7 @@ export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps
         <Tabs
           onTabChange={setSelectedTab}
           selectedTab={selectedTab}
-          getIsDisabled={tabId => !cachedExecuteOutput && tabId === 'output'}
+          getIsDisabled={tabId => !executeOutput && tabId === 'output'}
         />
 
         <EuiSpacer />
@@ -159,22 +145,24 @@ export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps
         {/* Execute error */}
         {executeError ? (
           <>
-            <SectionError
+            <EuiCallOut
               title={
                 <FormattedMessage
                   id="xpack.ingestPipelines.testPipelineFlyout.executePipelineError"
                   defaultMessage="Unable to execute pipeline"
                 />
               }
-              error={executeError}
-              data-test-subj="executePipelineError"
-            />
+              color="danger"
+              iconType="alert"
+            >
+              <p>{executeError.message}</p>
+            </EuiCallOut>
             <EuiSpacer size="m" />
           </>
         ) : null}
 
         {/* Invalid pipeline error */}
-        {!isPipelineValid && form.isSubmitted ? (
+        {!isPipelineValid ? (
           <>
             <EuiCallOut
               title={
@@ -190,49 +178,9 @@ export const PipelineTestFlyout: React.FunctionComponent<PipelineTestFlyoutProps
           </>
         ) : null}
 
-        <Form
-          form={form}
-          data-test-subj="testPipelineForm"
-          isInvalid={form.isSubmitted && !form.isValid && !isPipelineValid}
-          error={form.getErrors()}
-        >
-          {tabContent}
-        </Form>
+        {/* Documents or output tab content */}
+        {tabContent}
       </EuiFlyoutBody>
-
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-              <FormattedMessage
-                id="xpack.ingestPipelines.testPipelineFlyout.closeButtonLabel"
-                defaultMessage="Close"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              onClick={form.submit}
-              fill
-              iconType="play"
-              isLoading={isExecuting}
-              disabled={form.isSubmitted && (!form.isValid || !isPipelineValid)}
-            >
-              {isExecuting ? (
-                <FormattedMessage
-                  id="xpack.ingestPipelines.testPipelineFlyout.runningButtonLabel"
-                  defaultMessage="Running"
-                />
-              ) : (
-                <FormattedMessage
-                  id="xpack.ingestPipelines.testPipelineFlyout.runButtonLabel"
-                  defaultMessage="Run"
-                />
-              )}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
     </EuiFlyout>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
index a61b701e2f315..ccfc31ba66ed9 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
@@ -10,9 +10,12 @@ import { Pipeline } from '../../../../../common/types';
 import { useFormContext } from '../../../../shared_imports';
 import { PipelineTestFlyout, PipelineTestFlyoutProps } from './pipeline_test_flyout';
 
-type Props = Pick<PipelineTestFlyoutProps, 'closeFlyout'>;
+type Props = Omit<PipelineTestFlyoutProps, 'pipeline' | 'isPipelineValid'>;
 
-export const PipelineTestFlyoutProvider: React.FunctionComponent<Props> = ({ closeFlyout }) => {
+export const PipelineTestFlyoutProvider: React.FunctionComponent<Props> = ({
+  closeFlyout,
+  shouldExecuteImmediately,
+}) => {
   const form = useFormContext();
   const [formData, setFormData] = useState<Pipeline>({} as Pipeline);
   const [isFormDataValid, setIsFormDataValid] = useState<boolean>(false);
@@ -22,8 +25,8 @@ export const PipelineTestFlyoutProvider: React.FunctionComponent<Props> = ({ clo
       const isFormValid = isValid ?? (await validate());
       if (isFormValid) {
         setFormData(data.format() as Pipeline);
-        setIsFormDataValid(true);
       }
+      setIsFormDataValid(isFormValid);
     });
 
     return subscription.unsubscribe;
@@ -34,6 +37,7 @@ export const PipelineTestFlyoutProvider: React.FunctionComponent<Props> = ({ clo
       pipeline={formData}
       closeFlyout={closeFlyout}
       isPipelineValid={isFormDataValid}
+      shouldExecuteImmediately={shouldExecuteImmediately}
     />
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/schema.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/schema.ts
similarity index 65%
rename from x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/schema.tsx
rename to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/schema.ts
index dd3053b22a8bd..4f9075e72bfd4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/schema.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/schema.ts
@@ -3,12 +3,9 @@
  * 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 { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiIconTip } from '@elastic/eui';
 
-import { FormSchema, fieldValidators, FIELD_TYPES } from '../../../../shared_imports';
+import { FormSchema, fieldValidators } from '../../../../../shared_imports';
 
 const { emptyField, isJsonField } = fieldValidators;
 
@@ -33,25 +30,7 @@ const parseJson = (jsonString: string): object[] => {
   return parsedJSON;
 };
 
-export const pipelineTestSchema: FormSchema = {
-  verbose: {
-    type: FIELD_TYPES.TOGGLE,
-    label: (
-      <>
-        <FormattedMessage
-          id="xpack.ingestPipelines.debugFlyout.verboseSwitchLabel"
-          defaultMessage="Enable verbose output"
-        />{' '}
-        <EuiIconTip
-          content={i18n.translate('xpack.ingestPipelines.debugFlyout.verboseSwitchTooltipLabel', {
-            defaultMessage:
-              'Include output data for each processor in the executed pipeline response',
-          })}
-          position="right"
-        />
-      </>
-    ),
-  },
+export const documentsSchema: FormSchema = {
   // TODO validation: at least one document required
   documents: {
     label: i18n.translate('xpack.ingestPipelines.debugForm.documentsFieldLabel', {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_documents.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_documents.tsx
index c66e12d8110ab..a5e074943e120 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_documents.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_documents.tsx
@@ -8,51 +8,130 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiButton, EuiHorizontalRule } from '@elastic/eui';
 
-import { getUseField, Field, JsonEditorField } from '../../../../../shared_imports';
+import {
+  getUseField,
+  Field,
+  JsonEditorField,
+  Form,
+  useForm,
+  FormConfig,
+} from '../../../../../shared_imports';
+
+import { documentsSchema } from './schema';
+import { useTestConfigContext, TestConfig } from '../../test_config_context';
 
 const UseField = getUseField({ component: Field });
 
 interface Props {
-  isResultsLinkDisabled: boolean;
-  changeTabs: () => void;
+  handleExecute: (documents: object[], verbose: boolean) => void;
+  isPipelineValid: boolean;
+  isExecuting: boolean;
 }
 
 export const DocumentsTab: React.FunctionComponent<Props> = ({
-  isResultsLinkDisabled,
-  changeTabs,
+  isPipelineValid,
+  handleExecute,
+  isExecuting,
 }) => {
+  const { setCurrentTestConfig, testConfig } = useTestConfigContext();
+  const { verbose: cachedVerbose, documents: cachedDocuments } = testConfig;
+
+  const executePipeline: FormConfig['onSubmit'] = (formData, isValid) => {
+    if (!isValid || !isPipelineValid) {
+      return;
+    }
+
+    const { documents } = formData as TestConfig;
+
+    // Update context
+    setCurrentTestConfig({
+      ...testConfig,
+      documents,
+    });
+
+    handleExecute(documents!, cachedVerbose);
+  };
+
+  const { form } = useForm({
+    schema: documentsSchema,
+    defaultValue: {
+      documents: cachedDocuments || '',
+      verbose: cachedVerbose || false,
+    },
+    onSubmit: executePipeline,
+  });
+
   return (
     <>
       <EuiText>
         <p>
           <FormattedMessage
-            id="xpack.ingestPipelines.testPipelineFlyout.documentsTab.descriptionText"
-            defaultMessage="Provide an array of documents to be ingested by the pipeline and simulate the output."
+            id="xpack.ingestPipelines.testPipelineFlyout.documentsTab.documentsDescriptionText"
+            defaultMessage="Provide an array of documents to be ingested by the pipeline."
           />
         </p>
       </EuiText>
 
       <EuiSpacer size="m" />
 
-      {/* Documents editor */}
-      <UseField
-        path="documents"
-        component={JsonEditorField}
-        componentProps={{
-          ['data-test-subj']: 'documentsField',
-          euiCodeEditorProps: {
-            height: '300px',
-            'aria-label': i18n.translate(
-              'xpack.ingestPipelines.testPipelineFlyout.documentsFieldAriaLabel',
-              {
-                defaultMessage: 'Documents JSON editor',
-              }
-            ),
-          },
-        }}
-      />
+      <Form
+        form={form}
+        data-test-subj="testPipelineForm"
+        isInvalid={form.isSubmitted && !form.isValid && !isPipelineValid}
+        error={form.getErrors()}
+      >
+        {/* Documents editor */}
+        <UseField
+          path="documents"
+          component={JsonEditorField}
+          componentProps={{
+            ['data-test-subj']: 'documentsField',
+            euiCodeEditorProps: {
+              height: '300px',
+              'aria-label': i18n.translate(
+                'xpack.ingestPipelines.testPipelineFlyout.documentsFieldAriaLabel',
+                {
+                  defaultMessage: 'Documents JSON editor',
+                }
+              ),
+            },
+          }}
+        />
+
+        <EuiHorizontalRule />
+
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.ingestPipelines.testPipelineFlyout.documentsTab.runDescriptionText"
+              defaultMessage="Execute the pipeline."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiButton
+          onClick={form.submit}
+          size="s"
+          isLoading={isExecuting}
+          disabled={(form.isSubmitted && !form.isValid) || !isPipelineValid}
+        >
+          {isExecuting ? (
+            <FormattedMessage
+              id="xpack.ingestPipelines.testPipelineFlyout.runningButtonLabel"
+              defaultMessage="Running"
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.ingestPipelines.testPipelineFlyout.runButtonLabel"
+              defaultMessage="Run"
+            />
+          )}
+        </EuiButton>
+      </Form>
     </>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_output.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_output.tsx
index a42b0eb4bf609..e4d4d562a5b82 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_output.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/tabs/tab_output.tsx
@@ -6,35 +6,60 @@
 
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
-
-import { getUseField, Field } from '../../../../../shared_imports';
-
-const UseField = getUseField({ component: Field });
+import { EuiCodeBlock, EuiSpacer, EuiText, EuiSwitch, EuiLink, EuiIcon } from '@elastic/eui';
+import { useTestConfigContext } from '../../test_config_context';
 
 interface Props {
   executeOutput: { docs: object[] };
+  handleExecute: (documents: object[], verbose: boolean) => void;
 }
 
-export const OutputTab: React.FunctionComponent<Props> = ({ executeOutput }) => {
+export const OutputTab: React.FunctionComponent<Props> = ({ executeOutput, handleExecute }) => {
+  const { setCurrentTestConfig, testConfig } = useTestConfigContext();
+  const { verbose: cachedVerbose, documents: cachedDocuments } = testConfig;
+
+  const onEnableVerbose = (isVerboseEnabled: boolean) => {
+    setCurrentTestConfig({
+      ...testConfig,
+      verbose: isVerboseEnabled,
+    });
+
+    handleExecute(cachedDocuments!, isVerboseEnabled);
+  };
+
   return (
     <>
       <EuiText>
         <p>
           <FormattedMessage
             id="xpack.ingestPipelines.testPipelineFlyout.outputTab.descriptionText"
-            defaultMessage="The output of the executed pipeline."
+            defaultMessage="The output of the executed pipeline. {runLink}"
+            values={{
+              runLink: (
+                <EuiLink onClick={() => handleExecute(cachedDocuments!, cachedVerbose)}>
+                  <FormattedMessage
+                    id="xpack.ingestPipelines.testPipelineFlyout.outputTab.descriptionLinkLabel"
+                    defaultMessage="Refresh output"
+                  />{' '}
+                  <EuiIcon type="refresh" />
+                </EuiLink>
+              ),
+            }}
           />
         </p>
       </EuiText>
 
       <EuiSpacer size="m" />
 
-      <UseField
-        path="verbose"
-        componentProps={{
-          ['data-test-subj']: 'verboseField',
-        }}
+      <EuiSwitch
+        label={
+          <FormattedMessage
+            id="xpack.ingestPipelines.testPipelineFlyout.outputTab.verboseSwitchLabel"
+            defaultMessage="View verbose output"
+          />
+        }
+        checked={cachedVerbose}
+        onChange={e => onEnableVerbose(e.target.checked)}
       />
 
       <EuiSpacer size="m" />
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/test_config_context.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/test_config_context.tsx
index ebe25a0fdb6de..0e1ea79013b45 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/test_config_context.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/test_config_context.tsx
@@ -4,14 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useContext } from 'react';
 
 export interface TestConfig {
   documents?: object[] | undefined;
-  verbose?: boolean;
-  executeOutput?: {
-    docs: object[];
-  };
+  verbose: boolean;
 }
 
 interface TestConfigContext {
@@ -20,11 +17,23 @@ interface TestConfigContext {
 }
 
 const TEST_CONFIG_DEFAULT_VALUE = {
-  testConfig: {},
+  testConfig: {
+    verbose: false,
+  },
   setCurrentTestConfig: () => {},
 };
 
-export const TestConfigContext = React.createContext<TestConfigContext>(TEST_CONFIG_DEFAULT_VALUE);
+const TestConfigContext = React.createContext<TestConfigContext>(TEST_CONFIG_DEFAULT_VALUE);
+
+export const useTestConfigContext = () => {
+  const ctx = useContext(TestConfigContext);
+  if (!ctx) {
+    throw new Error(
+      '"useTestConfigContext" can only be called inside of TestConfigContext.Provider!'
+    );
+  }
+  return ctx;
+};
 
 export const TestConfigContextProvider = ({
   children,
@@ -37,7 +46,9 @@ export const TestConfigContextProvider = ({
 };
 
 export const useTestConfig = () => {
-  const [testConfig, setTestConfig] = useState<TestConfig>({});
+  const [testConfig, setTestConfig] = useState<TestConfig>({
+    verbose: false,
+  });
 
   const setCurrentTestConfig = useCallback((currentTestConfig: TestConfig): void => {
     setTestConfig(currentTestConfig);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/section_error.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/section_error.tsx
deleted file mode 100644
index f9ae3d588331d..0000000000000
--- a/x-pack/plugins/ingest_pipelines/public/application/components/section_error.tsx
+++ /dev/null
@@ -1,23 +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 { EuiCallOut } from '@elastic/eui';
-import React from 'react';
-
-interface Props {
-  title: React.ReactNode;
-  error: Error;
-}
-
-export const SectionError: React.FunctionComponent<Props> = ({ title, error, ...rest }) => {
-  const { message } = error;
-
-  return (
-    <EuiCallOut title={title} color="danger" iconType="alert" {...rest}>
-      <p>{message}</p>
-    </EuiCallOut>
-  );
-};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
index 02eba9c4f620f..44898498239ac 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
@@ -16,10 +16,11 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 
+import { EuiCallOut } from '@elastic/eui';
 import { BASE_PATH } from '../../../../common/constants';
 import { Pipeline } from '../../../../common/types';
 import { useKibana, SectionLoading } from '../../../shared_imports';
-import { PipelineForm, SectionError } from '../../components';
+import { PipelineForm } from '../../components';
 
 interface MatchParams {
   name: string;
@@ -77,16 +78,21 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
     );
   } else if (error) {
     content = (
-      <SectionError
-        title={
-          <FormattedMessage
-            id="xpack.ingestPipelines.edit.fetchPipelineError"
-            defaultMessage="Error loading pipeline"
-          />
-        }
-        error={error}
-        data-test-subj="fetchPipelineError"
-      />
+      <>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.ingestPipelines.edit.fetchPipelineError"
+              defaultMessage="Error loading pipeline"
+            />
+          }
+          color="danger"
+          iconType="alert"
+        >
+          <p>{error.message}</p>
+        </EuiCallOut>
+        <EuiSpacer size="m" />
+      </>
     );
   } else if (pipeline) {
     content = (