## Summary
Closes https://github.com/elastic/kibana/issues/157203
Closes https://github.com/elastic/kibana/issues/158051
Closes https://github.com/elastic/kibana/issues/158049
With the addition of Per User Dark Mode, components can no longer rely
on `uiSettings` as the source of truth for theme.
CodeEditor fields used to call `uiSettings` to determine if Dark Mode
was enabled, which had been provided in each callers Kibana React
Context.
The new source of truth for theme is the `CoreStart >
ThemeServiceStart`.
Currently, not all callers of CodeEditor provide the `theme` service in
their Kibana Context in a similar way and some callers don't provide it
at all.
This PR updates CodeEditor to get theme values from the Kibana Context
using a new `useKibanaTheme` react hook.
It also attempts audit the callers of CodeEditor to see if their Kibana
Context contains the theme service at the top level (Where I could add
theme to a caller's Context without major changes, I did. Some cases
will require CodeOwner guidance).
The new `useKibanaTheme` react hook will throw a TypeError if theme
isn't found in the top level of the Kibana Context, this will help with
testing as the component will not render. I will remove this after
testing so as not to introduce breaking changes.
## Testing
Please review files for which you are CODEOWNER.
I've attempted to tag all usages of `CodeEditor`/`CodeEditorFIeld` with
a TODO comment with one of the following scenarios:
1) a note where theme was provided already/where I made changes to
provide it in the appropriate context
2) I've asked for CODEOWNER guidance
For scenario 1, please pull and test that CodeEditor locally:
1. Enable Dark Mode from Edit User Profiles by clicking on the Profile
Icon on the top right, and updating your profile.
2. Navigate to the CodeEditors in the plugins you own. If they render
and display in Dark Mode - add a green check to the table below - and
you're done!
3. If it is not rendering, please help me figure out where the theme
service should be provided in the context.
For scenario 2, we will need to figure out where to make changes so your
context is providing theme. Some of the more complex usages may need to
addressed in separate issues.
## Tracking
| Team | Plugin | Theme in Context ? | Verified Working |
| - | - | - | - |
| apm-ui | apm | APM Storybook broken | ? |
| kibana-presentation | presentation_util | Yes. | Yes |
| response-ops | trigger_actions_ui | Yes | Yes |
| response-ops | stack_alerts | Yes | Yes |
| kibana-security | security | Yes | Yes |
| security-defend-workflows | osquery | Yes | Yes |
| kibana-app-services | examples/expression_explorer | Yes | Yes |
| ml-ui | transform | Yes | Yes |
| ml-ui | ml | Yes | Yes |
| uptime | synthetics | Yes | Yes |
| kibana-gis | maps | Yes | Yes |
| kibana-gis | file_upload | Yes | Yes |
| platform-deployment-management | watcher | Yes | [AG] Yes |
| platform-deployment-management | snapshot_restore | Yes | [AG] Yes |
| platform-deployment-management | runtime_fields | Yes | [AG] Yes |
| platform-deployment-management | painless_lab | Yes | [AG] Yes |
| platform-deployment-management | ingest_pipelines | Yes | [AG] Yes |
| platform-deployment-management | index_management | Yes | [AG] Yes |
| platform-deployment-management | grokdebugger | Yes | [AG] Yes |
| platform-deployment-management | es_ui_shared | Yes | [AG] Yes |
| fleet | fleet | Yes | Yes |
| enterprise-search-frontend | enterprise_search | Yes | [AG] Yes |
| kibana-cloud-security-posture | cloud-security-posture | Yes | yes |
| sec-cloudnative-integrations | cloud_defend | Yes | Yes |
| kibana-visualizations/kibana-data-discovery | data | Yes | Yes |
| kibana-visualizations | examples/testing_embedded_lens | Yes | Yes |
| kibana-visualizations | vis_types | Yes | Yes |
| kibana-visualizations | vis_default_editor | Yes | Yes |
| kibana-visualizations | unified_search | Yes | Yes |
| kibana-visualizations | packages/kbn-text-based-editor | Yes | Yes |
| kibana-visualizatons | lens | Yes | Yes|
| kibana-core | saved_objects_management | Yes | Yes |
| kibana-presentation | inspector | Yes | Yes |
| kibana-presentation | canvas | Yes | Yes |
| kibana-data-discovery | discover | Yes | Yes |
| kibana-data-discovery | data_view_management | Yes | Yes |
| kibana-data-discovery | data_view_field_editor | Yes | Yes |
| appex-sharedux | advanced_settings | Yes | Yes |
| enterprise-search-frontend | serverless_search | Yes | [AG] Yes |
| - | - | - | - |
## Unit tests
Currently, many tests are failing since they are probably not providing
`theme` in the context. Once CODEOWNERs have weighed in on CodeEditors
usages that require discussion, I will update the accompanying tests.
## Release note
- Fixes theming of CodeEditors
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Alison Goryachev <alisonmllr20@gmail.com>
Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>
Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
* Update all usages of EuiPageTemplate to EuiPageTemplate_Deprecated
* EuiPageContent_Deprecated as EuiPageContent
* EuiPageContentBody_Deprecated as EuiPageContentBody
* EuiPageContentHeader_Deprecated as EuiPageContentHeader
* EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection
* EuiPageSideBar_Deprecated as EuiPageSideBar
* EuiPageContent__Deprecated to EuiPageContent_Deprecated
* Fix rogue semi-colons
* WIP: NoDataConfigPage & NoDataPage converted to new template
- `withSolutionNav` not yet handled
* WIP: KibanaPageTemplateInner converted to use new template
- Pushes existing `pageHeader` prompts onto created EuiPageTemplate.PageHeader
- Uses `isEmptyState` to push `pageHeader` props to EuiPageTemplate.EmptyPrompt instead (if `children` are not supplied)
* WIP: `withSolutionNav` now renders the sidebar content properly
- Collapsing isn’t working (minWidth isn’t updating)
* Fixing stickiness of sidebar
* [Security] Fixed SecuritySolutionTemplateWrapper’s usage
- Moved `bottomBar` to EuiPageTemplate.BottomBar (now contained in just the page contents)
- Change EuiPanel children wrapper with EuiPageTemplate.Section
* [O11y] Wrap `children` with EuiPageTemplate.Section
* Fix getting_started usage
* WIP: Fixing types
* Removing `template` pass through
* Set EUI to 63.0.0
* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'
* More import fixes
* Sidebar component update
* Expand `KibanaPageTemplate` to all namespaced EUI counterparts
- Updated `docs/tutorials` mdx page
- Fixed SolutionNav prop types
* Updated the tutorial mdx page
* [Stack Management] Updated app layout to new template
- Some temporary props applied for BWC until all other pages can be converted
- Converted `API Keys` page’s layout (and especially prompt usags) to new paradigm
* Fix circular dep
* Fix new circular dependency
- copying and pasting types from KibanaPageTemplateProps, but ah well
* [Security Solution] Remove `template` prop - no longer a prop on Kibana/EuiPageTemplate
* [O11y] Allow customizing EuiPageTemplate.Section wrapper
- converts pageBodyProps
- fixes non-centered loading template
* [Enterprise Search] Update page templates
- fix layouts by auto-wrapping an EuiPageSection for padding, while adding a `customPageSections` prop for more custom sections/layouts
- re-center 404 errors
- update tests
* Update KibanaPageTemplate tests
* Update snapshots
* Fix FTR test with removed EUI classNames
* Fix FTR tests with changed kbn classNames
* Update failing dashboard snapshots
- drop shadow changed slightly in EUI
* Fix failing Security Cypress test
* [O11y] Fix Inventory page using deprecated CSS hooks
* [O11y][Uptime] Fix missing bottom bars
- Modifies ObservabilityPageTemplate to accept a `bottomBar` prop (a la the old EuiPageTemplate behavior)
NOTE: This opinionated page layout structure is starting to feel like it could be potentially limiting / have all the same pitfalls the previous EuiPageTemplate did. If so, consider something closer to the Enterprise Search page template conversion (`customPageSections`).
- Misc cleanup: Use `KibanaPageTemplate` over `EuiPageTemplate`
* [O11y] Fix route template typing
- Since theObservabilityPageTemplate is using the new Eui/KibanaPageTemplate, its child templates and types need to be updated accordingly
* Fix broken minWidth behavior
- was an EUI issue that required a patch release
+ update snapshots
* [Security Solution] Type fixes, restore empty state
- Fix empty state logic removed in a previous commit
- bogarts KibanaPageTemplate's `isEmptyState` prop instead of using `template="noData"`
- extend template wrappers to past ...rest to underlying Kibana/EuiPageTemplate
+ replace EuiPageTemplate with KibanaPageTemplate for consistency
* Fix failing synthetics selector
* Grab EUI v63.0.6
- for deprecation tags and section tag support
* Fix Kibana Overview plugin layout
- needs to use KibanaPageTemplate.Section to get padding back
- use `bottomBorder` prop over horizontal rules
- restore previous page color via panelled=false
* Convert Home plugin to new KibanaPageTemplate
- use KibanaPageTemplate.Section instead to preserve page width/paddings
- use `bottomBorder` instead of `EuiHorizontalRule`
- NOTE: This causes margins to decrease slightly from xxl to xl (largest padding available for EuiPageSection) - this can be restored by CSS overrides if desired
- update CSS to preserve previous looks, + convert to logical properties
* [O11y] Fix non-centered empty/loading states
* [O11y] Restore subdued background on various empty state prompts
* [O11y] Fix all instances of views that require a scrollable full-height child
+ restore comment for inventory view
* [O11y][ux] Fix broken sidebar
- The entire app was missing a wrapping EuiProvider, and as such breakpoint utils were not working, and the sidebar was missing
+ misc cleanup
- remove unnecessary fragment
- remove role="main" attr - now that EuiPageTemplate sets a `main` tag, they'll conflict
- add isEmptyState to center loading component
* [APM Cypress tests] harden flaky test
* [APM Cypress tests] Fix failing Cypress test, again
Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
* chore(NA): auto creation of the package.json for the new types pkg rule
* chore(NA): first alpha api extractor working version
* chore(NA): support kbn-analytics
* chore(NA): correctly read tsconfig files and deps from ts_config rule
* chore(NA): layed out pkg_npm_types tree artifact custom rule
* chore(NA): missing todos
* chore(NA): node modules link mapping
* chore(NA): fully working pkg_npm_types rule
* chore(NA): fix changes on new packages using elastic datemath pkgs
* docs(NA): remove todo
* docs(NA): last todo text correction
* chore(NA): removed commented lines
* fix(NA): include missing package version
* chore(NA): include license keys
* chore(NA): change mock types package into private
* chore(NA): disable validator on ts_project rule
* chore(NA): use the wrapper for ts_project
* commit using @elastic.co
* chore(NA): commit using @elastic.co
* chore(NA): split types from code on @kbn/i18n
* chore(NA): update yarn.lock file
* chore(NA): split @kbn/i18n and @kbn/i18n-react
* chore(NA): missing import fix
* chore(NA): fix jest project configs
* chore(NA): change imports on kbn i18n
* chore(NA): change imports on kbn i18n
* chore(NA): correct loader imports
* chore(NA): missnig i18nLoader export key
* chore(NA): fix type exports
* chore(NA): export type only
* chore(NA): export type only
* fix(NA): type exports
* chore(NA): missing @Kbn/i18n/react imports
* chore(NA): missing skip path for kbn-i18n-react
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* eui to v41.0.0
* update eui i18n tokens
* sass tokens
* EuiLoadingKibana
* EuiCodeEditor
* subdued
* betaBadgeProps
* EuiCodeEditor null-loader
* src secondary -> success
* [enterprise_search] Deprecate 'secondary' color prop
* [apm] Deprecate 'secondary' color prop
* [canvas] Deprecate 'secondary' color prop
* [cases] Deprecate 'secondary' color prop
* [cross_cluster_replication] Deprecate 'secondary' color prop
* [data_enhanced] Deprecate 'secondary' color prop
* [data_visualizer] Deprecate 'secondary' color prop
* [fleet] Deprecate 'secondary' color prop
* [index_management] Deprecate 'secondary' color prop
* [infra] Deprecate 'secondary' color prop
* [ingest_pipelines] Deprecate 'secondary' color prop
* [maps] Deprecate 'secondary' color prop
* [ml] Deprecate 'secondary' color prop
* [monitoring] Deprecate 'secondary' color prop
* [observability] Deprecate 'secondary' color prop
NB: conditional became `type === 'success' ? 'success' : type` after find&replace, which felt fairly redundant, so I simplified it
* [osquery] Deprecate 'secondary' color prop
* [painless_lab] Deprecate 'secondary' color prop
* [remote_clusters] Deprecate 'secondary' color prop
* [rollup] Deprecate 'secondary' color prop
* [security] Deprecate 'secondary' color prop
* [security_solution] Deprecate 'secondary' color prop
NB: several conditional became `type === 'success' ? 'success' : type` after find&replace, which felt fairly redundant, so I simplified them
* [snapshot_restore] Deprecate 'secondary' color prop
* [spaces] Deprecate 'secondary' color prop
* [transform] Deprecate 'secondary' color prop
* [triggers_actions_ui] Deprecate 'secondary' color prop
* [uptime] Deprecate 'secondary' color prop
* [watcher] Deprecate 'secondary' color prop
* [infra] replace ambiguous 'secondary' color
- GaugesSectionVis doesn't appear to use the color property but it's required by the SeriesOverrides types, so changing it just in case
* [examples] Deprecate 'secondary' color prop
* [uptime] deprecate 'subdued' prop on EuiButtonIcon
* revert EuiKeyPadMenuItem betaBadge props
* mobileOptions
* examples/ updates
* fix brace import
* fix type exports
* update expressions_explorer requiredBundles
* remove make_id mocks
* snapshot updates
* fix import 🤦
* Fix `ReferenceError: ace is not defined` Jest failures
* Remove unused brace import (?)
- Assuming here, as no code editor is actually being used in this file
* Fix failing Jest test due to EuiCodeEditor moving to es_ui_shared plugin
+ minor cleanup of `jest.mock()`s
* Fix failing Jest test due to snapshot update
* Fix failing `TypeError: Cannot read properties of undefined (reading 'euiBorderRadius')` Jest test
- since this is being mount()'d, EuiThemeProvider as a wrapper is needed to prevent the failure
* access uiSettings
* Move react-ace dependency into kbn-ui-shared-deps-npm
* Revert App Search shenanigans
- caused local unsaved changes shenanigans, somehow
* secondary -> success
Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Constance Chen <constance.chen@elastic.co>
* Update ESLint config to disallow usage of the any type
* Remove the any type usages from the expressions plugin
* Update plugins using expressions according to the updated public API
* Add partial result flag to the execution result
* Update expressions plugin run method to return observable
* Update data getter in the execution contract to return observable
* Update the expression loader to take into account the partial results flag
