New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Console] Monaco migration: send request and copy as curl buttons #179808

Merged

yuliacech merged 19 commits into elastic:main from yuliacech:console/implement_editor_actions

Apr 16, 2024

Contributor

yuliacech commented Apr 2, 2024 •

edited

Loading

Summary

Closes #178990

This PR adds the actions buttons to the monaco editor and the functionality for the buttons to send a request and copy the request as a curl command. When the cursor or user selection doesn't overlap or contain any requests on the selected line, the actions buttons are hidden. When the cursor or selection changes, the buttons are displayed on the 1st line of the 1st selected request. Several requests can be sent at once. Only the 1st request is copied as a curl command.

There are also some minor UI and copy changes (see screenshots below) as suggested by @MichaelMarcialis in the review.

Screenshot

Before

Screenshot 2024-04-15 at 15 16 59

Screenshot 2024-04-15 at 15 17 07

After

Screenshot 2024-04-15 at 15 18 08

Screenshot 2024-04-15 at 15 18 14

How to test

Check that the actions buttons are not displayed when there are no requests in the input
Check that the actions buttons are not displayed when no requests are selected by the cursor or the selection
Check that the selected requests are highlighted
Check that the buttons are displayed on the 1st line of the 1st selected request
Check that the position of the buttons is updated when the editor is scrolled up or down

Follow up issues

The functionality for the button to open a documentation for the 1st selected request
The functionality for the button to auto-indent input
The input highlighting is temporarily reset when sending a request
Sent requests need to be saved to history
After sending a request, the autocomplete polling needs to be restarted
Add more unit tests

yuliacech force-pushed the console/implement_editor_actions branch 2 times, most recently from 7dd8c03 to f1384bd Compare

April 2, 2024 11:57


          [Console] Implement a sense editor for monaco

bb3d4fb

yuliacech force-pushed the console/implement_editor_actions branch from f1384bd to bb3d4fb Compare

April 2, 2024 11:58

yuliacech and others added 2 commits

April 2, 2024 17:28


          [Console] Implement "send current request"

059277d


          Merge branch 'main' into console/implement_editor_actions

8d3de48

yuliacech added Feature:Console Team:Kibana Management release_note:skip backport:skip labels

yuliacech and others added 6 commits

April 3, 2024 19:10


          [Console] Update editor actions buttons

9aaf989


          Merge branch 'main' into console/implement_editor_actions

39466c8


          [Console] Added more listeners and debounce

5a109a4


          Clean up

e8d3c2e


          Clean up

d93ca6d


          Clean up

d57a527

yuliacech commented

View reviewed changes

packages/kbn-monaco/src/console/console_errors_provider.ts

