-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Dashboard] Change panel filters action visibility #146335
[Dashboard] Change panel filters action visibility #146335
Conversation
5ac6676
to
25fd724
Compare
25fd724
to
dce3124
Compare
7932df4
to
f9678a0
Compare
69d3557
to
80106ef
Compare
Pinging @elastic/kibana-presentation (Team:Presentation) |
src/plugins/dashboard/public/application/actions/filters_notification_popover_contents.tsx
Outdated
Show resolved
Hide resolved
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Unknown metric groupsasync chunk count
ESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: cc @Heenawter |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
code review, tested in chrome
Closes elastic#141536 Closes elastic#143386 ## Summary elastic#136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in **view** mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact. To fix this, this PR does three things: 1. Converts the panel filters badge to a single notification icon ![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png) 2. Displays the filters in a popover rather than a modal ![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png) 3. Makes this notification icon only visible in **edit** mode - it no longer shows up in view or print mode. ### How to Test 1. Create a visualization with panel level filters and/or queries. - Note that the sample `[Flights] Global Flight Dashboard` dashboard already has some visualizations with panel level filters, so you could also use that instead. 3. Ensure that the panel level filters action icon **only** shows up in edit mode - Swap to view mode and make sure there is no icon - Print a PDF or PNG report and make sure there is no icon 4. Ensure that the `"Edit filters"` button in the popover keeps context when clicked, including allowing you to `"Save and return"` after being taken to Lens/Visualize/etc. 5. Ensure that the contents of the popover react to changes to panel level filters/queries ### 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] 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) (cherry picked from commit a5d7818)
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run:
Questions ?Please refer to the Backport tool documentation |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Closes elastic#141536 Closes elastic#143386 elastic#136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in **view** mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact. To fix this, this PR does three things: 1. Converts the panel filters badge to a single notification icon ![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png) 2. Displays the filters in a popover rather than a modal ![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png) 3. Makes this notification icon only visible in **edit** mode - it no longer shows up in view or print mode. 1. Create a visualization with panel level filters and/or queries. - Note that the sample `[Flights] Global Flight Dashboard` dashboard already has some visualizations with panel level filters, so you could also use that instead. 3. Ensure that the panel level filters action icon **only** shows up in edit mode - Swap to view mode and make sure there is no icon - Print a PDF or PNG report and make sure there is no icon 4. Ensure that the `"Edit filters"` button in the popover keeps context when clicked, including allowing you to `"Save and return"` after being taken to Lens/Visualize/etc. 5. Ensure that the contents of the popover react to changes to panel level filters/queries - [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] 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) - [ ] 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) (cherry picked from commit a5d7818)
…147134) # Backport This will backport the following commits from `main` to `8.6`: - [[Dashboard] Change panel filters action visibility (#146335)](#146335) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Hannah Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-12-06T18:10:32Z","message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","Team:Presentation","loe:days","impact:high","backport:all-open","v8.7.0","v8.6.1"],"number":146335,"url":"https://github.com/elastic/kibana/pull/146335","mergeCommit":{"message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146335","number":146335,"mergeCommit":{"message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901"}},{"branch":"8.6","label":"v8.6.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
…147135) # Backport This will backport the following commits from `main` to `8.5`: - [[Dashboard] Change panel filters action visibility (#146335)](#146335) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Hannah Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-12-06T18:10:32Z","message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","Team:Presentation","loe:days","impact:high","backport:all-open","v8.7.0","v8.6.1"],"number":146335,"url":"https://github.com/elastic/kibana/pull/146335","mergeCommit":{"message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146335","number":146335,"mergeCommit":{"message":"[Dashboard] Change panel filters action visibility (#146335)\n\nCloses https://github.com/elastic/kibana/issues/141536\r\nCloses https://github.com/elastic/kibana/issues/143386\r\n\r\n## Summary\r\n\r\nhttps://github.com//pull/136655 introduced a panel level\r\nfilters badge that would notify users when a visualization was being\r\nfiltered/queried on an individual panel level. While this exposed\r\nimportant information about how the panels were being generated and made\r\nit so that users no longer had to navigate to Lens/Visualize/etc. to see\r\nthis information, it introduced a lot of undesired clutter to\r\ndashboards. This was especially annoying for dashboards in **view**\r\nmode, since panel level filter/query information is primarily useful for\r\ndashboard authors and thus this badge had minimal benefit despite its\r\nlarge visual impact.\r\n\r\nTo fix this, this PR does three things:\r\n1. Converts the panel filters badge to a single notification icon\r\n \r\n\r\n![BeforeAndAfterFilterBadge](https://user-images.githubusercontent.com/8698078/205696453-c8a7bc85-46bf-4a0c-b206-bbb690577d9a.png)\r\n\r\n2. Displays the filters in a popover rather than a modal\r\n\r\n\r\n\r\n![BeforeAndAfterModal](https://user-images.githubusercontent.com/8698078/205758567-314e841d-646e-4cb6-973d-0fde79c2b9df.png)\r\n\r\n\r\n3. Makes this notification icon only visible in **edit** mode - it no\r\nlonger shows up in view or print mode.\r\n\r\n### How to Test\r\n1. Create a visualization with panel level filters and/or queries.\r\n- Note that the sample `[Flights] Global Flight Dashboard` dashboard\r\nalready has some visualizations with panel level filters, so you could\r\nalso use that instead.\r\n3. Ensure that the panel level filters action icon **only** shows up in\r\nedit mode\r\n - Swap to view mode and make sure there is no icon\r\n - Print a PDF or PNG report and make sure there is no icon\r\n4. Ensure that the `\"Edit filters\"` button in the popover keeps context\r\nwhen clicked, including allowing you to `\"Save and return\"` after being\r\ntaken to Lens/Visualize/etc.\r\n5. Ensure that the contents of the popover react to changes to panel\r\nlevel filters/queries\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a5d781882730902650ee2f870064f0720aaad901"}},{"branch":"8.6","label":"v8.6.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/147134","number":147134,"state":"OPEN"}]}] BACKPORT--> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This PR didn't make it into |
Think this will make it for 8.5.4? |
@MakoWish There are no current plans for an |
## Summary - #148331: [Updated screenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html) - #146335: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data) - #146363: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels) - #144867: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls)
## Summary - elastic#148331: [Updated screenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html) - elastic#146335: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data) - elastic#146363: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels) - elastic#144867: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls) (cherry picked from commit e57883f)
# Backport This will backport the following commits from `main` to `8.7`: - [[DOCS] 8.7 Presentation docs (#151797)](#151797) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Kaarina Tungseth","email":"kaarina.tungseth@elastic.co"},"sourceCommit":{"committedDate":"2023-03-08T22:09:43Z","message":"[DOCS] 8.7 Presentation docs (#151797)\n\n## Summary\r\n\r\n- #148331: [Updated\r\nscreenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html)\r\n- #146335:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data)\r\n- #146363:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels)\r\n- #144867:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls)","sha":"e57883f3be8772c39cce0b6901a19f3aaf55d2d3","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","Team:Presentation","release_note:skip","v8.7.0","v8.8.0"],"number":151797,"url":"https://github.com/elastic/kibana/pull/151797","mergeCommit":{"message":"[DOCS] 8.7 Presentation docs (#151797)\n\n## Summary\r\n\r\n- #148331: [Updated\r\nscreenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html)\r\n- #146335:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data)\r\n- #146363:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels)\r\n- #144867:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls)","sha":"e57883f3be8772c39cce0b6901a19f3aaf55d2d3"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/151797","number":151797,"mergeCommit":{"message":"[DOCS] 8.7 Presentation docs (#151797)\n\n## Summary\r\n\r\n- #148331: [Updated\r\nscreenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html)\r\n- #146335:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data)\r\n- #146363:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels)\r\n- #144867:\r\n[Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls)","sha":"e57883f3be8772c39cce0b6901a19f3aaf55d2d3"}}]}] BACKPORT--> Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
## Summary - elastic#148331: [Updated screenshots](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html) - elastic#146335: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#search-or-filter-your-data) - elastic#146363: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/dashboard.html#edit-panels) - elastic#144867: [Docs](https://kibana_151797.docs-preview.app.elstc.co/guide/en/kibana/master/add-controls.html#edit-controls)
Closes #141536
Closes #143386
Summary
#136655 introduced a panel level filters badge that would notify users when a visualization was being filtered/queried on an individual panel level. While this exposed important information about how the panels were being generated and made it so that users no longer had to navigate to Lens/Visualize/etc. to see this information, it introduced a lot of undesired clutter to dashboards. This was especially annoying for dashboards in view mode, since panel level filter/query information is primarily useful for dashboard authors and thus this badge had minimal benefit despite its large visual impact.
To fix this, this PR does three things:
Converts the panel filters badge to a single notification icon
Displays the filters in a popover rather than a modal
Makes this notification icon only visible in edit mode - it no longer shows up in view or print mode.
How to Test
[Flights] Global Flight Dashboard
dashboard already has some visualizations with panel level filters, so you could also use that instead."Edit filters"
button in the popover keeps context when clicked, including allowing you to"Save and return"
after being taken to Lens/Visualize/etc.Checklist
For maintainers