[Discover] Fix visibility of saved search grids when one of them is in fullscreen mode #136198

jughosta · 2022-07-12T13:06:16Z

Closes #134032

Summary

This PR adds CSS which overrides Dashboard panel styles when one of grids is in fullscreen mode.

Steps to test:

Create a dashboard
Add multiple Saved Searches to it (next to each other)
Try fullscreen mode for any of them => only the expanded grid should be visible in its fullscreen mode

Checklist

This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…ne of them is in fullscreen mode

jughosta · 2022-07-12T14:11:42Z

src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

+ * It can be removed if we don't use inline styles (z-index, position) for Dashboard panels (react-grid-item)
+ */
+.euiDataGrid__restrictBody .dshDashboardGrid__item {
+  position: static !important; /* 1 */


@constancecchen Your suggestion works great for desktop view, thanks!

But there is something weird with mobile view. Although it has position: static !important

kibana/src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

Line 125 in fe0e702

position: static !important;

the issue with overlapping grids is still present. What is different for mobile view in grids implementation?

cee-chen · 2022-07-12T18:31:57Z

src/plugins/dashboard/public/application/embeddable/grid/_dashboard_grid.scss

+.euiDataGrid__restrictBody .dshDashboardGrid__item {
+  position: static !important; /* 1 */


It looks like mobile / small screens already has a position: static !important set, interestingly enough. It's not 100% clear to me why it doesn't 'just work' in that case, but as I was tinkering around I found a z-index unset that appears to work for both mobile and desktop:

Suggested change

.euiDataGrid__restrictBody .dshDashboardGrid__item {

position: static !important; /* 1 */

.euiDataGrid__restrictBody .embPanel .embPanel__content {

z-index: unset !important; /* 1 */

Unsetting z-index is probably a safer bet than position in any case. Let me know if that works for you!

@constancecchen Yes, this works great for desktop and mobile! Thank you very much for solving the issue 🎉

…mobile and desktop views

jughosta · 2022-07-13T09:05:41Z

@elasticmachine merge upstream

elasticmachine · 2022-07-13T09:16:55Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

elasticmachine · 2022-07-13T09:16:57Z

Pinging @elastic/kibana-presentation (Team:Presentation)

davismcphee

Tested locally and it worked on both desktop and mobile emulation. We could add a functional test for this but may be more effort than it's worth so LGTM!

jughosta · 2022-07-19T10:51:13Z

@elasticmachine merge upstream

kibana-ci · 2022-07-19T12:02:20Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	590	595	+5

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	492.5KB	493.2KB	+746.0B

History

💚 Build #57282 succeeded 8e51a4a
💛 Build #57041 was flaky fe0e702

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jughosta

andreadelrio

Sass change LGTM.

kibanamachine · 2022-07-20T07:31:32Z

💔 All backports failed

Status	Branch	Result
❌	8.3	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 136198

Questions ?

Please refer to the Backport tool documentation

kibanamachine · 2022-07-21T07:31:43Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 136198 locally

kibanamachine · 2022-07-22T07:41:42Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add the label auto-backport or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 136198 locally

kertal · 2022-07-22T08:26:56Z

💚 All backports created successfully

Status	Branch	Result
✅	8.3

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…n fullscreen mode (elastic#136198) (cherry picked from commit 42f2bc2) # Conflicts: # src/plugins/discover/public/embeddable/saved_search_grid.tsx

…n fullscreen mode (#136198) (#136930) (cherry picked from commit 42f2bc2) # Conflicts: # src/plugins/discover/public/embeddable/saved_search_grid.tsx Co-authored-by: Julia Rechkunova <[email protected]>

[Dashboard][Saved Search] Fix visibility of saved search grids when o…

e26e103

…ne of them is in fullscreen mode

jughosta added Feature:Dashboard Dashboard related features release_note:fix backport:skip This commit does not require backporting Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. labels Jul 12, 2022

jughosta self-assigned this Jul 12, 2022

[Dashboard][Saved Search] Update comment

fe0e702

jughosta added backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) and removed backport:skip This commit does not require backporting labels Jul 12, 2022

jughosta commented Jul 12, 2022

View reviewed changes

cee-chen reviewed Jul 12, 2022

View reviewed changes

[Discover] Fix how saved search grids are rendered in fullscreen for …

711ab05

…mobile and desktop views

jughosta changed the title ~~[Dashboard][Saved Search] Fix visibility of saved search grids when one of them is in fullscreen mode~~ [Discover] Fix visibility of saved search grids when one of them is in fullscreen mode Jul 13, 2022

Merge branch 'main' into 134032-fullscreen-view-on-dashboard

8e51a4a

jughosta marked this pull request as ready for review July 13, 2022 09:16

jughosta requested review from a team as code owners July 13, 2022 09:16

kibanamachine added the Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas label Jul 13, 2022

jughosta added loe:small Small Level of Effort impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. labels Jul 13, 2022

davismcphee approved these changes Jul 13, 2022

View reviewed changes

jughosta requested a review from andreadelrio July 14, 2022 15:28

Merge branch 'main' into 134032-fullscreen-view-on-dashboard

f609018

andreadelrio approved these changes Jul 19, 2022

View reviewed changes

kertal merged commit 42f2bc2 into elastic:main Jul 20, 2022

kibanamachine added the v8.4.0 label Jul 20, 2022

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 21, 2022

kertal mentioned this pull request Jul 22, 2022

[8.3] [Discover] Fix visibility of saved search grids when one of them is in fullscreen mode (#136198) #136930

Merged

kibanamachine added v8.3.3 and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Jul 22, 2022

jughosta deleted the 134032-fullscreen-view-on-dashboard branch August 1, 2022 09:28

davismcphee mentioned this pull request Apr 2, 2024

[EuiDataGrid] Provide an onFullScreenChange callback elastic/eui#7604

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Fix visibility of saved search grids when one of them is in fullscreen mode #136198

[Discover] Fix visibility of saved search grids when one of them is in fullscreen mode #136198

jughosta commented Jul 12, 2022 •

edited by kibanamachine

Loading

jughosta Jul 12, 2022

cee-chen Jul 12, 2022

jughosta Jul 13, 2022

jughosta commented Jul 13, 2022

elasticmachine commented Jul 13, 2022

elasticmachine commented Jul 13, 2022

davismcphee left a comment

jughosta commented Jul 19, 2022

kibana-ci commented Jul 19, 2022

andreadelrio left a comment

kibanamachine commented Jul 20, 2022

kibanamachine commented Jul 21, 2022

kibanamachine commented Jul 22, 2022

kertal commented Jul 22, 2022

		.euiDataGrid__restrictBody .dshDashboardGrid__item {
		position: static !important; /* 1 */

[Discover] Fix visibility of saved search grids when one of them is in fullscreen mode #136198

[Discover] Fix visibility of saved search grids when one of them is in fullscreen mode #136198

Conversation

jughosta commented Jul 12, 2022 • edited by kibanamachine Loading

Summary

Checklist

jughosta Jul 12, 2022

Choose a reason for hiding this comment

cee-chen Jul 12, 2022

Choose a reason for hiding this comment

jughosta Jul 13, 2022

Choose a reason for hiding this comment

jughosta commented Jul 13, 2022

elasticmachine commented Jul 13, 2022

elasticmachine commented Jul 13, 2022

davismcphee left a comment

Choose a reason for hiding this comment

jughosta commented Jul 19, 2022

kibana-ci commented Jul 19, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

andreadelrio left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 20, 2022

💔 All backports failed

Manual backport

Questions ?

kibanamachine commented Jul 21, 2022

kibanamachine commented Jul 22, 2022

kertal commented Jul 22, 2022

💚 All backports created successfully

Questions ?

jughosta commented Jul 12, 2022 •

edited by kibanamachine

Loading