[Monaco] Refactor the way XJSON grammar checker gets registered

[jloleysens]

Summary

This contribution makes the following changes:

• avoid registering multiple model add listeners
• remove regsiterGrammarChecker from public API
• fix getWorker handler to register XJSON only for XJSON models

This fixes the workers ability to provide completions for multiple editor instances (two and more) that are using XJSON and it also ensure that we do not double-register a listener (or more times).

How to test

There are not really any instances of the monaco editor being used twice+ simultaneously. I would recommend making the following code changes to test:

1. Replace the contents of x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/processors/custom.tsx with the code below. This will make the "custom" processor configuration form have 2 editors
2. Go to Ingest Node Pipelines plugin in the Stack Management section
3. Edit or create a pipeline
4. Add a new processor and type in "custom" in the type field and press enter
5. You should see the two text editors in the flyout
6. (Bonus) open your browser console, type option+cmd+f and enter XJSON_GRAMMAR_CHECKER in the search box. Select the instance in the language.js file. Place a breakpoint inside of the onDidChangeContent handler (this should be a single call to updateAnnos. Type something in the editor, this should be called once only, even after opening and closing the flyout.

Code

/*
 * 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 { i18n } from '@kbn/i18n';

import {
  FieldConfig,
  FIELD_TYPES,
  fieldValidators,
  UseField,
} from '../../../../../../shared_imports';

const { emptyField, isJsonField } = fieldValidators;

import { XJsonEditor } from '../field_components';

const customConfig: FieldConfig = {
  type: FIELD_TYPES.TEXT,
  label: i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel', {
    defaultMessage: 'Configuration',
  }),
  serializer: (value: string) => {
    try {
      return JSON.parse(value);
    } catch (error) {
      // swallow error and return non-parsed value;
      return value;
    }
  },
  deserializer: (value: any) => {
    if (value === '') {
      return '{\n\n}';
    }
    return JSON.stringify(value, null, 2);
  },
  validations: [
    {
      validator: emptyField(
        i18n.translate(
          'xpack.ingestPipelines.pipelineEditor.customForm.configurationRequiredError',
          {
            defaultMessage: 'Configuration is required.',
          }
        )
      ),
    },
    {
      validator: isJsonField(
        i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.invalidJsonError', {
          defaultMessage: 'The input is not valid.',
        })
      ),
    },
  ],
};

interface Props {
  defaultOptions?: any;
}

/**
 * This is a catch-all component to support settings for custom processors
 * or existing processors not yet supported by the UI.
 *
 * We store the settings in a field called "customOptions"
 **/
export const Custom: FunctionComponent<Props> = ({ defaultOptions }) => {
  return (
    <>
      <UseField
        path="customOptions"
        component={XJsonEditor}
        config={customConfig}
        defaultValue={defaultOptions}
        componentProps={{
          editorProps: {
            'data-test-subj': 'processorOptionsEditor',
            height: 300,
            'aria-label': i18n.translate(
              'xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel',
              {
                defaultMessage: 'Configuration JSON editor',
              }
            ),
          },
        }}
      />
      <UseField
        path="whatHaveYou"
        component={XJsonEditor}
        config={customConfig}
        defaultValue={defaultOptions}
        componentProps={{
          editorProps: {
            'data-test-subj': 'processorOptionsEditor',
            height: 300,
            'aria-label': i18n.translate(
              'xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel',
              {
                defaultMessage: 'Configuration JSON editor',
              }
            ),
          },
        }}
      />
    </>
  );
};

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[sebelga]

LGTM! Tested locally and made the 2 editor work.

Type something in the editor, this should be called once only

I have put the breakpoint but it didn't get called when changing the editor value. Even after refreshing the browser window. Maybe we can zoom about that?

[sebelga]

nit: you added the import but don't use it anywhere

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: c242a89

Build metrics

async chunks size

id	value	diff	baseline
ingestPipelines	643.8KB	-116.0B	643.9KB

History

• 💚 Build #68501 succeeded 74e5534
• 💔 Build #68437 failed 42a9fef

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream