## Summary
This PR wraps up the work the @elastic/kibana-presentation team has done
to finish the MVP of [Phase
1](https://github.com/elastic/kibana/issues/154354) of the `Link`
embeddable, which enables users to add panels to their dashboard that
contain links to other dashboards + external links - with respect to
dashboard links, we give the author control over which pieces of context
should be kept across dashboards so that things like filter pills,
queries, and time ranges are not lost. This marks a huge improvement in
dashboard navigation overall, which was previously only available via a
variety of different workarounds including (but not limited to):
- Creating (essentially) a `noop` dashboard-to-dashboard drilldown
- Using markdown panels with hard Dashboard links, which are prone to
break across updates
- Avoiding navigation all together, which resulted in large,
slow-to-load dashboards.
As an added benefit, because these panels contain **references** to each
dashboard rather than hard links, (1) unlike markdown links, they should
not break after updates and (2) if a links panel is exported and
imported into another space or instance, all of the dashboards it links
to will also be imported.
1a86b713-47e7-4db9-8a04-29d41b13681a
> **Note**
> 🔉 The above video has audio! Turn on your sound for the best
experience.
### Note about this PR
- A majority of this work was done on a feature branch, with thorough
reviews from @andreadelrio on behalf of @elastic/kibana-design along the
way. Therefore, while feedback on the design is encouraged, any large
concerns brought up in this PR should be filed as separate issues and
addressed in follow-up PRs.
- This PR contains work for giving embeddables control over their own
panel size / default positioning on the dashboard. This was especially
important for the links panel, since we assume that (a) most links
panels would be located somewhere near the top of the dashboard and (b)
the horizontal links panel should have a different default "shape"
(longer than it is tall) than the vertical panel (taller than it is
long).
- This PR also contains work for caching dashboard saved objects, which
makes navigation much more seamless.
### Flaky Test Runner
-
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3251
### Checklist
- [x] 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~ This will
be addressed in a follow up:
https://github.com/elastic/kibana/issues/166750
- [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 - ~Units tests
are added, functional tests are forthcoming~ Edit: All tests are in.
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] 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))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
### For maintainers
- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---------
Co-authored-by: Nick Peihl <nick.peihl@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
Co-authored-by: Devon Thomson <devon.thomson@elastic.co>
Co-authored-by: Nick Peihl <nickpeihl@gmail.com>
Co-authored-by: Gerard Soldevila <gerard.soldevila@elastic.co>
Closes https://github.com/elastic/kibana/issues/159353
Closes https://github.com/elastic/kibana/issues/159756
## Summary
This PR adds styling so that, when the dashboard's chrome is hidden or
when there is a header banner present, the dashboard's top navigation
bar's `top` position is adjusted as necessary - this prevents it from
either (a) getting hidden behind the Kibana chrome or (b) floating in
the wrong position and overlapping the dashboard content, regardless of
if the dashboard is in embed mode (i.e. `embed=true` is present in the
URL) or not (i.e. `embed=false` is present in the URL **or**, more
commonly, there is no `embed` parameter in the URL).
### Embed Mode
- #### Before:
76d3c70c-936c-4bcc-985c-4fb433f0cff3
- #### After:
137bc103-666b-4fdd-ab4e-8994345e21b4
It also resolves a bug where the `isEmbeddedExternally` component state
was never actually being set, which meant that the
`ExitFullScreenButton` was always receiving `toggleChrome=true`. This
made it so that entering and exiting fullscreen mode in an embedded
dashboard would force the chrome to be visible (which should never
happen in embed mode).
#### How to Test
The easiest way to test this PR is to simply add `embed=true` to your
dashboard URL - because this PR also fixes
https://github.com/elastic/kibana/issues/159756, this will essentially
mimic the embedded experience.
Alternatively, if you want to test this in an actual iframe...
1. Start and login to Kibana with the default `kibana.yml` settings
2. Create and embed a dashboard using an iframe in an HTML file and open
that file in your browser - the iframe will show a prompt to login, but
you won't be able to. Instead...
3. Add the following settings to your `kibana.yml` file:<br><Br>
```
xpack.security.secureCookies: true
xpack.security.sameSiteCookies: 'None'
```
4. Wait for Kibana to re-load
5. Refresh the HTML page from step 2
6. The embedded dashboard should now be available for you to test 👍
#### Scenarios Tested
- **Non-fullscreen mode**
<details>
<summary>✅ Without filter pill, without header banner <i>(click to see
screenshot)</i></summary>
<img
src="f68bbcfb-74d8-497c-a2ae-33e8e0c02660"/>
</details>
<details>
<summary>✅ Without filter pill, with header banner <i>(click to see
screenshot)</i></summary>
<img
src="7c19711c-61dc-499a-b1d0-01fab639a27e"/>
</details>
<details>
<summary>✅ With filter pill, without header banner <i>(click to see
screenshot)</i></summary>
<img
src="36e848bd-f0d9-41e3-8a8a-a48571ad5cd2"/>
</details>
<details>
<summary>✅ With filter pill, with header banner <i>(click to see
screenshot)</i></summary>
<img
src="cd7489f6-3f34-439a-a30e-3ef39f3970b5"/>
</details>
<details>
<summary>✅ With filter pill, with header banner <b>and</b> notification
banner <i>(click to see GIF)</i></summary>
<img
src="bd67b4eb-4f68-4d9b-9e22-4d1b2d2e4d90"/>
</details>
- **Fullscreen mode**
<details>
<summary>✅ Without filter pill, without banner <i>(click to see
screenshot)</i></summary>
<img
src="d7d15560-7698-424f-b761-59b5557abe37"/>
</details>
<details>
<summary>✅ Without filter pill, with header banner <i>(click to see
screenshot)</i></summary>
<img
src="311b6f3d-5152-4d16-ba39-160978c60c96"/>
</details>
<details>
<summary>✅ With filter pill, without header banner <i>(click to see
screenshot)</i></summary>
<img
src="bff9e040-8169-40c7-a086-13a19e870383"/>
</details>
<details>
<summary>✅ With filter pill, with header banner <i>(click to see
screenshot)</i></summary>
<img
src="3f453811-e65d-4ac4-9524-c396f9efdbdd"/>
</details>
<details>
<summary>✅ With filter pill, with header banner <b>and</b> notification
banner <i>(click to see GIF)</i></summary>
<img
src="f79673e7-03f2-49fa-be56-b67bf7a12976"/>
</details>
### Non-Embed Mode
- #### Before:
71ffc964-2844-41a6-98d6-353e84d674be
- #### After:
894aa292-b611-4e5e-a0d7-fe3d256fc3ba
### Checklist
- [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
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
### For maintainers
- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
## Summary
This PR updates the way how we start the headless browser for testing.
The current way of starting in headless mode is eventually going away
and the new headless mode offers more capabilities and stability, see
https://www.selenium.dev/blog/2023/headless-is-going-away/ and
https://developer.chrome.com/articles/new-headless/.
### Test adjustments
All the adjusted discover, dashboard, maps and infra tests showed the
same pattern during failure investigation that's around the fact that
the new headless mode is closer to the regular / non-headless mode:
* Tests passed with the old headless mode
* Tests failed in regular / non-headless mode the same way they failed
in new headless mode
* The failure reasons were mostly around slightly different font
rendering and slightly different browser sizes
* 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>
* Removed file-type from package.json deps.
Updated jimp to 0.16.1.
Updated light & dark dashboard baseline screenshots to resolve failure due to resize degradation.
* Replaced jimp with sharp and pixelmatch. Eliminates several deps, including file-type.
Eliminates quality degradation from image resizing.
* Fixed copy paste error, which lead to pass positives and errors.
* Integrated updateBaselines flag into dashboards report testing.
Fixed sharp resize to fit and not truncate the original image.
* Removed accidental '.only'
* Reverted area chart baseline.
* Removed explicit declaration of sharp from package.json.
* Adjusted dashboard screenshot size in attempt to eliminate layout scaling issues in CI testing.
* Reverted dashboard screenshot size. Lowered tolerance in dashboard PNG reporting tests to force failure and collect CI screenshots.
* Changed session save location for dashboard report images for better CI reporting.
* Fixed small dashboard baseline screenshot with correct aspect ratio.
* Updated 2 basline screenshots from CI. Lowered PNG match tolerance for dashboard screenshots to 1% for investigation of remaining screens.
* Update of dashboard controls light mode baseline.
Change of forced container width size in large dashboard layout test.
* Updated dashboard controls dark mode baseline screenshot.
Adjusted forced container width in large dashboard layout test for troubleshooting.
* Lowering tolerance of PNG compare tests from 9% to 1% for troubleshooting.
Replaced references to dedundant image service with existing, more adopted reporting service.
Ideally, the PNG functions of the reporting service would be merged with the screenshot service as an image service.
* Reverting tolerance of PNG compares to 0.09. Will create GH issues for specific teams to investigate.
* Implemented PngService to provide an accessible single reference to PNG compare testing.
Removed redundant implementations and references.
* Updated service reference and call to png compare function left out of last commit.
* Updated another missed PNG reference.
* Removed superfluous parameter.
* Update after bootstrap
* Updated area chart baseline to match new render with panel filters.
* Reverted limits in dashboard snapshot tests to original values.
* Merge and rebuild.
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* [Lens] Synchronize cursor position for X-axis across all Lens visualizations in a dashboard
Closes: #77530
* add mocks for active_cursor service
* fix jest tests
* fix jest tests
* apply PR comments
* fix cursor style
* update heatmap, jest
* add tests
* fix wrong import
* replace cursor for timelion
* update tsvb_dashboard baseline
* fix CI
* update baseline
* Update active_cursor_utils.ts
* add debounce
* remove cursor from heatmap and pie
* add tests for debounce
* return theme order back
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* reduce padding on lens visualizations in dashboard
* tweak padding and axes title colors to match lens
* remove faux padding (border) to match lens padding
* update snapshots
* Revert "update snapshots"
This reverts commit c63cf2bf1c.
* update functional test baseline screenshot
* use new setScreenshotSize
* change tolerance from 1% to 2% (originally 5%)
* retake baseline without notification dialog
* close add and save notifications
* wait for render complete when going in to FullScreen mode
* add 5 second sleep to see if it ever goes to full screen mode
* add debugging screenshots and sleeps
* try reloading the Kibana index before this test
* 30 iterations with only the first test enabled
* revert multi-run changes
* ran node scripts/build_renovate_config
* fix tslint errors
* fix tslint error
* update xpack dependency to match oss
* update yarn.lock
* revert notifications:lifetime:info change by reducing some other timeouts
* remove commented-out code
* fixed and Unskipped 2nd test
* re-arrange order of dashboard tests to pass :-(
* removed commented-out sleep
Hopefully this won't be an issue
* Add comment about the order of tests
```
loadTestFile(require.resolve('./view_edit'));
// Order of test suites *shouldn't* be important but there's a bug for the view_edit test above
// https://github.com/elastic/kibana/issues/46752
// The dashboard_snapshot test below requires the timestamped URL which breaks the view_edit test.
// If we don't use the timestamp in the URL, the colors in the charts will be different.
loadTestFile(require.resolve('./dashboard_snapshots'));
```
* Dashboard visual pass (initial)
* Adjusted panel header
..And used a different selector for editing mode to fix bug of `.dshPanel--editing` needing a hard refresh to update.
* better positioning of legend toggle
* Fixed legend toggle position
* Fixed some visualize sidebar font sizes
* better position for resize handle
* Consolidated error and warning messages
* Last edits and removing old testing things
* snaps
* Fix tag cloud
* Comment out markdown-it for now, since it’s not working
* update area chart snapshot
* Styled empty dashboard state
* PR feedback
- background fix
- dark mode highlight color fix
- euiScrollbars
- euiSpacer
* Fix reporting
* More PR comments
- No edit button in mobile
- No markdown comment for panel error
- i18n id addition
- Remove euiHeader sharing fix
* Revert “hide edit button”
EUI 5.7.0 had a color refresh which switched around our palette to better match branding guidelines. Hex colors are still hard coded in large parts of Kibana so most of the changes not in kbn/ui-framework are simple shifts to match that styling.
* undoing a messy merge
* updating screenshots
* changing the variance to account for data table failure
* trying a different variance for data table and a general one for the rest of the screenshots
* changing the variance for general to .065
* adding xy position to adjust the screensize
* changing variance and setting a small window
* create calibrateForScreenshots method
* remove empty lines
* Announce full screen mode to screen reader, use extra helpful text in panel title input
* Update jest snapshots
* See if removing full sceen mode aria label fixes snapshot test on jenkins.
* Bring back EuiScreenReadyOnly to confirm it is breaking snapshot tests
* Try updating baselines with slightly larger width for the screen
* Move screenready to external, non styled div, go back to original browser size and snapshots
* update snaphots
* update snapshot tests
* Update time ranges
* Add sleeps, adjust time, update snapshots
* Skip TSVB until the issue with vertical line placement and x-axis timestamps is fixed
* fix expectations of time range with saved search creation
* remove debug line
* Add mechanism for dashboard snapshots
* Adjust wait for render function since it needs to be 2, not gt 0.
Should be obsolete when the new render stuff is complete.
* resize images using new library so comparisons work across different screen resolutions
* use jimp comparison and see if expanding to expanded panel mode helps when comparing across browser/os
* Try to ensure window size
* Experiment with a smaller window, see if screenshot dimensions change
Update screenshot for new window dimensions
* Try cover + quality, see what the diffs look like.
* Stop trying to get TSVB to pass, try area charts
There is a timezone bug with tsvb:
https://github.com/elastic/kibana/issues/15501
* gah, cover didn't work, check resize
* bump render counter to 6, as it should be.
As it turns out, the visualization was not done re-rendering to
maximized mode
* Bump threshold for comparison
* reduce down to a single test run
* Don't use an environment variable to detect updateBaselines cmd line flag
