Your window into the Elastic Stack
Find a file
Eyo O. Eyo 8f01c3032c
[SharedUX] Modify code editor theme definition and resolution implementation to account for color modes in EUI Theme (#203337)
## Summary

<!-- ### DONT MERGE, THIS PR DEPENDS ON AN UPDATE TO EUI, THAT'S IN
FLIGHT -->

Closes https://github.com/elastic/kibana/issues/202782

This PR reworks how custom themes used within the kibana code editor for
the default visual look and ones specific to supported languages are
defined to accomodate the upcoming visual refresh, the approach here
leverages the `euiTheme` object value returned from the `useEuiTheme`
hook, now a single theme declaration is all that is required such that
using either the `colorMode `value or the `euiTheme` from the provided
`UseEUITheme` value it's possible to craft a theme that's in the context
of kIbana, color mode aware and the editor would be able to resolve the
appropriate colors depending on the user's color mode.

This required some modification to monaco itself; now when defining
languages if the `CustomLanguageType` specification is being followed, a
function that resolves to a standard monaco theme can be provided on the
property `languageThemeResolver` which will be passed the `euiTheme`
when registering this theme. It's worth mentioning that this can also be
done manually by leveraging the custom method
`registerLanguageThemeResolver` added on the monaco editor object, like
so

```tsx
 monaco.editor.registerLanguageThemeResolver(LanguageID, languageThemeResolver);
``` 

However one should take note that when calling this method directly, the
ID passed must correlate to a registered language ID, else the theme
will not be available for use after Monaco is initialised, hence the
theme name must equal an existing language ID if it's to be used for a
specific language.


## How to test

- Enable borealis, like so;
	- in your `kibana.dev.yml` file include the following config;
		```yml
		uiSettings.experimental.themeSwitcherEnabled: true
		```
- start kibana using the following command;
`KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start --run-examples`
- Tryout all downstream of the code editor to ascertain the code editor
colors are as should be for both Amsterdam and Borealis; downstreams
include;
  - ES|QL editor, navigate to discover and click the "try ES|QL" button
- Dev tools, on clicking the nav hamburger menu under the management
menu group there's a menu item that links to all dev tools
- Index Management use cases; navigate to stack management, under Index
management select any existing index, then navigate to it's settings
this should load up the code editor.
- Saved Object use case; navigate to stack management, under saved
objects attempt inspecting any saved object we'd be presented with the
code editor etc.
  
<!--
### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...


-->

---------

Co-authored-by: ek-so <eksomail@gmail.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-01-03 15:02:24 +01:00
.buildkite Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
.devcontainer Removing experimental for the FIPS mode config (#200734) 2024-11-19 15:23:20 -05:00
.github [ResponseOps][Rules] Move synthetic rule types' params to @kbn/response-ops-rule-params (#204582) 2025-01-03 13:20:03 +01:00
api_docs [api-docs] 2025-01-03 Daily api_docs build (#205466) 2025-01-03 01:11:40 -06:00
config Deprecate Cloud Defend billing logic 2024-12-18 17:20:53 +02:00
dev_docs [api-docs] 2024-12-20 Daily api_docs build (#205030) 2024-12-20 01:03:46 -06:00
docs Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
examples Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
kbn_pm Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-operations (#202739) 2024-12-31 13:47:59 +01:00
legacy_rfcs Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
licenses Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
oas_docs [SecuritySolution] Update Entity analytics BE to support service entity type (#203409) 2025-01-02 13:50:08 +01:00
packages [SharedUX] Modify code editor theme definition and resolution implementation to account for color modes in EUI Theme (#203337) 2025-01-03 15:02:24 +01:00
plugins
scripts [ftr] Speed up FTR code owner check (#205093) 2025-01-02 11:10:20 -06:00
src [SharedUX] Modify code editor theme definition and resolution implementation to account for color modes in EUI Theme (#203337) 2025-01-03 15:02:24 +01:00
test Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
typings make emotion typing global (#200958) 2024-12-05 12:20:43 -06:00
x-pack [SharedUX] Modify code editor theme definition and resolution implementation to account for color modes in EUI Theme (#203337) 2025-01-03 15:02:24 +01:00
.backportrc.json chore(NA): adds 8.17 into backportrc (#201065) 2024-11-21 06:05:29 +00:00
.bazelignore Remove references to deleted .ci folder (#177168) 2024-02-20 19:54:21 +01:00
.bazeliskversion chore(NA): upgrade bazelisk into v1.11.0 (#125070) 2022-02-09 20:43:57 +00:00
.bazelrc chore(NA): use new and more performant BuildBuddy servers (#130350) 2022-04-18 02:01:38 +01:00
.bazelrc.common Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
.bazelversion chore(NA): revert bazel upgrade for v5.2.0 (#135096) 2022-06-24 03:57:21 +01:00
.browserslistrc Add Firefox ESR to browserlistrc (#184462) 2024-05-29 17:53:18 -05:00
.editorconfig
.eslintignore Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
.eslintrc.js Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
.gitattributes
.gitignore Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-operations (#202739) 2024-12-31 13:47:59 +01:00
.i18nrc.json Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
.node-version Upgrade Node.js to 20.15.1 (#187791) 2024-07-15 12:34:07 -05:00
.npmrc [npmrc] Fix puppeteer_skip_download configuration (#177673) 2024-02-22 18:59:01 -07:00
.nvmrc Upgrade Node.js to 20.15.1 (#187791) 2024-07-15 12:34:07 -05:00
.prettierignore
.prettierrc
.puppeteerrc Add .puppeteerrc (#179847) 2024-04-03 09:14:39 -05:00
.stylelintignore
.stylelintrc Bump stylelint to ^14 (#136693) 2022-07-20 10:11:00 -05:00
.telemetryrc.json [Sustainable Architecture] Telemetry schemas (#201760) 2024-11-27 18:18:09 +01:00
.yarnrc
BUILD.bazel Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
catalog-info.yaml [sonarqube] Disable cron (#190611) 2024-08-15 09:19:09 -05:00
CODE_OF_CONDUCT.md
CONTRIBUTING.md
FAQ.md Fix small typos in the root md files (#134609) 2022-06-23 09:36:11 -05:00
fleet_packages.json [main] Sync bundled packages with Package Storage (#192007) 2024-09-03 12:26:57 -05:00
github_checks_reporter.json
kibana.d.ts Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
LICENSE.txt Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
NOTICE.txt [api-docs] 2025-01-01 Daily api_docs build (#205342) 2025-01-01 01:37:13 -06:00
package.json Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
preinstall_check.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.md [README] Update version Compatibility with Elasticsearch (#116040) 2022-01-10 10:31:21 -05:00
renovate.json Dependency ownership for o11y teams, part 1 (#205429) 2025-01-02 15:40:39 -05:00
RISK_MATRIX.mdx
run_fleet_setup_parallel.sh Sustainable Kibana Architecture: Move modules owned by @elastic/fleet (#202422) 2024-12-24 15:32:43 +01:00
SECURITY.md
sonar-project.properties [sonarqube] update memory, cpu (#190547) 2024-09-09 16:16:30 -05:00
STYLEGUIDE.mdx [styleguide] update path to scss theme (#140742) 2022-09-15 10:41:14 -04:00
tsconfig.base.json Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00
tsconfig.browser.json
tsconfig.browser_bazel.json
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
TYPESCRIPT.md Fix small typos in the root md files (#134609) 2022-06-23 09:36:11 -05:00
updatecli-compose.yaml deps(updatecli): bump all policies (#195865) 2024-10-15 07:37:12 -05:00
versions.json chore(NA): update versions after v8.16.3 bump (#204640) 2024-12-18 01:13:19 +00:00
WORKSPACE.bazel chore(NA): remove usage of re2 and replace it with a non native module (#188134) 2024-07-15 20:33:28 +01:00
yarn.lock Sustainable Kibana Architecture: Move plugins owned by @elastic/appex-sharedux (#204959) 2025-01-03 05:38:57 -06:00

Kibana

Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch.

Getting Started

If you just want to try Kibana out, check out the Elastic Stack Getting Started Page to give it a whirl.

If you're interested in diving a bit deeper and getting a taste of Kibana's capabilities, head over to the Kibana Getting Started Page.

Using a Kibana Release

If you want to use a Kibana release in production, give it a test run, or just play around:

Building and Running Kibana, and/or Contributing Code

You might want to build Kibana locally to contribute some code, test out the latest features, or try out an open PR:

Documentation

Visit Elastic.co for the full Kibana documentation.

For information about building the documentation, see the README in elastic/docs.

Version Compatibility with Elasticsearch

Ideally, you should be running Elasticsearch and Kibana with matching version numbers. If your Elasticsearch has an older version number or a newer major number than Kibana, then Kibana will fail to run. If Elasticsearch has a newer minor or patch number than Kibana, then the Kibana Server will log a warning.

Note: The version numbers below are only examples, meant to illustrate the relationships between different types of version numbers.

Situation Example Kibana version Example ES version Outcome
Versions are the same. 7.15.1 7.15.1 💚 OK
ES patch number is newer. 7.15.0 7.15.1 ⚠️ Logged warning
ES minor number is newer. 7.14.2 7.15.0 ⚠️ Logged warning
ES major number is newer. 7.15.1 8.0.0 🚫 Fatal error
ES patch number is older. 7.15.1 7.15.0 ⚠️ Logged warning
ES minor number is older. 7.15.1 7.14.2 🚫 Fatal error
ES major number is older. 8.0.0 7.15.1 🚫 Fatal error

Questions? Problems? Suggestions?

  • If you've found a bug or want to request a feature, please create a GitHub Issue. Please check to make sure someone else hasn't already created an issue for the same topic.
  • Need help using Kibana? Ask away on our Kibana Discuss Forum and a fellow community member or Elastic engineer will be glad to help you out.