[Dashboards as Code] uid to id

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.test.tsx

@@ -82,7 +82,7 @@ describe('render', () => {
         <ControlPanel
           control={{
             ...DEFAULT_PINNED_CONTROL_STATE,
-            uid: 'control1',
+            id: 'control1',
             type: 'optionsListControl',
             order: 0,
           }}
@@ -101,7 +101,7 @@ describe('render', () => {
       const controlPanel = render(
         <ControlPanel
           control={{
-            uid: 'control1',
+            id: 'control1',
             type: 'optionsListControl',
             order: 0,
             width: 'small',

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

@@ -36,7 +36,7 @@ import { FloatingActions } from './floating_actions';
 
 export const ControlPanel = ({
   parentApi,
-  control: { uid, grow, width, type },
+  control: { id, grow, width, type },
   setControlPanelRef,
 }: {
   parentApi: ControlsRendererParentApi;
@@ -48,7 +48,7 @@ export const ControlPanel = ({
   const [api, setApi] = useState<(DefaultEmbeddableApi & Partial<HasCustomPrepend>) | null>(null);
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: uid,
+    id,
   });
 
   const [viewMode, disabledActionIds] = useBatchedPublishingSubjects(
@@ -80,9 +80,9 @@ export const ControlPanel = ({
   const setRefs = useCallback(
     (ref: HTMLElement | null) => {
       setNodeRef(ref);
-      setControlPanelRef(uid, ref);
+      setControlPanelRef(id, ref);
     },
-    [uid, setNodeRef, setControlPanelRef]
+    [id, setNodeRef, setControlPanelRef]
   );
 
   const onApiAvailable = useCallback(
@@ -110,15 +110,15 @@ export const ControlPanel = ({
       <FloatingActions
         data-test-subj="control-frame-floating-actions"
         api={api}
-        uuid={uid}
+        uuid={id}
         viewMode={viewMode}
         disabledActions={disabledActionIds}
         prependWrapperRef={prependWrapperRef}
       >
         <EuiFormRow
           data-test-subj="control-frame-title"
           fullWidth
-          id={`control-title-${uid}`}
+          id={`control-title-${id}`}
           aria-label={i18n.translate('controls.controlGroup.controlFrameAriaLabel', {
             defaultMessage: 'Control for ${controlTitle}',
             values: { controlTitle: panelLabel },
@@ -169,8 +169,8 @@ export const ControlPanel = ({
             compressed={parentApi.isCompressed ? parentApi.isCompressed() : true}
           >
             <EmbeddableRenderer
-              key={uid}
-              maybeId={uid}
+              key={id}
+              maybeId={id}
               type={type}
               getParentApi={() => parentApi}
               onApiAvailable={onApiAvailable}

src/platform/packages/private/kbn-controls-renderer/src/controls_renderer.tsx

@@ -130,7 +130,7 @@ export const ControlsRenderer = ({
               parentApi={parentApi}
               control={{
                 ...control,
-                uid: control.id!,
+                id: control.id!,
               }}
               setControlPanelRef={setControlPanelRef}
             />

src/platform/packages/shared/controls/controls-schemas/src/controls_group_schema.ts

@@ -35,7 +35,7 @@ export const controlWidthSchema = schema.oneOf(
 );
 
 export const pinnedControlSchema = schema.object({
-  uid: schema.maybe(schema.string({ meta: { description: 'The unique ID of the control' } })),
+  id: schema.maybe(schema.string({ meta: { description: 'The unique ID of the control' } })),
   width: controlWidthSchema,
   grow: schema.boolean({
     defaultValue: DEFAULT_PINNED_CONTROL_STATE.grow,

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

@@ -17,7 +17,7 @@ describe('deserializeLayout', () => {
         {
           grid: { x: 0, y: 0, w: 6, h: 6 },
           config: { title: 'panel One' },
-          uid: '1',
+          id: '1',
           type: 'testPanelType',
         },
         {
@@ -26,27 +26,27 @@ describe('deserializeLayout', () => {
           grid: {
             y: 6,
           },
-          uid: 'section1',
+          id: 'section1',
           panels: [
             {
               grid: { x: 0, y: 0, w: 6, h: 6 },
               config: { title: 'panel Three' },
-              uid: '3',
+              id: '3',
               type: 'testPanelType',
             },
           ],
         },
       ],
       [
         {
-          uid: 'control1',
+          id: 'control1',
           type: 'someType',
           width: 'small',
           grow: true,
           config: { someValue: 'test' },
         } as unknown as PinnedControlState,
         {
-          uid: 'control2',
+          id: 'control2',
           type: 'anotherType',
           config: { anotherValue: 1 },
         } as unknown as PinnedControlState,

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

@@ -21,15 +21,15 @@ export function deserializeLayout(
     panels: {},
     sections: {},
     pinnedPanels: (pinnedPanels ?? []).reduce((prev, panel, index) => {
-      const panelId = panel.uid ?? v4();
+      const panelId = panel.id ?? v4();
       const { width, grow, type, config } = panel;
       childState[panelId] = config; // push to child state
       return { ...prev, [panelId]: { type, width, grow, order: index } };
     }, {}),
   };
 
   function pushPanel(panel: DashboardPanel, sectionId?: string) {
-    const panelId = panel.uid ?? v4();
+    const panelId = panel.id ?? v4();
     layout.panels[panelId] = {
       type: panel.type,
       grid: {
@@ -44,8 +44,8 @@ export function deserializeLayout(
 
   panels?.forEach((widget) => {
     if (isDashboardSection(widget)) {
-      const { panels: sectionPanels, uid, ...restOfSection } = widget;
-      const sectionId = uid ?? v4();
+      const { panels: sectionPanels, id, ...restOfSection } = widget;
+      const sectionId = id ?? v4();
       layout.sections[sectionId] = restOfSection;
       sectionPanels.forEach((panel) => {
         pushPanel(panel, sectionId);

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

@@ -52,13 +52,13 @@ describe('layout manager', () => {
     grid: { w: 1, h: 1, x: 0, y: 0 },
     type: 'testPanelType',
     config: { title: 'Panel One' },
-    uid: PANEL_ONE_ID,
+    id: PANEL_ONE_ID,
   };
 
   const pinnedControls: DashboardState['pinned_panels'] = [
     {
       ...DEFAULT_PINNED_CONTROL_STATE,
-      uid: 'control1',
+      id: 'control1',
       type: 'options_list_control',
       config: {
         ...DEFAULT_DSL_OPTIONS_LIST_STATE,
@@ -68,7 +68,7 @@ describe('layout manager', () => {
     },
     {
       ...DEFAULT_PINNED_CONTROL_STATE,
-      uid: 'control2',
+      id: 'control2',
       type: 'options_list_control',
       config: {
         ...DEFAULT_DSL_OPTIONS_LIST_STATE,
@@ -91,7 +91,7 @@ describe('layout manager', () => {
   const section1 = {
     title: 'Section one',
     collapsed: false,
-    uid: 'section1',
+    id: 'section1',
     grid: {
       y: 1,
     },
@@ -398,7 +398,7 @@ describe('layout manager', () => {
         [
           panel1,
           {
-            uid: 'control3',
+            id: 'control3',
             type: 'options_list_control',
             config: {},
             grid: { x: 0, y: 2, h: 1, w: 1 },
@@ -428,7 +428,7 @@ describe('layout manager', () => {
         },
       });
       expect(layoutManager.api.layout$.getValue().panels).toEqual({
-        [panel1.uid]: pick(panel1, ['grid', 'type']),
+        [panel1.id]: pick(panel1, ['grid', 'type']),
         // control3 gets removed as a panel
       });
     });
@@ -463,7 +463,7 @@ describe('layout manager', () => {
         },
       });
       expect(layoutManager.api.layout$.getValue().panels).toEqual({
-        [panel1.uid]: {
+        [panel1.id]: {
           type: 'testPanelType',
           grid: { ...panel1.grid, y: 2 }, // push panel 1 down,
         },
@@ -482,7 +482,7 @@ describe('layout manager', () => {
           panel1,
           {
             ...pinnedControls[1],
-            uid: 'control2',
+            id: 'control2',
             grid: { x: 0, y: 0, w: 12, h: 12 },
             config: { title: 'Control' },
           },

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

@@ -52,7 +52,7 @@ describe('serializeLayout', () => {
           grid: {
             y: 6,
           },
-          uid: 'section1',
+          id: 'section1',
           title: 'Section One',
         },
       },
@@ -85,14 +85,15 @@ describe('serializeLayout', () => {
             "x": 0,
             "y": 0,
           },
+          "id": "1",
           "type": "testPanelType",
-          "uid": "1",
         },
         Object {
           "collapsed": true,
           "grid": Object {
             "y": 6,
           },
+          "id": "section1",
           "panels": Array [
             Object {
               "config": Object {
@@ -104,12 +105,11 @@ describe('serializeLayout', () => {
                 "x": 0,
                 "y": 0,
               },
+              "id": "3",
               "type": "testPanelType",
-              "uid": "3",
             },
           ],
           "title": "Section One",
-          "uid": "section1",
         },
       ]
     `);
@@ -119,16 +119,16 @@ describe('serializeLayout', () => {
           "config": Object {
             "anotherValue": "test",
           },
+          "id": "control2",
           "type": "someOtherControl",
-          "uid": "control2",
         },
         Object {
           "config": Object {
             "selection": "some value",
           },
           "grow": true,
+          "id": "control1",
           "type": "someControl",
-          "uid": "control1",
           "width": "small",
         },
       ]

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

@@ -18,7 +18,7 @@ export function serializeLayout(
 ): Pick<DashboardState, 'panels' | 'pinned_panels'> {
   const sections: { [sectionId: string]: DashboardSection } = {};
   Object.entries(layout.sections).forEach(([sectionId, sectionState]) => {
-    sections[sectionId] = { ...sectionState, uid: sectionId, panels: [] };
+    sections[sectionId] = { ...sectionState, id: sectionId, panels: [] };
   });
 
   const panels: DashboardState['panels'] = [];
@@ -29,7 +29,7 @@ export function serializeLayout(
     const panelState = {
       type,
       grid: restOfGridData,
-      uid: panelId,
+      id: panelId,
       config,
     };
 
@@ -46,7 +46,7 @@ export function serializeLayout(
       .sort(([, { order: orderA }], [, { order: orderB }]) => orderA - orderB)
       .map(([id, panel]) => {
         return {
-          uid: id,
+          id,
           ...omit(panel, 'order'),
           config: childState[id],
         } as Required<DashboardState>['pinned_panels'][number];

src/platform/plugins/shared/dashboard/public/dashboard_api/load_dashboard_api/transform_panels.test.ts

@@ -35,7 +35,7 @@ describe('transformPanels', () => {
         {
           grid: { x: 0, y: 0, w: 6, h: 6 },
           config: {},
-          uid: '1',
+          id: '1',
           type: 'testPanelType',
         },
         {
@@ -44,12 +44,12 @@ describe('transformPanels', () => {
           grid: {
             y: 6,
           },
-          uid: 'section1',
+          id: 'section1',
           panels: [
             {
               grid: { x: 0, y: 0, w: 6, h: 6 },
               config: {},
-              uid: '3',
+              id: '3',
               type: 'testPanelType',
             },
           ],
@@ -84,7 +84,7 @@ describe('transformPanels', () => {
       {
         grid: { x: 0, y: 0, w: 6, h: 6 },
         config: { title: 'panel One' },
-        uid: '1',
+        id: '1',
         type: 'testPanelType',
       },
     ]);

src/platform/plugins/shared/dashboard/public/dashboard_api/load_dashboard_api/transform_panels.ts

@@ -24,15 +24,15 @@ export async function transformPanels(panels: DashboardState['panels'], referenc
   return await asyncMap(panels ?? [], async (panel) => {
     if (isDashboardSection(panel)) {
       const panelsInSection = await asyncMap(panel.panels, async (panelInSection) => {
-        return await transformPanel(panelInSection, filterReferences(panelInSection.uid));
+        return await transformPanel(panelInSection, filterReferences(panelInSection.id));
       });
       return {
         ...panel,
         panels: panelsInSection,
       };
     }
 
-    return await transformPanel(panel, filterReferences(panel.uid));
+    return await transformPanel(panel, filterReferences(panel.id));
   });
 }
 
@@ -59,7 +59,7 @@ async function transformPanel(legacyPanel: DashboardPanel, references?: Referenc
   } catch (transformOutError) {
     // eslint-disable-next-line no-console
     console.warn(
-      `Unable to transform panel state, panelId: ${panel.uid}, error: ${transformOutError}`
+      `Unable to transform panel state, panelId: ${panel.id}, error: ${transformOutError}`
     );
     // do not prevent dashboard render on transform error
     return panel;