[Canvas] Add Monaco to the Canvas Expression Editor#41790
[Canvas] Add Monaco to the Canvas Expression Editor#41790poffdeluxe merged 28 commits intoelastic:masterfrom
Conversation
💔 Build Failed |
8240044 to
083b786
Compare
💔 Build Failed |
💔 Build Failed |
3485a06 to
769234b
Compare
💚 Build Succeeded |
💔 Build Failed |
eac5bb4 to
c2682c9
Compare
x-pack/legacy/plugins/code/public/monaco/override_monaco_styles.scss
Outdated
Show resolved
Hide resolved
💔 Build Failed |
💔 Build Failed |
|
@poffdeluxe Here is a prototype for how the signature/autocomplete content could look. I've taken what appears in the old/current autocomplete panel and spread it across these new Monaco popover panels. There are two autocomplete lists (function list; argument list) and each has an info panel for further detail that is opened via an icon (this is how it works in VS Code too). I'm imagining they work as they do today... user types What used to be in a table layout (the table of arguments) is now presented as a list of arguments with the old table content now presented as a text list atop each 'info panel' (Aliases:, Required:, Default:, Types:). I see it is common to have a little snippet of info detail alongside the icon in the arguments lits (alongside the argument name/before opening the info panel), but I have not mocked that up here. If we can add that bit of data, then we could pull the first or highest value piece of info from the info panel text (e.g. Default or Required). Prototype linkPreview screenshotsFunction list
Arguments list
|
💔 Build Failed |
💔 Build Failed |
|
I just pulled this down and ran into an immediate (visual) issue, the height of the editor was super small. I made it bigger using the Chrome Inspector and was able to check out the autocomplete stuff which is looking and working fantastically!
|
💔 Build Failed |
|
@poffdeluxe I just created a PR against this one for a small design change and some CSS class naming changes. As you'll see throughout Canvas and the rest of Kibana, we prefix custom classes with the application name so that we don't accidentally override styles in other apps. I noticed there are some autocomplete classes in this file that also do not use the app name as a prefix, but I was not sure if those will be pulled out an re-used globally? In that case, we would still prefix them but with Here is the PR, feel free to merge at your earliest convenience: poffdeluxe#1 |
fed5ba9 to
635097a
Compare
💚 Build Succeeded |
e5875bc to
a8c984b
Compare
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
| findMatchHighlightBackground: themeName.euiColorWarning, | ||
| }; | ||
|
|
||
| export const theme: monacoEditor.editor.IStandaloneThemeData = { |
There was a problem hiding this comment.
Can we find a way to get this working with CodeSearch's implementation? What differs? I know we're building this one fast, but it seems like something we should be doing rather than having two separate implementations out there.
https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/code/public/monaco/monaco.ts
There was a problem hiding this comment.
Yeah, I forked over there theming work they had in place. I'm not sure this implementation of Monaco stuff will be re-used over by the Code Search team since their work focuses on read-only Monaco with a decent amount of adjustments.
I figured that the first version of this Editor component that is Canvas specific can use the separate "forked" version of the theming and then when we pull this Editor up to be usable by all of Kibana, we can attempt to unify the theme work done by Code team.
That was my gameplan but I'm open to discussion if that isn't what we want to do
There was a problem hiding this comment.
I added this as a line item for discussion here as well #43814
|
@poffdeluxe I'd like to send over a design PR on this one before we merge it if that's OK. I can try to get it to you in the next 24h since I know you're trying to make this one work for FF |
💔 Build Failed |
| @@ -0,0 +1,158 @@ | |||
| /* | |||
There was a problem hiding this comment.
Thanks for the great work on this! Keen to use this component in Console ASAP :)
x-pack/legacy/plugins/canvas/public/components/expression_input/expression_language.ts
Outdated
Show resolved
Hide resolved
💔 Build Failed |
Clean up expression editor, remove autocomplete toggle
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
snide
left a comment
There was a problem hiding this comment.
Fixed the jumping editor issue @poffdeluxe. LGTM.
💚 Build Succeeded |
…editor # Conflicts: # x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js
💚 Build Succeeded |
* First version of Editor component and integration with the expression editor * Adding resize detector * Remove blue border on editor select * Adding types for the react resize detector * Adding worker and a few more monaco plugins * Suggestion completion rework * Add resize detector types as well as an IE11 full width bug fix * Adding correct types for function definitions and monaco * change CSS class names, add border to input * Adding boolean styling * Slight refactor of canvas function/arg types and adding first pass of hover * Fixing hover interaction for functions and arguments * Namespacing Code monaco css overrides * Styling cleanup and simple README * Setting up tests including some storyshots for the ExpressionInput component and Editor component * Prop documentation for both the ExpressionInput and Editor components * Adding Editor snapshots * tiny cleanup * Moving language registration, adding autocomplete suggestion types, and cleaning up editor * Some documentation and cleanup from PR feedback * Fixing types, adding documentation * clean up editor, remove autocomplete toggle * More PR cleanup * Test fix, type fix * fix issues around errors. code cleanup
* First version of Editor component and integration with the expression editor * Adding resize detector * Remove blue border on editor select * Adding types for the react resize detector * Adding worker and a few more monaco plugins * Suggestion completion rework * Add resize detector types as well as an IE11 full width bug fix * Adding correct types for function definitions and monaco * change CSS class names, add border to input * Adding boolean styling * Slight refactor of canvas function/arg types and adding first pass of hover * Fixing hover interaction for functions and arguments * Namespacing Code monaco css overrides * Styling cleanup and simple README * Setting up tests including some storyshots for the ExpressionInput component and Editor component * Prop documentation for both the ExpressionInput and Editor components * Adding Editor snapshots * tiny cleanup * Moving language registration, adding autocomplete suggestion types, and cleaning up editor * Some documentation and cleanup from PR feedback * Fixing types, adding documentation * clean up editor, remove autocomplete toggle * More PR cleanup * Test fix, type fix * fix issues around errors. code cleanup
Summary
react-resize-detectordependency for resizing of the editor component properlyChecklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support- [ ] Documentation was added for features that require explanation or tutorialsFor maintainers