## Summary
Fixes needed for getting CI to pass when EUI throws an error if
attempting to render a component without the EuiProvider in the render
tree.
## Detailed description
In https://github.com/elastic/kibana/pull/180819, I will deliver a
change that will cause EUI components to throw an error if the
EuiProvider context is missing. This PR comes in as part of the final
work to get all functional tests passing in an environment where EUI
will throw the error. The tied to the ["Fix 'dark mode' inconsistencies
in Kibana" Epic](https://github.com/elastic/kibana-team/issues/805) has
so far been in preparation for this.
**Reviewers: Please interact with critical paths through the UI
components touched in this PR, ESPECIALLY in terms of testing dark mode
and i18n.**
<img width="1107" alt="image"
src="c0d2ce08-ac35-45a7-8192-0b2256fceb0e">
### Checklist
Delete any items that are not applicable to this PR.
- [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
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Why?
To simplify the process of migration to react-router@6.
https://github.com/remix-run/react-router/discussions/8753
What problems exactly it solves?
- In my previous PR I added `CompatRouter`
https://github.com/elastic/kibana/pull/159173, which caused changes in
~50 files and pinged 15 Teams. And this is just meant to be a temporary
change, so when we're done with the migration I would have to revert
these changes and engage everyone to review the PR again. And it is just
a single step in the migration strategy. So to make our lives easier I
think it would be better to have a common place where we do import our
router components because it will allow us to surface some extra logic
in single place instead of going through the whole source code again.
- `react-router@6` doesn't support a custom `Route` component, so that
means our custom `Route` component that we're using almost everywhere
today, will need to be replaced by a different solution. I have decided
to add `Routes` component, which will be responsible for rendering the
proper component (`react-router@6` renamed `Switch` to `Routes`, so I
have named this component to align with the dictionary of the new
router) and also is going to add the logic that today is done in `Route`
(moving logic to `Routes` will be done in the follow-up PR, here I just
wanted to focus on using the common router components to make the review
process easier)
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
This PR removes all imports of Route from react-router-dom and
'@kbn/kibana-react-plugin/public' and instead imports Route from
@kbn/shared-ux-router.
### Context
Based on
https://github.com/elastic/kibana/issues/132629#issue-1243243678 This PR
executes steps 2 - 4:
> 2. To make the transition easier, we want to re-export other
react-router-dom exports alongside the modified' Route'.
> 3. Solutions should start using that Route component in place of the
one from react-router-dom. I.e. replace all occurrences of import { ...
} from 'react-router-dom' with import { ... } from
'@kbn/shared-ux-router'.
> 4. All manual calls to useExecutionContext are not needed anymore and
should be removed.
### Future PR
Looks like this might be getting worked on in:
https://github.com/elastic/kibana/pull/145863 (thanks!)
> Introduce an ESlint rule that ensures that react-router-dom is not
used directly in Kibana and that imports go through the new
@kbn/shared-ux-router package.
This is tangentially accomplished through
https://github.com/elastic/kibana/pull/150340 but only addresses using
Route through @kbn/kibana-react-plugin/public'
### Checklist
Delete any items that are not applicable to this PR.
- [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
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Tiago Costa <tiagoffcc@hotmail.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>
* 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 deps
* update rules
use type-aware @typescript-eslint/no-shadow instead of no-shadow. do not use no-undef, rely on TypeScript instead
* fix or mute all lint errors
* react-hooks eslint plugin fails on ? syntax
* fix wrong typings in viz
* remove React as a global type
* fix eslint errors
* update version to 4.8.1
* fix a new error
The needed change is to rely on history as source of truth for location instead of window.location.
btw, This makes possible to test state syncing utils integration using createMemoryHistory()
One issue was discovered after this change:
When switching from context to discover url was incorrect. history.location inside state syncing utils didn't get the last update. This happened, because history instance created in discover wasn't used in context app and when all listeners unsubscribed from it - it stopped receiving location updates. To fix this I just reused one history instance in discover, context and their kbnUrlTracker
Before this pr:
Discover, Visualise and Dashboard in setup phase create own state containers which watch for pinned filters, time and refresh interval changes. This watching and state comparisons happen for each plugin separately and not only when a specific app is mounted. So we ended up with a bunch of similar synchronous work which happens every time query services state changes.
After this pr:
Query service exposes observable to watch for changes (state$). Discover, Visualise and Dashboard use this observable for sub url tracking instead of creating its own.