+              import { CONSOLE_LANG_ID } from './constants';
+              import { monaco } from '../monaco_imports';
+              export const setupConsoleErrorsProvider = (workerProxyService: ConsoleWorkerProxyService) => {

Contributor Author

yuliacech Apr 4, 2024

this file is copied from the previously used file packages/kbn-monaco/src/ace_migration/setup_worker.ts

yuliacech commented

View reviewed changes

packages/kbn-monaco/src/console/console_worker_proxy.ts

+              import { CONSOLE_LANG_ID } from './constants';
+              import { ConsoleParserResult, ConsoleWorkerDefinition } from './types';
+              export class ConsoleWorkerProxyService {

Contributor Author

yuliacech Apr 4, 2024

this file is copied from the previously used file packages/kbn-monaco/src/ace_migration/worker_proxy.ts


          Add tests

c4e984a

Contributor Author

yuliacech commented Apr 4, 2024

/ci


          Merge branch 'main' into console/implement_editor_actions

5ffedbf

Contributor Author

yuliacech commented Apr 4, 2024

/ci


          Merge branch 'main' into console/implement_editor_actions

0e772d5

yuliacech changed the title ~~Console/implement editor actions~~ [Console] Monaco migration: send request and copy as curl buttons

yuliacech marked this pull request as ready for review

April 5, 2024 08:05

yuliacech requested review from a team as code owners

April 5, 2024 08:05

Contributor

elasticmachine commented Apr 5, 2024

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

yuliacech mentioned this pull request

[Console Monaco migration] Register keyboard commands #180212

Closed

This was referenced Apr 5, 2024

[Console Monaco migration] Fix highlighting bug #180218

Closed

[META] Console Monaco migration #180207

Closed

[Console Monaco migration] Action button to open documentation #180209

Closed

ElenaStoeva self-requested a review

April 9, 2024 14:32

MichaelMarcialis reviewed

View reviewed changes

Contributor

MichaelMarcialis left a comment

Thanks for the ping, @yuliacech! I'm coming in a bit sideways, so I've left you a handful of comments/questions for my initial review. Let me know if there's anything than needs additional clarity.

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Outdated

Comment on lines 78 to 86

+                          <EuiLink
+                            color="success"
+                            onClick={sendRequestsCallback}
+                            data-test-subj="sendRequestButton"
+                            aria-label={i18n.translate('console.sendRequestButtonTooltip', {
+                              defaultMessage: 'Click to send request',
+                            })}
+                          >
+                            <EuiIcon type="playFilled" />

Contributor

MichaelMarcialis Apr 9, 2024

Would it be better to use the EuiButtonIcon component here, instead of EuiLink?

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

Comment on lines +91 to +98

+                        <ConsoleMenu
+                          getCurl={getCurlCallback}
+                          getDocumentation={() => {
+                            return Promise.resolve(null);
+                          }}
+                          autoIndent={() => {}}
+                          notifications={notifications}
+                        />

Contributor

MichaelMarcialis Apr 9, 2024

Would it be better to use the EuiButtonIcon component here, instead of EuiLink?

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Outdated Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Outdated Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx Show resolved Hide resolved

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

Comment on lines +91 to +98

+                        <ConsoleMenu
+                          getCurl={getCurlCallback}
+                          getDocumentation={() => {
+                            return Promise.resolve(null);
+                          }}
+                          autoIndent={() => {}}
+                          notifications={notifications}
+                        />

Contributor

MichaelMarcialis Apr 9, 2024

The current "Open documentation" button doesn't appear to open any Elastic documentation that I can see. Is it supposed to navigate me to or open a new browser tab to the full Elastic docs?

src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx

Comment on lines +91 to +98

+                        <ConsoleMenu
+                          getCurl={getCurlCallback}
+                          getDocumentation={() => {
+                            return Promise.resolve(null);
+                          }}
+                          autoIndent={() => {}}
+                          notifications={notifications}
+                        />

Contributor

MichaelMarcialis Apr 9, 2024

Is the current "Open documentation" action intend to be contextual to the currently highlighted command? If not, would both "Open documentation" and "Auto indent" actions be better served as global actions rather than individual command actions?

ElenaStoeva reviewed

View reviewed changes

Contributor

ElenaStoeva left a comment

Amazing job @yuliacech! I tested locally and everything implemented so far works well (apart from the highlighting issue but this is not related to this PR). I left a few comments where I thought documentation or unit tests could be added.

packages/kbn-monaco/src/console/console_errors_provider.ts

+              import { CONSOLE_LANG_ID } from './constants';
+              import { monaco } from '../monaco_imports';
+              export const setupConsoleErrorsProvider = (workerProxyService: ConsoleWorkerProxyService) => {

Contributor

ElenaStoeva Apr 12, 2024

Might be helpful to add some documentation here that explains what this function does.

packages/kbn-monaco/src/console/console_parsed_requests_provider.ts

+              import { ParsedRequest } from './types';
+              import { monaco } from '../monaco_imports';
+              export class ConsoleParsedRequestsProvider {

Contributor

ElenaStoeva Apr 12, 2024

Documentation would be helpful here as well.

packages/kbn-monaco/src/console/console_worker_proxy.ts

+              import { CONSOLE_LANG_ID } from './constants';
+              import { ConsoleParserResult, ConsoleWorkerDefinition } from './types';
+              export class ConsoleWorkerProxyService {

Contributor

ElenaStoeva Apr 12, 2024

Documentation would be helpful here as well.

packages/kbn-monaco/src/console/parser.test.ts

+                  const { requests } = parser(input) as ConsoleParserResult;
+                  expect(requests.length).toBe(2);
+                });
+              });

Contributor

ElenaStoeva Apr 12, 2024

I wonder if we could also add test cases for requests with data to make sure it is parsed correctly. Wdyt?

src/plugins/console/public/application/containers/editor/monaco/utils.ts

+              import type { DevToolsVariable } from '../../../components';
+              import { EditorRequest } from './monaco_editor_actions_provider';
+              import { MetricsTracker } from '../../../../types';

Contributor

ElenaStoeva Apr 12, 2024

We could add some unit tests for these util functions.

yuliacech and others added 5 commits

April 15, 2024 11:07


          Merge branch 'main' into console/implement_editor_actions

1904bc5


          [Console] Address code review comments

e5d9229


          [Console] Address code review comments

5efc013


          [Console] Address code review comments


          [Console] Address code review comments

90f1789

Contributor Author

yuliacech commented Apr 15, 2024

Thanks a lot for your review, @MichaelMarcialis! I implemented your suggestions for the buttons, except for usage of EuiButtonIcon: it renders the icons with some padding that messes up the alignment of the buttons on the line.

So I kept EuiLink with a nested icon for now, since it results in the same html structure as EuiButtonIcon anyways (button with an svg). Let me know if you think we should address this in a follow up issue.
To answer your question about documentation and auto-indent buttons: this functionality is not yet implemented, we have #180209 and #180213 to to track this work. Both actions apply to the "current" request, so the browser will open a new tab with the docs for the specific request and also indentations are applied only to the selected request.

Contributor Author

yuliacech commented Apr 15, 2024

Thanks a lot for your review, @ElenaStoeva!
I added comments explaining what some of the classes are used for, let me know if that makes sense or if more information could be useful there. Also added more unit tests as you suggested.

yuliacech requested review from MichaelMarcialis and ElenaStoeva

April 15, 2024 16:52

MichaelMarcialis approved these changes

View reviewed changes

Contributor

MichaelMarcialis left a comment

Thanks for making those changes, @yuliacech! Looks great.

I implemented your suggestions for the buttons, except for usage of EuiButtonIcon: it renders the icons with some padding that messes up the alignment of the buttons on the line.

So I kept EuiLink with a nested icon for now, since it results in the same html structure as EuiButtonIcon anyways (button with an svg). Let me know if you think we should address this in a follow up issue.

Yeah, this might be worthwhile to revisit in a follow-up issue. While the resulting HTML may be the same or similar, the button component styling is a bit more robust in regard to the hover/focus/active states, while the link component for icon-only content is a bit lacking. Things that jump to mind that may remedy the alignment issue you reference could be to 1) increase the console editor's line height, 2) override the EUI button styles to be slightly smaller, or 3) some combination of the two.

