kibana/examples
Kibana Machine 6faee304fe
[8.9] Changing where CodeEditor fields get useDarkMode value (#159638) (#161707)
# Backport

This will backport the following commits from `main` to `8.9`:
- [Changing where CodeEditor fields get useDarkMode value
(#159638)](https://github.com/elastic/kibana/pull/159638)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Kurt","email":"kc13greiner@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-07-11T18:02:42Z","message":"Changing
where CodeEditor fields get useDarkMode value (#159638)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/157203\r\nCloses
https://github.com/elastic/kibana/issues/158051\r\nCloses
https://github.com/elastic/kibana/issues/158049\r\n\r\nWith the addition
of Per User Dark Mode, components can no longer rely\r\non `uiSettings`
as the source of truth for theme.\r\n\r\nCodeEditor fields used to call
`uiSettings` to determine if Dark Mode\r\nwas enabled, which had been
provided in each callers Kibana React\r\nContext.\r\n\r\nThe new source
of truth for theme is the `CoreStart
>\r\nThemeServiceStart`.\r\n\r\nCurrently, not all callers of CodeEditor
provide the `theme` service in\r\ntheir Kibana Context in a similar way
and some callers don't provide it\r\nat all.\r\n\r\nThis PR updates
CodeEditor to get theme values from the Kibana Context\r\nusing a new
`useKibanaTheme` react hook.\r\n\r\nIt also attempts audit the callers
of CodeEditor to see if their Kibana\r\nContext contains the theme
service at the top level (Where I could add\r\ntheme to a caller's
Context without major changes, I did. Some cases\r\nwill require
CodeOwner guidance).\r\n\r\nThe new `useKibanaTheme` react hook will
throw a TypeError if theme\r\nisn't found in the top level of the Kibana
Context, this will help with\r\ntesting as the component will not
render. I will remove this after\r\ntesting so as not to introduce
breaking changes.\r\n\r\n## Testing\r\n\r\nPlease review files for which
you are CODEOWNER.\r\n\r\nI've attempted to tag all usages of
`CodeEditor`/`CodeEditorFIeld` with\r\na TODO comment with one of the
following scenarios:\r\n\r\n1) a note where theme was provided
already/where I made changes to\r\nprovide it in the appropriate
context\r\n2) I've asked for CODEOWNER guidance\r\n\r\nFor scenario 1,
please pull and test that CodeEditor locally:\r\n\r\n1. Enable Dark Mode
from Edit User Profiles by clicking on the Profile\r\nIcon on the top
right, and updating your profile.\r\n2. Navigate to the CodeEditors in
the plugins you own. If they render\r\nand display in Dark Mode - add a
green check to the table below - and\r\nyou're done!\r\n3. If it is not
rendering, please help me figure out where the theme\r\nservice should
be provided in the context.\r\n\r\nFor scenario 2, we will need to
figure out where to make changes so your\r\ncontext is providing theme.
Some of the more complex usages may need to\r\naddressed in separate
issues.\r\n\r\n\r\n## Tracking\r\n| Team | Plugin | Theme in Context ? |
Verified Working |\r\n| - | - | - | - |\r\n| apm-ui | apm | APM
Storybook broken | ? |\r\n| kibana-presentation | presentation_util |
Yes. | Yes |\r\n| response-ops | trigger_actions_ui | Yes | Yes |\r\n|
response-ops | stack_alerts | Yes | Yes |\r\n| kibana-security |
security | Yes | Yes |\r\n| security-defend-workflows | osquery | Yes |
Yes |\r\n| kibana-app-services | examples/expression_explorer | Yes |
Yes |\r\n| ml-ui | transform | Yes | Yes |\r\n| ml-ui | ml | Yes | Yes
|\r\n| uptime | synthetics | Yes | Yes |\r\n| kibana-gis | maps | Yes |
Yes |\r\n| kibana-gis | file_upload | Yes | Yes |\r\n|
platform-deployment-management | watcher | Yes | [AG] Yes |\r\n|
platform-deployment-management | snapshot_restore | Yes | [AG] Yes
|\r\n| platform-deployment-management | runtime_fields | Yes | [AG] Yes
|\r\n| platform-deployment-management | painless_lab | Yes | [AG] Yes
|\r\n| platform-deployment-management | ingest_pipelines | Yes | [AG]
Yes |\r\n| platform-deployment-management | index_management | Yes |
[AG] Yes |\r\n| platform-deployment-management | grokdebugger | Yes |
[AG] Yes |\r\n| platform-deployment-management | es_ui_shared | Yes |
[AG] Yes |\r\n| fleet | fleet | Yes | Yes |\r\n|
enterprise-search-frontend | enterprise_search | Yes | [AG] Yes |\r\n|
kibana-cloud-security-posture | cloud-security-posture | Yes | yes
|\r\n| sec-cloudnative-integrations | cloud_defend | Yes | Yes |\r\n|
kibana-visualizations/kibana-data-discovery | data | Yes | Yes |\r\n|
kibana-visualizations | examples/testing_embedded_lens | Yes | Yes
|\r\n| kibana-visualizations | vis_types | Yes | Yes |\r\n|
kibana-visualizations | vis_default_editor | Yes | Yes |\r\n|
kibana-visualizations | unified_search | Yes | Yes |\r\n|
kibana-visualizations | packages/kbn-text-based-editor | Yes | Yes
|\r\n| kibana-visualizatons | lens | Yes | Yes|\r\n| kibana-core |
saved_objects_management | Yes | Yes |\r\n| kibana-presentation |
inspector | Yes | Yes |\r\n| kibana-presentation | canvas | Yes | Yes
|\r\n| kibana-data-discovery | discover | Yes | Yes |\r\n|
kibana-data-discovery | data_view_management | Yes | Yes |\r\n|
kibana-data-discovery | data_view_field_editor | Yes | Yes |\r\n|
appex-sharedux | advanced_settings | Yes | Yes |\r\n|
enterprise-search-frontend | serverless_search | Yes | [AG] Yes |\r\n| -
| - | - | - |\r\n\r\n## Unit tests\r\n\r\nCurrently, many tests are
failing since they are probably not providing\r\n`theme` in the context.
Once CODEOWNERs have weighed in on CodeEditors\r\nusages that require
discussion, I will update the accompanying tests.\r\n\r\n## Release
note\r\n- Fixes theming of
CodeEditors\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Alison Goryachev <alisonmllr20@gmail.com>\r\nCo-authored-by: Dima
Arnautov <dmitrii.arnautov@elastic.co>\r\nCo-authored-by: Dima Arnautov
<arnautov.dima@gmail.com>","sha":"323b0477e35cb3e49cc01b56b23969fb72c7111e","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:APM","Team:Security","Team:uptime","Feature:Drilldowns","Team:Fleet","Feature:Security/User
Profile","backport:prev-minor","v8.10.0"],"number":159638,"url":"https://github.com/elastic/kibana/pull/159638","mergeCommit":{"message":"Changing
where CodeEditor fields get useDarkMode value (#159638)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/157203\r\nCloses
https://github.com/elastic/kibana/issues/158051\r\nCloses
https://github.com/elastic/kibana/issues/158049\r\n\r\nWith the addition
of Per User Dark Mode, components can no longer rely\r\non `uiSettings`
as the source of truth for theme.\r\n\r\nCodeEditor fields used to call
`uiSettings` to determine if Dark Mode\r\nwas enabled, which had been
provided in each callers Kibana React\r\nContext.\r\n\r\nThe new source
of truth for theme is the `CoreStart
>\r\nThemeServiceStart`.\r\n\r\nCurrently, not all callers of CodeEditor
provide the `theme` service in\r\ntheir Kibana Context in a similar way
and some callers don't provide it\r\nat all.\r\n\r\nThis PR updates
CodeEditor to get theme values from the Kibana Context\r\nusing a new
`useKibanaTheme` react hook.\r\n\r\nIt also attempts audit the callers
of CodeEditor to see if their Kibana\r\nContext contains the theme
service at the top level (Where I could add\r\ntheme to a caller's
Context without major changes, I did. Some cases\r\nwill require
CodeOwner guidance).\r\n\r\nThe new `useKibanaTheme` react hook will
throw a TypeError if theme\r\nisn't found in the top level of the Kibana
Context, this will help with\r\ntesting as the component will not
render. I will remove this after\r\ntesting so as not to introduce
breaking changes.\r\n\r\n## Testing\r\n\r\nPlease review files for which
you are CODEOWNER.\r\n\r\nI've attempted to tag all usages of
`CodeEditor`/`CodeEditorFIeld` with\r\na TODO comment with one of the
following scenarios:\r\n\r\n1) a note where theme was provided
already/where I made changes to\r\nprovide it in the appropriate
context\r\n2) I've asked for CODEOWNER guidance\r\n\r\nFor scenario 1,
please pull and test that CodeEditor locally:\r\n\r\n1. Enable Dark Mode
from Edit User Profiles by clicking on the Profile\r\nIcon on the top
right, and updating your profile.\r\n2. Navigate to the CodeEditors in
the plugins you own. If they render\r\nand display in Dark Mode - add a
green check to the table below - and\r\nyou're done!\r\n3. If it is not
rendering, please help me figure out where the theme\r\nservice should
be provided in the context.\r\n\r\nFor scenario 2, we will need to
figure out where to make changes so your\r\ncontext is providing theme.
Some of the more complex usages may need to\r\naddressed in separate
issues.\r\n\r\n\r\n## Tracking\r\n| Team | Plugin | Theme in Context ? |
Verified Working |\r\n| - | - | - | - |\r\n| apm-ui | apm | APM
Storybook broken | ? |\r\n| kibana-presentation | presentation_util |
Yes. | Yes |\r\n| response-ops | trigger_actions_ui | Yes | Yes |\r\n|
response-ops | stack_alerts | Yes | Yes |\r\n| kibana-security |
security | Yes | Yes |\r\n| security-defend-workflows | osquery | Yes |
Yes |\r\n| kibana-app-services | examples/expression_explorer | Yes |
Yes |\r\n| ml-ui | transform | Yes | Yes |\r\n| ml-ui | ml | Yes | Yes
|\r\n| uptime | synthetics | Yes | Yes |\r\n| kibana-gis | maps | Yes |
Yes |\r\n| kibana-gis | file_upload | Yes | Yes |\r\n|
platform-deployment-management | watcher | Yes | [AG] Yes |\r\n|
platform-deployment-management | snapshot_restore | Yes | [AG] Yes
|\r\n| platform-deployment-management | runtime_fields | Yes | [AG] Yes
|\r\n| platform-deployment-management | painless_lab | Yes | [AG] Yes
|\r\n| platform-deployment-management | ingest_pipelines | Yes | [AG]
Yes |\r\n| platform-deployment-management | index_management | Yes |
[AG] Yes |\r\n| platform-deployment-management | grokdebugger | Yes |
[AG] Yes |\r\n| platform-deployment-management | es_ui_shared | Yes |
[AG] Yes |\r\n| fleet | fleet | Yes | Yes |\r\n|
enterprise-search-frontend | enterprise_search | Yes | [AG] Yes |\r\n|
kibana-cloud-security-posture | cloud-security-posture | Yes | yes
|\r\n| sec-cloudnative-integrations | cloud_defend | Yes | Yes |\r\n|
kibana-visualizations/kibana-data-discovery | data | Yes | Yes |\r\n|
kibana-visualizations | examples/testing_embedded_lens | Yes | Yes
|\r\n| kibana-visualizations | vis_types | Yes | Yes |\r\n|
kibana-visualizations | vis_default_editor | Yes | Yes |\r\n|
kibana-visualizations | unified_search | Yes | Yes |\r\n|
kibana-visualizations | packages/kbn-text-based-editor | Yes | Yes
|\r\n| kibana-visualizatons | lens | Yes | Yes|\r\n| kibana-core |
saved_objects_management | Yes | Yes |\r\n| kibana-presentation |
inspector | Yes | Yes |\r\n| kibana-presentation | canvas | Yes | Yes
|\r\n| kibana-data-discovery | discover | Yes | Yes |\r\n|
kibana-data-discovery | data_view_management | Yes | Yes |\r\n|
kibana-data-discovery | data_view_field_editor | Yes | Yes |\r\n|
appex-sharedux | advanced_settings | Yes | Yes |\r\n|
enterprise-search-frontend | serverless_search | Yes | [AG] Yes |\r\n| -
| - | - | - |\r\n\r\n## Unit tests\r\n\r\nCurrently, many tests are
failing since they are probably not providing\r\n`theme` in the context.
Once CODEOWNERs have weighed in on CodeEditors\r\nusages that require
discussion, I will update the accompanying tests.\r\n\r\n## Release
note\r\n- Fixes theming of
CodeEditors\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Alison Goryachev <alisonmllr20@gmail.com>\r\nCo-authored-by: Dima
Arnautov <dmitrii.arnautov@elastic.co>\r\nCo-authored-by: Dima Arnautov
<arnautov.dima@gmail.com>","sha":"323b0477e35cb3e49cc01b56b23969fb72c7111e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/159638","number":159638,"mergeCommit":{"message":"Changing
where CodeEditor fields get useDarkMode value (#159638)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/157203\r\nCloses
https://github.com/elastic/kibana/issues/158051\r\nCloses
https://github.com/elastic/kibana/issues/158049\r\n\r\nWith the addition
of Per User Dark Mode, components can no longer rely\r\non `uiSettings`
as the source of truth for theme.\r\n\r\nCodeEditor fields used to call
`uiSettings` to determine if Dark Mode\r\nwas enabled, which had been
provided in each callers Kibana React\r\nContext.\r\n\r\nThe new source
of truth for theme is the `CoreStart
>\r\nThemeServiceStart`.\r\n\r\nCurrently, not all callers of CodeEditor
provide the `theme` service in\r\ntheir Kibana Context in a similar way
and some callers don't provide it\r\nat all.\r\n\r\nThis PR updates
CodeEditor to get theme values from the Kibana Context\r\nusing a new
`useKibanaTheme` react hook.\r\n\r\nIt also attempts audit the callers
of CodeEditor to see if their Kibana\r\nContext contains the theme
service at the top level (Where I could add\r\ntheme to a caller's
Context without major changes, I did. Some cases\r\nwill require
CodeOwner guidance).\r\n\r\nThe new `useKibanaTheme` react hook will
throw a TypeError if theme\r\nisn't found in the top level of the Kibana
Context, this will help with\r\ntesting as the component will not
render. I will remove this after\r\ntesting so as not to introduce
breaking changes.\r\n\r\n## Testing\r\n\r\nPlease review files for which
you are CODEOWNER.\r\n\r\nI've attempted to tag all usages of
`CodeEditor`/`CodeEditorFIeld` with\r\na TODO comment with one of the
following scenarios:\r\n\r\n1) a note where theme was provided
already/where I made changes to\r\nprovide it in the appropriate
context\r\n2) I've asked for CODEOWNER guidance\r\n\r\nFor scenario 1,
please pull and test that CodeEditor locally:\r\n\r\n1. Enable Dark Mode
from Edit User Profiles by clicking on the Profile\r\nIcon on the top
right, and updating your profile.\r\n2. Navigate to the CodeEditors in
the plugins you own. If they render\r\nand display in Dark Mode - add a
green check to the table below - and\r\nyou're done!\r\n3. If it is not
rendering, please help me figure out where the theme\r\nservice should
be provided in the context.\r\n\r\nFor scenario 2, we will need to
figure out where to make changes so your\r\ncontext is providing theme.
Some of the more complex usages may need to\r\naddressed in separate
issues.\r\n\r\n\r\n## Tracking\r\n| Team | Plugin | Theme in Context ? |
Verified Working |\r\n| - | - | - | - |\r\n| apm-ui | apm | APM
Storybook broken | ? |\r\n| kibana-presentation | presentation_util |
Yes. | Yes |\r\n| response-ops | trigger_actions_ui | Yes | Yes |\r\n|
response-ops | stack_alerts | Yes | Yes |\r\n| kibana-security |
security | Yes | Yes |\r\n| security-defend-workflows | osquery | Yes |
Yes |\r\n| kibana-app-services | examples/expression_explorer | Yes |
Yes |\r\n| ml-ui | transform | Yes | Yes |\r\n| ml-ui | ml | Yes | Yes
|\r\n| uptime | synthetics | Yes | Yes |\r\n| kibana-gis | maps | Yes |
Yes |\r\n| kibana-gis | file_upload | Yes | Yes |\r\n|
platform-deployment-management | watcher | Yes | [AG] Yes |\r\n|
platform-deployment-management | snapshot_restore | Yes | [AG] Yes
|\r\n| platform-deployment-management | runtime_fields | Yes | [AG] Yes
|\r\n| platform-deployment-management | painless_lab | Yes | [AG] Yes
|\r\n| platform-deployment-management | ingest_pipelines | Yes | [AG]
Yes |\r\n| platform-deployment-management | index_management | Yes |
[AG] Yes |\r\n| platform-deployment-management | grokdebugger | Yes |
[AG] Yes |\r\n| platform-deployment-management | es_ui_shared | Yes |
[AG] Yes |\r\n| fleet | fleet | Yes | Yes |\r\n|
enterprise-search-frontend | enterprise_search | Yes | [AG] Yes |\r\n|
kibana-cloud-security-posture | cloud-security-posture | Yes | yes
|\r\n| sec-cloudnative-integrations | cloud_defend | Yes | Yes |\r\n|
kibana-visualizations/kibana-data-discovery | data | Yes | Yes |\r\n|
kibana-visualizations | examples/testing_embedded_lens | Yes | Yes
|\r\n| kibana-visualizations | vis_types | Yes | Yes |\r\n|
kibana-visualizations | vis_default_editor | Yes | Yes |\r\n|
kibana-visualizations | unified_search | Yes | Yes |\r\n|
kibana-visualizations | packages/kbn-text-based-editor | Yes | Yes
|\r\n| kibana-visualizatons | lens | Yes | Yes|\r\n| kibana-core |
saved_objects_management | Yes | Yes |\r\n| kibana-presentation |
inspector | Yes | Yes |\r\n| kibana-presentation | canvas | Yes | Yes
|\r\n| kibana-data-discovery | discover | Yes | Yes |\r\n|
kibana-data-discovery | data_view_management | Yes | Yes |\r\n|
kibana-data-discovery | data_view_field_editor | Yes | Yes |\r\n|
appex-sharedux | advanced_settings | Yes | Yes |\r\n|
enterprise-search-frontend | serverless_search | Yes | [AG] Yes |\r\n| -
| - | - | - |\r\n\r\n## Unit tests\r\n\r\nCurrently, many tests are
failing since they are probably not providing\r\n`theme` in the context.
Once CODEOWNERs have weighed in on CodeEditors\r\nusages that require
discussion, I will update the accompanying tests.\r\n\r\n## Release
note\r\n- Fixes theming of
CodeEditors\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Alison Goryachev <alisonmllr20@gmail.com>\r\nCo-authored-by: Dima
Arnautov <dmitrii.arnautov@elastic.co>\r\nCo-authored-by: Dima Arnautov
<arnautov.dima@gmail.com>","sha":"323b0477e35cb3e49cc01b56b23969fb72c7111e"}}]}]
BACKPORT-->

