Chore: Fix some as HTMLElement type assertions (#58667)

.betterer.results

@@ -4651,8 +4651,7 @@ exports[`better eslint`] = {
     "public/app/features/search/state/SearchStateManager.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.", "2"]
-      [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
     "public/app/features/search/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -6349,8 +6348,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -6850,13 +6848,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
       [0, 0, 0, "Do not use any type assertions.", "7"],
-      [0, 0, 0, "Do not use any type assertions.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
-      [0, 0, 0, "Do not use any type assertions.", "10"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "11"]
     ],
     "public/app/plugins/datasource/testdata/components/PredictablePulseEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -6876,13 +6871,11 @@ exports[`better eslint`] = {
       [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.", "4"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
     "public/app/plugins/datasource/testdata/components/SimulationSchemaForm.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-      [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
     "public/app/plugins/datasource/testdata/components/StreamingClientEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -7005,11 +6998,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [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, "Unexpected any. Specify a different type.", "4"],
+      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Do not use any type assertions.", "6"]
-      [0, 0, 0, "Do not use any type assertions.", "7"]
     ],
     "public/app/plugins/panel/barchart/module.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -7067,9 +7059,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "10"],
       [0, 0, 0, "Do not use any type assertions.", "11"]
     ],
-    "public/app/plugins/panel/canvas/CanvasContextMenu.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/plugins/panel/canvas/CanvasPanel.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
@@ -8185,9 +8174,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "15"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "16"]
     ],
-    "public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],

public/app/features/search/state/SearchStateManager.ts

@@ -105,7 +105,7 @@ export class SearchStateManager extends StateManagerBase<SearchState> {
   };
 
   onStarredFilterChange = (e: FormEvent<HTMLInputElement>) => {
-    const starred = (e.target as HTMLInputElement).checked;
+    const starred = e.currentTarget.checked;
     this.setStateAndDoSearch({ starred });
   };
 

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -75,7 +75,7 @@ export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State>
   };
 
   onInstantChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    const instant = (e.target as HTMLInputElement).checked;
+    const instant = e.currentTarget.checked;
     this.query.instant = instant;
     this.setState({ instant }, this.onRunQuery);
   };

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -124,22 +124,22 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
   };
 
   const onInputChange = (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value, type } = e.target as HTMLInputElement | HTMLTextAreaElement;
+    const { name, value, type } = e.currentTarget;
     let newValue: any = value;
 
     if (type === 'number') {
       newValue = Number(value);
     }
 
-    if (name === 'levelColumn') {
+    if (name === 'levelColumn' && e.currentTarget instanceof HTMLInputElement) {
-      newValue = (e.target as HTMLInputElement).checked;
+      newValue = e.currentTarget.checked;
     }
 
     onUpdate({ ...query, [name]: newValue });
   };
 
   const onFieldChange = (field: string) => (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value, type } = e.target as HTMLInputElement;
+    const { name, value, type } = e.currentTarget;
     let newValue: any = value;
 
     if (type === 'number') {

public/app/plugins/datasource/testdata/components/SimulationQueryEditor.tsx

@@ -64,7 +64,7 @@ export const SimulationQueryEditor = ({ onChange, query, ds }: EditorProps) => {
   };
 
   const onUIDChanged = (e: FormEvent<HTMLInputElement>) => {
-    const { value } = e.target as HTMLInputElement;
+    const { value } = e.currentTarget;
     onUpdateKey({ ...simKey, uid: value ?? undefined });
   };
 

public/app/plugins/datasource/testdata/components/SimulationSchemaForm.tsx

@@ -60,7 +60,7 @@ export const SimulationSchemaForm = ({ config, schema, onChange }: SchemaFormPro
   const styles = useStyles2(getStyles);
 
   const onUpdateTextArea = (event: FormEvent<HTMLTextAreaElement>) => {
-    const element = event.target as HTMLInputElement;
+    const element = event.currentTarget;
     onChange(JSON.parse(element.value));
   };
 

public/app/plugins/panel/barchart/bars.ts

@@ -417,7 +417,9 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
     let over = u.over;
     over.style.overflow = 'hidden';
     u.root.querySelectorAll('.u-cursor-pt').forEach((el) => {
-      (el as HTMLElement).style.borderRadius = '0';
+      if (el instanceof HTMLElement) {
+        el.style.borderRadius = '0';
+      }
     });
   };
 

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

@@ -36,8 +36,11 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => {
       panel.setActivePanel();
 
       const shouldSelectElement = event.currentTarget !== scene.div;
-      if (shouldSelectElement) {
+      if (
-        scene.select({ targets: [event.currentTarget as HTMLElement | SVGElement] });
+        shouldSelectElement &&
+        (event.currentTarget instanceof HTMLElement || event.currentTarget instanceof SVGElement)
+      ) {
+        scene.select({ targets: [event.currentTarget] });
       }
       setAnchorPoint({ x: event.pageX, y: event.pageY });
       setIsMenuVisible(true);

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -119,9 +119,8 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
         }
         isClick = true;
 
-        if (e.target) {
+        if (e.target instanceof HTMLElement) {
-          const target = e.target as HTMLElement;
+          if (!e.target.classList.contains('u-cursor-pt')) {
-          if (!target.classList.contains('u-cursor-pt')) {
             pluginLog('ContextMenuPlugin', false, 'canvas click');
             setPoint({ seriesIdx: null, dataIdx: null });
           }