github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/packages/kbn-text-based-editor
History
Stratoula Kalafateli c01ac61909
[ES|QL][Obs ai assistant] Some minor fixes in inline editing 💅 (#176706) 
## Summary

This PR fixes some small things in the inline editing of ES|QL charts in
the Obs ai assistant. Specifically:

- There is an empty line appearing at the top of the query, the query
starts from line 2, which I find annoying 😄
<img width="657" alt="image"
src="da65d19c-d412-48c9-8088-9456760f9448">

- I am using the ES|QL helper to create the adhoc dataview needed for
the inline editing. This helper creates an adhoc dataview based on the
index pattern (from command). If this adhoc dataview has already been
created it is using the existed one and doesn't re-create it from
scratch with a random id.

- I hide the `@timestamp found / not found` from the editor. It doesn't
make sense for embeddables which are being created outside Discover /
Dashboard at this point as they don't want to time filter using the
timepicker.

The information I am talking about is this one (check the text next to
the lines information at the bottom)

<img width="646" alt="image"
src="c9a2b022-2c73-4ea9-a752-d09faf40e1a5">


### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
2024-02-14 16:39:12 +02:00
..
.storybook [Text based languages] Creates editor reusable component (#158008) 2023-05-22 14:27:38 +03:00
src [ES|QL][Obs ai assistant] Some minor fixes in inline editing 💅 (#176706) 2024-02-14 16:39:12 +02:00
index.ts [ResponseOps][Alerting] ESQL alerting rule type ( pointed at main) (#165480) 2023-09-05 06:59:52 -07:00
jest.config.js [Text based languages] Creates editor reusable component (#158008) 2023-05-22 14:27:38 +03:00
kibana.jsonc [Text based languages] Creates editor reusable component (#158008) 2023-05-22 14:27:38 +03:00
package.json Make code editor treeshake-able (#172183) 2023-12-04 17:29:39 +01:00
README.md [Text based languages] Creates editor reusable component (#158008) 2023-05-22 14:27:38 +03:00
tsconfig.json [ES|QL] Use the shared ux Markdown component (#174320) 2024-02-12 10:47:36 +02:00

README.md

@kbn/text-based-editor

Contains the editor for text based languages. Specifically for:

  • ESQL, with autocomplete and syntax highlighting
  • SQL, with syntax highlighting

Contains the ESQL editor with the autocomplete and the autosuggest functionality (based on atlr). The antlr code can be found in packages/kbn-monaco/src/esql

A monaco based editor that is part of the unified search experience. It is rendered for all the applications that support text-based languages. In order to enable text based languages on your unified search bar add textBasedLanguages: ['SQL', 'ESQL', '...'] to the dataViewPicker properties.

Languages supported

  • SQL: based on the Elasticsearch sql api
  • ESQL: based on the Elastisearch esql api

Features

  • The editor operates in 3 modes:
    • The inline mode: This is the one liner compact mode. If the query is large or consists of >1 lines then the user can't see the entire query.
    • The inline focused mode. The editor is transferred to this mode automatically when the user clicks on the above mode. On this mode the user can work with multiple lines, see the entire context, see the errors, the editor line numbers and interact with the editor on a compact way. The editor returns automatically to the inline mode when the user clicks outside the editor.
    • The expanded mode: The user has to click the maximize button to use this mode. Here the user has more space and can also minimize/maximize the editor height with a drag and drop experience.
  • The editor has a built in way to depict the errors but the user has to submit the query first. The error should be on the inline focuses mode or the expanded mode to view the errors details.
  • The editor is responsive regardless of the mode selected.
  • The editor has a built in documentation that dynamically changes based on the language of the query.
  • The user can quickly submit the query by pressing CMD/CTRL + Enter.