From 5d53a983d887605c11d4911cac5833fb885f3571 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Mon, 17 Oct 2022 14:52:12 +0100 Subject: [PATCH] React18: Update useCallback arg types where needed (#57084) --- .betterer.results | 14 +++++------- .../grafana-ui/src/components/Table/Table.tsx | 14 ++++++------ .../QueryOperationRow/QueryOperationRow.tsx | 8 +++---- .../app/features/alerting/AlertRuleItem.tsx | 2 +- .../editors/BackgroundSizeEditor.tsx | 2 +- .../editors/ResourceDimensionEditor.tsx | 4 ++-- .../editors/ScalarDimensionEditor.tsx | 2 +- .../editors/TextDimensionEditor.tsx | 6 ++--- .../features/search/components/SearchCard.tsx | 22 +++++++++++-------- .../page/components/SearchResultsCards.tsx | 4 ++-- .../page/components/SearchResultsTable.tsx | 4 ++-- .../search/page/components/SearchView.tsx | 2 +- .../FilterByValueFilterEditor.tsx | 2 +- .../ConvertFieldTypeTransformerEditor.tsx | 12 +++++----- .../panel/canvas/CanvasContextMenu.tsx | 6 ++++- .../plugins/panel/canvas/editor/APIEditor.tsx | 4 ++-- .../canvas/editor/TreeNavigationEditor.tsx | 4 ++-- .../geomap/editor/GeomapStyleRulesEditor.tsx | 2 +- public/app/plugins/panel/nodeGraph/Legend.tsx | 2 +- .../app/plugins/panel/nodeGraph/NodeGraph.tsx | 2 +- .../panel/nodeGraph/useContextMenu.tsx | 4 ++-- 21 files changed, 64 insertions(+), 58 deletions(-) diff --git a/.betterer.results b/.betterer.results index 641d52d1817..c236525c595 100644 --- a/.betterer.results +++ b/.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.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"], - [0, 0, 0, "Do not use any type assertions.", "3"], + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Unexpected any. Specify a different type.", "1"], + [0, 0, 0, "Do not use any type assertions.", "2"], + [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.", "12"], - [0, 0, 0, "Do not use any type assertions.", "13"] + [0, 0, 0, "Do not use any type assertions.", "11"] ], "packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 572d50b9021..8007f0cd54a 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/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 { +function getInitialState(initialSortBy: Props['initialSortBy'], columns: GrafanaTableColumn[]): Partial { const state: Partial = {}; 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 = memo((props: Props) => { +export const Table = memo((props: Props) => { const { ariaLabel, data, @@ -284,7 +284,7 @@ export const Table: FC = 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]; diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index 5a590f53ce7..30948ba58fd 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -31,7 +31,7 @@ export interface QueryOperationRowRenderProps { onClose: () => void; } -export const QueryOperationRow: React.FC = ({ +export function QueryOperationRow({ children, actions, title, @@ -43,7 +43,7 @@ export const QueryOperationRow: React.FC = ({ 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 = ({ 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 = ({ {isContentVisible &&
{children}
} ); -}; +} const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { return { diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx index 99c4247a3a6..16949dcb034 100644 --- a/public/app/features/alerting/AlertRuleItem.tsx +++ b/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) => ( { + (size: string) => { onChange(size); }, [onChange] diff --git a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx b/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx index a9020f991c2..6b9081399a2 100644 --- a/public/app/features/dimensions/editors/ResourceDimensionEditor.tsx +++ b/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, diff --git a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx index 7b0e306bee4..1ba5f9c8eab 100644 --- a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx +++ b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx @@ -54,7 +54,7 @@ export const ScalarDimensionEditor: FC { + (mode: ScalarDimensionMode) => { onChange({ ...value, mode, diff --git a/public/app/features/dimensions/editors/TextDimensionEditor.tsx b/public/app/features/dimensions/editors/TextDimensionEditor.tsx index bda46e88493..61356f0d5b6 100644 --- a/public/app/features/dimensions/editors/TextDimensionEditor.tsx +++ b/public/app/features/dimensions/editors/TextDimensionEditor.tsx @@ -31,7 +31,7 @@ export const TextDimensionEditor: FC { + (mode: TextDimensionMode) => { onChange({ ...value, mode, @@ -41,7 +41,7 @@ export const TextDimensionEditor: FC { + (field?: string) => { onChange({ ...value, field, @@ -51,7 +51,7 @@ export const TextDimensionEditor: FC { + (fixed = '') => { onChange({ ...value, fixed, diff --git a/public/app/features/search/components/SearchCard.tsx b/public/app/features/search/components/SearchCard.tsx index b2d6d026f61..d7856ae6e8b 100644 --- a/public/app/features/search/components/SearchCard.tsx +++ b/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(null); // Popper specific logic - const offsetCallback = useCallback(({ placement, reference, popper }) => { - let result: [number, number] = [0, 0]; - if (placement === 'bottom' || placement === 'top') { - result = [0, -(reference.height + popper.height) / 2]; - } else if (placement === 'left' || placement === 'right') { - result = [-(reference.width + popper.width) / 2, 0]; - } - return result; - }, []); + const offsetCallback = useCallback( + ({ placement, reference, popper }: { placement: Placement; reference: Rect; popper: Rect }) => { + let result: [number, number] = [0, 0]; + if (placement === 'bottom' || placement === 'top') { + result = [0, -(reference.height + popper.height) / 2]; + } else if (placement === 'left' || placement === 'right') { + result = [-(reference.width + popper.width) / 2, 0]; + } + return result; + }, + [] + ); const [markerElement, setMarkerElement] = React.useState(null); const [popperElement, setPopperElement] = React.useState(null); const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, { diff --git a/public/app/features/search/page/components/SearchResultsCards.tsx b/public/app/features/search/page/components/SearchResultsCards.tsx index 3f93ca1fa21..e199b1e4618 100644 --- a/public/app/features/search/page/components/SearchResultsCards.tsx +++ b/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 = ''; diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx index 1e495e9e256..7b37837b294 100644 --- a/public/app/features/search/page/components/SearchResultsTable.tsx +++ b/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); diff --git a/public/app/features/search/page/components/SearchView.tsx b/public/app/features/search/page/components/SearchView.tsx index bca000ba2e0..860e4bd7249 100644 --- a/public/app/features/search/page/components/SearchView.tsx +++ b/public/app/features/search/page/components/SearchView.tsx @@ -200,7 +200,7 @@ export const SearchView = ({ }; const getStarredItems = useCallback( - (e) => { + (e: React.FormEvent) => { onStarredFilterChange(e); }, [onStarredFilterChange] diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx index f8f3440a3d3..9b7343610c7 100644 --- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx +++ b/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: { diff --git a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx index 14c29953b7d..57e42086b3a 100644 --- a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx +++ b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx @@ -21,11 +21,11 @@ const fieldNamePickerSettings: StandardEditorsRegistryItem> = ({ +export const ConvertFieldTypeTransformerEditor = ({ input, options, onChange, -}) => { +}: TransformerUIProps) => { const allTypes: Array> = [ { value: FieldType.number, label: 'Numeric' }, { value: FieldType.string, label: 'String' }, @@ -35,7 +35,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC (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 (value: SelectableValue) => { + (idx: number) => (value: SelectableValue) => { const conversions = options.conversions; conversions[idx] = { ...conversions[idx], destinationType: value.value }; onChange({ @@ -59,7 +59,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC (e: ChangeEvent) => { + (idx: number) => (e: ChangeEvent) => { const conversions = options.conversions; conversions[idx] = { ...conversions[idx], dateFormat: e.currentTarget.value }; onChange({ @@ -81,7 +81,7 @@ export const ConvertFieldTypeTransformerEditor: React.FC { + (idx: number) => { const removed = options.conversions; removed.splice(idx, 1); onChange({ diff --git a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx index 8a5a75817d1..896eee787d7 100644 --- a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx +++ b/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) { diff --git a/public/app/plugins/panel/canvas/editor/APIEditor.tsx b/public/app/plugins/panel/canvas/editor/APIEditor.tsx index 91c14adc0ae..6d3fe3d891e 100644 --- a/public/app/plugins/panel/canvas/editor/APIEditor.tsx +++ b/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, diff --git a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx index 953790ceda4..8c04f47403d 100644 --- a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx +++ b/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 { + const switcherIcon = (obj: TreeNodeProps) => { if (obj.isLeaf) { // TODO: Implement element specific icons return <>; diff --git a/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx b/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx index 87647544d6f..183c68d7f54 100644 --- a/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx +++ b/public/app/plugins/panel/geomap/editor/GeomapStyleRulesEditor.tsx @@ -26,7 +26,7 @@ export const GeomapStyleRulesEditor: FC (style: FeatureStyleConfig | undefined) => { + (idx: number) => (style: FeatureStyleConfig | undefined) => { const copyStyles = [...value]; if (style) { copyStyles[idx] = style; diff --git a/public/app/plugins/panel/nodeGraph/Legend.tsx b/public/app/plugins/panel/nodeGraph/Legend.tsx index 350eaf6b62f..3c90bd56b78 100644 --- a/public/app/plugins/panel/nodeGraph/Legend.tsx +++ b/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) => { onSort({ field: item.data!.field, ascending: item.data!.field === sort?.field ? !sort?.ascending : false, diff --git a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx index 3d627185774..2df6a41ac5e 100644 --- a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx +++ b/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).current = r; }, diff --git a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx index 7b2f2c52b9b..6db9cac6cb2 100644 --- a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx +++ b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx @@ -27,7 +27,7 @@ export function useContextMenu( const [menu, setMenu] = useState(undefined); const onNodeOpen = useCallback( - (event, node) => { + (event: MouseEvent, node: NodeDatum) => { const extraNodeItem = config.gridLayout ? [ { @@ -57,7 +57,7 @@ export function useContextMenu( ); const onEdgeOpen = useCallback( - (event, edge) => { + (event: MouseEvent, edge: EdgeDatum) => { const renderer = getItemsRenderer(getLinks(edges, edge.dataFrameRowIndex), edge); if (renderer) {