Merge branch '454019-follow-up-from-analytics-dashboard-observability' into 'master'

Apply follow suggestions to analytics dashboard files

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149722



Merged-by: Elwyn Benson <ebenson@gitlab.com>
Approved-by: Elwyn Benson <ebenson@gitlab.com>
Co-authored-by: Jiaan Louw <jlouw@gitlab.com>

ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboard.vue

@@ -179,16 +179,7 @@ export default {
 
         return {
           ...dashboard,
-          panels:
-            // Panel ids need to remain consistent and they are unique to the
-            // frontend. Thus they don't get saved with GraphQL and we need to
-            // reference the saved panels array to persist the ids.
-            this.savedPanels ||
-            dashboard.panels?.nodes?.map((panel) => ({
-              ...panel,
-              id: getUniquePanelId(),
-            })) ||
-            [],
+          panels: this.getDashboardPanels(dashboard),
         };
       },
       result() {
@@ -250,6 +241,19 @@ export default {
     createNewDashboard() {
       return NEW_DASHBOARD();
     },
+    getDashboardPanels(dashboard) {
+      // Panel ids need to remain consistent and they are unique to the
+      // frontend. Thus they don't get saved with GraphQL and we need to
+      // reference the saved panels array to persist the ids.
+      if (this.savedPanels) return this.savedPanels;
+
+      const panels = dashboard.panels?.nodes || [];
+
+      return panels.map(({ id, ...panel }) => ({
+        ...panel,
+        id: getUniquePanelId(),
+      }));
+    },
     async saveDashboard(dashboardSlug, dashboard) {
       this.validateDashboardTitle(dashboard.title, true);
       if (this.titleValidationError) {

ee/spec/frontend/vue_shared/components/customizable_dashboard/customizable_dashboard_spec.js

@@ -26,7 +26,6 @@ import {
   TEST_EMPTY_DASHBOARD_SVG_PATH,
 } from 'ee_jest/analytics/analytics_dashboards/mock_data';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
-import { createNewVisualizationPanel } from 'ee/analytics/analytics_dashboards/utils';
 import { stubComponent } from 'helpers/stub_component';
 import { dashboard, builtinDashboard, mockDateRangeFilterChangePayload } from './mock_data';
 
@@ -472,8 +471,18 @@ describe('CustomizableDashboard', () => {
 
           expect(panels).toHaveLength(3);
           expect(panels[2]).toMatchObject({
-            ...createNewVisualizationPanel(TEST_VISUALIZATION()),
             id: expect.stringContaining('panel-'),
+            title: 'Test visualization',
+            gridAttributes: { width: 4, height: 3 },
+            queryOverrides: {},
+            options: {},
+            visualization: {
+              version: 1,
+              type: 'LineChart',
+              slug: 'test_visualization',
+              data: { type: 'cube_analytics', query: expect.any(Object) },
+              errors: null,
+            },
           });
         });
       });

ee/spec/frontend/vue_shared/components/customizable_dashboard/gridstack_wrapper_spec.js

@@ -96,7 +96,7 @@ describe('GridstackWrapper', () => {
       expect(mockGridLoad).toHaveBeenCalledWith(dashboard.panels.map(parsePanelToGridItem));
     });
 
-    it('does not render a the grab cursor on grid panels', () => {
+    it('does not render the grab cursor on grid panels', () => {
       expect(findGridStackPanels().at(0).classes()).not.toContain('gl-cursor-grab');
     });