Dashboard: Fixes layout selector (#103066)

* Dashboard: Fixes layout selector

* remove unused import

* update

* Fix

public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx

@@ -61,7 +61,7 @@ export class DefaultGridLayoutManager
     get description() {
       return t('dashboard.default-layout.description', 'Position and size each panel individually');
     },
-    id: 'default-grid',
+    id: 'GridLayout',
     createFromLayout: DefaultGridLayoutManager.createFromLayout,
     isGridLayout: true,
   };

public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridLayoutManager.tsx

@@ -52,7 +52,7 @@ export class AutoGridLayoutManager
     get description() {
       return t('dashboard.auto-grid.description', 'Panels resize to fit and form uniform grids');
     },
-    id: 'auto-grid',
+    id: 'AutoGridLayout',
     createFromLayout: AutoGridLayoutManager.createFromLayout,
     isGridLayout: true,
   };

public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx

@@ -37,7 +37,7 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
     get description() {
       return t('dashboard.rows-layout.description', 'Collapsable panel groups with headings');
     },
-    id: 'rows-layout',
+    id: 'RowsLayout',
     createFromLayout: RowsLayoutManager.createFromLayout,
     isGridLayout: false,
   };

public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManager.tsx

@@ -39,7 +39,7 @@ export class TabsLayoutManager extends SceneObjectBase<TabsLayoutManagerState> i
     get description() {
       return t('dashboard.tabs-layout.description', 'Organize panels into horizontal tabs');
     },
-    id: 'tabs-layout',
+    id: 'TabsLayout',
     createFromLayout: TabsLayoutManager.createFromLayout,
     isGridLayout: false,
   };

public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx

@@ -37,7 +37,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
     <div role="radiogroup" className={styles.radioGroup}>
       {options.map((opt) => {
         switch (opt.id) {
-          case 'rows-layout':
+          case 'RowsLayout':
             return (
               <LayoutRadioButton
                 item={opt}
@@ -59,7 +59,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
                 </div>
               </LayoutRadioButton>
             );
-          case 'tabs-layout':
+          case 'TabsLayout':
             return (
               <LayoutRadioButton
                 item={opt}
@@ -83,7 +83,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
                 </Stack>
               </LayoutRadioButton>
             );
-          case 'responsive-grid':
+          case 'AutoGridLayout':
             return (
               <LayoutRadioButton
                 item={opt}
@@ -99,7 +99,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
                 </div>
               </LayoutRadioButton>
             );
-          case 'custom-grid':
+          case 'GridLayout':
           default:
             return (
               <LayoutRadioButton

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

@@ -527,7 +527,7 @@ describe('transformSaveModelSchemaV2ToScene', () => {
         };
         const scene = transformSaveModelSchemaV2ToScene(dashboard);
         const layoutManager = scene.state.body as AutoGridLayoutManager;
-        expect(layoutManager.descriptor.id).toBe('auto-grid');
+        expect(layoutManager.descriptor.id).toBe('AutoGridLayout');
         expect(layoutManager.state.maxColumnCount).toBe(4);
         expect(layoutManager.state.columnWidth).toBe(100);
         expect(layoutManager.state.rowHeight).toBe('standard');
@@ -572,7 +572,7 @@ describe('transformSaveModelSchemaV2ToScene', () => {
         };
         const scene = transformSaveModelSchemaV2ToScene(dashboard);
         const layoutManager = scene.state.body as TabsLayoutManager;
-        expect(layoutManager.descriptor.id).toBe('tabs-layout');
+        expect(layoutManager.descriptor.id).toBe('TabsLayout');
         expect(layoutManager.state.tabs.length).toBe(1);
         expect(layoutManager.state.tabs[0].state.title).toBe('tab1');
         const gridLayoutManager = layoutManager.state.tabs[0].state.layout as AutoGridLayoutManager;
@@ -648,10 +648,10 @@ describe('transformSaveModelSchemaV2ToScene', () => {
         };
         const scene = transformSaveModelSchemaV2ToScene(dashboard);
         const layoutManager = scene.state.body as RowsLayoutManager;
-        expect(layoutManager.descriptor.id).toBe('rows-layout');
+        expect(layoutManager.descriptor.id).toBe('RowsLayout');
         expect(layoutManager.state.rows.length).toBe(2);
         const row1Manager = layoutManager.state.rows[0].state.layout as AutoGridLayoutManager;
-        expect(row1Manager.descriptor.id).toBe('auto-grid');
+        expect(row1Manager.descriptor.id).toBe('AutoGridLayout');
         expect(row1Manager.state.maxColumnCount).toBe(4);
         expect(row1Manager.state.columnWidth).toBe('standard');
         expect(row1Manager.state.rowHeight).toBe('standard');
@@ -659,7 +659,7 @@ describe('transformSaveModelSchemaV2ToScene', () => {
         expect(row1GridItem.state.body.state.key).toBe('panel-1');
 
         const row2Manager = layoutManager.state.rows[1].state.layout as DefaultGridLayoutManager;
-        expect(row2Manager.descriptor.id).toBe('default-grid');
+        expect(row2Manager.descriptor.id).toBe('GridLayout');
         const row2GridItem = row2Manager.state.grid.state.children[0] as SceneGridItem;
         expect(row2GridItem.state.body!.state.key).toBe('panel-2');
       });