address PR feedback

- Update form schema and form schema types
- simplify the save handler
- refactor processors_title to processors_header

Author: jloleysens

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

@@ -13,17 +13,14 @@ import { Pipeline, Processor } from '../../../../common/types';
 
 import './pipeline_form.scss';
 
-import {
-  OnUpdateHandlerArg,
-  OnUpdateHandler,
-  SerializeResult,
-} from '../pipeline_processors_editor';
+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';
+import { PipelineForm as IPipelineForm } from './types';
 
 export interface PipelineFormProps {
   onSave: (pipeline: Pipeline) => void;
@@ -34,12 +31,11 @@ export interface PipelineFormProps {
   isEditing?: boolean;
 }
 
-const defaultFormValue = Object.freeze({
+const defaultFormValue: Pipeline = Object.freeze({
   name: '',
   description: '',
   processors: [],
   on_failure: [],
-  version: '',
 });
 
 export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
@@ -70,30 +66,24 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
 
   const processorStateRef = useRef<OnUpdateHandlerArg>();
 
-  const handleSave: FormConfig['onSubmit'] = async (formData, isValid) => {
-    let override: SerializeResult | undefined;
-
+  const handleSave: FormConfig<IPipelineForm>['onSubmit'] = async (formData, isValid) => {
     if (!isValid) {
       return;
     }
 
     if (processorStateRef.current) {
       const state = processorStateRef.current;
       if (await state.validate()) {
-        override = state.getData();
-      } else {
-        return;
+        onSave({ ...formData, ...state.getData() });
       }
     }
-
-    onSave({ ...formData, ...(override || {}) } as Pipeline);
   };
 
   const handleTestPipelineClick = () => {
     setIsTestingPipeline(true);
   };
 
-  const { form } = useForm({
+  const { form } = useForm<IPipelineForm>({
     schema: pipelineFormSchema,
     defaultValue: defaultFormValues,
     onSubmit: handleSave,

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

@@ -20,7 +20,7 @@ import {
   OnDoneLoadJsonHandler,
 } from '../pipeline_processors_editor';
 
-import { ProcessorsTitle } from './processors_title';
+import { ProcessorsHeader } from './processors_header';
 import { OnFailureProcessorsTitle } from './on_failure_processors_title';
 
 interface Props {
@@ -134,7 +134,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
         <div className="pipelineProcessorsEditor">
           <EuiFlexGroup gutterSize="m" responsive={false} direction="column">
             <EuiFlexItem grow={false}>
-              <ProcessorsTitle
+              <ProcessorsHeader
                 onLoadJson={onLoadJson}
                 onTestPipelineClick={onTestPipelineClick}
                 isTestButtonDisabled={isTestButtonDisabled}

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_title.tsx renamed to x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/processors_header.tsx

@@ -19,7 +19,7 @@ export interface Props {
   onLoadJson: OnDoneLoadJsonHandler;
 }
 
-export const ProcessorsTitle: FunctionComponent<Props> = ({
+export const ProcessorsHeader: FunctionComponent<Props> = ({
   onTestPipelineClick,
   isTestButtonDisabled,
   onLoadJson,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/schema.ts

@@ -0,0 +1,44 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { FormSchema, FIELD_TYPES, fieldValidators, fieldFormatters } from '../../../shared_imports';
+
+import { PipelineForm } from './types';
+
+const { emptyField } = fieldValidators;
+const { toInt } = fieldFormatters;
+
+export const pipelineFormSchema: FormSchema<PipelineForm> = {
+  name: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.ingestPipelines.form.nameFieldLabel', {
+      defaultMessage: 'Name',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate('xpack.ingestPipelines.form.pipelineNameRequiredError', {
+            defaultMessage: 'Name is required.',
+          })
+        ),
+      },
+    ],
+  },
+  description: {
+    type: FIELD_TYPES.TEXTAREA,
+    label: i18n.translate('xpack.ingestPipelines.form.descriptionFieldLabel', {
+      defaultMessage: 'Description (optional)',
+    }),
+  },
+  version: {
+    type: FIELD_TYPES.NUMBER,
+    label: i18n.translate('xpack.ingestPipelines.form.versionFieldLabel', {
+      defaultMessage: 'Version (optional)',
+    }),
+    formatters: [toInt],
+  },
+};

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

@@ -7,3 +7,5 @@
 import { Pipeline } from '../../../../common/types';
 
 export type ReadProcessorsFunction = () => Pick<Pipeline, 'processors' | 'on_failure'>;
+
+export type PipelineForm = Omit<Pipeline, 'processors' | 'on_failure'>;

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts

@@ -8,10 +8,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FunctionComponent, useRef, useState } from 'react';
 import { EuiConfirmModal, EuiOverlayMask, EuiSpacer, EuiText, EuiCallOut } from '@elastic/eui';
 
-import {
-  JsonEditor,
-  OnJsonEditorUpdateHandler,
-} from '../../../../../../../../../src/plugins/es_ui_shared/public';
+import { JsonEditor, OnJsonEditorUpdateHandler } from '../../../../../shared_imports';
 
 import { Processor } from '../../../../../../common/types';
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/load_from_json/modal_provider.tsx

@@ -22,6 +22,8 @@ export {
   UseRequestConfig,
   WithPrivileges,
   Monaco,
+  JsonEditor,
+  OnJsonEditorUpdateHandler,
 } from '../../../../src/plugins/es_ui_shared/public/';
 
 export {