Add EuiCodeEditor to ES UI Shared. #108318

cjcenizal · 2021-08-12T03:24:22Z

This PR transplants the EuiCodeEditor component from EUI to the es_ui_shared plugin. This is a stopgap solution for removal of this component from EUI before we get to #107215.

Developers can consume this component by importing it:

import { EuiCodeEditor } from '<path>/src/plugins/es_ui_shared/public';

I suggest creating a file called shared_imports.ts in the root of your plugin's public directory and re-exporting it there, for consumption by your plugin.

This PR also:

Converts src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx to consume this transplanted EuiCodeEditor. JsonEditor is consumed by Index Management and Ingest Node Pipelines.
Converts the Grok Debugger plugin to consume this component.

Lazy-loading

This component is lazy-loaded to prevent it from bloating the EsUiShared plugin bundle. Here's how it appears when the network has been throttled to simulate a "Slow 3G" connection.

Steps to test

This is a drop-in replacement for EuiCodeEditor since it's identical code. Testers can interact with Grok Debugger and the JSON editor in the Ingest Node Pipelines "Load from JSON" modal to verify that this change hasn't broken anything.

…r. Remove warning from EuiCodeEditor.

elasticmachine · 2021-08-12T15:25:17Z

Pinging @elastic/kibana-stack-management (Team:Stack Management)

cjcenizal · 2021-08-12T17:19:02Z

package.json

@@ -336,7 +336,7 @@
    "re-resizable": "^6.1.1",
    "re2": "^1.15.4",
    "react": "^16.12.0",
-    "react-ace": "^5.9.0",
+    "react-ace": "^7.0.5",


@timroes Any suggestions on the best way to verify this hasn't broken anything?

I don't think we have any better way besides manually testing a couple of places we use the editor. I'd suggest looking into at least one read only case, one write case, and advanced settings (which I think is the only place using dynamic heights on EuiCodeEditor).

Thanks Tim! Tested Advanced Settings to cover both the write and dynamic heights use cases, and tested the Rollup Jobs JSON tab for the read-only case. All seems to behave as expected.

cjcenizal · 2021-08-12T17:51:50Z

src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx

