[Ingest Pipelines] Add doc links to processor types

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

@@ -128,8 +128,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
           return (
             <PipelineProcessorsEditor
               onFlyoutOpen={onEditorFlyoutOpen}
-              learnMoreAboutProcessorsUrl={services.documentation.getProcessorsUrl()}
-              learnMoreAboutOnFailureProcessorsUrl={services.documentation.getHandlingFailureUrl()}
+              esDocsBasePath={services.documentation.getEsDocsBasePath()}
               isTestButtonDisabled={isTestButtonDisabled}
               onTestPipelineClick={onTestPipelineClick}
               onUpdate={onProcessorsUpdate}

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

@@ -36,8 +36,7 @@ describe('Pipeline Editor', () => {
       onUpdate,
       isTestButtonDisabled: false,
       onTestPipelineClick: jest.fn(),
-      learnMoreAboutProcessorsUrl: 'test',
-      learnMoreAboutOnFailureProcessorsUrl: 'test',
+      esDocsBasePath: 'test',
     });
 
     const {
@@ -56,8 +55,7 @@ describe('Pipeline Editor', () => {
       onUpdate: jest.fn(),
       isTestButtonDisabled: false,
       onTestPipelineClick: jest.fn(),
-      learnMoreAboutProcessorsUrl: 'test',
-      learnMoreAboutOnFailureProcessorsUrl: 'test',
+      esDocsBasePath: 'test',
     });
 
     expect(exists('pipelineEditorOnFailureTree')).toBe(false);

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

@@ -34,7 +34,10 @@ export const OnFailureProcessorsTitle: FunctionComponent = () => {
             defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
             values={{
               learnMoreLink: (
-                <EuiLink href={links.learnMoreAboutOnFailureProcessorsUrl} target="_blank">
+                <EuiLink
+                  href={links.esDocsBasePath + '/handling-failure-in-pipelines.html'}
+                  target="_blank"
+                >
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
                     {

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/learn_more_form_label.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { ProcessorType } from './map_processor_type_to_form';
+
+interface Props {
+  processorType: ProcessorType | string;
+  docLink: string;
+}
+
+export const LearnMoreFormLabel: FunctionComponent<Props> = ({ processorType, docLink }) => {
+  return (
+    <FormattedMessage
+      id="xpack.ingestPipelines.pipelineEditor.settingsForm.learnMoreLabelLink"
+      defaultMessage="Learn more about the {processorLink}."
+      values={{
+        processorLink: (
+          <EuiLink target="_blank" href={docLink}>
+            {processorType}
+            &nbsp;
+            {i18n.translate(
+              'xpack.ingestPipelines.pipelineEditor.settingsForm.learnMoreLabelLink.processor',
+              { defaultMessage: 'processor' }
+            )}
+          </EuiLink>
+        ),
+      }}
+    />
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx

@@ -5,52 +5,64 @@
  */
 
 import { FunctionComponent } from 'react';
+import { SetProcessor } from './processors/set';
+import { Gsub } from './processors/gsub';
 
-// import { SetProcessor } from './processors/set';
-// import { Gsub } from './processors/gsub';
-
-const mapProcessorTypeToForm = {
-  append: undefined, // TODO: Implement
-  bytes: undefined, // TODO: Implement
-  circle: undefined, // TODO: Implement
-  convert: undefined, // TODO: Implement
-  csv: undefined, // TODO: Implement
-  date: undefined, // TODO: Implement
-  date_index_name: undefined, // TODO: Implement
-  dissect: undefined, // TODO: Implement
-  dot_expander: undefined, // TODO: Implement
-  drop: undefined, // TODO: Implement
-  enrich: undefined, // TODO: Implement
-  fail: undefined, // TODO: Implement
-  foreach: undefined, // TODO: Implement
-  geoip: undefined, // TODO: Implement
-  grok: undefined, // TODO: Implement
-  html_strip: undefined, // TODO: Implement
-  inference: undefined, // TODO: Implement
-  join: undefined, // TODO: Implement
-  json: undefined, // TODO: Implement
-  kv: undefined, // TODO: Implement
-  lowercase: undefined, // TODO: Implement
-  pipeline: undefined, // TODO: Implement
-  remove: undefined, // TODO: Implement
-  rename: undefined, // TODO: Implement
-  script: undefined, // TODO: Implement
-  set_security_user: undefined, // TODO: Implement
-  split: undefined, // TODO: Implement
-  sort: undefined, // TODO: Implement
-  trim: undefined, // TODO: Implement
-  uppercase: undefined, // TODO: Implement
-  urldecode: undefined, // TODO: Implement
-  user_agent: undefined, // TODO: Implement
-
-  gsub: undefined,
-  set: undefined,
+/**
+ * Map that accepts an ES processor type name and returns either the component
+ * for rendering the associated fields for configuring the processor or the path
+ * link that will be used in help text.
+ *
+ * In Chrome, and possibly other browsers, the order of the keys determines the order
+ * in the rendered list.
+ */
+const mapProcessorTypeToFormOrDocPath: Record<string, FunctionComponent | string> = {
+  append: '/append-processor.html', // TODO: Implement
+  bytes: '/bytes-processor.html', // TODO: Implement
+  circle: '/ingest-circle-processor.html', // TODO: Implement
+  convert: '/convert-processor.html', // TODO: Implement
+  csv: '/csv-processor.html', // TODO: Implement
+  date: '/date-processor.html', // TODO: Implement
+  date_index_name: '/date-index-name-processor.html', // TODO: Implement
+  dissect: '/dissect-processor.html', // TODO: Implement
+  dot_expander: '/dot-expand-processor.html', // TODO: Implement
+  drop: '/drop-processor.html', // TODO: Implement
+  enrich: '/enrich-processor.html', // TODO: Implement
+  fail: '/fail-processor.html', // TODO: Implement
+  foreach: '/foreach-processor.html', // TODO: Implement
+  geoip: '/geoip-processor.html', // TODO: Implement
+  grok: '/grok-processor.html', // TODO: Implement
+
+  gsub: '/gsub-processor.html',
+
+  html_strip: '/htmlstrip-processor.html', // TODO: Implement
+  inference: '/inference-processor.html', // TODO: Implement
+  join: '/join-processor.html', // TODO: Implement
+  json: '/json-processor.html', // TODO: Implement
+  kv: '/kv-processor.html', // TODO: Implement
+  lowercase: '/lowercase-processor.html', // TODO: Implement
+  pipeline: '/pipeline-processor.html', // TODO: Implement
+  remove: '/remove-processor.html', // TODO: Implement
+  rename: '/rename-processor.html', // TODO: Implement
+  script: '/script-processor.html', // TODO: Implement
+
+  set: '/set-processor.html',
+
+  set_security_user: '/ingest-node-set-security-user-processor.html', // TODO: Implement
+  split: '/split-processor.html', // TODO: Implement
+  sort: '/sort-processor.html', // TODO: Implement
+  trim: '/trim-processor.html', // TODO: Implement
+  uppercase: '/uppercase-processor.html', // TODO: Implement
+  urldecode: '/urldecode-processor.html', // TODO: Implement
+  user_agent: '/user-agent-processor.html', // TODO: Implement
 };
 
-export const types = Object.keys(mapProcessorTypeToForm);
+export const types = Object.keys(mapProcessorTypeToFormOrDocPath);
 
-export type ProcessorType = keyof typeof mapProcessorTypeToForm;
+export type ProcessorType = keyof typeof mapProcessorTypeToFormOrDocPath;
 
-export const getProcessorForm = (type: ProcessorType | string): FunctionComponent | undefined => {
-  return mapProcessorTypeToForm[type as ProcessorType];
+export const getProcessorFormOrDocPath = (
+  type: ProcessorType | string
+): FunctionComponent | string | undefined => {
+  return mapProcessorTypeToFormOrDocPath[type as ProcessorType];
 };

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

@@ -8,10 +8,11 @@ import React, { FunctionComponent, memo } from 'react';
 import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
 
 import { Form, useForm, FormDataProvider } from '../../../../../shared_imports';
-
+import { usePipelineProcessorsContext } from '../../context';
 import { ProcessorInternal } from '../../types';
 
-import { getProcessorForm } from './map_processor_type_to_form';
+import { LearnMoreFormLabel } from './learn_more_form_label';
+import { getProcessorFormOrDocPath } from './map_processor_type_to_form';
 import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields';
 import { Custom } from './processors/custom';
 
@@ -22,6 +23,9 @@ export interface Props {
 
 export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
   ({ processor, form }) => {
+    const {
+      links: { esDocsBasePath },
+    } = usePipelineProcessorsContext();
     return (
       <Form form={form}>
         <ProcessorTypeField initialType={processor?.type} />
@@ -34,17 +38,29 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
             let formContent: React.ReactNode | undefined;
 
             if (type?.length) {
-              const ProcessorFormFields = getProcessorForm(type as any);
+              const ProcessorFormOrDocPath = getProcessorFormOrDocPath(type as any);
 
-              if (ProcessorFormFields) {
+              if (typeof ProcessorFormOrDocPath === 'function') {
                 formContent = (
                   <>
-                    <ProcessorFormFields />
+                    <ProcessorFormOrDocPath />
                     <CommonProcessorFields />
                   </>
                 );
               } else {
-                formContent = <Custom defaultOptions={processor?.options} />;
+                formContent = (
+                  <Custom
+                    defaultOptions={processor?.options}
+                    helpText={
+                      typeof ProcessorFormOrDocPath === 'string' ? (
+                        <LearnMoreFormLabel
+                          processorType={type}
+                          docLink={esDocsBasePath + ProcessorFormOrDocPath}
+                        />
+                      ) : undefined
+                    }
+                  />
+                );
               }
 
               return (

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx

@@ -59,6 +59,7 @@ const customConfig: FieldConfig = {
 
 interface Props {
   defaultOptions?: any;
+  helpText?: string | React.ReactNode;
 }
 
 /**
@@ -67,9 +68,10 @@ interface Props {
  *
  * We store the settings in a field called "customOptions"
  **/
-export const Custom: FunctionComponent<Props> = ({ defaultOptions }) => {
+export const Custom: FunctionComponent<Props> = ({ defaultOptions, helpText }) => {
   return (
     <UseField
+      helpText={helpText}
       path="customOptions"
       component={JsonEditorField}
       config={customConfig}

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

@@ -42,7 +42,7 @@ export const ProcessorsTitleAndTestButton: FunctionComponent<Props> = ({
             defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
             values={{
               learnMoreLink: (
-                <EuiLink href={links.learnMoreAboutProcessorsUrl} target="_blank">
+                <EuiLink href={links.esDocsBasePath + '/ingest-processors.html'} target="_blank">
                   {i18n.translate(
                     'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
                     {

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

@@ -9,8 +9,7 @@ import { EditorMode } from './types';
 import { ProcessorsDispatch } from './processors_reducer';
 
 interface Links {
-  learnMoreAboutProcessorsUrl: string;
-  learnMoreAboutOnFailureProcessorsUrl: string;
+  esDocsBasePath: string;
 }
 
 const PipelineProcessorsContext = createContext<{

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

@@ -26,8 +26,7 @@ export interface Props {
   onUpdate: (arg: OnUpdateHandlerArg) => void;
   isTestButtonDisabled: boolean;
   onTestPipelineClick: () => void;
-  learnMoreAboutProcessorsUrl: string;
-  learnMoreAboutOnFailureProcessorsUrl: string;
+  esDocsBasePath: string;
   /**
    * Give users a way to react to this component opening a flyout
    */
@@ -41,8 +40,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = ({
   onFlyoutOpen,
   onUpdate,
   isTestButtonDisabled,
-  learnMoreAboutOnFailureProcessorsUrl,
-  learnMoreAboutProcessorsUrl,
+  esDocsBasePath,
   onTestPipelineClick,
 }) => {
   const deserializedResult = useMemo(
@@ -61,7 +59,7 @@ export const PipelineProcessorsEditor: FunctionComponent<Props> = ({
   return (
     <PipelineProcessorsContextProvider
       processorsDispatch={processorsDispatch}
-      links={{ learnMoreAboutOnFailureProcessorsUrl, learnMoreAboutProcessorsUrl }}
+      links={{ esDocsBasePath }}
     >
       <PipelineProcessorsEditorUI
         onFlyoutOpen={onFlyoutOpen}

x-pack/plugins/ingest_pipelines/public/application/services/documentation.ts

@@ -15,6 +15,10 @@ export class DocumentationService {
     this.esDocBasePath = `${docsBase}/elasticsearch/reference/${DOC_LINK_VERSION}`;
   }
 
+  public getEsDocsBasePath() {
+    return this.esDocBasePath;
+  }
+
   public getIngestNodeUrl() {
     return `${this.esDocBasePath}/ingest.html`;
   }