From 98e66654d622bf4d412e0948da2dded40dcc9dcb Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 30 Mar 2023 13:40:18 +0100
Subject: [PATCH] Chore: Some type fixes needed for react 18 (#65600)

some type fixes needed for react 18
---
 public/app/core/components/TimelineChart/TimelineChart.tsx  | 1 +
 .../unified/components/rule-editor/DashboardPicker.tsx      | 2 +-
 public/app/features/canvas/elements/metricValue.tsx         | 3 +--
 .../dashboard/components/PanelEditor/PanelEditorTabs.tsx    | 2 +-
 .../plugins/datasource/tempo/QueryEditor/NativeSearch.tsx   | 2 +-
 .../flamegraph/components/TopTable/FlameGraphTopTable.tsx   | 6 +++---
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/app/core/components/TimelineChart/TimelineChart.tsx b/public/app/core/components/TimelineChart/TimelineChart.tsx
index f10b6825d61..f5085987c81 100644
--- a/public/app/core/components/TimelineChart/TimelineChart.tsx
+++ b/public/app/core/components/TimelineChart/TimelineChart.tsx
@@ -30,6 +30,7 @@ export interface TimelineProps extends Omit<GraphNGProps, 'prepConfig' | 'propsT
 const propsToDiff = ['rowHeight', 'colWidth', 'showValue', 'mergeValues', 'alignValue'];
 
 export class TimelineChart extends React.Component<TimelineProps> {
+  declare context: React.ContextType<typeof PanelContextRoot>;
   static contextType = PanelContextRoot;
   panelContext: PanelContext = {} as PanelContext;
 
diff --git a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
index 72d8afc57b9..1110980ccc4 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx
@@ -85,7 +85,7 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
   const selectedDashboardIsInPageResult = selectedDashboardIndex >= 0;
 
   const scrollToItem = useCallback(
-    (node) => {
+    (node: FixedSizeList) => {
       const canScroll = selectedDashboardIndex >= 0;
 
       if (isDefaultSelection && canScroll) {
diff --git a/public/app/features/canvas/elements/metricValue.tsx b/public/app/features/canvas/elements/metricValue.tsx
index af5057f8a4c..805956c3657 100644
--- a/public/app/features/canvas/elements/metricValue.tsx
+++ b/public/app/features/canvas/elements/metricValue.tsx
@@ -63,8 +63,7 @@ const MetricValueEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
   panelData = context.instanceState?.scene?.data.series;
 
   const onFieldChange = useCallback(
-    (field) => {
-      console.log('onfieldchange', field);
+    (field: string | undefined) => {
       let selectedElement: ElementState;
       selectedElement = context.instanceState?.selected[0];
       if (selectedElement) {
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index e60c097ccd4..9625c117975 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -27,7 +27,7 @@ export const PanelEditorTabs = React.memo(({ panel, dashboard, tabs, onChangeTab
   const styles = useStyles2(getStyles);
 
   const instrumentedOnChangeTab = useCallback(
-    (tab) => {
+    (tab: PanelEditorTab) => {
       if (!tab.active) {
         reportInteraction('panel_editor_tabs_changed', { tab_id: tab.id });
       }
diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
index c9afd1bb378..6ef3fc6c312 100644
--- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
+++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
@@ -93,7 +93,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
   };
 
   const handleOnChange = useCallback(
-    (value) => {
+    (value: string) => {
       onChange({
         ...query,
         search: value,
diff --git a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTable.tsx b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTable.tsx
index 431b1999e65..ddbfb006c1d 100644
--- a/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTable.tsx
+++ b/public/app/plugins/panel/flamegraph/components/TopTable/FlameGraphTopTable.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useCallback, useMemo } from 'react';
+import React, { CSSProperties, useCallback, useMemo } from 'react';
 import { SortByFn, useSortBy, useAbsoluteLayout, useTable, CellProps } from 'react-table';
 import { FixedSizeList } from 'react-window';
 
@@ -104,7 +104,7 @@ const FlameGraphTopTable = ({
   const { headerGroups, rows, prepareRow } = useTable(options, useSortBy, useAbsoluteLayout);
 
   const renderRow = React.useCallback(
-    ({ index, style }) => {
+    ({ index, style }: { index: number; style: CSSProperties }) => {
       let row = rows[index];
       prepareRow(row);
 
@@ -180,7 +180,7 @@ const FlameGraphTopTable = ({
   );
 };
 
-const SymbolCell = ({ cell: { value } }: CellProps<TopTableValue, TopTableValue>) => {
+const SymbolCell = ({ cell: { value } }: CellProps<TopTableValue, string>) => {
   return <div>{value}</div>;
 };