Url template editor #88577
Url template editor #88577
Conversation
src/plugins/kibana_react/public/url_template_editor/styles.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
autocompletion is a bit annoying, is it possible to tweak this ?
- autocompletion auto pops up while writing your URL at any point, in between url but also when inside {{}} code brackets writing my if statement. if selected there it will insert nested {{}} which is probably not what we want. I would expect autocompletion to either not pop up when i am inside {{}} or to correctly insert variable name in that case (without nested {{}})
- there is no autocompletion on handlebars operators, would that be possible to add, so that when I am inside {{}} i could see what's possible ?
- accessing documentation is only possible with keyboard+mouse combo. mouse over the dropdown entry doenst show the short description and info icon (this is only possible with keyboard). there seems to be no way to select info icon (expand info) with keyboard only (clicking the info icon is only possible with mouse). also there seems to be no way to close the info popup with keyboard (only possible with mouse)
There was a problem hiding this comment.
Nice work! Was surprised to see value where possible as part of documentation!
Some feedback I think we could try to improve:
-
When I typed
{{and then do auto-completion inside it results in{{{{. Would it be possible to avoid it?
-
In older implementation longer URLs wrapped and this was convenient, is it possible to do something similar? I think currently It is more difficult to work with longer URLs:
Before:
After:
-
To my eye editor doesn't have enough contrast with the flyout background. Maybe it needs a border or darker background? cc @mdefazio
-
URL highlight breaks for complex URLs, for example, like we have in Kibana:
try this one:
{{kibanaUrl}}/app/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'{{event.from}}',to:'{{event.to}}'))&_a=(columns:!(_source),filters:{{rison context.panel.filters}},index:'{{context.panel.indexPatternId}}',interval:auto,query:(language:{{context.panel.query.language}},query:'{{context.panel.query.query}}'),sort:!())
if fixing this is a question of adjusting regex, then it would definitely worth improving 👍
-
Looks like URL dropdown editor stuff was part of a main bundle :( (tech debt). With this pr this piece is growing significantly. Would it be possible to move some of that into async chunk? If it is not straightforward, then we should create an issue.
-
One of the functional test is still failing? Didn't look into that. Just calling out, not sure if a legit regression.
This is a tough balance—if we darken the background it will likely not have enough contrast with the text inside it. Perhaps a slightly darker border as you mentioned might help better define where the code editor is within the flyout. Though I don't know that we do this elsewhere. Maybe wait and see if others mention it as well? |
|
@mdefazio I've implemented both of your suggestions. @ppisljar still looking into some of your comments, some answers:
@Dosant all your comments should be addressed now:
|
|
Zoomed with @ppisljar, we agreed that current PR is good to be merged and in a separate PR I will work to improve:
Update: I've figured it out, disabling autocompletion in those cases could be achieved with a setting for Monaco editor. I'll push a commit to this PR. |
| ); | ||
| }; | ||
|
|
||
| public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig); | ||
|
|
||
| public readonly createConfig = () => ({ | ||
| url: { template: '' }, | ||
| url: { | ||
| template: 'Example: https://example.com/?{{event.key}}={{event.value}}', |
There was a problem hiding this comment.
I think that because of how we don't have a real placeholder, but a "default" URL instead it is not a good idea to have Example prefix 🤔
Because now our default URL template is invalid
cc @mdefazio
💚 Build SucceededMetrics [docs]Module Count
Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
* feat: 🎸 set up Storybook for URL template editor * feat: 🎸 add basic syntax highlighting * feat: 🎸 add autocompletion example * feat: 🎸 add Handlebars language * fix: 🐛 first register language * feat: 🎸 add url and handlebars language parsing * feat: 🎸 use simple Handlebars language * refactor: 💡 move <VariablePopover> to a separate file * feat: 🎸 add Monaco editor to URL drilldown * feat: 🎸 remove editor line numbers * feat: 🎸 allow user to provide Handlebars variables * feat: 🎸 wire in URL drilldown variables into Monaco editor * feat: 🎸 add metadata to event level variables * feat: 🎸 allow to specify Handlebars variable kind * feat: 🎸 add global variables to autocompletion * refactor: 💡 restructure event and context variable code * feat: 🎸 sort variables by scope group * feat: 🎸 add meta information to context variables * docs: ✏️ use correct variable labels * feat: 🎸 fix component demo props * feat: 🎸 improve highlighting of URL parts * feat: 🎸 improve syntax highlighting colors * feat: 🎸 improve highlighting colors * feat: 🎸 add color to url query parameter key * feat: 🎸 improve visual layout url editor * feat: 🎸 highlight URL slashes with light color * feat: 🎸 connect URL editor to state * feat: 🎸 tweak URL parameter colors * feat: 🎸 improve URL schema color * feat: 🎸 insert variables on click in variable dropdown * fix: 🐛 fix unit tests and translation * test: 💍 fix drilldown tests after refactor * feat: 🎸 add dark mode support to URL template editor * test: 💍 fix URL drilldown test after adding dark mode support * fix: 🐛 use text color which can be converted to dark mode * test: 💍 fill in URL template in monaco editor * fix: 🐛 fix translation key * chore: 🤖 update license headers * chore: 🤖 update license headers * feat: 🎸 preview values of global variables * feat: 🎸 preview values of context variables * chore: 🤖 fix url editor Storybook config * fix: 🐛 make translation key unique * feat: 🎸 stop Esc key propagation in URL editor * feat: 🎸 reduce editor height * feat: 🎸 set example URL once URL drilldown is created * feat: 🎸 add word wrapping to URL editor * feat: 🎸 use EUI variable in SCSS * feat: 🎸 add "Example: " prefix to default template * feat: 🎸 do not insert extra brackets * feat: 🎸 make URL param values same color as text * perf: ⚡️ make URL drilldown config component lazy loaded * test: 💍 remove default URL drilldown template * fix: 🐛 disable autocompletion popup while typing * style: 💄 don't use "Example: " prefix in default URL
Summary
Closes #69413
Closes #83328
This PR replaces URL Drilldown textarea for URL template editing with Monaco editor. This enables:
Simple URL:
With query params:
Complex long link:
With if-statement:
Autocompletion:
Description about each variable:
Checklist
Delete any items that are not applicable to this PR.
For maintainers