[Ingest Pipelines] Load from json

[jloleysens]

Summary

Added basic load from JSON functionality similar to what mappings editor offers.

How to test

1. Go to ingest pipelines app in the Kibana management section
2. Create or edit an existing pipeline
3. Click on the Load JSON button
4. Paste a valid pipeline into the code editor, something like:

{
      processors: [{ set: { field: 'test', value: 123 } }],
      on_failure: [
        {
          gsub: {
            field: '_index',
            pattern: '(.monitoring-\\w+-)6(-.+)',
            replacement: '$17$2',
          },
        },
      ],
    }

And click Load and overwrite.

Notes

This functionality only does basic check to see wether we can properly deserialise the pipeline object. We still ultimately rely on ES to validate the pipeline processors for us.

Screenshots

New load json button

load json modal

error message about invalid pipeline object

Invalid json error state, load button disabled

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

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

[jloleysens]

@elasticmachine merge upstream

[sebelga]

Great job @jloleysens ! Tested locally and works as expected. I left a few comments in the code, no real blockers.

I had a few comments on the UX, not related to the changes on this PR but leaving them here anyways 😊

• When clicking the expand on the JSON, there is no way to go back to normal view, unless we know we can hit ESCAPE. I am not sure I see the value to be able to go fullscreen.

• Flyout to edit: I personally think it's strange to have the JSON editor in white background and prefer the gray background that we have everywhere. Also, I would prefer to use the FlyoutFooter bar for the actions ("Cancel" + "Update"), like the mappings editor.

• Do you think we could reduce the height of the JSON editor so we can see the "Invalid JSON" error below it? As you can see here, the JSON is invalid, but I don't see it and the button is grayed out, and unless you scroll you don't know why.

• I think it would be better to limit the width of the flyout as we do in the mappings editor.

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

@elasticmachine merge upstream

[jloleysens]

Hm, the fleet functional test keeps failing. That or another, unrelated functional test (lens). Retrying...

[jloleysens]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 0214f90

Build metrics

✅ unchanged

History

• 💔 Build #58338 failed 5b0de8b
• 💔 Build #58284 failed c038f8a
• 💔 Build #58254 failed c0c4524
• 💚 Build #58226 succeeded 8c38bbe
• 💚 Build #57455 succeeded 9a52744

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