+
+      // TODO: Fix this. document.activeElement resolves to be <body />, but the component behaves
+      // as expected in the browser.
+      test.skip('pressing escape in ace textbox will enable overlay', () => {


@chandlerprall Do you or anyone on the EUI team have any suggestions as to why this test might be failing?

Kibana's version of jsdom (16.4.0) is newer than EUI's version (11.12.0), and the newer one is preventing the call to .focus() from doing work because of this additional check: https://github.com/jsdom/jsdom/blob/16.4.0/lib/jsdom/living/helpers/focusing.js#L25-L27

if (!elImpl.isConnected) { return false; }

Thank you! This helped a ton.

cjcenizal · 2021-08-13T03:26:43Z

@elasticmachine merge upstream

yuliacech

Hi @cjcenizal,
thank you so much for creating this workaround!
I tested locally the 3 apps: Ingest pipelines, Index Management and Grok debugger and haven't noticed any regressions. Do we need to migrate the rest of the apps listed in #107215?
For the mocks in the test files, I think maybe a global mock file in es_ui_shared that can be imported everywhere could work better. Similar to a mock file in ILM that is being imported when needed. But I don't want to block on it.

cjcenizal · 2021-08-13T20:55:33Z

Thanks for your review @yuliacech! I will migrate the rest of our apps in a separate PR. I like your suggestion of a global mock file and I think it's worth implementing. The challenge is that some of the mocks are subtly different than others, but I'll see if I can reconcile their differences.

kibanamachine · 2021-08-13T23:41:10Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`esUiShared`	155	183	+28
`grokdebugger`	75	76	+1
total			+29

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`esUiShared`	0.0B	557.9KB	⚠️ +557.9KB
`grokdebugger`	531.9KB	531.8KB	-39.0B
total			+557.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`esUiShared`	192.5KB	195.6KB	+3.2KB
`grokdebugger`	7.5KB	7.7KB	+237.0B
`kbnUiSharedDeps-elastic`	2.6MB	2.6MB	-21.6KB
`kbnUiSharedDeps-js`	6.5MB	6.5MB	+21.6KB
total			+3.4KB

Unknown metric groups

API count

id	before	after	diff
`esUiShared`	92	106	+14

API count missing comments

id	before	after	diff
`esUiShared`	90	102	+12

async chunk count

id	before	after	diff
`esUiShared`	0	1	+1

History

💚 Build #145291 succeeded b012460
💔 Build #145281 failed a99f8018b38a52d51193b6bbc3befb5683d3be3e
💔 Build #145071 failed e8ef235
💔 Build #145072 failed 0573c6f
💔 Build #144926 failed cc7b89e

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

* Export EuiCodeEditor from es_ui_shared and consume it in Grok Debugger. Remove warning from EuiCodeEditor. * Lazy-load code editor so it doesn't bloat the EsUiShared plugin bundle. * Refactor mocks into a shared jest_mock.tsx file.

cjcenizal added the Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more label Aug 12, 2021

Add EuiCodeEditor to ES UI Shared.

148ac47

cjcenizal force-pushed the es-ui-shared/code-editor branch from 307f2c2 to 148ac47 Compare August 12, 2021 15:02

Export EuiCodeEditor from es_ui_shared and consume it in Grok Debugge…

9d6f174

…r. Remove warning from EuiCodeEditor.

cjcenizal changed the title ~~[skip-ci] Add EuiCodeEditor to ES UI Shared.~~ Add EuiCodeEditor to ES UI Shared. Aug 12, 2021

cjcenizal requested a review from yuliacech August 12, 2021 15:25

cjcenizal marked this pull request as ready for review August 12, 2021 15:25

cjcenizal requested review from a team as code owners August 12, 2021 15:25

cjcenizal added chore v7.15.0 v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels Aug 12, 2021

ryankeairns approved these changes Aug 12, 2021

View reviewed changes

timroes mentioned this pull request Aug 12, 2021

[Kibana App] Meta issue for 7.16/8.0 blockers #107376

Closed

19 tasks

cjcenizal commented Aug 12, 2021

View reviewed changes

Skip failing EuiCodeEditor test.

cc7b89e

cjcenizal commented Aug 12, 2021

View reviewed changes

cjcenizal added 2 commits August 12, 2021 16:30

Fix and unskip EuiCodeEditor unit test.

4a26336

Fix broken mocks in Jest tests.

e8ef235

kibanamachine and others added 3 commits August 12, 2021 23:26

Merge branch 'master' into es-ui-shared/code-editor

0573c6f

Merge branch 'master' into es-ui-shared/code-editor

68f7ed2

Lazy-load code editor so it doesn't bloat the EsUiShared plugin bundle.

b012460

cjcenizal force-pushed the es-ui-shared/code-editor branch from a99f801 to b012460 Compare August 13, 2021 16:04

yuliacech approved these changes Aug 13, 2021

View reviewed changes

Refactor mocks into a shared jest_mock.tsx file.

2391d09

cjcenizal mentioned this pull request Aug 13, 2021

Stack Management EuiCodeEditor migration #107215

Closed

16 tasks

cjcenizal merged commit bfea4a1 into elastic:master Aug 13, 2021

cjcenizal deleted the es-ui-shared/code-editor branch August 13, 2021 23:50

cjcenizal mentioned this pull request Aug 13, 2021

[7.x] Add EuiCodeEditor to ES UI Shared. (#108318) #108617

Merged

cjcenizal mentioned this pull request Aug 16, 2021

Migrate Stack Management apps to consume internal EuiCodeEditor #108629

Merged

stratoula mentioned this pull request Aug 17, 2021

Import EuiCodeEditor from kibana #108846

Merged

cjcenizal mentioned this pull request Sep 2, 2021

Migrate instances of EuiCodeEditor to CodeEditor #106931

Open

42 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add EuiCodeEditor to ES UI Shared. #108318

Add EuiCodeEditor to ES UI Shared. #108318

cjcenizal commented Aug 12, 2021 •

edited

Loading

elasticmachine commented Aug 12, 2021

cjcenizal Aug 12, 2021

timroes Aug 13, 2021

cjcenizal Aug 13, 2021

cjcenizal Aug 12, 2021

chandlerprall Aug 12, 2021

cjcenizal Aug 13, 2021

cjcenizal commented Aug 13, 2021

yuliacech left a comment

cjcenizal commented Aug 13, 2021 •

edited

Loading

kibanamachine commented Aug 13, 2021

API count

API count missing comments

async chunk count

Add EuiCodeEditor to ES UI Shared. #108318

Add EuiCodeEditor to ES UI Shared. #108318

Conversation

cjcenizal commented Aug 12, 2021 • edited Loading

Lazy-loading

Steps to test

elasticmachine commented Aug 12, 2021

cjcenizal Aug 12, 2021

Choose a reason for hiding this comment

timroes Aug 13, 2021

Choose a reason for hiding this comment

cjcenizal Aug 13, 2021

Choose a reason for hiding this comment

cjcenizal Aug 12, 2021

Choose a reason for hiding this comment

chandlerprall Aug 12, 2021

Choose a reason for hiding this comment

cjcenizal Aug 13, 2021

Choose a reason for hiding this comment

cjcenizal commented Aug 13, 2021

yuliacech left a comment

Choose a reason for hiding this comment

cjcenizal commented Aug 13, 2021 • edited Loading

kibanamachine commented Aug 13, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

API count missing comments

async chunk count

History

cjcenizal commented Aug 12, 2021 •

edited

Loading

cjcenizal commented Aug 13, 2021 •

edited

Loading