[Dashboard Usability] Improve "Edit panel settings" in the panel menu #160256

teresaalvarezsoler · 2023-06-22T10:54:06Z

Problems

The pencil icon is already used for editing the visualization which is confusing.
The icon used in the listing pages to view details is not the pencil:
The wording "Edit" is a bit confusing because users can't edit much in view mode. It also makes this option wording too long.

Solution

Replace the pencil icon (see discussion below)
Replace Edit panel settings by Panel settings

The text was updated successfully, but these errors were encountered:

elasticmachine · 2023-06-22T10:54:08Z

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

teresaalvarezsoler · 2023-06-22T10:57:06Z

The icon used in the page list to view the details is already in use by the "Inspect" option, should we change that option icon and use the inspect one for the panel settings? @andreadelrio

Heenawter · 2023-06-22T14:55:24Z

I'm not sure that Inspect is the right word for view mode, considering the fact that custom time ranges and, eventually, panel-level filters/queries will be editable in this flyout (even in view mode) as discussed here. Using "Inspect", at least to me, suggests that you are simply viewing details about the panel, and it does not let the user know that there are pieces of editable state in the flyout.

We could go the Controls route and simply have a general "Settings" option, without the word "Edit"?

teresaalvarezsoler · 2023-06-22T16:17:56Z

I like the idea @Heenawter . Could we also change the icon and wording in the listing view of visualizations and dashboards to be consistent?

teresaalvarezsoler · 2023-06-29T15:16:52Z

Change the gear by the three dots in Edit mode for the panel settings menu

## Summary Part of #160256 - Replaces the Edit panel settings text with the simpler Panel settings - Replaces the documentation - Replaces the icon <img width="1757" alt="image" src="https://github.com/elastic/kibana/assets/17003240/e0ea6c19-8a65-44b8-906e-c364c00536a0"> ### Checklist - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials

cqliu1 · 2023-07-17T21:25:10Z

With #161616 merged, the Edit panel settings label now says just Panel settings and uses the gear icon instead of the pencil icon.

To clarify the remaining To-Do's for this issue:

Change the gear by the three dots in Edit mode for the panel settings menu

@teresaalvarezsoler Are you talking about the gear button in the top right corner of the panel and using the horizontal 3 dots icon like in view mode?

Edit mode

View mode

Could we also change the icon and wording in the listing view of visualizations and dashboards to be consistent?

Currently the two actions are Edit with a pencil icon which opens the selected vis in its respective editor or dashboard in edit mode and View details with an inspect icon, which opens a flyout to edit the title, description, and tags of the selected vis/dashboard without leaving the listing page. Is this Edit action necessary, or can we remove it since you clicking on the title already opens the vis/dashboard? Should we change View details to Settings and use a gear icon instead? @andreadelrio Do you have any thoughts on how to make these actions more clear?

teresaalvarezsoler · 2023-07-18T10:50:52Z

Are you talking about the gear button in the top right corner of the panel and using the horizontal 3 dots icon like in view mode?

Exactly :)

teresaalvarezsoler · 2023-07-18T10:54:08Z

Is this Edit action necessary, or can we remove it since you clicking on the title already opens the vis/dashboard?

Good question... I do't have a strong opinion on this. I would leave just to be consistent with the Visualize Library UX.

Should we change View details to Settings and use a gear icon instead?

Yes, I think that works much better. But maybe we should also change it in the Visualize Library to be consistent.
@andreadelrio any thoughts?

nreese · 2023-07-18T14:22:18Z

Is this Edit action necessary, or can we remove it since you clicking on the title already opens the vis/dashboard?

Clicking title opens dashboard in view mode. Clicking the edit action opens dashboard in edit mode. Not for or against removing edit icon but there is a difference between the two

teresaalvarezsoler · 2023-07-18T14:37:57Z

Good point, let's keep it then

Heenawter · 2023-07-18T14:39:52Z

Clicking title opens dashboard in view mode.

Note: The title only opens the dashboard in view mode if it wasn't last opened in edit mode; otherwise, if the dashboard was last opened in edit mode, clicking the title will also open the dashboard in edit mode. This is kind of confusing behaviour IMO. The pencil icon does indeed always open the dashboard in edit mode.

Also, if we go the route of storing the view mode in local storage as described in this issue, I wonder if this distinction becomes less important? 🤔 With this change, I think that having a different "view" and "edit" path via the listing page adds confusion, since this would no longer be a "per dashboard" piece of state and would instead be stored as part of the "dashboard app" state

andreadelrio · 2023-07-18T22:08:01Z

@teresaalvarezsoler +1 to consistency with the Visualization listing page. However, I feel like the inspect icon is confusing. Truth is, we use it to represent different meanings across Kibana (including Preview, View details and, Inspect). I reviewed this with @cqliu1. We think we can use the iInCircle icon instead. As a reference, you can find a similar use case in Google Drive. We discussed using the gear icon but that could be confusing because this flyout doesn't show all the dashboard settings that are available to the user once they're inside a dashboard.

