Datagrid: Fix untyped code (#67148)

.betterer.results

@@ -5229,25 +5229,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/dashlist/module.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/datagrid/DataGridPanel.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/datagrid/components/SimpleInput.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/datagrid/state.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, "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.", "7"]
-    ],
     "public/app/plugins/panel/debug/CursorView.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

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

@@ -591,10 +591,10 @@ const sendClick = (el: Element | Node | Document | Window, options?: {}): void =
   fireEvent.click(el, options);
 };
 
-const Context = (p: any) => {
+const Context = (props: { children: React.ReactNode }) => {
   return (
     <>
-      {p.children}
+      {props.children}
       <div id="grafana-portal-container"></div>
     </>
   );

public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx

@@ -49,7 +49,7 @@ export const RenameColumnCell = ({ renameColumnData, onColumnInputBlur, classSty
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      const target = e.target as HTMLInputElement;
+      const target = e.currentTarget;
       target.blur();
     }
   };

public/app/plugins/panel/datagrid/components/SimpleInput.tsx

@@ -18,7 +18,7 @@ export const SimpleInput = ({ onBlur, placeholder }: InputProps) => {
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      const target = e.target as HTMLInputElement;
+      const target = e.currentTarget;
       target.blur();
     }
   };

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

@@ -30,56 +30,110 @@ interface DatagridState {
   isResizeInProgress: boolean;
 }
 
-interface UpdateColumnsPayload {
-  frame: DataFrame;
+interface UpdateColumnsAction {
+  type: DatagridActionType.updateColumns;
+  payload: {
+    frame: DataFrame;
+  };
 }
 
-interface ColumnResizeStartPayload {
-  columnIndex: number;
-  width: number;
+interface ColumnResizeStartAction {
+  type: DatagridActionType.columnResizeStart;
+  payload: {
+    columnIndex: number;
+    width: number;
+  };
 }
 
-interface OpenCellContextMenuPayload {
-  event: CellClickedEventArgs;
-  cell: Item;
+interface OpenCellContextMenuAction {
+  type: DatagridActionType.openCellContextMenu;
+  payload: {
+    event: CellClickedEventArgs;
+    cell: Item;
+  };
 }
 
-interface OpenHeaderContextMenuPayload {
-  event: HeaderClickedEventArgs;
-  columnIndex: number;
+interface OpenHeaderContextMenuAction {
+  type: DatagridActionType.openHeaderContextMenu;
+  payload: {
+    event: HeaderClickedEventArgs;
+    columnIndex: number;
+  };
 }
 
-interface OpenHeaderDropdownMenuPayload {
-  screenPosition: Rectangle;
-  columnIndex: number;
-  value: string;
+interface OpenHeaderDropdownMenuAction {
+  type: DatagridActionType.openHeaderDropdownMenu;
+  payload: {
+    screenPosition: Rectangle;
+    columnIndex: number;
+    value: string;
+  };
 }
 
-interface ColumnMovePayload {
-  from: number;
-  to: number;
+interface ColumnMoveAction {
+  type: DatagridActionType.columnMove;
+  payload: {
+    from: number;
+    to: number;
+  };
 }
 
-interface MultipleCellsSelectedPayload {
-  selection: GridSelection;
+interface MultipleCellsSelectedAction {
+  type: DatagridActionType.multipleCellsSelected;
+  payload: {
+    selection: GridSelection;
+  };
 }
 
-interface ColumnFreezeChangedPayload {
-  columnIndex: number;
+interface ColumnFreezeChangedAction {
+  type: DatagridActionType.columnFreezeChanged;
+  payload: {
+    columnIndex: number;
+  };
 }
 
-export interface DatagridAction {
-  type: DatagridActionType;
-  payload?:
-    | UpdateColumnsPayload
-    | ColumnResizeStartPayload
-    | OpenCellContextMenuPayload
-    | OpenHeaderContextMenuPayload
-    | OpenHeaderDropdownMenuPayload
-    | ColumnMovePayload
-    | MultipleCellsSelectedPayload
-    | ColumnFreezeChangedPayload;
+interface ColumnResizeEndAction {
+  type: DatagridActionType.columnResizeEnd;
 }
+interface ShowColumnRenameInputAction {
+  type: DatagridActionType.showColumnRenameInput;
+}
+interface HideColumnRenameInputAction {
+  type: DatagridActionType.hideColumnRenameInput;
+}
+interface CloseContextMenuAction {
+  type: DatagridActionType.closeContextMenu;
+}
+interface CloseSearchAction {
+  type: DatagridActionType.closeSearch;
+}
+interface OpenSearchAction {
+  type: DatagridActionType.openSearch;
+}
+interface GridSelectionClearedAction {
+  type: DatagridActionType.gridSelectionCleared;
+}
+interface ColumnFreezeResetAction {
+  type: DatagridActionType.columnFreezeReset;
+}
+
+export type DatagridAction =
+  | UpdateColumnsAction
+  | ColumnResizeStartAction
+  | OpenCellContextMenuAction
+  | OpenHeaderContextMenuAction
+  | OpenHeaderDropdownMenuAction
+  | ColumnMoveAction
+  | MultipleCellsSelectedAction
+  | ColumnFreezeChangedAction
+  | ColumnResizeEndAction
+  | ShowColumnRenameInputAction
+  | HideColumnRenameInputAction
+  | CloseContextMenuAction
+  | CloseSearchAction
+  | OpenSearchAction
+  | GridSelectionClearedAction
+  | ColumnFreezeResetAction;
 
 export enum DatagridActionType {
   columnResizeStart = 'columnResizeStart',
@@ -124,7 +178,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
   switch (action.type) {
     case DatagridActionType.columnResizeStart:
       columns = [...state.columns];
-      const columnResizeStartPayload: ColumnResizeStartPayload = action.payload as ColumnResizeStartPayload;
+      const columnResizeStartPayload = action.payload;
 
       columns[columnResizeStartPayload.columnIndex] = {
         ...state.columns[columnResizeStartPayload.columnIndex],
@@ -138,7 +192,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
       };
     case DatagridActionType.columnMove:
       columns = [...state.columns];
-      const columnMovePayload: ColumnMovePayload = action.payload as ColumnMovePayload;
+      const columnMovePayload = action.payload;
 
       const widthFrom = state.columns[columnMovePayload.from].width;
 
@@ -161,7 +215,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         isResizeInProgress: false,
       };
     case DatagridActionType.updateColumns:
-      const updateColumnsPayload: UpdateColumnsPayload = action.payload as UpdateColumnsPayload;
+      const updateColumnsPayload = action.payload;
 
       columns = [
         ...updateColumnsPayload.frame.fields.map((field: Field, index: number) => {
@@ -197,7 +251,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         },
       };
     case DatagridActionType.openCellContextMenu:
-      const openCellContextMenuPayload: OpenCellContextMenuPayload = action.payload as OpenCellContextMenuPayload;
+      const openCellContextMenuPayload = action.payload;
       const cellEvent: CellClickedEventArgs = openCellContextMenuPayload.event;
       const cell: Item = openCellContextMenuPayload.cell;
 
@@ -213,7 +267,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         },
       };
     case DatagridActionType.openHeaderContextMenu:
-      const openHeaderContextMenuPayload: OpenHeaderContextMenuPayload = action.payload as OpenHeaderContextMenuPayload;
+      const openHeaderContextMenuPayload = action.payload;
       const headerEvent: HeaderClickedEventArgs = openHeaderContextMenuPayload.event;
 
       return {
@@ -228,8 +282,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         },
       };
     case DatagridActionType.openHeaderDropdownMenu:
-      const openHeaderDropdownMenuPayload: OpenHeaderDropdownMenuPayload =
-        action.payload as OpenHeaderDropdownMenuPayload;
+      const openHeaderDropdownMenuPayload = action.payload;
       const screenPosition: Rectangle = openHeaderDropdownMenuPayload.screenPosition;
 
       return {
@@ -270,7 +323,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         toggleSearch: true,
       };
     case DatagridActionType.multipleCellsSelected:
-      const multipleCellsSelectedPayload: MultipleCellsSelectedPayload = action.payload as MultipleCellsSelectedPayload;
+      const multipleCellsSelectedPayload = action.payload;
 
       return {
         ...state,
@@ -287,7 +340,7 @@ export const datagridReducer = (state: DatagridState, action: DatagridAction): D
         columnFreezeIndex: 0,
       };
     case DatagridActionType.columnFreezeChanged:
-      const columnFreezeChangedPayload: ColumnFreezeChangedPayload = action.payload as ColumnFreezeChangedPayload;
+      const columnFreezeChangedPayload = action.payload;
 
       return {
         ...state,