[Ingest Node Pipelines] Refactor pipeline simulator code (#72328)

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 { PipelineFormProvider as PipelineForm } from './pipeline_form_provider';
+export { PipelineForm } from './pipeline_form';

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx

@@ -16,7 +16,6 @@ import './pipeline_form.scss';
 import { OnUpdateHandlerArg, OnUpdateHandler } from '../pipeline_processors_editor';
 
 import { PipelineRequestFlyout } from './pipeline_request_flyout';
-import { PipelineTestFlyout } from './pipeline_test_flyout';
 import { PipelineFormFields } from './pipeline_form_fields';
 import { PipelineFormError } from './pipeline_form_error';
 import { pipelineFormSchema } from './schema';
@@ -48,8 +47,6 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 }) => {
   const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
 
-  const [isTestingPipeline, setIsTestingPipeline] = useState<boolean>(false);
-
   const {
     processors: initialProcessors,
     on_failure: initialOnFailureProcessors,
@@ -79,18 +76,13 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
     }
   };
 
-  const handleTestPipelineClick = () => {
-    setIsTestingPipeline(true);
-  };
-
   const { form } = useForm<IPipelineForm>({
     schema: pipelineFormSchema,
     defaultValue: defaultFormValues,
     onSubmit: handleSave,
   });
 
   const onEditorFlyoutOpen = useCallback(() => {
-    setIsTestingPipeline(false);
     setIsRequestVisible(false);
   }, [setIsRequestVisible]);
 
@@ -137,8 +129,6 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
           onFailure={processorsState.onFailure}
           onProcessorsUpdate={onProcessorsChangeHandler}
           hasVersion={Boolean(defaultValue.version)}
-          isTestButtonDisabled={isTestingPipeline || form.isValid === false}
-          onTestPipelineClick={handleTestPipelineClick}
           isEditing={isEditing}
         />
 
@@ -198,18 +188,6 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
             closeFlyout={() => setIsRequestVisible((prevIsRequestVisible) => !prevIsRequestVisible)}
           />
         ) : null}
-
-        {/* Test pipeline flyout */}
-        {isTestingPipeline ? (
-          <PipelineTestFlyout
-            readProcessors={() =>
-              processorStateRef.current?.getData() || { processors: [], on_failure: [] }
-            }
-            closeFlyout={() => {
-              setIsTestingPipeline((prevIsTestingPipeline) => !prevIsTestingPipeline);
-            }}
-          />
-        ) : null}
       </Form>
 
       <EuiSpacer size="m" />

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx

@@ -13,7 +13,7 @@ import { Processor } from '../../../../common/types';
 import { getUseField, getFormRow, Field, useKibana } from '../../../shared_imports';
 
 import {
-  PipelineProcessorsContextProvider,
+  ProcessorsEditorContextProvider,
   GlobalOnFailureProcessorsEditor,
   ProcessorsEditor,
   OnUpdateHandler,
@@ -29,8 +29,6 @@ interface Props {
   onLoadJson: OnDoneLoadJsonHandler;
   onProcessorsUpdate: OnUpdateHandler;
   hasVersion: boolean;
-  isTestButtonDisabled: boolean;
-  onTestPipelineClick: () => void;
   onEditorFlyoutOpen: () => void;
   isEditing?: boolean;
 }
@@ -45,8 +43,6 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
   onProcessorsUpdate,
   isEditing,
   hasVersion,
-  isTestButtonDisabled,
-  onTestPipelineClick,
   onEditorFlyoutOpen,
 }) => {
   const { services } = useKibana();
@@ -125,20 +121,18 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
 
       {/* Pipeline Processors Editor */}
 
-      <PipelineProcessorsContextProvider
+      <ProcessorsEditorContextProvider
         onFlyoutOpen={onEditorFlyoutOpen}
         links={{ esDocsBasePath: services.documentation.getEsDocsBasePath() }}
+        api={services.api}
+        toasts={services.notifications.toasts}
         onUpdate={onProcessorsUpdate}
         value={{ processors, onFailure }}
       >
         <div className="pipelineProcessorsEditor">
           <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
             <EuiFlexItem grow={false}>
-              <ProcessorsHeader
-                onLoadJson={onLoadJson}
-                onTestPipelineClick={onTestPipelineClick}
-                isTestButtonDisabled={isTestButtonDisabled}
-              />
+              <ProcessorsHeader onLoadJson={onLoadJson} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <ProcessorsEditor />
@@ -154,7 +148,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>
-      </PipelineProcessorsContextProvider>
+      </ProcessorsEditorContextProvider>
     </>
   );
 };