teresaalvarezsoler · 2023-07-19T09:14:26Z

Thanks @andreadelrio and @cqliu1 . Totally agree with using theiInCircle :) can we also change it in the Visualization Library?

cqliu1 · 2023-07-20T17:16:08Z

Totally agree with using theiInCircle :) can we also change it in the Visualization Library?

Absolutely! All of the changes I'm making will carry over to the visualize library listing page as well.

…shboard listing page (#161399) ## Summary Closes #144481. Closes #160256. This enables content editor in dashboard to allow users to edit the title, description, and tags from the listing page. https://github.com/elastic/kibana/assets/1697105/c2212882-43e3-45cb-83fc-493860857019 The only validation added to this flyout is the duplicate title check. I used the same warning message as the visualize listing page. <img width="600" alt="Screenshot 2023-07-06 at 2 11 38 PM" src="https://github.com/elastic/kibana/assets/1697105/42f7244a-1c4d-47ec-8f66-a98a63eff473"> ### Checklist Delete any items that are not applicable to this PR. - [ ] 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 - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### 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: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

…shboard listing page (elastic#161399) ## Summary Closes elastic#144481. Closes elastic#160256. This enables content editor in dashboard to allow users to edit the title, description, and tags from the listing page. https://github.com/elastic/kibana/assets/1697105/c2212882-43e3-45cb-83fc-493860857019 The only validation added to this flyout is the duplicate title check. I used the same warning message as the visualize listing page. <img width="600" alt="Screenshot 2023-07-06 at 2 11 38 PM" src="https://github.com/elastic/kibana/assets/1697105/42f7244a-1c4d-47ec-8f66-a98a63eff473"> ### Checklist Delete any items that are not applicable to this PR. - [ ] 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 - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### 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: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

teresaalvarezsoler mentioned this issue Jun 29, 2023

[Dashboard Usability] Centralize Panel Settings - Filters #160273

Closed

stratoula mentioned this issue Jul 11, 2023

[Dashboard] Panel settings action improvements #161616

Merged

1 task

cqliu1 self-assigned this Jul 17, 2023

This was referenced Jul 20, 2023

[Dashboard][Content Editor] Edit title, description, and tags from dashboard listing page #161399

Merged

[Dashboard Usability] Store ViewMode in Local Storage #154950

Closed

cqliu1 closed this as completed in #161399 Aug 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard Usability] Improve "Edit panel settings" in the panel menu #160256

[Dashboard Usability] Improve "Edit panel settings" in the panel menu #160256

teresaalvarezsoler commented Jun 22, 2023

elasticmachine commented Jun 22, 2023

teresaalvarezsoler commented Jun 22, 2023

Heenawter commented Jun 22, 2023 •

edited

Loading

teresaalvarezsoler commented Jun 22, 2023

teresaalvarezsoler commented Jun 29, 2023

cqliu1 commented Jul 17, 2023 •

edited

Loading

teresaalvarezsoler commented Jul 18, 2023

teresaalvarezsoler commented Jul 18, 2023

nreese commented Jul 18, 2023

teresaalvarezsoler commented Jul 18, 2023

Heenawter commented Jul 18, 2023 •

edited

Loading

andreadelrio commented Jul 18, 2023

teresaalvarezsoler commented Jul 19, 2023

cqliu1 commented Jul 20, 2023 •

edited

Loading

[Dashboard Usability] Improve "Edit panel settings" in the panel menu #160256

[Dashboard Usability] Improve "Edit panel settings" in the panel menu #160256

Comments

teresaalvarezsoler commented Jun 22, 2023

elasticmachine commented Jun 22, 2023

teresaalvarezsoler commented Jun 22, 2023

Heenawter commented Jun 22, 2023 • edited Loading

teresaalvarezsoler commented Jun 22, 2023

teresaalvarezsoler commented Jun 29, 2023

cqliu1 commented Jul 17, 2023 • edited Loading

Edit mode

View mode

teresaalvarezsoler commented Jul 18, 2023

teresaalvarezsoler commented Jul 18, 2023

nreese commented Jul 18, 2023

teresaalvarezsoler commented Jul 18, 2023

Heenawter commented Jul 18, 2023 • edited Loading

andreadelrio commented Jul 18, 2023

teresaalvarezsoler commented Jul 19, 2023

cqliu1 commented Jul 20, 2023 • edited Loading

Heenawter commented Jun 22, 2023 •

edited

Loading

cqliu1 commented Jul 17, 2023 •

edited

Loading

Heenawter commented Jul 18, 2023 •

edited

Loading

cqliu1 commented Jul 20, 2023 •

edited

Loading