[Bug] Dashboards list retains fluid container after visiting a dashboard or the panel designer
Summary
After visiting a dashboard or the panel designer, the dashboards list retains the full-width fluid container rather than reverting to the limited width.
Steps to reproduce
Please follow the instructions at https://gitlab.com/gitlab-org/gitlab/-/snippets/2474959 to enable Product Analytics on your GDK.
With the Product Analytics feature enabled:
- Go to
/gitlab-org/gitlab-shell/-/product_analytics/dashboards
or any other instrumented project. - See that the listing has a restricted width.
- Select a dashboard and then go back either through the button or the browsers inbuilt controls.
- See that the listing is now full-width.
What is the current bug behavior?
The dashboards list becomes full-width after navigating to other pages.
What is the expected correct behavior?
Dashboards and panel designer should be full-width but the dashboards list should have a restricted width.
Relevant logs and/or screenshots
Screen_Recording_2023-02-03_at_07.46.51
Possible fixes
(Needs tests)
Index: ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_panel_designer.vue
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_panel_designer.vue b/ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_panel_designer.vue
--- a/ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_panel_designer.vue (revision Staged)
+++ b/ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_panel_designer.vue (date 1675424755854)
@@ -64,14 +64,26 @@
mounted() {
// Needs to be dynamic as it can't be changed on the cube component
const outerShell = document.getElementById('js-query-builder-wrapper');
- if (outerShell) outerShell.childNodes[0].classList.add('gl-display-flex');
+
+ if (outerShell) {
+ outerShell.childNodes[0].classList.add('gl-display-flex');
+ }
const wrappers = document.querySelectorAll('.container-fluid.container-limited');
wrappers.forEach((el) => {
+ el.classList.add('has-limit-temp-removed');
el.classList.remove('container-limited');
});
},
+ beforeDestroy() {
+ const wrappers = document.querySelectorAll('.container-fluid.has-limit-temp-removed');
+
+ wrappers.forEach((el) => {
+ el.classList.add('container-limited');
+ el.classList.remove('has-limit-temp-removed');
+ });
+ },
methods: {
measureUpdated(measureType, measureSubType) {
this.queryState.measureType = measureType;
Index: ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue b/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue
--- a/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue (revision Staged)
+++ b/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/customizable_dashboard.vue (date 1675424731231)
@@ -70,11 +70,19 @@
const wrappers = document.querySelectorAll('.container-fluid.container-limited');
wrappers.forEach((el) => {
+ el.classList.add('has-limit-temp-removed');
el.classList.remove('container-limited');
});
},
- unmounted() {
+ beforeDestroy() {
this.mounted = false;
+
+ const wrappers = document.querySelectorAll('.container-fluid.has-limit-temp-removed');
+
+ wrappers.forEach((el) => {
+ el.classList.add('container-limited');
+ el.classList.remove('has-limit-temp-removed');
+ });
},
methods: {
initGridStack() {
Edited by Robert Hunt