To answer your question about documentation and auto-indent buttons: this functionality is not yet implemented, we have #180209 and #180213 to to track this work. Both actions apply to the "current" request, so the browser will open a new tab with the docs for the specific request and also indentations are applied only to the selected request.

Gotcha. In that case then, the only concern I'd mention currently is that the documentation link doesn't work in some situations. For example, incomplete or invalid commands appear to result in nothing happening when attempting to view the documentation. Should we disable or hide the documentation link in those conditional situations?

Otherwise, this looks good from my perspective. Approving now so I don't hold you up further.


          Merge branch 'main' into console/implement_editor_actions

3d458e6

Dosant approved these changes

View reviewed changes

Contributor

Dosant left a comment

Amazing work 👏
Approving to unblock, haven't tested

ElenaStoeva approved these changes

View reviewed changes

Contributor

ElenaStoeva left a comment

Thanks for addressing my feedback @yuliacech!


          Merge branch 'main' into console/implement_editor_actions

ece77c6

yuliacech mentioned this pull request

[Console] Improve editor action buttons #180911

Open

Contributor Author

yuliacech commented Apr 16, 2024

Opened #180911 to follow up on the action buttons

yuliacech enabled auto-merge (squash)

April 16, 2024 12:20

Collaborator

kibana-ci commented Apr 16, 2024

💚 Build Succeeded

Buildkite Build
Commit: ece77c6

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`console`	243	246	+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/monaco`	107	120	+13

Async chunks

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

id	before	after	diff
`console`	434.5KB	439.1KB	+4.6KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/monaco`	2	3	+1

Page load bundle

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

id	before	after	diff
`console`	31.9KB	32.1KB	+126.0B
`kbnUiSharedDeps-srcJs`	2.9MB	2.9MB	+1.2KB
total			+1.3KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/monaco`	107	120	+13

History

💚 Build #203919 succeeded 3d458e6
💛 Build #203770 was flaky 90f1789
💛 Build #203707 was flaky 5efc013
💚 Build #203554 succeeded 1904bc5
💚 Build #201192 succeeded 5ffedbf
💔 Build #201178 failed c4e984a

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

yuliacech merged commit 0b4e60e into elastic:main

16 checks passed

kibanamachine added the v8.14.0 label

Blankll mentioned this pull request

[BUG] editor shaking geek-fun/dockit#135

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip Feature:Console release_note:skip Team:Kibana Management v8.14.0