Add some typings for react events (#20038)

public/app/plugins/datasource/stackdriver/components/AliasBy.tsx

@@ -30,7 +30,7 @@ export class AliasBy extends Component<Props, State> {
     }
   }
 
-  onChange = (e: any) => {
+  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ value: e.target.value });
     this.propagateOnChange(e.target.value);
   };

public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx

-import React, { FC } from 'react';
+import React, { ChangeEvent, FC } from 'react';
 
 interface Props {
-  onValueChange: (e: any) => void;
+  onValueChange: (e: ChangeEvent<HTMLSelectElement>) => void;
   options: any[];
   value: string;
   label: string;

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

-import React, { PureComponent } from 'react';
+import React, { ChangeEvent, PureComponent } from 'react';
 import { VariableQueryProps } from 'app/types/plugins';
 import SimpleSelect from './SimpleSelect';
 import { getMetricTypes, getLabelKeys, extractServicesFromMetricDescriptors } from '../functions';
@@ -63,7 +63,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     this.setState(state);
   }
 
-  async onQueryTypeChange(event: any) {
+  async onQueryTypeChange(event: ChangeEvent<HTMLSelectElement>) {
     const state: any = {
       selectedQueryType: event.target.value,
       ...(await this.getLabels(this.state.selectedMetricType, event.target.value)),
@@ -71,7 +71,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     this.setState(state);
   }
 
-  async onServiceChange(event: any) {
+  async onServiceChange(event: ChangeEvent<HTMLSelectElement>) {
     const { metricTypes, selectedMetricType } = getMetricTypes(
       this.state.metricDescriptors,
       this.state.selectedMetricType,
@@ -87,12 +87,12 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
     this.setState(state);
   }
 
-  async onMetricTypeChange(event: any) {
+  async onMetricTypeChange(event: ChangeEvent<HTMLSelectElement>) {
     const state: any = { selectedMetricType: event.target.value, ...(await this.getLabels(event.target.value)) };
     this.setState(state);
   }
 
-  onLabelKeyChange(event: any) {
+  onLabelKeyChange(event: ChangeEvent<HTMLSelectElement>) {
     this.setState({ labelKey: event.target.value });
   }
 

public/app/plugins/panel/graph2/GraphLegendEditor.tsx

@@ -23,17 +23,16 @@ export const GraphLegendEditor: React.FunctionComponent<GraphLegendEditorProps>
     });
   };
 
-  const onOptionToggle = (option: keyof LegendOptions) => (event?: React.SyntheticEvent<HTMLInputElement>) => {
-    const newOption = {};
+  const onOptionToggle = (option: keyof LegendOptions) => (event?: React.ChangeEvent<HTMLInputElement>) => {
+    const newOption: Partial<LegendOptions> = {};
     if (!event) {
       return;
     }
-    // TODO: fix the ignores
-    // @ts-ignore
-    newOption[option] = event.target.checked;
+
     if (option === 'placement') {
-      // @ts-ignore
       newOption[option] = event.target.checked ? 'right' : 'under';
+    } else {
+      newOption[option] = event.target.checked;
     }
 
     onChange({