React18: Update useCallback arg types where needed (#57084)

.betterer.results

@@ -1528,20 +1528,18 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "packages/grafana-ui/src/components/Table/Table.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
+      [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"],
       [0, 0, 0, "Do not use any type assertions.", "8"],
       [0, 0, 0, "Do not use any type assertions.", "9"],
       [0, 0, 0, "Do not use any type assertions.", "10"],
-      [0, 0, 0, "Do not use any type assertions.", "11"],
+      [0, 0, 0, "Do not use any type assertions.", "11"]
-      [0, 0, 0, "Do not use any type assertions.", "12"],
-      [0, 0, 0, "Do not use any type assertions.", "13"]
     ],
     "packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

packages/grafana-ui/src/components/Table/Table.tsx

@@ -1,7 +1,6 @@
-import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { CSSProperties, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Cell,
-  Column,
   TableState,
   useAbsoluteLayout,
   useFilters,
@@ -29,6 +28,7 @@ import {
   TableSortByActionCallback,
   TableSortByFieldState,
   TableFooterCalc,
+  GrafanaTableColumn,
 } from './types';
 import { getColumns, sortCaseInsensitive, sortNumber, getFooterItems, createFooterCalculationValues } from './utils';
 
@@ -55,7 +55,7 @@ export interface Props {
 
 function useTableStateReducer({ onColumnResize, onSortByChange, data }: Props) {
   return useCallback(
-    (newState: TableState, action: any) => {
+    (newState: TableState, action: { type: string }) => {
       switch (action.type) {
         case 'columnDoneResizing':
           if (onColumnResize) {
@@ -99,7 +99,7 @@ function useTableStateReducer({ onColumnResize, onSortByChange, data }: Props) {
   );
 }
 
-function getInitialState(initialSortBy: Props['initialSortBy'], columns: Column[]): Partial<TableState> {
+function getInitialState(initialSortBy: Props['initialSortBy'], columns: GrafanaTableColumn[]): Partial<TableState> {
   const state: Partial<TableState> = {};
 
   if (initialSortBy) {
@@ -108,7 +108,7 @@ function getInitialState(initialSortBy: Props['initialSortBy'], columns: Column[
     for (const sortBy of initialSortBy) {
       for (const col of columns) {
         if (col.Header === sortBy.displayName) {
-          state.sortBy.push({ id: col.id as string, desc: sortBy.desc });
+          state.sortBy.push({ id: col.id!, desc: sortBy.desc });
         }
       }
     }
@@ -117,7 +117,7 @@ function getInitialState(initialSortBy: Props['initialSortBy'], columns: Column[
   return state;
 }
 
-export const Table: FC<Props> = memo((props: Props) => {
+export const Table = memo((props: Props) => {
   const {
     ariaLabel,
     data,
@@ -284,7 +284,7 @@ export const Table: FC<Props> = memo((props: Props) => {
   });
 
   const RenderRow = React.useCallback(
-    ({ index: rowIndex, style }) => {
+    ({ index: rowIndex, style }: { index: number; style: CSSProperties }) => {
       let row = rows[rowIndex];
       if (enablePagination) {
         row = page[rowIndex];

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -31,7 +31,7 @@ export interface QueryOperationRowRenderProps {
   onClose: () => void;
 }
 
-export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
+export function QueryOperationRow({
   children,
   actions,
   title,
@@ -43,7 +43,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
   draggable,
   index,
   id,
-}: QueryOperationRowProps) => {
+}: QueryOperationRowProps) {
   const [isContentVisible, setIsContentVisible] = useState(isOpen !== undefined ? isOpen : true);
   const theme = useTheme();
   const styles = getQueryOperationRowStyles(theme);
@@ -51,7 +51,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
     setIsContentVisible(!isContentVisible);
   }, [isContentVisible, setIsContentVisible]);
 
-  const reportDragMousePosition = useCallback((e) => {
+  const reportDragMousePosition = useCallback((e: React.MouseEvent) => {
     // When drag detected react-beautiful-dnd will preventDefault the event
     // Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging
     if (e.defaultPrevented) {
@@ -141,7 +141,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
       {isContentVisible && <div className={styles.content}>{children}</div>}
     </div>
   );
-};
+}
 
 const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
   return {

public/app/features/alerting/AlertRuleItem.tsx

@@ -14,7 +14,7 @@ export interface Props {
 const AlertRuleItem = ({ rule, search, onTogglePause }: Props) => {
   const ruleUrl = `${rule.url}?editPanel=${rule.panelId}&tab=alert`;
   const renderText = useCallback(
-    (text) => (
+    (text: string) => (
       <Highlighter
         key={text}
         highlightClassName="highlight-search-match"

public/app/features/dimensions/editors/BackgroundSizeEditor.tsx

@@ -18,7 +18,7 @@ export const BackgroundSizeEditor: FC<StandardEditorProps<string, undefined, und
   const imageSize = value ?? BackgroundImageSize.Cover;
 
   const onImageSizeChange = useCallback(
-    (size) => {
+    (size: string) => {
       onChange(size);
     },
     [onChange]

public/app/features/dimensions/editors/ResourceDimensionEditor.tsx

@@ -32,7 +32,7 @@ export const ResourceDimensionEditor: FC<
   const labelWidth = 9;
 
   const onModeChange = useCallback(
-    (mode) => {
+    (mode: ResourceDimensionMode) => {
       onChange({
         ...value,
         mode,
@@ -42,7 +42,7 @@ export const ResourceDimensionEditor: FC<
   );
 
   const onFieldChange = useCallback(
-    (field) => {
+    (field = '') => {
       onChange({
         ...value,
         field,

public/app/features/dimensions/editors/ScalarDimensionEditor.tsx

@@ -54,7 +54,7 @@ export const ScalarDimensionEditor: FC<StandardEditorProps<ScalarDimensionConfig
   );
 
   const onModeChange = useCallback(
-    (mode) => {
+    (mode: ScalarDimensionMode) => {
       onChange({
         ...value,
         mode,

public/app/features/dimensions/editors/TextDimensionEditor.tsx

@@ -31,7 +31,7 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
   const labelWidth = 9;
 
   const onModeChange = useCallback(
-    (mode) => {
+    (mode: TextDimensionMode) => {
       onChange({
         ...value,
         mode,
@@ -41,7 +41,7 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
   );
 
   const onFieldChange = useCallback(
-    (field) => {
+    (field?: string) => {
       onChange({
         ...value,
         field,
@@ -51,7 +51,7 @@ export const TextDimensionEditor: FC<StandardEditorProps<TextDimensionConfig, Te
   );
 
   const onFixedChange = useCallback(
-    (fixed) => {
+    (fixed = '') => {
       onChange({
         ...value,
         fixed,

public/app/features/search/components/SearchCard.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { Placement, Rect } from '@popperjs/core';
 import React, { useCallback, useRef, useState } from 'react';
 import SVG from 'react-inlinesvg';
 import { usePopper } from 'react-popper';
@@ -34,15 +35,18 @@ export function SearchCard({ editable, item, onTagSelected, onToggleChecked, onC
   const timeout = useRef<number | null>(null);
 
   // Popper specific logic
-  const offsetCallback = useCallback(({ placement, reference, popper }) => {
+  const offsetCallback = useCallback(
-    let result: [number, number] = [0, 0];
+    ({ placement, reference, popper }: { placement: Placement; reference: Rect; popper: Rect }) => {
-    if (placement === 'bottom' || placement === 'top') {
+      let result: [number, number] = [0, 0];
-      result = [0, -(reference.height + popper.height) / 2];
+      if (placement === 'bottom' || placement === 'top') {
-    } else if (placement === 'left' || placement === 'right') {
+        result = [0, -(reference.height + popper.height) / 2];
-      result = [-(reference.width + popper.width) / 2, 0];
+      } else if (placement === 'left' || placement === 'right') {
-    }
+        result = [-(reference.width + popper.width) / 2, 0];
-    return result;
+      }
-  }, []);
+      return result;
+    },
+    []
+  );
   const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
   const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, {

public/app/features/search/page/components/SearchResultsCards.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-undef */
 import { css } from '@emotion/css';
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React, { useEffect, useRef, useCallback, useState, CSSProperties } from 'react';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 
@@ -41,7 +41,7 @@ export const SearchResultsCards = React.memo(
     }, [response, listEl]);
 
     const RenderRow = useCallback(
-      ({ index: rowIndex, style }) => {
+      ({ index: rowIndex, style }: { index: number; style: CSSProperties }) => {
         const meta = response.view.dataFrame.meta?.custom as SearchResultMeta;
 
         let className = '';

public/app/features/search/page/components/SearchResultsTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-undef */
 import { css } from '@emotion/css';
-import React, { useEffect, useMemo, useRef, useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useCallback, useState, CSSProperties } from 'react';
 import { useTable, Column, TableOptions, Cell, useAbsoluteLayout } from 'react-table';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -103,7 +103,7 @@ export const SearchResultsTable = React.memo(
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useAbsoluteLayout);
 
     const RenderRow = useCallback(
-      ({ index: rowIndex, style }) => {
+      ({ index: rowIndex, style }: { index: number; style: CSSProperties }) => {
         const row = rows[rowIndex];
         prepareRow(row);
 

public/app/features/search/page/components/SearchView.tsx

@@ -200,7 +200,7 @@ export const SearchView = ({
   };
 
   const getStarredItems = useCallback(
-    (e) => {
+    (e: React.FormEvent<HTMLInputElement>) => {
       onStarredFilterChange(e);
     },
     [onStarredFilterChange]

public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx

@@ -58,7 +58,7 @@ export const FilterByValueFilterEditor = (props: Props) => {
   );
 
   const onChangeMatcherOptions = useCallback(
-    (options) => {
+    (options: unknown) => {
       onChange({
         ...filter,
         config: {

public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx

@@ -21,11 +21,11 @@ const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePick
   settings: { width: 24 },
 } as any;
 
-export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<ConvertFieldTypeTransformerOptions>> = ({
+export const ConvertFieldTypeTransformerEditor = ({
   input,
   options,
   onChange,
-}) => {
+}: TransformerUIProps<ConvertFieldTypeTransformerOptions>) => {
   const allTypes: Array<SelectableValue<FieldType>> = [
     { value: FieldType.number, label: 'Numeric' },
     { value: FieldType.string, label: 'String' },
@@ -35,7 +35,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<Conv
   ];
 
   const onSelectField = useCallback(
-    (idx) => (value: string | undefined) => {
+    (idx: number) => (value: string | undefined) => {
       const conversions = options.conversions;
       conversions[idx] = { ...conversions[idx], targetField: value ?? '' };
       onChange({
@@ -47,7 +47,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<Conv
   );
 
   const onSelectDestinationType = useCallback(
-    (idx) => (value: SelectableValue<FieldType>) => {
+    (idx: number) => (value: SelectableValue<FieldType>) => {
       const conversions = options.conversions;
       conversions[idx] = { ...conversions[idx], destinationType: value.value };
       onChange({
@@ -59,7 +59,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<Conv
   );
 
   const onInputFormat = useCallback(
-    (idx) => (e: ChangeEvent<HTMLInputElement>) => {
+    (idx: number) => (e: ChangeEvent<HTMLInputElement>) => {
       const conversions = options.conversions;
       conversions[idx] = { ...conversions[idx], dateFormat: e.currentTarget.value };
       onChange({
@@ -81,7 +81,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC<TransformerUIProps<Conv
   }, [onChange, options]);
 
   const onRemoveConvertFieldType = useCallback(
-    (idx) => {
+    (idx: number) => {
       const removed = options.conversions;
       removed.splice(idx, 1);
       onChange({

public/app/plugins/panel/canvas/CanvasContextMenu.tsx

@@ -29,7 +29,11 @@ export const CanvasContextMenu = ({ scene }: Props) => {
   const selectedElements = scene.selecto?.getSelectedTargets();
 
   const handleContextMenu = useCallback(
-    (event) => {
+    (event: Event) => {
+      if (!(event instanceof MouseEvent)) {
+        return;
+      }
+
       event.preventDefault();
       const shouldSelectElement = event.currentTarget !== scene.div;
       if (shouldSelectElement) {

public/app/plugins/panel/canvas/editor/APIEditor.tsx

@@ -45,7 +45,7 @@ export function APIEditor({ value, context, onChange }: Props) {
   const labelWidth = 9;
 
   const onEndpointChange = useCallback(
-    (endpoint) => {
+    (endpoint = '') => {
       onChange({
         ...value,
         endpoint,
@@ -55,7 +55,7 @@ export function APIEditor({ value, context, onChange }: Props) {
   );
 
   const onDataChange = useCallback(
-    (data) => {
+    (data?: string) => {
       onChange({
         ...value,
         data,

public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { Global } from '@emotion/react';
-import Tree from 'rc-tree';
+import Tree, { TreeNodeProps } from 'rc-tree';
 import React, { Key, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
@@ -87,7 +87,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
     setAutoExpandParent(false);
   };
 
-  const switcherIcon = (obj: { isLeaf: boolean; expanded: boolean }) => {
+  const switcherIcon = (obj: TreeNodeProps) => {
     if (obj.isLeaf) {
       // TODO: Implement element specific icons
       return <></>;

public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx

@@ -26,7 +26,7 @@ export const GeomapStyleRulesEditor: FC<StandardEditorProps<FeatureStyleConfig[]
   }, [onChange, value, theme.visualization]);
 
   const onRuleChange = useCallback(
-    (idx) => (style: FeatureStyleConfig | undefined) => {
+    (idx: number) => (style: FeatureStyleConfig | undefined) => {
       const copyStyles = [...value];
       if (style) {
         copyStyles[idx] = style;

public/app/plugins/panel/nodeGraph/Legend.tsx

@@ -38,7 +38,7 @@ export const Legend = function Legend(props: Props) {
   const colorItems = getColorLegendItems(nodes, theme);
 
   const onClick = useCallback(
-    (item) => {
+    (item: VizLegendItem<ItemData>) => {
       onSort({
         field: item.data!.field,
         ascending: item.data!.field === sort?.field ? !sort?.ascending : false,

public/app/plugins/panel/nodeGraph/NodeGraph.tsx

@@ -182,7 +182,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
 
   // This cannot be inline func or it will create infinite render cycle.
   const topLevelRef = useCallback(
-    (r) => {
+    (r: HTMLDivElement) => {
       measureRef(r);
       (zoomRef as MutableRefObject<HTMLElement | null>).current = r;
     },

public/app/plugins/panel/nodeGraph/useContextMenu.tsx

@@ -27,7 +27,7 @@ export function useContextMenu(
   const [menu, setMenu] = useState<JSX.Element | undefined>(undefined);
 
   const onNodeOpen = useCallback(
-    (event, node) => {
+    (event: MouseEvent<SVGElement>, node: NodeDatum) => {
       const extraNodeItem = config.gridLayout
         ? [
             {
@@ -57,7 +57,7 @@ export function useContextMenu(
   );
 
   const onEdgeOpen = useCallback(
-    (event, edge) => {
+    (event: MouseEvent<SVGElement>, edge: EdgeDatum) => {
       const renderer = getItemsRenderer(getLinks(edges, edge.dataFrameRowIndex), edge);
 
       if (renderer) {