mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 10:40:07 -04:00
4b7f8d9399
## Summary This PR was originally addressing some dark-mode issues in the timeline. Those issues has been already fixed upstream but there are still valuable contributions in this PR that should be considered anyways: 1. unit test has been refactor to use `react-testing-library` instead of `enzyme` 2. the styling for the timeline has been moved from `styled-components` to `emotion` 3. the color tokens have been updated according to #199715 > [!important] > > #199715 also suggests to move away from the `success` tokens. However, in the drag-and-drop use-case the EUI team has confirmed that for now we should prefer the `success` tokens until proper drag-and-drop tokens will be produced ## Screenshots > [!important] > > Light mode was not visually impacted by these changes, therefore no screenshots have been provided ### Empty query builder - The background of the query builder matches the general background now - The dashed border is a little bit lighter than before **Before** <img width="1205" alt="dark-1-before" src="https://github.com/user-attachments/assets/2008ddd3-f801-4646-8407-045de4dc3ebd" /> **After** <img width="1206" alt="dark-1-after" src="https://github.com/user-attachments/assets/a93e4b7e-6666-4805-91d1-ab9b4c3f5b82" /> ### Drag-and-drop query builder - The border color is a bit washed up compared to the original one - The background green is darker and less teal **Before** <img width="1203" alt="dark-2-before" src="https://github.com/user-attachments/assets/b3d85b9e-3821-44c5-adaa-99719ca3aef6" /> **After** <img width="1074" alt="Screenshot 2025-06-04 at 18 45 16" src="https://github.com/user-attachments/assets/41b4cbca-4654-4571-a59c-4976ca0930a5" /> ## Code overview - `[...]/timelines/components/timeline/data_providers/index.tsx` - Replace `styled-components` with `emotion` - `styled-components` have an issue where the theme is always set to `LIGHT` in this component - after a bit of debugging the issue seems to come from eui, but the investigation was interrupted because - `styled-components` are deprecated anyways - `[...]/timelines/components/timeline/data_providers/index.test.tsx` - Refactor unit test from using `enzyme` to `react-testing-library` ## Credits Huge thanks to @kapral18 for working on this with me. ### Checklist <details> <summary>Expand</summary> 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/src/platform/packages/shared/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) - [ ] ... </details> --------- Co-authored-by: Karen Grigoryan <karen.grigoryan@elastic.co> |
||
|---|---|---|
| .. | ||
| kbn-babel-preset | ||
| kbn-bazel-runner | ||
| kbn-capture-oas-snapshot-cli | ||
| kbn-check-mappings-update-cli | ||
| kbn-check-prod-native-modules-cli | ||
| kbn-ci-stats-performance-metrics | ||
| kbn-ci-stats-shipper-cli | ||
| kbn-cli-dev-mode | ||
| kbn-dependency-ownership | ||
| kbn-dependency-usage | ||
| kbn-docs-utils | ||
| kbn-eslint-config | ||
| kbn-eslint-plugin-disable | ||
| kbn-eslint-plugin-eslint | ||
| kbn-eslint-plugin-eui-a11y | ||
| kbn-eslint-plugin-i18n | ||
| kbn-eslint-plugin-imports | ||
| kbn-eslint-plugin-telemetry | ||
| kbn-failed-test-reporter-cli | ||
| kbn-find-used-node-modules | ||
| kbn-generate | ||
| kbn-generate-console-definitions | ||
| kbn-import-locator | ||
| kbn-json-ast | ||
| kbn-kibana-manifest-schema | ||
| kbn-lint-packages-cli | ||
| kbn-lint-ts-projects-cli | ||
| kbn-lock-manager | ||
| kbn-managed-vscode-config | ||
| kbn-managed-vscode-config-cli | ||
| kbn-manifest | ||
| kbn-mock-idp-plugin | ||
| kbn-optimizer | ||
| kbn-peggy-loader | ||
| kbn-performance-testing-dataset-extractor | ||
| kbn-picomatcher | ||
| kbn-plugin-check | ||
| kbn-plugin-generator | ||
| kbn-plugin-helpers | ||
| kbn-relocate | ||
| kbn-repo-file-maps | ||
| kbn-repo-linter | ||
| kbn-repo-source-classifier | ||
| kbn-repo-source-classifier-cli | ||
| kbn-set-map | ||
| kbn-sort-package-json | ||
| kbn-styled-components-mapping-cli | ||
| kbn-ts-projects | ||
| kbn-ts-type-check-cli | ||
| kbn-validate-next-docs-cli | ||
| kbn-web-worker-stub | ||
| kbn-whereis-pkg-cli | ||
| kbn-yarn-lock-validator | ||