DashboardScene: Fixes saving dashboard with angular panels (grafana#8…

…6098)

* DashboardScene: Fixes saving angularOptions

* Update

* Update

.betterer.results

@@ -2538,16 +2538,19 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "11"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "12"]
     ],
     "public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Do not use any type assertions.", "4"],
       [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"]
+      [0, 0, 0, "Do not use any type assertions.", "6"],
+      [0, 0, 0, "Do not use any type assertions.", "7"],
+      [0, 0, 0, "Do not use any type assertions.", "8"]
     ],
     "public/app/features/dashboard-scene/settings/VersionsEditView.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts

@@ -260,6 +260,22 @@ describe('transformSceneToSaveModel', () => {
       expect(saveModel.transparent).toBe(true);
     });
 
+    it('With angular options', () => {
+      const gridItem = buildGridItemFromPanelSchema({});
+      const vizPanel = gridItem.state.body as VizPanel;
+      vizPanel.setState({
+        options: {
+          angularOptions: {
+            bars: true,
+          },
+        },
+      });
+
+      const saveModel = gridItemToPanel(gridItem);
+      expect(saveModel.options?.angularOptions).toBe(undefined);
+      expect((saveModel as any).bars).toBe(true);
+    });
+
     it('Given panel with repeat', () => {
       const gridItem = buildGridItemFromPanelSchema({
         title: '',

public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.ts

@@ -1,4 +1,4 @@
-import { isEqual } from 'lodash';
+import { defaults, isEqual } from 'lodash';
 
 import { isEmptyObject, ScopedVars, TimeRange } from '@grafana/data';
 import {
@@ -232,14 +232,23 @@ export function vizPanelToPanel(
     title: vizPanel.state.title,
     description: vizPanel.state.description ?? undefined,
     gridPos,
-    options: vizPanel.state.options,
     fieldConfig: (vizPanel.state.fieldConfig as FieldConfigSource) ?? { defaults: {}, overrides: [] },
     transformations: [],
     transparent: vizPanel.state.displayMode === 'transparent',
     pluginVersion: vizPanel.state.pluginVersion,
     ...vizPanelDataToPanel(vizPanel, isSnapshot),
   };
 
+  if (vizPanel.state.options) {
+    const { angularOptions, ...rest } = vizPanel.state.options as any;
+    panel.options = rest;
+
+    if (angularOptions) {
+      // Allow angularOptions to overwrite non system level root properties
+      defaults(panel, angularOptions);
+    }
+  }
+
   const panelTime = vizPanel.state.$timeRange;
 
   if (panelTime instanceof PanelTimeRange) {
@@ -275,6 +284,7 @@ export function vizPanelToPanel(
   if (!panel.transparent) {
     delete panel.transparent;
   }
+
   return panel;
 }