[Monaco Editor] Add Search functionality #188337

ElenaStoeva · 2024-07-15T17:20:00Z

Summary

This PR adds the find action to the Monaco code editor, which enables the search bar functionality as it is needed for Console with Monaco. The functionality is disabled by default.

How to test:

Open Console and verify that Command/Ctrl + f opens the search bar (should work for both the editor and the output panel).
Open any other code editor in Kibana and verify that the search functionality is disabled.

ElenaStoeva · 2024-07-15T17:20:08Z

/ci

elasticmachine · 2024-07-16T09:03:47Z

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

eokoneyo

I think we should make the find functionality opt-in as oppose to making it available by default to all consumers. For instance this change would show up in discover for ES|QL like so;

There's a monaco API to modify key bindings that we can use to disable the find action if a user doesn't opt in.

addendum
See microsoft/monaco-editor#3784 for the usage of this API

ElenaStoeva · 2024-07-16T15:46:06Z

Thanks for the review and for the suggestion @eokoneyo! I addressed your feedback in 3504ed1.

eokoneyo · 2024-07-17T08:51:41Z

packages/shared-ux/code_editor/impl/code_editor.tsx

@@ -188,6 +193,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
  }),
  fitToContent,
  accessibilityOverlayEnabled = true,
+  enableFindAction = false,


nit: we don't actually need to specify false, undefined is also a falsy value.

Sure, that makes sense. Changed with bab9b40.

eokoneyo

@ElenaStoeva tested this, it works perfectly well. Thanks for making the change

elasticmachine · 2024-07-17T14:10:01Z

💚 Build Succeeded

Buildkite Build
Commit: 76b5618

Metrics [docs]

Async chunks

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

id	before	after	diff
`console`	457.1KB	457.1KB	+40.0B

Page load bundle

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

id	before	after	diff
`kbnUiSharedDeps-css`	206.6KB	211.9KB	+5.3KB
`kbnUiSharedDeps-srcJs`	3.2MB	3.3MB	+72.3KB
total			+77.6KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/code-editor`	40	41	+1

ESLint disabled line counts

id	before	after	diff
`@kbn/code-editor`	2	3	+1

Total ESLint disabled count

id	before	after	diff
`@kbn/code-editor`	2	3	+1

History

💔 Build #222010 failed bab9b40
💚 Build #221814 succeeded 3504ed1
💚 Build #221542 succeeded 7f2a4bb

cc @ElenaStoeva

yuliacech · 2024-07-23T11:50:17Z

packages/shared-ux/code_editor/impl/code_editor.tsx

+      monaco.editor.addKeybindingRule({
+        // eslint-disable-next-line no-bitwise
+        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyF,
+        command: enableFindAction ? 'actions.find' : null,


nit: instead of registering the keybindings with a null action, I think we could only register the key binding if the find action is enabled

Since we added the find action import in packages/kbn-monaco/src/monaco_imports.ts, this action is now enabled by default in every Monaco editor, unless we disable it. Therefore, we need to specify explicitly that the key binding should run no action; otherwise it would run the find action by default.

yuliacech

Thanks a lot for adding the search bar, @ElenaStoeva!
Tested locally and all works as expected 👍

kibana-ci · 2024-07-23T15:14:17Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 7c1537d

Failed CI Steps

FTR Configs #70

Metrics [docs]

Async chunks

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

id	before	after	diff
`console`	457.2KB	457.2KB	+40.0B

Page load bundle

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

id	before	after	diff
`kbnUiSharedDeps-css`	206.6KB	211.9KB	+5.3KB
`kbnUiSharedDeps-srcJs`	3.2MB	3.3MB	+72.3KB
total			+77.6KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/code-editor`	40	41	+1

ESLint disabled line counts

id	before	after	diff
`@kbn/code-editor`	2	3	+1

Total ESLint disabled count

id	before	after	diff
`@kbn/code-editor`	2	3	+1

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

cc @ElenaStoeva

