Fix renaming columns when displayName or displayNameFromDS are present (#67751)

* Fix renaming columns when displayName or displayNameFromDS are present

* refactor

* Fix showing correct column header title

public/app/plugins/panel/datagrid/DataGridPanel.tsx

@@ -196,7 +196,7 @@ export function DataGridPanel({ options, data, id, fieldConfig, width, height }:
   const onHeaderMenuClick = (col: number, screenPosition: Rectangle) => {
     dispatch({
       type: DatagridActionType.openHeaderDropdownMenu,
-      payload: { screenPosition, columnIndex: col, value: frame.fields[col].name },
+      payload: { screenPosition, columnIndex: col, value: state.columns[col].title },
     });
   };
 

public/app/plugins/panel/datagrid/state.ts

@@ -219,11 +219,10 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
 
       columns = [
         ...updateColumnsPayload.frame.fields.map((field: Field, index: number) => {
-          const displayName = getFieldDisplayName(field, updateColumnsPayload.frame);
-
           // find column by field name and update width in new set. We cannot use index because
           // if a column gets deleted we don't know the correct index anymore
-          const width = state.columns.find((column) => column.title === displayName)?.width;
+          const width = state.columns.find((column) => column.title === field.name)?.width;
+          const displayName = getFieldDisplayName(field, updateColumnsPayload.frame);
 
           return {
             title: displayName,

public/app/plugins/panel/datagrid/utils.ts

@@ -77,6 +77,11 @@ export async function updateSnapshot(
   updateData?: (frames: DataFrame[]) => Promise<boolean>
 ): Promise<boolean> {
   if (updateData && isDatagridEnabled()) {
+    for (let i = 0; i < frame.fields.length; i++) {
+      delete frame.fields[i].config.displayName;
+      delete frame.fields[i].config.displayNameFromDS;
+    }
+
     return await updateData([frame]);
   }