diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboard.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboard.vue index ef58f8c9f48395e623481136f431f30487dfd57b..e38cb3aa6d9c7264f1a82e6e07d3bc0eda9b779e 100644 --- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_dashboard.vue +++ b/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) { diff --git a/ee/spec/frontend/vue_shared/components/customizable_dashboard/customizable_dashboard_spec.js b/ee/spec/frontend/vue_shared/components/customizable_dashboard/customizable_dashboard_spec.js index ca0ac3b8c335f5e4bd9c5a63ad07881ee7c1bf00..c126f314688e274549fc73a586edcf724dd6485b 100644 --- a/ee/spec/frontend/vue_shared/components/customizable_dashboard/customizable_dashboard_spec.js +++ b/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, + }, }); }); }); diff --git a/ee/spec/frontend/vue_shared/components/customizable_dashboard/gridstack_wrapper_spec.js b/ee/spec/frontend/vue_shared/components/customizable_dashboard/gridstack_wrapper_spec.js index beafda851fc3e60fd199bba12fd634a1fe238dba..3969009b9a600c4982d2e5d25f6be102cff00923 100644 --- a/ee/spec/frontend/vue_shared/components/customizable_dashboard/gridstack_wrapper_spec.js +++ b/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'); });