[Ingest Node Pipelines] Integrate painless autocomplete (#84554) (#84952)

Author: alisonelizabeth

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/common_fields/common_processor_fields.tsx

@@ -6,6 +6,7 @@
 
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
+import { PainlessLang } from '@kbn/monaco';
 
 import {
   FieldConfig,
@@ -56,14 +57,17 @@ const tagConfig: FieldConfig = {
 };
 
 export const CommonProcessorFields: FunctionComponent = () => {
+  const suggestionProvider = PainlessLang.getSuggestionProvider('processor_conditional');
+
   return (
     <section>
       <UseField
         config={ifConfig}
         component={TextEditor}
         componentProps={{
           editorProps: {
-            languageId: 'painless',
+            languageId: PainlessLang.ID,
+            suggestionProvider,
             height: EDITOR_PX_HEIGHT.extraSmall,
             options: {
               lineNumbers: 'off',

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/script.tsx

@@ -4,12 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { PainlessLang } from '@kbn/monaco';
 import { EuiCode, EuiSwitch, EuiFormRow } from '@elastic/eui';
 
-import { FIELD_TYPES, fieldValidators, UseField, Field } from '../../../../../../shared_imports';
+import {
+  FIELD_TYPES,
+  fieldValidators,
+  UseField,
+  Field,
+  useFormData,
+} from '../../../../../../shared_imports';
 
 import { XJsonEditor, TextEditor } from '../field_components';
 
@@ -122,6 +129,17 @@ const fieldsConfig: FieldsConfig = {
 
 export const Script: FormFieldsComponent = ({ initialFieldValues }) => {
   const [showId, setShowId] = useState(() => !!initialFieldValues?.id);
+  const [scriptLanguage, setScriptLanguage] = useState<string>('plaintext');
+
+  const [{ fields }] = useFormData({ watch: 'fields.lang' });
+
+  const suggestionProvider = PainlessLang.getSuggestionProvider('processor_conditional');
+
+  useEffect(() => {
+    const isPainlessLang = fields?.lang === 'painless' || fields?.lang === ''; // Scripting language defaults to painless if none specified
+    setScriptLanguage(isPainlessLang ? PainlessLang.ID : 'plaintext');
+  }, [fields]);
+
   return (
     <>
       <EuiFormRow>
@@ -147,6 +165,9 @@ export const Script: FormFieldsComponent = ({ initialFieldValues }) => {
             component={TextEditor}
             componentProps={{
               editorProps: {
+                languageId: scriptLanguage,
+                suggestionProvider:
+                  scriptLanguage === PainlessLang.ID ? suggestionProvider : undefined,
                 height: EDITOR_PX_HEIGHT.medium,
                 'aria-label': i18n.translate(
                   'xpack.ingestPipelines.pipelineEditor.scriptForm.sourceFieldAriaLabel',