Co-authored-by: Kurt <kc13greiner@users.noreply.github.com>
2023-07-11 14:14:37 -07:00
..
bfetch_explorer Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
content_management_examples Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
controls_example [Tech Debt] Remove deprecated EuiLoadingContent (#156316) 2023-05-03 08:01:37 -06:00
data_view_field_editor_example [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
developer_examples [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
discover_customization_examples [Discover] Implement Discover customization framework (#158603) 2023-06-14 15:09:13 -03:00
embeddable_examples [Portable Dashboards] Add portable dashboard example plugin (#148997) 2023-02-10 13:21:53 -07:00
embeddable_explorer Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
expressions_explorer [8.9] Changing where CodeEditor fields get useDarkMode value (#159638) (#161707) 2023-07-11 14:14:37 -07:00
field_formats_example [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
files_example Upgraded EUI to v76.0.0 (#152506) 2023-03-14 14:27:40 -05:00
guided_onboarding_example Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
hello_world [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
locator_examples [Shared UX] Adoption of Shared UX Route component (#150357) 2023-02-14 19:25:04 +00:00
locator_explorer [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
partial_results_example [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
portable_dashboards_example Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
preboot_example [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
response_stream Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
routing_example Upgraded EUI to v76.0.0 (#152506) 2023-03-14 14:27:40 -05:00
screenshot_mode_example Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
search_examples Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
share_examples [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
state_containers_examples Add react-router-dom-v5-compat (#159173) 2023-06-14 05:13:15 -07:00
ui_action_examples [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
ui_actions_explorer [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
unified_field_list_examples [UnifiedFieldList] Remove redundant server routes. Create new example plugin for unified field list components and migrate tests. (#158377) 2023-05-31 13:25:47 +02:00
user_profile_examples [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
README.asciidoc Add a few asciidoc readmes (#72082) 2020-07-17 11:08:57 -04:00

[[example-plugins]]
== Example plugins

This folder contains example plugins.  To run the plugins in this folder, use the `--run-examples` flag, via

[source,bash]
----
yarn start --run-examples
----