Migrate instances of EuiCodeEditor to CodeEditor

[thompsongl]

The EUI team has deprecated the EuiCodeEditor component and requires that instances in Kibana be migrated to an alternative solution before it can be removed from the codebase. The current recommendations can be found here, but generally consist of:

• Using EuiCodeBlock for static code (virtualized rendering support will be available in Kibana before 7.15 FF)
• Using the Monaco-based CodeEditor component in the kibana-react plugin.

The main driver behind removing EuiCodeEditor is its reliance on a dependency that violates Kibana's CSP.

Instances requiring migration:

• src/plugins/advanced_settings/public/management_app/components/field/field.tsx
• [FilterBar] Replace EuiCodeEditor with CodeEditor  #113107
• src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
• src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx [index pattern management] Replace EuiCodeEditor with CodeEditor #113060
• src/plugins/saved_objects_management/public/management_section/object_view/components/field.tsx
• src/plugins/vis_type_vega/public/components/vega_vis_editor.tsx
• x-pack/plugins/apm/public/components/app/service_map/stories/cytoscape_example_data.stories.tsx ([APM] Remove EuiCodeEditor from service map storybook #106927)
• x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/json_editor/json_editor.tsx
• x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/package_policy_input_var_field.tsx [Fleet] Replace usages of EuiCodeEditor #107097
• x-pack/plugins/fleet/public/components/settings_flyout/index.tsx [Fleet] Replace usages of EuiCodeEditor #107097
• x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
• x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
• x-pack/plugins/grokdebugger/public/components/event_output/event_output.js
• x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
• x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
• x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
• x-pack/plugins/logstash/public/application/components/pipeline_editor/pipeline_editor.js
• x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx [ML] Data Frame Analytics: replace deprecated EuiCodeEditor #108306
• x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx [ML] Data Frame Analytics: replace deprecated EuiCodeEditor #108306
• x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx [ML] Data Frame Analytics: replace deprecated EuiCodeEditor #108306
• x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
• x-pack/plugins/osquery/public/editor/index.tsx
• x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js
• Migrate role mappings JSON editor to use the monaco-based editor #107078
• x-pack/plugins/security_solution/public/common/components/event_details/json_view.tsx
• x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
• x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx
• x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
• x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx
• x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx
• x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
• x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/create_transform/components/group_by_list/popover_form.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_json_pane.tsx [ML] Transforms: replace deprecated EuiCodeEditor #108310
• x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx Migrate actions JSON editor to use the monaco-based editor #107203
• x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_form.tsx
• x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
• x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx

[elasticmachine]

Pinging @elastic/eui-design (EUI)

[timroes]

@thompsongl We currently use in a lot of of places that CodeEditor is already in place custom options and basically every place looks slightly different (we even don't have a shared fontSize between those instance). Since we're now heavily start using it in more places, could Design please take a pass on that, and make sure that the CodeEditor component itself has reasonable default stylings and not every consumer does an (unaligned) styling in their application?

[thompsongl]

@cchaos Have we worked with any teams on code editor designs?

[cchaos]

I'll check in with @ryankeairns and his team, but no there hasn't been any designs done for a code editor that I know of. Since this lives in Kibana, it makes sense for the Kibana Design team to handle this one and may be a good on-boarding task but would likely need a team or person to pair with a designer to implement changes.

[ryankeairns]

I'll check in with @ryankeairns and his team, but no there hasn't been any designs done for a code editor that I know of. Since this lives in Kibana, it makes sense for the Kibana Design team to handle this one and may be a good on-boarding task but would likely need a team or person to pair with a designer to implement changes.

Regarding the Monaco / CodeEditor, it was originally swapped in to replace the Canvas expression editor input then later pulled out for wider re-use. As far as I'm aware, no design team effort has been put into that shared component, and it does sound like something we could take a pass at. I've not seen the code, but can take a look and assess what can be done for default styles.

[ryankeairns]

We currently use in a lot of of places that CodeEditor is already in place custom options and basically every place looks slightly different (we even don't have a shared fontSize between those instance). Since we're now heavily start using it in more places, could Design please take a pass on that, and make sure that the CodeEditor component itself has reasonable default stylings and not every consumer does an (unaligned) styling in their application?

@timroes we currently generate themes that utilize EUI colors, and I'm looking at adding defaults for fontFamily, fontSize, and lineHeight to the root editor options. Are there any styles, aside from this, that you've encountered?

Looking over the Monaco editor options, nothing else jumped out at me (I tried padding, but that was not of use in this case).

[timroes]

Just a note for everyone migrating to CodeEditor. We have currently no syntax highlighting for JSON (see #107733). Don't use XJsonLang if you actually only support JSON, since it means your code editor will highlight as XJson (e.g. support for tripple quotes), while you behind the scenes are only handling JSON values. This can become confusing for users (e.g. see #107723). If you're needing a non read-only editor for JSON, please make sure to upvote and leave a comment in #107733 to get support for JSON highlighting.

[cjcenizal]

EuiCodeEditor is now available directly within Kibana. See #108318 for more details. This allows plugin maintainers to continue to consume EuiCodeEditor, but importing it from the es_ui_shared plugin instead of from EUI.

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[thompsongl]

Thanks y'all for making great progress on the migration!

EUI will be moving forward with removing EuiCodeEditor in the coming weeks: elastic/eui#5323
Any remaining instances in Kibana will be moved to use the es_ui_shared plugin in the subsequent upgrade pull request (to be handled by the EUI team).