Add a visual indicator to dashboard panels when in edit mode
Release notes
Problem to solve
When the Edit
button is clicked on a Product Analytics dashboard, it is not immediately obvious what has changed or what action a user should take. Consider the video below - it is only obvious that a panel can be moved or resized once it is hovered over, which is non-intuitive. Users may go to the Code
tab, assuming they can edit there, but that page is read-only. This leads to confusion for users.
Screen_Recording_2023-01-25_at_10.41.13_AM
Proposal
Make it visually obvious that a panel can be moved or resized once a user enters Edit
mode for a dashboard, without requiring them to hover over a panel.
- When a user clicks the
Edit
button show the resize indicator on all panesl. - When a user clicks
Edit
and hovers over a panel change the pointer to the open hand🤚 and clenched hand✊ on click to indicate they can drag a panel. - When a user clicks
Edit
show theCode
button which will still be Read Only for thisFirst External User
release.
Solution
- We will display the resize icon by default when on edit mode as opposed to on hover.
- We will update the cursor to grab when hovering , grabbing when moving panels
Intended users
Feature Usage Metrics
Implementation plan
frontend
Note: GridStack has the option to always display the resize handle, however the option cannot be updated after initialization. So we'll either have to overwrite the CSS class .ui-resizable-autohide
to not hide when editing, or recreate the entire grid when going to edit mode. My vote would be to former and create an issue on the GridStack repo.
- In
ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
:- When editing, add the
gl-cursor-grab
class to panels. - When a panel is being dragged, add the
gl-cursor-grabbing!
class to the dragged panel. - When editing, add a new class
.gridstack-show-resizable
to panels that overwrites.ui-resizable-autohide
.
- When editing, add the
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.