[Dashboards as Code] Rename dashboard panel props for API (elastic#235992)

Author: nickpeihl

examples/portable_dashboards_example/public/static_by_value_example_panels.json

@@ -1,15 +1,15 @@
 [
   {
     "type": "visualization",
-    "gridData": {
+    "grid": {
       "x": 0,
       "y": 0,
       "w": 28,
       "h": 10,
       "i": "a514e5f6-1d0d-4fe9-85a9-f7ba40665033"
     },
-    "panelIndex": "a514e5f6-1d0d-4fe9-85a9-f7ba40665033",
-    "panelConfig": {
+    "uid": "a514e5f6-1d0d-4fe9-85a9-f7ba40665033",
+    "config": {
       "savedVis": {
         "id": "",
         "title": "",
@@ -37,15 +37,15 @@
   },
   {
     "type": "lens",
-    "gridData": {
+    "grid": {
       "x": 30,
       "y": 0,
       "w": 20,
       "h": 21,
       "i": "b06b849e-f4fd-423c-a582-5c4bfec812c9"
     },
-    "panelIndex": "b06b849e-f4fd-423c-a582-5c4bfec812c9",
-    "panelConfig": {
+    "uid": "b06b849e-f4fd-423c-a582-5c4bfec812c9",
+    "config": {
       "title": "Destinations",
       "attributes": {
         "title": "",
@@ -144,14 +144,14 @@
   },
   {
     "type": "lens",
-    "gridData": {
+    "grid": {
       "x": 0,
       "y": 9,
       "w": 28,
       "h": 11,
       "i": "a4121cab-b6f2-4de3-af71-ec9b5a6f0a2a"
     },
-    "panelIndex": "a4121cab-b6f2-4de3-af71-ec9b5a6f0a2a",
+    "uid": "a4121cab-b6f2-4de3-af71-ec9b5a6f0a2a",
     "explicitInput": {
       "enhancements": {},
       "attributes": {

src/platform/plugins/shared/dashboard/common/is_dashboard_panel.ts

@@ -12,5 +12,5 @@ import type { DashboardAttributes, DashboardPanel } from '../server/content_mana
 export const isDashboardPanel = (
   widget: DashboardAttributes['panels'][number]
 ): widget is DashboardPanel => {
-  return 'panelConfig' in widget;
+  return 'config' in widget;
 };

src/platform/plugins/shared/dashboard/public/dashboard_actions/copy_to_dashboard_modal.test.tsx

@@ -49,7 +49,7 @@ describe('CopyToDashboardModal', () => {
       savedObjectId$: new BehaviorSubject<string | undefined>('dashboardOne'),
       getDashboardPanelFromId: () => ({
         type: 'testPanelType',
-        gridData: { w: 1, h: 1, x: 0, y: 0, i: 'panelOne' },
+        grid: { w: 1, h: 1, x: 0, y: 0, i: 'panelOne' },
         serializedState: {
           rawState: {
             title: 'Panel One',

src/platform/plugins/shared/dashboard/public/dashboard_actions/copy_to_dashboard_modal.tsx

@@ -56,8 +56,8 @@ export function CopyToDashboardModal({ api, closeModal }: CopyToDashboardModalPr
       type: panelToCopy.type,
       serializedState: panelToCopy.serializedState,
       size: {
-        width: panelToCopy.gridData.w,
-        height: panelToCopy.gridData.h,
+        width: panelToCopy.grid.w,
+        height: panelToCopy.grid.h,
       },
     };
 

src/platform/plugins/shared/dashboard/public/dashboard_api/generate_new_panel_ids.test.ts

@@ -21,9 +21,9 @@ describe('generateNewPanelIds', () => {
     const { newPanels, newPanelReferences } = generateNewPanelIds(
       [
         {
-          gridData: { x: 0, y: 0, w: 6, h: 6, i: '1' },
-          panelConfig: { title: 'panel One' },
-          panelIndex: '1',
+          grid: { x: 0, y: 0, w: 6, h: 6, i: '1' },
+          config: { title: 'panel One' },
+          uid: '1',
           type: 'testPanelType',
         },
       ],
@@ -38,9 +38,9 @@ describe('generateNewPanelIds', () => {
 
     expect(newPanels).toEqual([
       {
-        gridData: { x: 0, y: 0, w: 6, h: 6, i: '100' },
-        panelConfig: { title: 'panel One' },
-        panelIndex: '100',
+        grid: { x: 0, y: 0, w: 6, h: 6, i: '100' },
+        config: { title: 'panel One' },
+        uid: '100',
         type: 'testPanelType',
       },
     ]);
@@ -60,15 +60,15 @@ describe('generateNewPanelIds', () => {
         {
           title: 'Section One',
           collapsed: true,
-          gridData: {
+          grid: {
             y: 6,
             i: 'section1',
           },
           panels: [
             {
-              gridData: { x: 0, y: 0, w: 6, h: 6, i: '1' },
-              panelConfig: { title: 'panel One' },
-              panelIndex: '1',
+              grid: { x: 0, y: 0, w: 6, h: 6, i: '1' },
+              config: { title: 'panel One' },
+              uid: '1',
               type: 'testPanelType',
             },
           ],
@@ -87,15 +87,15 @@ describe('generateNewPanelIds', () => {
       {
         title: 'Section One',
         collapsed: true,
-        gridData: {
+        grid: {
           y: 6,
           i: '101',
         },
         panels: [
           {
-            gridData: { x: 0, y: 0, w: 6, h: 6, i: '102' },
-            panelConfig: { title: 'panel One' },
-            panelIndex: '102',
+            grid: { x: 0, y: 0, w: 6, h: 6, i: '102' },
+            config: { title: 'panel One' },
+            uid: '102',
             type: 'testPanelType',
           },
         ],

src/platform/plugins/shared/dashboard/public/dashboard_api/generate_new_panel_ids.ts

@@ -23,16 +23,16 @@ export function generateNewPanelIds(panels: DashboardState['panels'], references
 
   function generateNewPanelId(panel: DashboardPanel) {
     const newPanelId = v4();
-    const oldPanelId = panel.panelIndex ?? panel.gridData.i;
+    const oldPanelId = panel.uid ?? panel.grid.i;
     const panelReferences =
       oldPanelId && references ? getReferencesForPanelId(oldPanelId, references) : [];
 
     newPanelReferences.push(...prefixReferencesFromPanel(newPanelId, panelReferences));
 
     return {
       ...panel,
-      panelIndex: newPanelId,
-      gridData: { ...panel.gridData, i: newPanelId },
+      uid: newPanelId,
+      grid: { ...panel.grid, i: newPanelId },
     };
   }
 
@@ -42,7 +42,7 @@ export function generateNewPanelIds(panels: DashboardState['panels'], references
       const newSectionId = v4();
       newPanels.push({
         ...section,
-        gridData: { ...section.gridData, i: newSectionId },
+        grid: { ...section.grid, i: newSectionId },
         panels: section.panels.map((panelInSection) => {
           return generateNewPanelId(panelInSection as DashboardPanel);
         }),

src/platform/plugins/shared/dashboard/public/dashboard_api/get_serialized_state.test.ts

@@ -87,7 +87,7 @@ describe('getSerializedState', () => {
   it('should generate new IDs for panels and references when generateNewIds is true', () => {
     const dashboardState = {
       ...getSampleDashboardState(),
-      panels: [{ panelIndex: 'oldPanelId', type: 'visualization' } as DashboardPanel],
+      panels: [{ uid: 'oldPanelId', type: 'visualization' } as DashboardPanel],
     };
     const result = getSerializedState({
       controlGroupReferences: [],
@@ -105,11 +105,11 @@ describe('getSerializedState', () => {
     expect(result.attributes.panels).toMatchInlineSnapshot(`
       Array [
         Object {
-          "gridData": Object {
+          "grid": Object {
             "i": "54321",
           },
-          "panelIndex": "54321",
           "type": "visualization",
+          "uid": "54321",
         },
       ]
     `);

src/platform/plugins/shared/dashboard/public/dashboard_api/layout_manager/are_layouts_equal.ts

@@ -42,10 +42,7 @@ export const areLayoutsEqual = (originalLayout?: DashboardLayout, newLayout?: Da
   // then compare panel grid data
   for (const embeddableId of newPanelUuids) {
     if (
-      !deepEqual(
-        originalLayout?.panels[embeddableId]?.gridData,
-        newLayout?.panels[embeddableId]?.gridData
-      )
+      !deepEqual(originalLayout?.panels[embeddableId]?.grid, newLayout?.panels[embeddableId]?.grid)
     ) {
       return false;
     }

src/platform/plugins/shared/dashboard/public/dashboard_api/layout_manager/deserialize_layout.test.ts

@@ -14,23 +14,23 @@ describe('deserializeLayout', () => {
     const { layout, childState } = deserializeLayout(
       [
         {
-          gridData: { x: 0, y: 0, w: 6, h: 6, i: '1' },
-          panelConfig: { title: 'panel One' },
-          panelIndex: '1',
+          grid: { x: 0, y: 0, w: 6, h: 6, i: '1' },
+          config: { title: 'panel One' },
+          uid: '1',
           type: 'testPanelType',
         },
         {
           title: 'Section One',
           collapsed: true,
-          gridData: {
+          grid: {
             y: 6,
             i: 'section1',
           },
           panels: [
             {
-              gridData: { x: 0, y: 0, w: 6, h: 6, i: '3' },
-              panelConfig: { title: 'panel Three' },
-              panelIndex: '3',
+              grid: { x: 0, y: 0, w: 6, h: 6, i: '3' },
+              config: { title: 'panel Three' },
+              uid: '3',
               type: 'testPanelType',
             },
           ],
@@ -41,7 +41,7 @@ describe('deserializeLayout', () => {
     expect(layout.panels).toMatchInlineSnapshot(`
       Object {
         "1": Object {
-          "gridData": Object {
+          "grid": Object {
             "h": 6,
             "i": "1",
             "w": 6,
@@ -51,7 +51,7 @@ describe('deserializeLayout', () => {
           "type": "testPanelType",
         },
         "3": Object {
-          "gridData": Object {
+          "grid": Object {
             "h": 6,
             "i": "3",
             "sectionId": "section1",
@@ -67,7 +67,7 @@ describe('deserializeLayout', () => {
       Object {
         "section1": Object {
           "collapsed": true,
-          "gridData": Object {
+          "grid": Object {
             "i": "section1",
             "y": 6,
           },

src/platform/plugins/shared/dashboard/public/dashboard_api/layout_manager/deserialize_layout.ts

@@ -24,32 +24,32 @@ export function deserializeLayout(
   const childState: DashboardChildState = {};
 
   function pushPanel(panel: DashboardPanel, sectionId?: string) {
-    const panelId = panel.panelIndex ?? v4();
+    const panelId = panel.uid ?? v4();
     layout.panels[panelId] = {
       type: panel.type,
-      gridData: {
-        ...panel.gridData,
+      grid: {
+        ...panel.grid,
         ...(sectionId && { sectionId }),
         i: panelId,
       },
     };
     childState[panelId] = {
       rawState: {
-        ...panel.panelConfig,
+        ...panel.config,
       },
       references: getReferences(panelId),
     };
   }
 
   panels.forEach((widget) => {
     if (isDashboardSection(widget)) {
-      const sectionId = widget.gridData.i ?? v4();
+      const sectionId = widget.grid.i ?? v4();
       const { panels: sectionPanels, ...restOfSection } = widget;
       layout.sections[sectionId] = {
         collapsed: false,
         ...restOfSection,
-        gridData: {
-          ...widget.gridData,
+        grid: {
+          ...widget.grid,
           i: sectionId,
         },
       };