From 1324434dfb2bb5471f676d6aab6284f86e964a91 Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Tue, 25 Apr 2023 07:26:12 +0100 Subject: [PATCH] Datagrid: Fix untyped code (#67148) --- .betterer.results | 19 --- .../panel/datagrid/DataGridPanel.test.tsx | 4 +- .../datagrid/components/RenameColumnCell.tsx | 2 +- .../panel/datagrid/components/SimpleInput.tsx | 2 +- public/app/plugins/panel/datagrid/state.ts | 137 ++++++++++++------ 5 files changed, 99 insertions(+), 65 deletions(-) diff --git a/.betterer.results b/.betterer.results index 40fec2dce99..aa85a9c3e05 100644 --- a/.betterer.results +++ b/.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"] diff --git a/public/app/plugins/panel/datagrid/DataGridPanel.test.tsx b/public/app/plugins/panel/datagrid/DataGridPanel.test.tsx index 6cda826821e..49bc1ffae58 100644 --- a/public/app/plugins/panel/datagrid/DataGridPanel.test.tsx +++ b/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}
); diff --git a/public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx b/public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx index 5e1f98d976e..27ea203ee0f 100644 --- a/public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx +++ b/public/app/plugins/panel/datagrid/components/RenameColumnCell.tsx @@ -49,7 +49,7 @@ export const RenameColumnCell = ({ renameColumnData, onColumnInputBlur, classSty const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { - const target = e.target as HTMLInputElement; + const target = e.currentTarget; target.blur(); } }; diff --git a/public/app/plugins/panel/datagrid/components/SimpleInput.tsx b/public/app/plugins/panel/datagrid/components/SimpleInput.tsx index e5e8b7bf305..8d8e4e77a7d 100644 --- a/public/app/plugins/panel/datagrid/components/SimpleInput.tsx +++ b/public/app/plugins/panel/datagrid/components/SimpleInput.tsx @@ -18,7 +18,7 @@ export const SimpleInput = ({ onBlur, placeholder }: InputProps) => { const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { - const target = e.target as HTMLInputElement; + const target = e.currentTarget; target.blur(); } }; diff --git a/public/app/plugins/panel/datagrid/state.ts b/public/app/plugins/panel/datagrid/state.ts index a55f5cc43c8..28d7db07807 100644 --- a/public/app/plugins/panel/datagrid/state.ts +++ b/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,