Wrap gridstack in a generic Vue component
What does this MR do and why?
This MR refactors the customizable_dashboard.vue component by moving its GridStack instance to a dedicated reusable gridstack_wrapper.vue component. This is done to make customizable_dashboard.vue more maintainable by reducing the size of the component and creating clear separation of concerns as described in Wrap gridstack in a generic Vue component (#426550 - closed).
The following changes are made:
- Adds a new
gridstack_wrapper.vuecomponent. - Replace
gridstackincustomizable_dashboard.vuewithcustomizable_dashboard.vue. - [NEW] Destroy the gridstack instance when the component is destroyed. Previously the class instance survived.
- Add and update the applicable specs.
Next up is to refactor customizable_dashboard.vue in Refactor customizable dashboard for clearer sep... (#442754 - closed).
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
There should be no visual changes.
Recording
Click to expand
| Before | After |
|---|---|
| Screen_Recording_2024-02-26_at_15.46.19 | Screen_Recording_2024-02-26_at_15.48.07 |
Screenshots
Click to expand
Static view
| Before | After |
|---|---|
 |
 |
Editing view
| Before | After |
|---|---|
 |
 |
Builtin dashboard
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Follow these instructions to setup Product Analytics in GDK.
- Onboard
Product Analyticsby setting up the feature at Project > Analytics > Analytics dashboards. - Enable custom dashboards by following the banner prompt on Project > Analytics > Analytics dashboards.
- Verify that you can create, save and modify an existing custom dashboard.
- Verify that you can view the builtin dashboards.