[Canvas] Add Monaco to the Canvas Expression Editor #41790
Conversation
💔 Build Failed |
poffdeluxe
force-pushed
the
monaco-exprs-editor
branch
from
8240044 to
083b786
Compare
💔 Build Failed |
💔 Build Failed |
poffdeluxe
force-pushed
the
monaco-exprs-editor
branch
from
3485a06 to
769234b
Compare
💚 Build Succeeded |
💔 Build Failed |
poffdeluxe
force-pushed
the
monaco-exprs-editor
branch
from
eac5bb4 to
c2682c9
Compare
x-pack/legacy/plugins/code/public/monaco/override_monaco_styles.scss
Outdated
Show resolved
Hide resolved
poffdeluxe
changed the title
💔 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 |
poffdeluxe
force-pushed
the
monaco-exprs-editor
branch
from
fed5ba9 to
635097a
Compare
💚 Build Succeeded |
poffdeluxe
force-pushed
the
monaco-exprs-editor
branch
from
e5875bc to
a8c984b
Compare
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 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 |
💚 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