* master: (3487 commits) `BedrockChat` & `GeminiChat` (elastic#186809) [ResponseOps] log error when ES Query rules find docs out of time range (elastic#186332) skip flaky suite (elastic#188997) [Security solution][Alert Details] Enable preview feature flag and cypress tests (elastic#188580) [EuiProviders] Warn Developer if EuiProvider is missing (elastic#184608) [Security Solution ] Fixes Timeline infinite loading bug (elastic#188943) Improve SearchSource SearchRequest type (elastic#186862) Deprecate Search Sessions config (elastic#188037) [Synthetics] Add missing monitorType and tag info in cards !! (elastic#188824) [Console Monaco] Resolve uncaught error from tokenizer (elastic#188746) [Data Forge] Add `service.logs` dataset as a data stream (elastic#188786) [Console] Fix failing bulk requests (elastic#188552) Update dependency terser to ^5.31.2 (main) (elastic#188528) [APM][ECO] Telemetry (elastic#188627) [Fleet] Fix uninstall package validation accross space (elastic#188749) Update warning on `xpack.fleet.enableExperimental` (elastic#188917) [DOCS][Cases] Automate more screenshots for cases (elastic#188697) [Fleet] Fix get one agent when feature flag disabled (elastic#188953) chore(investigate): Add investigate-app plugin from poc (elastic#188122) [Monaco Editor] Add Search functionality (elastic#188337) ...

* master: (2400 commits) `BedrockChat` & `GeminiChat` (elastic#186809) [ResponseOps] log error when ES Query rules find docs out of time range (elastic#186332) skip flaky suite (elastic#188997) [Security solution][Alert Details] Enable preview feature flag and cypress tests (elastic#188580) [EuiProviders] Warn Developer if EuiProvider is missing (elastic#184608) [Security Solution ] Fixes Timeline infinite loading bug (elastic#188943) Improve SearchSource SearchRequest type (elastic#186862) Deprecate Search Sessions config (elastic#188037) [Synthetics] Add missing monitorType and tag info in cards !! (elastic#188824) [Console Monaco] Resolve uncaught error from tokenizer (elastic#188746) [Data Forge] Add `service.logs` dataset as a data stream (elastic#188786) [Console] Fix failing bulk requests (elastic#188552) Update dependency terser to ^5.31.2 (main) (elastic#188528) [APM][ECO] Telemetry (elastic#188627) [Fleet] Fix uninstall package validation accross space (elastic#188749) Update warning on `xpack.fleet.enableExperimental` (elastic#188917) [DOCS][Cases] Automate more screenshots for cases (elastic#188697) [Fleet] Fix get one agent when feature flag disabled (elastic#188953) chore(investigate): Add investigate-app plugin from poc (elastic#188122) [Monaco Editor] Add Search functionality (elastic#188337) ...

[Monaco Editor] Add Search functionality

7f2a4bb

ElenaStoeva added Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more release_note:skip Skip the PR/issue when compiling release notes labels Jul 15, 2024

ElenaStoeva self-assigned this Jul 15, 2024

ElenaStoeva marked this pull request as ready for review July 16, 2024 09:03

ElenaStoeva requested a review from a team as a code owner July 16, 2024 09:03

eokoneyo requested changes Jul 16, 2024

View reviewed changes

Disable find action by default

3504ed1

ElenaStoeva requested a review from a team as a code owner July 16, 2024 15:38

eokoneyo reviewed Jul 17, 2024

View reviewed changes

eokoneyo approved these changes Jul 17, 2024

View reviewed changes

ElenaStoeva and others added 2 commits July 17, 2024 11:02

Remove default false value of prop

bab9b40

Merge branch 'main' into monaco-editor/add-search-functionality

76b5618

yuliacech self-requested a review July 23, 2024 10:08

yuliacech reviewed Jul 23, 2024

View reviewed changes

yuliacech approved these changes Jul 23, 2024

View reviewed changes

Merge branch 'main' into monaco-editor/add-search-functionality

7c1537d

ElenaStoeva merged commit 3c97fba into elastic:main Jul 23, 2024
21 checks passed

kibanamachine added v8.16.0 backport:skip This commit does not require backporting labels Jul 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Monaco Editor] Add Search functionality #188337

[Monaco Editor] Add Search functionality #188337

ElenaStoeva commented Jul 15, 2024 •

edited

Loading

ElenaStoeva commented Jul 15, 2024

elasticmachine commented Jul 16, 2024

eokoneyo left a comment •

edited

Loading

ElenaStoeva commented Jul 16, 2024

eokoneyo Jul 17, 2024 •

edited

Loading

ElenaStoeva Jul 17, 2024

eokoneyo left a comment

elasticmachine commented Jul 17, 2024

API count

ESLint disabled line counts

Total ESLint disabled count

yuliacech Jul 23, 2024

ElenaStoeva Jul 23, 2024

yuliacech left a comment

kibana-ci commented Jul 23, 2024

API count

ESLint disabled line counts

Total ESLint disabled count

[Monaco Editor] Add Search functionality #188337

[Monaco Editor] Add Search functionality #188337

Conversation

ElenaStoeva commented Jul 15, 2024 • edited Loading

Summary

ElenaStoeva commented Jul 15, 2024

elasticmachine commented Jul 16, 2024

eokoneyo left a comment • edited Loading

Choose a reason for hiding this comment

ElenaStoeva commented Jul 16, 2024

eokoneyo Jul 17, 2024 • edited Loading

Choose a reason for hiding this comment

ElenaStoeva Jul 17, 2024

Choose a reason for hiding this comment

eokoneyo left a comment

Choose a reason for hiding this comment

elasticmachine commented Jul 17, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History

yuliacech Jul 23, 2024

Choose a reason for hiding this comment

ElenaStoeva Jul 23, 2024

Choose a reason for hiding this comment

yuliacech left a comment

Choose a reason for hiding this comment

kibana-ci commented Jul 23, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

ElenaStoeva commented Jul 15, 2024 •

edited

Loading

eokoneyo left a comment •

edited

Loading

eokoneyo Jul 17, 2024 •

edited

Loading