Update dependency prettier to v2.5.1 (#43473)

* Update dependency prettier to v2.5.1

* prettier fixes

* chore(toolkit): bump prettier to 2.5.1

* style(eslint): bump grafana config to 2.5.2 in core and toolkit

* style(mssql-datasource): fix no-inferrable-types eslint errors

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

package.json

@@ -82,7 +82,7 @@
     "@emotion/eslint-plugin": "11.7.0",
     "@grafana/api-documenter": "7.11.2",
     "@grafana/e2e": "workspace:*",
-    "@grafana/eslint-config": "2.5.1",
+    "@grafana/eslint-config": "2.5.2",
     "@grafana/toolkit": "workspace:*",
     "@grafana/tsconfig": "^1.1.0-rc1",
     "@lingui/cli": "3.13.0",
@@ -200,7 +200,7 @@
     "postcss-loader": "6.2.1",
     "postcss-reporter": "7.0.5",
     "postcss-scss": "4.0.2",
-    "prettier": "2.2.1",
+    "prettier": "2.5.1",
     "raw-loader": "4.0.2",
     "react-refresh": "0.11.0",
     "react-select-event": "^5.1.0",

packages/grafana-data/src/dataframe/DataFrameView.ts

@@ -19,7 +19,7 @@ export class DataFrameView<T = any> extends FunctionalVector<T> {
 
   constructor(private data: DataFrame) {
     super();
-    const obj = ({} as unknown) as T;
+    const obj = {} as unknown as T;
 
     for (let i = 0; i < data.fields.length; i++) {
       const field = data.fields[i];

packages/grafana-data/src/field/displayProcessor.ts

@@ -169,6 +169,6 @@ function toStringProcessor(value: any): DisplayValue {
 export function getRawDisplayProcessor(): DisplayProcessor {
   return (value: any) => ({
     text: `${value}`,
-    numeric: (null as unknown) as number,
+    numeric: null as unknown as number,
   });
 }

packages/grafana-data/src/field/fieldOverrides.test.ts

@@ -257,7 +257,7 @@ describe('applyFieldOverrides', () => {
     const data = applyFieldOverrides({
       data: [f0], // the frame
       fieldConfig: src as FieldConfigSource, // defaults + overrides
-      replaceVariables: (undefined as any) as InterpolateFunction,
+      replaceVariables: undefined as any as InterpolateFunction,
       theme: createTheme(),
       fieldConfigRegistry: customFieldRegistry,
     })[0];
@@ -284,7 +284,7 @@ describe('applyFieldOverrides', () => {
     const data = applyFieldOverrides({
       data: [f0], // the frame
       fieldConfig: src as FieldConfigSource, // defaults + overrides
-      replaceVariables: (undefined as any) as InterpolateFunction,
+      replaceVariables: undefined as any as InterpolateFunction,
       theme: createTheme(),
     })[0];
     const valueColumn = data.fields[1];
@@ -321,7 +321,7 @@ describe('applyFieldOverrides', () => {
     const data = applyFieldOverrides({
       data: [f0], // the frame
       fieldConfig: src as FieldConfigSource, // defaults + overrides
-      replaceVariables: (undefined as any) as InterpolateFunction,
+      replaceVariables: undefined as any as InterpolateFunction,
       theme: createTheme(),
     })[0];
 
@@ -659,7 +659,7 @@ describe('applyRawFieldOverrides', () => {
       steps: [
         {
           color: 'green',
-          value: (null as unknown) as number,
+          value: null as unknown as number,
         },
         {
           color: 'red',

packages/grafana-data/src/field/fieldOverrides.ts

@@ -338,117 +338,119 @@ export function validateFieldConfig(config: FieldConfig) {
   }
 }
 
-export const getLinksSupplier = (
-  frame: DataFrame,
-  field: Field,
-  fieldScopedVars: ScopedVars,
-  replaceVariables: InterpolateFunction,
-  timeZone?: TimeZone
-) => (config: ValueLinkConfig): Array<LinkModel<Field>> => {
-  if (!field.config.links || field.config.links.length === 0) {
-    return [];
-  }
-  const timeRangeUrl = locationUtil.getTimeRangeUrlParams();
-  const { timeField } = getTimeField(frame);
-
-  return field.config.links.map((link: DataLink) => {
-    const variablesQuery = locationUtil.getVariablesUrlParams();
-    let dataFrameVars = {};
-    let valueVars = {};
-
-    // We are not displaying reduction result
-    if (config.valueRowIndex !== undefined && !isNaN(config.valueRowIndex)) {
-      const fieldsProxy = getFieldDisplayValuesProxy({
-        frame,
-        rowIndex: config.valueRowIndex,
-        timeZone: timeZone,
-      });
+export const getLinksSupplier =
+  (
+    frame: DataFrame,
+    field: Field,
+    fieldScopedVars: ScopedVars,
+    replaceVariables: InterpolateFunction,
+    timeZone?: TimeZone
+  ) =>
+  (config: ValueLinkConfig): Array<LinkModel<Field>> => {
+    if (!field.config.links || field.config.links.length === 0) {
+      return [];
+    }
+    const timeRangeUrl = locationUtil.getTimeRangeUrlParams();
+    const { timeField } = getTimeField(frame);
+
+    return field.config.links.map((link: DataLink) => {
+      const variablesQuery = locationUtil.getVariablesUrlParams();
+      let dataFrameVars = {};
+      let valueVars = {};
+
+      // We are not displaying reduction result
+      if (config.valueRowIndex !== undefined && !isNaN(config.valueRowIndex)) {
+        const fieldsProxy = getFieldDisplayValuesProxy({
+          frame,
+          rowIndex: config.valueRowIndex,
+          timeZone: timeZone,
+        });
 
-      valueVars = {
-        raw: field.values.get(config.valueRowIndex),
-        numeric: fieldsProxy[field.name].numeric,
-        text: fieldsProxy[field.name].text,
-        time: timeField ? timeField.values.get(config.valueRowIndex) : undefined,
-      };
+        valueVars = {
+          raw: field.values.get(config.valueRowIndex),
+          numeric: fieldsProxy[field.name].numeric,
+          text: fieldsProxy[field.name].text,
+          time: timeField ? timeField.values.get(config.valueRowIndex) : undefined,
+        };
 
-      dataFrameVars = {
-        __data: {
-          value: {
-            name: frame.name,
-            refId: frame.refId,
-            fields: fieldsProxy,
+        dataFrameVars = {
+          __data: {
+            value: {
+              name: frame.name,
+              refId: frame.refId,
+              fields: fieldsProxy,
+            },
+            text: 'Data',
           },
-          text: 'Data',
+        };
+      } else {
+        if (config.calculatedValue) {
+          valueVars = {
+            raw: config.calculatedValue.numeric,
+            numeric: config.calculatedValue.numeric,
+            text: formattedValueToString(config.calculatedValue),
+          };
+        }
+      }
+
+      const variables = {
+        ...fieldScopedVars,
+        __value: {
+          text: 'Value',
+          value: valueVars,
+        },
+        ...dataFrameVars,
+        [DataLinkBuiltInVars.keepTime]: {
+          text: timeRangeUrl,
+          value: timeRangeUrl,
+        },
+        [DataLinkBuiltInVars.includeVars]: {
+          text: variablesQuery,
+          value: variablesQuery,
         },
       };
-    } else {
-      if (config.calculatedValue) {
-        valueVars = {
-          raw: config.calculatedValue.numeric,
-          numeric: config.calculatedValue.numeric,
-          text: formattedValueToString(config.calculatedValue),
+
+      if (link.onClick) {
+        return {
+          href: link.url,
+          title: replaceVariables(link.title || '', variables),
+          target: link.targetBlank ? '_blank' : undefined,
+          onClick: (evt, origin) => {
+            link.onClick!({
+              origin: origin ?? field,
+              e: evt,
+              replaceVariables: (v) => replaceVariables(v, variables),
+            });
+          },
+          origin: field,
         };
       }
-    }
 
-    const variables = {
-      ...fieldScopedVars,
-      __value: {
-        text: 'Value',
-        value: valueVars,
-      },
-      ...dataFrameVars,
-      [DataLinkBuiltInVars.keepTime]: {
-        text: timeRangeUrl,
-        value: timeRangeUrl,
-      },
-      [DataLinkBuiltInVars.includeVars]: {
-        text: variablesQuery,
-        value: variablesQuery,
-      },
-    };
+      if (link.internal) {
+        // For internal links at the moment only destination is Explore.
+        return mapInternalLinkToExplore({
+          link,
+          internalLink: link.internal,
+          scopedVars: variables,
+          field,
+          range: {} as any,
+          replaceVariables,
+        });
+      }
 
-    if (link.onClick) {
-      return {
-        href: link.url,
+      let href = locationUtil.assureBaseUrl(link.url.replace(/\n/g, ''));
+      href = replaceVariables(href, variables);
+      href = locationUtil.processUrl(href);
+
+      const info: LinkModel<Field> = {
+        href,
         title: replaceVariables(link.title || '', variables),
         target: link.targetBlank ? '_blank' : undefined,
-        onClick: (evt, origin) => {
-          link.onClick!({
-            origin: origin ?? field,
-            e: evt,
-            replaceVariables: (v) => replaceVariables(v, variables),
-          });
-        },
         origin: field,
       };
-    }
-
-    if (link.internal) {
-      // For internal links at the moment only destination is Explore.
-      return mapInternalLinkToExplore({
-        link,
-        internalLink: link.internal,
-        scopedVars: variables,
-        field,
-        range: {} as any,
-        replaceVariables,
-      });
-    }
-
-    let href = locationUtil.assureBaseUrl(link.url.replace(/\n/g, ''));
-    href = replaceVariables(href, variables);
-    href = locationUtil.processUrl(href);
-
-    const info: LinkModel<Field> = {
-      href,
-      title: replaceVariables(link.title || '', variables),
-      target: link.targetBlank ? '_blank' : undefined,
-      origin: field,
-    };
-    return info;
-  });
-};
+      return info;
+    });
+  };
 
 /**
  * Return a copy of the DataFrame with raw data

packages/grafana-data/src/field/scale.ts

@@ -47,13 +47,13 @@ function getBooleanScaleCalculator(field: Field, theme: GrafanaTheme2): ScaleCal
   const trueValue: ColorScaleValue = {
     color: theme.visualization.getColorByName('green'),
     percent: 1,
-    threshold: (undefined as unknown) as Threshold,
+    threshold: undefined as unknown as Threshold,
   };
 
   const falseValue: ColorScaleValue = {
     color: theme.visualization.getColorByName('red'),
     percent: 0,
-    threshold: (undefined as unknown) as Threshold,
+    threshold: undefined as unknown as Threshold,
   };
 
   const mode = getFieldColorModeForField(field);

packages/grafana-data/src/transformations/transformDataFrame.ts

@@ -4,47 +4,48 @@ import { map, mergeMap } from 'rxjs/operators';
 import { DataFrame, DataTransformerConfig } from '../types';
 import { standardTransformersRegistry, TransformerRegistryItem } from './standardTransformersRegistry';
 
-const getOperator = (config: DataTransformerConfig): MonoTypeOperatorFunction<DataFrame[]> => (source) => {
-  const info = standardTransformersRegistry.get(config.id);
+const getOperator =
+  (config: DataTransformerConfig): MonoTypeOperatorFunction<DataFrame[]> =>
+  (source) => {
+    const info = standardTransformersRegistry.get(config.id);
 
-  if (!info) {
-    return source;
-  }
-
-  const defaultOptions = info.transformation.defaultOptions ?? {};
-  const options = { ...defaultOptions, ...config.options };
-
-  return source.pipe(
-    mergeMap((before) => of(before).pipe(info.transformation.operator(options), postProcessTransform(before, info)))
-  );
-};
-
-const postProcessTransform = (
-  before: DataFrame[],
-  info: TransformerRegistryItem<any>
-): MonoTypeOperatorFunction<DataFrame[]> => (source) =>
-  source.pipe(
-    map((after) => {
-      if (after === before) {
-        return after;
-      }
+    if (!info) {
+      return source;
+    }
 
-      // Add a key to the metadata if the data changed
-      for (const series of after) {
-        if (!series.meta) {
-          series.meta = {};
+    const defaultOptions = info.transformation.defaultOptions ?? {};
+    const options = { ...defaultOptions, ...config.options };
+
+    return source.pipe(
+      mergeMap((before) => of(before).pipe(info.transformation.operator(options), postProcessTransform(before, info)))
+    );
+  };
+
+const postProcessTransform =
+  (before: DataFrame[], info: TransformerRegistryItem<any>): MonoTypeOperatorFunction<DataFrame[]> =>
+  (source) =>
+    source.pipe(
+      map((after) => {
+        if (after === before) {
+          return after;
         }
 
-        if (!series.meta.transformations) {
-          series.meta.transformations = [info.id];
-        } else {
-          series.meta.transformations = [...series.meta.transformations, info.id];
+        // Add a key to the metadata if the data changed
+        for (const series of after) {
+          if (!series.meta) {
+            series.meta = {};
+          }
+
+          if (!series.meta.transformations) {
+            series.meta.transformations = [info.id];
+          } else {
+            series.meta.transformations = [...series.meta.transformations, info.id];
+          }
         }
-      }
 
-      return after;
-    })
-  );
+        return after;
+      })
+    );
 
 /**
  * Apply configured transformations to the input data

packages/grafana-data/src/transformations/transformers/calculateField.ts

@@ -210,7 +210,7 @@ function getBinaryCreator(options: BinaryOptions, allFrames: DataFrame[]): Value
     const left = findFieldValuesWithNameOrConstant(frame, options.left, allFrames);
     const right = findFieldValuesWithNameOrConstant(frame, options.right, allFrames);
     if (!left || !right || !operator) {
-      return (undefined as unknown) as Vector;
+      return undefined as unknown as Vector;
     }
 
     return new BinaryOperationVector(left, right, operator.operation);

packages/grafana-data/src/transformations/transformers/order.ts

@@ -41,20 +41,17 @@ export const createOrderFieldsComparer = (indexByName: Record<string, number>) =
   return indexOfField(a, indexByName) - indexOfField(b, indexByName);
 };
 
-const createFieldsOrderer = (indexByName: Record<string, number>) => (
-  fields: Field[],
-  data: DataFrame[],
-  frame: DataFrame
-) => {
-  if (!Array.isArray(fields) || fields.length === 0) {
-    return fields;
-  }
-  if (!indexByName || Object.keys(indexByName).length === 0) {
-    return fields;
-  }
-  const comparer = createOrderFieldsComparer(indexByName);
-  return fields.sort((a, b) => comparer(getFieldDisplayName(a, frame, data), getFieldDisplayName(b, frame, data)));
-};
+const createFieldsOrderer =
+  (indexByName: Record<string, number>) => (fields: Field[], data: DataFrame[], frame: DataFrame) => {
+    if (!Array.isArray(fields) || fields.length === 0) {
+      return fields;
+    }
+    if (!indexByName || Object.keys(indexByName).length === 0) {
+      return fields;
+    }
+    const comparer = createOrderFieldsComparer(indexByName);
+    return fields.sort((a, b) => comparer(getFieldDisplayName(a, frame, data), getFieldDisplayName(b, frame, data)));
+  };
 
 const indexOfField = (fieldName: string, indexByName: Record<string, number>) => {
   if (Number.isInteger(indexByName[fieldName])) {

packages/grafana-data/src/transformations/transformers/reduce.ts

@@ -192,7 +192,7 @@ export function mergeResults(data: DataFrame[]): DataFrame | undefined {
         if (isFirstField || isSameField) {
           const baseValues: any[] = baseField.values.toArray();
           const values: any[] = field.values.toArray();
-          ((baseField.values as unknown) as ArrayVector).buffer = baseValues.concat(values);
+          (baseField.values as unknown as ArrayVector).buffer = baseValues.concat(values);
         }
       }
     }

packages/grafana-data/src/transformations/transformers/rename.ts

@@ -37,29 +37,31 @@ export const renameFieldsTransformer: DataTransformerInfo<RenameFieldsTransforme
     ),
 };
 
-const createRenamer = (renameByName: Record<string, string>) => (frame: DataFrame): Field[] => {
-  if (!renameByName || Object.keys(renameByName).length === 0) {
-    return frame.fields;
-  }
+const createRenamer =
+  (renameByName: Record<string, string>) =>
+  (frame: DataFrame): Field[] => {
+    if (!renameByName || Object.keys(renameByName).length === 0) {
+      return frame.fields;
+    }
 
-  return frame.fields.map((field) => {
-    const displayName = getFieldDisplayName(field, frame);
-    const renameTo = renameByName[displayName];
+    return frame.fields.map((field) => {
+      const displayName = getFieldDisplayName(field, frame);
+      const renameTo = renameByName[displayName];
 
-    if (typeof renameTo !== 'string' || renameTo.length === 0) {
-      return field;
-    }
+      if (typeof renameTo !== 'string' || renameTo.length === 0) {
+        return field;
+      }
 
-    return {
-      ...field,
-      config: {
-        ...field.config,
-        displayName: renameTo,
-      },
-      state: {
-        ...field.state,
-        displayName: renameTo,
-      },
-    };
-  });
-};
+      return {
+        ...field,
+        config: {
+          ...field.config,
+          displayName: renameTo,
+        },
+        state: {
+          ...field.state,
+          displayName: renameTo,
+        },
+      };
+    });
+  };

packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts

@@ -79,7 +79,8 @@ export abstract class OptionsUIRegistryBuilder<
   TOptions,
   TEditorProps,
   T extends OptionsEditorItem<TOptions, any, TEditorProps, any>
-> implements OptionsUIRegistryBuilderAPI<TOptions, TEditorProps, T> {
+> implements OptionsUIRegistryBuilderAPI<TOptions, TEditorProps, T>
+{
   private properties: T[] = [];
 
   addCustomEditor<TSettings, TValue>(config: T & OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue>): this {

packages/grafana-data/src/utils/datasource.ts

@@ -41,52 +41,47 @@ export function getDataSourceUID(ref: DataSourceRef | string | null): string | u
   return undefined;
 }
 
-export const onUpdateDatasourceOption = (props: DataSourcePluginOptionsEditorProps, key: keyof DataSourceSettings) => (
-  event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
-) => {
-  updateDatasourcePluginOption(props, key, event.currentTarget.value);
-};
-
-export const onUpdateDatasourceJsonDataOption = <J, S, K extends keyof J>(
-  props: DataSourcePluginOptionsEditorProps<J, S>,
-  key: K
-) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
-  updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.value);
-};
-
-export const onUpdateDatasourceSecureJsonDataOption = <J, S extends {} = KeyValue>(
-  props: DataSourcePluginOptionsEditorProps<J, S>,
-  key: string
-) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
-  updateDatasourcePluginSecureJsonDataOption(props, key, event.currentTarget.value);
-};
-
-export const onUpdateDatasourceJsonDataOptionSelect = <J, S, K extends keyof J>(
-  props: DataSourcePluginOptionsEditorProps<J, S>,
-  key: K
-) => (selected: SelectableValue) => {
-  updateDatasourcePluginJsonDataOption(props, key, selected.value);
-};
-
-export const onUpdateDatasourceJsonDataOptionChecked = <J, S, K extends keyof J>(
-  props: DataSourcePluginOptionsEditorProps<J, S>,
-  key: K
-) => (event: React.SyntheticEvent<HTMLInputElement>) => {
-  updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.checked);
-};
-
-export const onUpdateDatasourceSecureJsonDataOptionSelect = <J, S extends {} = KeyValue>(
-  props: DataSourcePluginOptionsEditorProps<J, S>,
-  key: string
-) => (selected: SelectableValue) => {
-  updateDatasourcePluginSecureJsonDataOption(props, key, selected.value);
-};
-
-export const onUpdateDatasourceResetOption = (props: DataSourcePluginOptionsEditorProps, key: string) => (
-  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-) => {
-  updateDatasourcePluginResetOption(props, key);
-};
+export const onUpdateDatasourceOption =
+  (props: DataSourcePluginOptionsEditorProps, key: keyof DataSourceSettings) =>
+  (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
+    updateDatasourcePluginOption(props, key, event.currentTarget.value);
+  };
+
+export const onUpdateDatasourceJsonDataOption =
+  <J, S, K extends keyof J>(props: DataSourcePluginOptionsEditorProps<J, S>, key: K) =>
+  (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
+    updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.value);
+  };
+
+export const onUpdateDatasourceSecureJsonDataOption =
+  <J, S extends {} = KeyValue>(props: DataSourcePluginOptionsEditorProps<J, S>, key: string) =>
+  (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
+    updateDatasourcePluginSecureJsonDataOption(props, key, event.currentTarget.value);
+  };
+
+export const onUpdateDatasourceJsonDataOptionSelect =
+  <J, S, K extends keyof J>(props: DataSourcePluginOptionsEditorProps<J, S>, key: K) =>
+  (selected: SelectableValue) => {
+    updateDatasourcePluginJsonDataOption(props, key, selected.value);
+  };
+
+export const onUpdateDatasourceJsonDataOptionChecked =
+  <J, S, K extends keyof J>(props: DataSourcePluginOptionsEditorProps<J, S>, key: K) =>
+  (event: React.SyntheticEvent<HTMLInputElement>) => {
+    updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.checked);
+  };
+
+export const onUpdateDatasourceSecureJsonDataOptionSelect =
+  <J, S extends {} = KeyValue>(props: DataSourcePluginOptionsEditorProps<J, S>, key: string) =>
+  (selected: SelectableValue) => {
+    updateDatasourcePluginSecureJsonDataOption(props, key, selected.value);
+  };
+
+export const onUpdateDatasourceResetOption =
+  (props: DataSourcePluginOptionsEditorProps, key: string) =>
+  (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    updateDatasourcePluginResetOption(props, key);
+  };
 
 export function updateDatasourcePluginOption<J, S extends {} = KeyValue>(
   props: DataSourcePluginOptionsEditorProps<J, S>,

packages/grafana-data/src/utils/labels.test.ts

@@ -73,6 +73,6 @@ describe('matchAllLabels()', () => {
   });
 
   it('be graceful with null values (match)', () => {
-    expect(matchAllLabels((undefined as unknown) as Labels, { foo: 'bar' })).toBeTruthy();
+    expect(matchAllLabels(undefined as unknown as Labels, { foo: 'bar' })).toBeTruthy();
   });
 });

packages/grafana-data/src/utils/labels.ts

@@ -45,7 +45,7 @@ export function findCommonLabels(labelsSets: Labels[]): Labels {
       });
     }
     return acc;
-  }, (undefined as unknown) as Labels);
+  }, undefined as unknown as Labels);
 }
 
 /**

packages/grafana-data/src/utils/logs.test.ts

@@ -358,12 +358,12 @@ describe('sortLogsResult', () => {
 });
 
 describe('checkLogsError()', () => {
-  const log = ({
+  const log = {
     labels: {
       __error__: 'Error Message',
       foo: 'boo',
     },
-  } as any) as LogRowModel;
+  } as any as LogRowModel;
   test('should return correct error if error is present', () => {
     expect(checkLogsError(log)).toStrictEqual({ hasError: true, errorMessage: 'Error Message' });
   });

packages/grafana-data/src/utils/makeClassES5Compatible.ts

@@ -3,7 +3,7 @@
  * Proxies a ES6 class so that it can be used as a base class for an ES5 class
  */
 export function makeClassES5Compatible<T>(ES6Class: T): T {
-  return (new Proxy(ES6Class as any, {
+  return new Proxy(ES6Class as any, {
     // ES5 code will call it like a function using super
     apply(target, self, argumentsList) {
       if (typeof Reflect === 'undefined' || !Reflect.construct) {
@@ -12,5 +12,5 @@ export function makeClassES5Compatible<T>(ES6Class: T): T {
 
       return Reflect.construct(target, argumentsList, self.constructor);
     },
-  }) as unknown) as T;
+  }) as unknown as T;
 }

packages/grafana-data/src/utils/testdata/testTheme.ts

@@ -1,12 +1,12 @@
 import { GrafanaTheme, GrafanaThemeType } from '../../types/theme';
 
 export function getTestTheme(type: GrafanaThemeType = GrafanaThemeType.Dark): GrafanaTheme {
-  return ({
+  return {
     type,
     isDark: type === GrafanaThemeType.Dark,
     isLight: type === GrafanaThemeType.Light,
     colors: {
       panelBg: 'white',
     },
-  } as unknown) as GrafanaTheme;
+  } as unknown as GrafanaTheme;
 }

packages/grafana-data/src/vector/AppendedVectors.ts

@@ -60,7 +60,7 @@ export class AppendedVectors<T = any> implements Vector<T> {
         return src.values.get(index - src.start);
       }
     }
-    return (undefined as unknown) as T;
+    return undefined as unknown as T;
   }
 
   toArray(): T[] {

packages/grafana-e2e/src/support/types.ts

@@ -80,7 +80,7 @@ const processSelectors = <S extends Selectors>(e2eObjects: E2EFunctions<S>, sele
       e2eObjects[key] = function (textOrOptions?: string | CypressOptions, options?: CypressOptions) {
         // the input can only be ()
         if (arguments.length === 0) {
-          const selector = value((undefined as unknown) as string);
+          const selector = value(undefined as unknown as string);
 
           logOutput(selector);
           return e2e().get(selector);
@@ -97,7 +97,7 @@ const processSelectors = <S extends Selectors>(e2eObjects: E2EFunctions<S>, sele
             logOutput(selector);
             return e2e().get(selector);
           }
-          const selector = value((undefined as unknown) as string);
+          const selector = value(undefined as unknown as string);
 
           logOutput(selector);
           return e2e().get(selector, textOrOptions);

packages/grafana-runtime/src/utils/DataSourceWithBackend.test.ts

@@ -19,11 +19,11 @@ class MyDataSource extends DataSourceWithBackend<DataQuery, DataSourceJsonData>
 
 const mockDatasourceRequest = jest.fn();
 
-const backendSrv = ({
+const backendSrv = {
   fetch: (options: BackendSrvRequest) => {
     return of(mockDatasourceRequest(options));
   },
-} as unknown) as BackendSrv;
+} as unknown as BackendSrv;
 
 jest.mock('../services', () => ({
   ...(jest.requireActual('../services') as any),

packages/grafana-runtime/src/utils/queryResponse.test.ts

@@ -2,7 +2,7 @@ import { DataQuery, toDataFrameDTO, DataFrame } from '@grafana/data';
 import { FetchError, FetchResponse } from 'src/services';
 import { BackendDataSourceResponse, toDataQueryResponse, toTestingStatus } from './queryResponse';
 
-const resp = ({
+const resp = {
   data: {
     results: {
       A: {
@@ -45,9 +45,9 @@ const resp = ({
       },
     },
   },
-} as any) as FetchResponse<BackendDataSourceResponse>;
+} as any as FetchResponse<BackendDataSourceResponse>;
 
-const resWithError = ({
+const resWithError = {
   data: {
     results: {
       A: {
@@ -73,7 +73,7 @@ const resWithError = ({
       },
     },
   },
-} as any) as FetchResponse<BackendDataSourceResponse>;
+} as any as FetchResponse<BackendDataSourceResponse>;
 
 const emptyResults = {
   data: { results: { '': { refId: '' } } },

packages/grafana-toolkit/package.json

@@ -29,7 +29,7 @@
     "@babel/core": "7.13.14",
     "@babel/preset-env": "7.13.12",
     "@grafana/data": "8.4.0-pre",
-    "@grafana/eslint-config": "2.5.1",
+    "@grafana/eslint-config": "2.5.2",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "8.4.0-pre",
     "@jest/core": "26.6.3",
@@ -85,7 +85,7 @@
     "postcss-flexbugs-fixes": "4.2.0",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
-    "prettier": "^2.2.1",
+    "prettier": "2.5.1",
     "react-dev-utils": "^11.0.4",
     "replace-in-file": "^4.1.0",
     "replace-in-file-webpack-plugin": "^1.0.6",

packages/grafana-toolkit/src/cli/utils/execTask.ts

@@ -7,17 +7,19 @@ interface TaskBasicOptions {
   silent?: boolean;
 }
 
-export const execTask = <TOptions>(task: Task<TOptions>) => async (options: TOptions & TaskBasicOptions) => {
-  if (!options.silent) {
-    console.log(chalk.yellow(`Running ${chalk.bold(task.name)} task`));
-  }
-  task.setOptions(options);
-  try {
-    console.group();
-    await task.exec();
-    console.groupEnd();
-  } catch (e) {
-    console.trace(e);
-    process.exit(1);
-  }
-};
+export const execTask =
+  <TOptions>(task: Task<TOptions>) =>
+  async (options: TOptions & TaskBasicOptions) => {
+    if (!options.silent) {
+      console.log(chalk.yellow(`Running ${chalk.bold(task.name)} task`));
+    }
+    task.setOptions(options);
+    try {
+      console.group();
+      await task.exec();
+      console.groupEnd();
+    } catch (e) {
+      console.trace(e);
+      process.exit(1);
+    }
+  };

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -87,7 +87,7 @@ describe('BarGauge', () => {
 
     it('does not show as lit if the value is null (somehow)', () => {
       const props = getProps();
-      expect(getCellColor(1, (null as unknown) as DisplayValue, props.display)).toEqual(
+      expect(getCellColor(1, null as unknown as DisplayValue, props.display)).toEqual(
         expect.objectContaining({
           isLit: false,
         })

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

@@ -126,14 +126,8 @@ export class BarGauge extends PureComponent<Props> {
 
   renderRetroBars(): ReactNode {
     const { display, field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth, text } = this.props;
-    const {
-      valueHeight,
-      valueWidth,
-      maxBarHeight,
-      maxBarWidth,
-      wrapperWidth,
-      wrapperHeight,
-    } = calculateBarAndValueDimensions(this.props);
+    const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =
+      calculateBarAndValueDimensions(this.props);
     const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
     const maxValue = field.max ?? GAUGE_DEFAULT_MAXIMUM;
 

packages/grafana-ui/src/components/Cascader/optionMappings.ts

@@ -28,6 +28,6 @@ const fromRCOptions = (options: RCCascaderOption[]): CascaderOption[] => {
 const fromRCOption = (option: RCCascaderOption): CascaderOption => {
   return {
     value: option.value ?? '',
-    label: (option.label as unknown) as string,
+    label: option.label as unknown as string,
   };
 };

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -87,9 +87,10 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
 
     // Used to get the height of the suggestion elements in order to scroll to them.
     const activeRef = useRef<HTMLDivElement>(null);
-    const activeIndexPosition = useMemo(() => getElementPosition(activeRef.current, suggestionsIndex), [
-      suggestionsIndex,
-    ]);
+    const activeIndexPosition = useMemo(
+      () => getElementPosition(activeRef.current, suggestionsIndex),
+      [suggestionsIndex]
+    );
 
     // SelectionReference is used to position the variables suggestion relatively to current DOM selection
     const selectionRef = useMemo(() => new SelectionReference(), []);

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.test.tsx

@@ -55,7 +55,7 @@ describe('DataLinksListItem', () => {
     it('then the link title should be replaced by [Data link title not provided]', () => {
       const link = {
         ...baseLink,
-        title: (undefined as unknown) as string,
+        title: undefined as unknown as string,
       };
       setupTestContext({ link });
 
@@ -67,7 +67,7 @@ describe('DataLinksListItem', () => {
     it('then the link url should be replaced by [Data link url not provided]', () => {
       const link = {
         ...baseLink,
-        url: (undefined as unknown) as string,
+        url: undefined as unknown as string,
       };
       setupTestContext({ link });
 

packages/grafana-ui/src/components/Forms/Form.mdx

@@ -232,11 +232,13 @@ Consider this function that simulates a call to some service. Remember, if you w
 ```jsx
 validateAsync = (newValue: string) => {
   try {
-    await new Promise<ValidateResult>((resolve, reject) => {
-      setTimeout(() => {
-        reject('Something went wrong...');
-      }, 2000);
-    });
+    (await new Promise()) <
+      ValidateResult >
+      ((resolve, reject) => {
+        setTimeout(() => {
+          reject('Something went wrong...');
+        }, 2000);
+      });
     return true;
   } catch (e) {
     return false;

packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts

@@ -5,7 +5,8 @@ import { isObject, getObjectName, getType, getValuePreview, cssClass, createElem
 
 import { isNumber } from 'lodash';
 
-const DATE_STRING_REGEX = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
+const DATE_STRING_REGEX =
+  /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
 const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;
 const JSON_DATE_REGEX = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
 

packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx

@@ -179,7 +179,7 @@ const row: LogRowModel = {
   rowIndex: 0,
   dataFrame: new MutableDataFrame(),
   entry: '4',
-  labels: (null as any) as Labels,
+  labels: null as any as Labels,
   hasAnsi: false,
   hasUnescapedContent: false,
   raw: '4',

packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx

@@ -143,7 +143,7 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
   // React Hook that creates an object state value called result to component state and a setter function called setResult
   // The initial value for result is null
   // Used for sorting the response from backend
-  const [result, setResult] = useState<ResultType>((null as any) as ResultType);
+  const [result, setResult] = useState<ResultType>(null as any as ResultType);
 
   // React Hook that creates an object state value called hasMoreContextRows to component state and a setter function called setHasMoreContextRows
   // The initial value for hasMoreContextRows is {before: true, after: true}

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts

@@ -231,7 +231,7 @@ describe('sharedSingleStatMigrationHandler', () => {
   });
 
   it('auto set min/max for percent units before 8.0', () => {
-    const panel = ({
+    const panel = {
       options: {
         fieldOptions: {
           defaults: {
@@ -241,7 +241,7 @@ describe('sharedSingleStatMigrationHandler', () => {
       },
       title: 'Usage',
       type: 'bargauge',
-    } as unknown) as PanelModel;
+    } as unknown as PanelModel;
     sharedSingleStatMigrationHandler(panel as any);
     expect(panel.fieldConfig.defaults.unit).toBe('percentunit');
     expect(panel.fieldConfig.defaults.min).toBe(0);

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

@@ -165,12 +165,10 @@ export const Table: FC<Props> = memo((props: Props) => {
   }, [data]);
 
   // React-table column definitions
-  const memoizedColumns = useMemo(() => getColumns(data, width, columnMinWidth, footerValues), [
-    data,
-    width,
-    columnMinWidth,
-    footerValues,
-  ]);
+  const memoizedColumns = useMemo(
+    () => getColumns(data, width, columnMinWidth, footerValues),
+    [data, width, columnMinWidth, footerValues]
+  );
 
   // Internal react table state reducer
   const stateReducer = useTableStateReducer(props);

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

@@ -13,7 +13,7 @@ export interface Props {
 
 export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => {
   const cellProps = cell.getCellProps();
-  const field = ((cell.column as any) as GrafanaTableColumn).field;
+  const field = (cell.column as any as GrafanaTableColumn).field;
 
   if (!field.display) {
     return null;

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -175,7 +175,7 @@ export class UPlotConfigBuilder {
       mode: this.mode,
       series: [
         this.mode === 2
-          ? ((null as unknown) as Series)
+          ? (null as unknown as Series)
           : {
               value: () => '',
             },
@@ -191,18 +191,20 @@ export class UPlotConfigBuilder {
 
     config.select = this.select;
 
-    const pointColorFn = (alphaHex = '') => (u: uPlot, seriesIdx: number) => {
-      /*@ts-ignore*/
-      let s = u.series[seriesIdx].points._stroke;
+    const pointColorFn =
+      (alphaHex = '') =>
+      (u: uPlot, seriesIdx: number) => {
+        /*@ts-ignore*/
+        let s = u.series[seriesIdx].points._stroke;
 
-      // interpolate for gradients/thresholds
-      if (typeof s !== 'string') {
-        let field = this.frames![0].fields[seriesIdx];
-        s = field.display!(field.values.get(u.cursor.idxs![seriesIdx]!)).color!;
-      }
+        // interpolate for gradients/thresholds
+        if (typeof s !== 'string') {
+          let field = this.frames![0].fields[seriesIdx];
+          s = field.display!(field.values.get(u.cursor.idxs![seriesIdx]!)).color!;
+        }
 
-      return s + alphaHex;
-    };
+        return s + alphaHex;
+      };
 
     config.cursor = merge(
       {},

packages/grafana-ui/src/slate-plugins/slate-prism/options.tsx

@@ -54,7 +54,8 @@ class Options
     getSyntax: defaultGetSyntax,
     renderDecoration: defaultRenderDecoration,
   })
-  implements OptionsFormat {
+  implements OptionsFormat
+{
   declare readonly onlyIn: (node: Node) => boolean;
   declare readonly getSyntax: (node: Node) => string;
   declare readonly renderDecoration: (

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -48,6 +48,5 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
 };
 
 // eslint-disable-next-line react/display-name
-export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) => (
-  <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>
-);
+export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) =>
+  <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;

plugins-bundled/internal/input-datasource/src/InputDatasource.test.ts

@@ -44,7 +44,7 @@ describe('InputDatasource', () => {
 
   test('DataFrame descriptions', () => {
     expect(describeDataFrame([])).toEqual('');
-    expect(describeDataFrame((null as unknown) as Array<DataFrameDTO | DataFrame>)).toEqual('');
+    expect(describeDataFrame(null as unknown as Array<DataFrameDTO | DataFrame>)).toEqual('');
     expect(
       describeDataFrame([
         new MutableDataFrame({

public/app/angular/bridgeReactAngularRouting.ts

@@ -31,7 +31,7 @@ const interceptAngularLocation = () => {
       $provide.decorator('$location', [
         '$delegate',
         ($delegate: ILocationService) => {
-          $delegate = (new AngularLocationWrapper() as unknown) as ILocationService;
+          $delegate = new AngularLocationWrapper() as unknown as ILocationService;
           return $delegate;
         },
       ]);

public/app/angular/panel/specs/metrics_panel_ctrl.test.ts

@@ -1,7 +1,7 @@
 jest.mock('app/core/core', () => ({}));
 jest.mock('app/core/config', () => {
   return {
-    ...((jest.requireActual('app/core/config') as unknown) as object),
+    ...(jest.requireActual('app/core/config') as unknown as object),
     bootData: {
       user: {},
     },

public/app/angular/promiseToDigest.test.ts

@@ -4,7 +4,7 @@ import { promiseToDigest } from './promiseToDigest';
 describe('promiseToDigest', () => {
   describe('when called with a promise that resolves', () => {
     it('then evalAsync should be called on $scope', async () => {
-      const $scope: IScope = ({ $evalAsync: jest.fn() } as any) as IScope;
+      const $scope: IScope = { $evalAsync: jest.fn() } as any as IScope;
 
       await promiseToDigest($scope)(Promise.resolve(123));
 
@@ -14,7 +14,7 @@ describe('promiseToDigest', () => {
 
   describe('when called with a promise that rejects', () => {
     it('then evalAsync should be called on $scope', async () => {
-      const $scope: IScope = ({ $evalAsync: jest.fn() } as any) as IScope;
+      const $scope: IScope = { $evalAsync: jest.fn() } as any as IScope;
 
       try {
         await promiseToDigest($scope)(Promise.reject(123));

public/app/angular/services/ng_react.ts

@@ -19,7 +19,7 @@ import angular, { auto } from 'angular';
 function getReactComponent(name: string | Function, $injector: auto.IInjectorService): ComponentType {
   // if name is a function assume it is component and return it
   if (angular.isFunction(name)) {
-    return (name as unknown) as ComponentType;
+    return name as unknown as ComponentType;
   }
 
   // a React component name must be specified
@@ -46,7 +46,7 @@ function getReactComponent(name: string | Function, $injector: auto.IInjectorSer
     throw Error('Cannot find react component ' + name);
   }
 
-  return (reactComponent as unknown) as ComponentType;
+  return reactComponent as unknown as ComponentType;
 }
 
 // wraps a function with scope.$apply, if already applied just return

public/app/core/components/DynamicImports/SafeDynamicImport.test.tsx

@@ -8,7 +8,7 @@ describe('loadComponentHandler', () => {
     it('then it should return null', () => {
       const error: Error | null = null;
       const pastDelay = false;
-      const element = loadComponentHandler({ error: (error as unknown) as Error, pastDelay });
+      const element = loadComponentHandler({ error: error as unknown as Error, pastDelay });
 
       expect(element).toBe(null);
     });
@@ -28,7 +28,7 @@ describe('loadComponentHandler', () => {
     it('then it should return LoadingChunkPlaceHolder', () => {
       const error: Error | null = null;
       const pastDelay = true;
-      const element = loadComponentHandler({ error: (error as unknown) as Error, pastDelay });
+      const element = loadComponentHandler({ error: error as unknown as Error, pastDelay });
 
       expect(element).toEqual(<LoadingChunkPlaceHolder />);
     });

public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx

@@ -129,11 +129,12 @@ export class FilterByRefIdTransformerEditor extends React.PureComponent<
   }
 }
 
-export const filterFramesByRefIdTransformRegistryItem: TransformerRegistryItem<FilterFramesByRefIdTransformerOptions> = {
-  id: DataTransformerID.filterByRefId,
-  editor: FilterByRefIdTransformerEditor,
-  transformation: standardTransformers.filterFramesByRefIdTransformer,
-  name: 'Filter data by query',
-  description:
-    'Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.',
-};
+export const filterFramesByRefIdTransformRegistryItem: TransformerRegistryItem<FilterFramesByRefIdTransformerOptions> =
+  {
+    id: DataTransformerID.filterByRefId,
+    editor: FilterByRefIdTransformerEditor,
+    transformation: standardTransformers.filterFramesByRefIdTransformer,
+    name: 'Filter data by query',
+    description:
+      'Filter data by query. This is useful if you are sharing the results from a different panel that has many queries and you want to only visualize a subset of that in this panel.',
+  };

public/app/core/components/connectWithCleanUp.tsx

@@ -3,38 +3,40 @@ import { cleanUpAction, StateSelector } from '../actions/cleanUp';
 import React, { ComponentType, FunctionComponent, useEffect } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
-export const connectWithCleanUp = <
-  TStateProps extends {} = {},
-  TDispatchProps = {},
-  TOwnProps = {},
-  State = {},
-  TSelector extends object = {},
-  Statics = {}
->(
-  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
-  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
-  stateSelector: StateSelector<TSelector>
-) => (Component: ComponentType<any>) => {
-  const ConnectedComponent = connect(
-    mapStateToProps,
-    mapDispatchToProps
-    // @ts-ignore
-  )(Component);
+export const connectWithCleanUp =
+  <
+    TStateProps extends {} = {},
+    TDispatchProps = {},
+    TOwnProps = {},
+    State = {},
+    TSelector extends object = {},
+    Statics = {}
+  >(
+    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
+    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
+    stateSelector: StateSelector<TSelector>
+  ) =>
+  (Component: ComponentType<any>) => {
+    const ConnectedComponent = connect(
+      mapStateToProps,
+      mapDispatchToProps
+      // @ts-ignore
+    )(Component);
 
-  const ConnectedComponentWithCleanUp: FunctionComponent = (props) => {
-    const dispatch = useDispatch();
-    useEffect(() => {
-      return function cleanUp() {
-        dispatch(cleanUpAction({ stateSelector }));
-      };
-    }, [dispatch]);
-    // @ts-ignore
-    return <ConnectedComponent {...props} />;
-  };
+    const ConnectedComponentWithCleanUp: FunctionComponent = (props) => {
+      const dispatch = useDispatch();
+      useEffect(() => {
+        return function cleanUp() {
+          dispatch(cleanUpAction({ stateSelector }));
+        };
+      }, [dispatch]);
+      // @ts-ignore
+      return <ConnectedComponent {...props} />;
+    };
 
-  ConnectedComponentWithCleanUp.displayName = `ConnectWithCleanUp(${ConnectedComponent.displayName})`;
-  hoistNonReactStatics(ConnectedComponentWithCleanUp, Component);
-  type Hoisted = typeof ConnectedComponentWithCleanUp & Statics;
+    ConnectedComponentWithCleanUp.displayName = `ConnectWithCleanUp(${ConnectedComponent.displayName})`;
+    hoistNonReactStatics(ConnectedComponentWithCleanUp, Component);
+    type Hoisted = typeof ConnectedComponentWithCleanUp & Statics;
 
-  return ConnectedComponentWithCleanUp as Hoisted;
-};
+    return ConnectedComponentWithCleanUp as Hoisted;
+  };

public/app/core/logs_model.test.ts

@@ -985,10 +985,10 @@ describe('logs volume', () => {
 
   function setup(datasourceSetup: () => void) {
     datasourceSetup();
-    request = ({
+    request = {
       targets: [{ target: 'volume query 1' }, { target: 'volume query 2' }],
       scopedVars: {},
-    } as unknown) as DataQueryRequest<TestDataQuery>;
+    } as unknown as DataQueryRequest<TestDataQuery>;
     volumeProvider = queryLogsVolume(datasource, request, {
       extractLevel: (dataFrame: DataFrame) => {
         return dataFrame.fields[1]!.labels!.level === 'error' ? LogLevel.error : LogLevel.unknown;

public/app/core/reducers/root.test.ts

@@ -7,7 +7,7 @@ import { cleanUpAction } from '../actions/cleanUp';
 import { initialTeamsState, teamsLoaded } from '../../features/teams/state/reducers';
 
 jest.mock('@grafana/runtime', () => ({
-  ...((jest.requireActual('@grafana/runtime') as unknown) as object),
+  ...(jest.requireActual('@grafana/runtime') as unknown as object),
   config: {
     bootData: {
       navTree: [],

public/app/core/services/FetchQueueWorker.test.ts

@@ -7,23 +7,23 @@ import { expect } from '../../../test/lib/common';
 import { GrafanaBootConfig } from '@grafana/runtime';
 
 const getTestContext = (http2Enabled = false) => {
-  const config: GrafanaBootConfig = ({ http2Enabled } as unknown) as GrafanaBootConfig;
+  const config: GrafanaBootConfig = { http2Enabled } as unknown as GrafanaBootConfig;
   const dataUrl = 'http://localhost:3000/api/ds/query?=abc';
   const apiUrl = 'http://localhost:3000/api/alerts?state=all';
   const updates: Subject<FetchQueueUpdate> = new Subject<FetchQueueUpdate>();
 
-  const queueMock: FetchQueue = ({
+  const queueMock: FetchQueue = {
     add: jest.fn(),
     setInProgress: jest.fn(),
     setDone: jest.fn(),
     getUpdates: () => updates.asObservable(),
-  } as unknown) as FetchQueue;
+  } as unknown as FetchQueue;
 
   const addMock = jest.fn();
-  const responseQueueMock: ResponseQueue = ({
+  const responseQueueMock: ResponseQueue = {
     add: addMock,
     getResponses: jest.fn(),
-  } as unknown) as ResponseQueue;
+  } as unknown as ResponseQueue;
 
   new FetchQueueWorker(queueMock, responseQueueMock, config);
 

public/app/core/services/ResponseQueue.test.ts

@@ -17,22 +17,22 @@ const getTestContext = () => {
     status: 200,
     statusText: 'OK',
     ok: true,
-    headers: (null as unknown) as Headers,
+    headers: null as unknown as Headers,
     redirected: false,
-    type: (null as unknown) as ResponseType,
+    type: null as unknown as ResponseType,
     url: options.url,
-    config: (null as unknown) as BackendSrvRequest,
+    config: null as unknown as BackendSrvRequest,
   });
 
   const fetchMock = jest.fn().mockReturnValue(fetchResult);
   const setInProgressMock = jest.fn();
 
-  const queueMock: FetchQueue = ({
+  const queueMock: FetchQueue = {
     add: jest.fn(),
     setInProgress: setInProgressMock,
     setDone: jest.fn(),
     getUpdates: jest.fn(),
-  } as unknown) as FetchQueue;
+  } as unknown as FetchQueue;
 
   const responseQueue = new ResponseQueue(queueMock, fetchMock);
 

public/app/core/services/__mocks__/backend_srv.ts

@@ -26,7 +26,7 @@ function makePromResponse() {
   };
 }
 
-export const backendSrv = ({
+export const backendSrv = {
   get: jest.fn(),
   getDashboardByUid: jest.fn(),
   getFolderByUid: jest.fn(),
@@ -38,6 +38,6 @@ export const backendSrv = ({
   fetch: (options: BackendSrvRequest) => {
     return of(makePromResponse() as FetchResponse);
   },
-} as unknown) as BackendSrv;
+} as unknown as BackendSrv;
 
 export const getBackendSrv = jest.fn().mockReturnValue(backendSrv);

public/app/core/services/echo/backends/sentry/SentryBackend.test.ts

@@ -85,8 +85,8 @@ describe('SentryEchoBackend', () => {
     backend.transports = [{ sendEvent: jest.fn() }, { sendEvent: jest.fn() }];
     const event: SentryEchoEvent = {
       type: EchoEventType.Sentry,
-      payload: ({ foo: 'bar' } as unknown) as SentryEvent,
-      meta: ({} as unknown) as EchoMeta,
+      payload: { foo: 'bar' } as unknown as SentryEvent,
+      meta: {} as unknown as EchoMeta,
     };
     backend.addEvent(event);
     backend.transports.forEach((transport) => {

public/app/core/services/echo/backends/sentry/transports/CustomEndpointTransport.test.ts

@@ -41,9 +41,9 @@ describe('CustomEndpointTransport', () => {
     const rateLimiterResponse = {
       status: 429,
       ok: false,
-      headers: (new Headers({
+      headers: new Headers({
         'Retry-After': '1', // 1 second
-      }) as any) as Headers,
+      }) as any as Headers,
     } as Response;
     fetchSpy.mockResolvedValueOnce(rateLimiterResponse).mockResolvedValueOnce({ status: 200 } as Response);
     const transport = new CustomEndpointTransport({ endpoint: '/log' });
@@ -66,9 +66,9 @@ describe('CustomEndpointTransport', () => {
     const rateLimiterResponse = {
       status: 429,
       ok: false,
-      headers: (new Headers({
+      headers: new Headers({
         'Retry-After': '1', // 1 second
-      }) as any) as Headers,
+      }) as any as Headers,
     } as Response;
     fetchSpy.mockResolvedValueOnce(rateLimiterResponse).mockResolvedValueOnce({ status: 200 } as Response);
     const transport = new CustomEndpointTransport({ endpoint: '/log' });

public/app/core/services/withFocusedPanelId.ts

@@ -3,7 +3,7 @@ export function withFocusedPanel(fn: (panelId: number) => void) {
     const elements = document.querySelectorAll(':hover');
 
     for (let i = elements.length - 1; i > 0; i--) {
-      const element = (elements[i] as unknown) as HTMLElement;
+      const element = elements[i] as unknown as HTMLElement;
       if (element.dataset?.panelid) {
         fn(parseInt(element.dataset?.panelid, 10));
       }

public/app/core/specs/backend_srv.test.ts

@@ -36,18 +36,18 @@ const getTestContext = (overides?: object) => {
     return of(mockedResponse);
   });
 
-  const appEventsMock: EventBusExtended = ({
+  const appEventsMock: EventBusExtended = {
     emit: jest.fn(),
     publish: jest.fn(),
-  } as any) as EventBusExtended;
+  } as any as EventBusExtended;
 
-  const user: User = ({
+  const user: User = {
     isSignedIn: props.isSignedIn,
     orgId: props.orgId,
-  } as any) as User;
-  const contextSrvMock: ContextSrv = ({
+  } as any as User;
+  const contextSrvMock: ContextSrv = {
     user,
-  } as any) as ContextSrv;
+  } as any as ContextSrv;
   const logoutMock = jest.fn();
   const parseRequestOptionsMock = jest.fn().mockImplementation((options) => options);
 

public/app/core/specs/flatten.test.ts

@@ -12,7 +12,7 @@ describe('flatten', () => {
           },
         },
       },
-      (null as unknown) as { delimiter?: any; maxDepth?: any; safe?: any }
+      null as unknown as { delimiter?: any; maxDepth?: any; safe?: any }
     );
 
     expect(flattened['level1']).toBe('level1-value');

public/app/core/specs/table_model.test.ts

@@ -184,13 +184,13 @@ describe('mergeTables', () => {
       columns: [{ text: 'Time' }, { text: 'Label Key 1' }, { text: 'Value' }],
       rows: [[time, 'Label Value 1', 42]],
     }),
-    ({
+    {
       target: 'series1',
       datapoints: [
         [12.12, time],
         [14.44, time + 1],
       ],
-    } as any) as TableModel,
+    } as any as TableModel,
   ];
 
   it('should return the single table as is', () => {

public/app/core/utils/explore.test.ts

@@ -223,7 +223,7 @@ describe('state functions', () => {
 });
 
 describe('getExploreUrl', () => {
-  const args = ({
+  const args = {
     panel: {
       getSavedId: () => 1,
       targets: [{ refId: 'A', expr: 'query1', legendFormat: 'legendFormat1' }],
@@ -239,7 +239,7 @@ describe('getExploreUrl', () => {
     timeSrv: {
       timeRangeForUrl: () => '1',
     },
-  } as unknown) as GetExploreUrlArguments;
+  } as unknown as GetExploreUrlArguments;
 
   it('should omit legendFormat in explore url', () => {
     expect(getExploreUrl(args).then((data) => expect(data).not.toMatch(/legendFormat1/g)));

public/app/core/utils/fetch.test.ts

@@ -130,7 +130,7 @@ describe('parseCredentials', () => {
 });
 
 describe('parseResponseBody', () => {
-  const rsp = ({} as unknown) as Response;
+  const rsp = {} as unknown as Response;
   it('parses json', async () => {
     const value = { hello: 'world' };
     const body = await parseResponseBody(

public/app/core/utils/object.ts

@@ -3,7 +3,7 @@
 /** @returns a deep clone of the object, but with any null value removed */
 export function sortedDeepCloneWithoutNulls<T>(value: T): T {
   if (isArray(value)) {
-    return (value.map(sortedDeepCloneWithoutNulls) as unknown) as T;
+    return value.map(sortedDeepCloneWithoutNulls) as unknown as T;
   }
   if (isPlainObject(value)) {
     return Object.keys(value)

public/app/core/utils/richHistory.test.ts

@@ -161,7 +161,7 @@ describe('richHistory', () => {
       expect(history.filter((h) => !h.starred)).toHaveLength(notStarredItemsInHistory);
 
       const { richHistory: newHistory } = addToRichHistory(
-        (history as any) as RichHistoryQuery[],
+        history as any as RichHistoryQuery[],
         mock.storedHistory[0].datasourceId,
         mock.storedHistory[0].datasourceName,
         [{ expr: 'query1', maxLines: null, refId: 'A' } as DataQuery, { expr: 'query2', refId: 'B' } as DataQuery],

public/app/core/utils/ticks.ts

@@ -201,7 +201,7 @@ export function getPrecision(num: number): number {
  * Get decimal precision of number stored as a string ("3.14" => 2)
  */
 export function getStringPrecision(num: string): number {
-  if (isNaN((num as unknown) as number)) {
+  if (isNaN(num as unknown as number)) {
     return 0;
   }
 

public/app/core/utils/tracing.ts

@@ -36,9 +36,9 @@ export function getNonOverlappingDuration(ranges: Array<[number, number]>): numb
  * span is missing but other spans are it's children. This is more generic because it needs to allow iterating over
  * both arrays and dataframe views.
  */
-export function makeSpanMap<T>(
-  getSpan: (index: number) => { span: T; id: string; parentIds: string[] } | undefined
-): { [id: string]: { span: T; children: string[] } } {
+export function makeSpanMap<T>(getSpan: (index: number) => { span: T; id: string; parentIds: string[] } | undefined): {
+  [id: string]: { span: T; children: string[] };
+} {
   const spanMap: { [id: string]: { span?: T; children: string[] } } = {};
 
   let span;

public/app/features/admin/state/reducers.test.ts

@@ -77,7 +77,7 @@ describe('LDAP page reducer', () => {
                 available: true,
                 host: 'localhost',
                 port: 389,
-                error: (null as unknown) as string,
+                error: null as unknown as string,
               },
             ])
           )
@@ -88,7 +88,7 @@ describe('LDAP page reducer', () => {
                 available: true,
                 host: 'localhost',
                 port: 389,
-                error: (null as unknown) as string,
+                error: null as unknown as string,
               },
             ],
             ldapError: undefined,

public/app/features/admin/state/reducers.ts

@@ -189,14 +189,8 @@ export const userListAdminSlice = createSlice({
   },
 });
 
-export const {
-  usersFetched,
-  usersFetchBegin,
-  usersFetchEnd,
-  queryChanged,
-  pageChanged,
-  filterChanged,
-} = userListAdminSlice.actions;
+export const { usersFetched, usersFetchBegin, usersFetchEnd, queryChanged, pageChanged, filterChanged } =
+  userListAdminSlice.actions;
 export const userListAdminReducer = userListAdminSlice.reducer;
 
 export default {

public/app/features/alerting/getAlertingValidationMessage.test.ts

@@ -14,8 +14,8 @@ describe('getAlertingValidationMessage', () => {
   describe('when called with some targets containing template variables', () => {
     it('then it should return false', async () => {
       let call = 0;
-      const datasource: DataSourceApi = ({
-        meta: ({ alerting: true } as any) as PluginMeta,
+      const datasource: DataSourceApi = {
+        meta: { alerting: true } as any as PluginMeta,
         targetContainsTemplate: () => {
           if (call === 0) {
             call++;
@@ -25,7 +25,7 @@ describe('getAlertingValidationMessage', () => {
         },
         name: 'some name',
         uid: 'some uid',
-      } as any) as DataSourceApi;
+      } as any as DataSourceApi;
       const getMock = jest.fn().mockResolvedValue(datasource);
       const datasourceSrv: DataSourceSrv = {
         get: (ref: DataSourceRef) => {
@@ -55,16 +55,16 @@ describe('getAlertingValidationMessage', () => {
 
   describe('when called with some targets using a datasource that does not support alerting', () => {
     it('then it should return false', async () => {
-      const alertingDatasource: DataSourceApi = ({
-        meta: ({ alerting: true } as any) as PluginMeta,
+      const alertingDatasource: DataSourceApi = {
+        meta: { alerting: true } as any as PluginMeta,
         targetContainsTemplate: () => false,
         name: 'alertingDatasource',
-      } as any) as DataSourceApi;
-      const datasource: DataSourceApi = ({
-        meta: ({ alerting: false } as any) as PluginMeta,
+      } as any as DataSourceApi;
+      const datasource: DataSourceApi = {
+        meta: { alerting: false } as any as PluginMeta,
         targetContainsTemplate: () => false,
         name: 'datasource',
-      } as any) as DataSourceApi;
+      } as any as DataSourceApi;
 
       const datasourceSrv: DataSourceSrv = {
         get: (name: string) => {
@@ -96,11 +96,11 @@ describe('getAlertingValidationMessage', () => {
 
   describe('when called with all targets containing template variables', () => {
     it('then it should return false', async () => {
-      const datasource: DataSourceApi = ({
-        meta: ({ alerting: true } as any) as PluginMeta,
+      const datasource: DataSourceApi = {
+        meta: { alerting: true } as any as PluginMeta,
         targetContainsTemplate: () => true,
         name: 'some name',
-      } as any) as DataSourceApi;
+      } as any as DataSourceApi;
       const getMock = jest.fn().mockResolvedValue(datasource);
       const datasourceSrv: DataSourceSrv = {
         get: (ref: DataSourceRef) => {
@@ -130,12 +130,12 @@ describe('getAlertingValidationMessage', () => {
 
   describe('when called with all targets using a datasource that does not support alerting', () => {
     it('then it should return false', async () => {
-      const datasource: DataSourceApi = ({
-        meta: ({ alerting: false } as any) as PluginMeta,
+      const datasource: DataSourceApi = {
+        meta: { alerting: false } as any as PluginMeta,
         targetContainsTemplate: () => false,
         name: 'some name',
         uid: 'theid',
-      } as any) as DataSourceApi;
+      } as any as DataSourceApi;
       const getMock = jest.fn().mockResolvedValue(datasource);
       const datasourceSrv: DataSourceSrv = {
         get: (ref: DataSourceRef) => {
@@ -165,11 +165,11 @@ describe('getAlertingValidationMessage', () => {
 
   describe('when called with transformations', () => {
     it('then it should return false', async () => {
-      const datasource: DataSourceApi = ({
-        meta: ({ alerting: true } as any) as PluginMeta,
+      const datasource: DataSourceApi = {
+        meta: { alerting: true } as any as PluginMeta,
         targetContainsTemplate: () => false,
         name: 'some name',
-      } as any) as DataSourceApi;
+      } as any as DataSourceApi;
       const getMock = jest.fn().mockResolvedValue(datasource);
       const datasourceSrv: DataSourceSrv = {
         get: (ref: DataSourceRef) => {

public/app/features/alerting/state/reducers.ts

@@ -111,11 +111,8 @@ const notificationChannelSlice = createSlice({
 
 export const { loadAlertRules, loadedAlertRules, setSearchQuery } = alertRulesSlice.actions;
 
-export const {
-  setNotificationChannels,
-  notificationChannelLoaded,
-  resetSecureField,
-} = notificationChannelSlice.actions;
+export const { setNotificationChannels, notificationChannelLoaded, resetSecureField } =
+  notificationChannelSlice.actions;
 
 export const alertRulesReducer = alertRulesSlice.reducer;
 export const notificationChannelReducer = notificationChannelSlice.reducer;

public/app/features/alerting/unified/AlertGroups.tsx

@@ -27,8 +27,11 @@ const AlertGroups = () => {
   const styles = useStyles2(getStyles);
 
   const alertGroups = useUnifiedAlertingSelector((state) => state.amAlertGroups);
-  const { loading, error, result: results = [] } =
-    alertGroups[alertManagerSourceName || ''] ?? initialAsyncRequestState;
+  const {
+    loading,
+    error,
+    result: results = [],
+  } = alertGroups[alertManagerSourceName || ''] ?? initialAsyncRequestState;
 
   const groupedAlerts = useGroupedAlerts(results, groupBy);
   const filteredAlertGroups = useFilteredAmGroups(groupedAlerts);

public/app/features/alerting/unified/AmRoutes.tsx

@@ -39,8 +39,11 @@ const AmRoutes: FC = () => {
     fetchConfig();
   }, [fetchConfig]);
 
-  const { result, loading: resultLoading, error: resultError } =
-    (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState;
+  const {
+    result,
+    loading: resultLoading,
+    error: resultError,
+  } = (alertManagerSourceName && amConfigs[alertManagerSourceName]) || initialAsyncRequestState;
 
   const config = result?.alertmanager_config;
   const [rootRoute, id2ExistingRoute] = useMemo(() => amRouteToFormAmRoute(config?.route), [config?.route]);

public/app/features/alerting/unified/PanelAlertTabContent.test.tsx

@@ -148,7 +148,7 @@ const dashboard = {
   },
 } as DashboardModel;
 
-const panel = ({
+const panel = {
   datasource: {
     type: 'prometheus',
     uid: dataSources.prometheus.uid,
@@ -161,7 +161,7 @@ const panel = ({
       refId: 'A',
     },
   ],
-} as any) as PanelModel;
+} as any as PanelModel;
 
 const ui = {
   row: byTestId('row'),
@@ -184,11 +184,11 @@ describe('PanelAlertTabContent', () => {
   });
 
   it('Will take into account panel maxDataPoints', async () => {
-    await renderAlertTabContent(dashboard, ({
+    await renderAlertTabContent(dashboard, {
       ...panel,
       maxDataPoints: 100,
       interval: '10s',
-    } as any) as PanelModel);
+    } as any as PanelModel);
 
     const button = await ui.createButton.find();
     const href = button.href;
@@ -210,12 +210,12 @@ describe('PanelAlertTabContent', () => {
   });
 
   it('Will work with default datasource', async () => {
-    await renderAlertTabContent(dashboard, ({
+    await renderAlertTabContent(dashboard, {
       ...panel,
       datasource: undefined,
       maxDataPoints: 100,
       interval: '10s',
-    } as any) as PanelModel);
+    } as any as PanelModel);
 
     const button = await ui.createButton.find();
     const href = button.href;
@@ -237,12 +237,12 @@ describe('PanelAlertTabContent', () => {
   });
 
   it('Will take into account datasource minInterval', async () => {
-    ((getDatasourceSrv() as any) as MockDataSourceSrv).datasources[dataSources.prometheus.uid].interval = '7m';
+    (getDatasourceSrv() as any as MockDataSourceSrv).datasources[dataSources.prometheus.uid].interval = '7m';
 
-    await renderAlertTabContent(dashboard, ({
+    await renderAlertTabContent(dashboard, {
       ...panel,
       maxDataPoints: 100,
-    } as any) as PanelModel);
+    } as any as PanelModel);
 
     const button = await ui.createButton.find();
     const href = button.href;

public/app/features/alerting/unified/Receivers.tsx

@@ -25,8 +25,11 @@ const Receivers: FC = () => {
 
   const configRequests = useUnifiedAlertingSelector((state) => state.amConfigs);
 
-  const { result: config, loading, error } =
-    (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState;
+  const {
+    result: config,
+    loading,
+    error,
+  } = (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState;
   const receiverTypes = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);
 
   const shouldLoadConfig = isRoot || !config;

public/app/features/alerting/unified/RuleEditor.test.tsx

@@ -334,9 +334,9 @@ describe('RuleEditor', () => {
       }),
     };
 
-    const backendSrv = ({
+    const backendSrv = {
       getFolderByUid,
-    } as any) as BackendSrv;
+    } as any as BackendSrv;
     setBackendSrv(backendSrv);
     setDataSourceSrv(new MockDataSourceSrv(dataSources));
     mocks.api.setRulerRuleGroup.mockResolvedValue();

public/app/features/alerting/unified/components/admin/AlertmanagerConfig.tsx

@@ -29,8 +29,11 @@ export default function AlertmanagerConfig(): JSX.Element {
 
   const configRequests = useUnifiedAlertingSelector((state) => state.amConfigs);
 
-  const { result: config, loading: isLoadingConfig, error: loadingError } =
-    (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState;
+  const {
+    result: config,
+    loading: isLoadingConfig,
+    error: loadingError,
+  } = (alertManagerSourceName && configRequests[alertManagerSourceName]) || initialAsyncRequestState;
 
   useEffect(() => {
     if (alertManagerSourceName) {

public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx

@@ -134,16 +134,15 @@ export const AmRoutesTable: FC<AmRoutesTableProps> = ({
         ]),
   ];
 
-  const filteredRoutes = useMemo(() => getFilteredRoutes(routes, filters?.queryString, filters?.contactPoint), [
-    routes,
-    filters,
-  ]);
-
-  const dynamicTableRoutes = useMemo(() => prepareItems(isAddMode ? routes : filteredRoutes), [
-    isAddMode,
-    routes,
-    filteredRoutes,
-  ]);
+  const filteredRoutes = useMemo(
+    () => getFilteredRoutes(routes, filters?.queryString, filters?.contactPoint),
+    [routes, filters]
+  );
+
+  const dynamicTableRoutes = useMemo(
+    () => prepareItems(isAddMode ? routes : filteredRoutes),
+    [isAddMode, routes, filteredRoutes]
+  );
 
   // expand the last item when adding
   useEffect(() => {

public/app/features/alerting/unified/components/amroutes/MuteTimingTimeRange.tsx

@@ -13,7 +13,11 @@ export const MuteTimingTimeRange: FC<Props> = ({ intervalIndex }) => {
   const styles = useStyles2(getStyles);
   const { register, formState } = useFormContext<MuteTimingFields>();
 
-  const { fields: timeRanges, append: addTimeRange, remove: removeTimeRange } = useFieldArray<MuteTimingFields>({
+  const {
+    fields: timeRanges,
+    append: addTimeRange,
+    remove: removeTimeRange,
+  } = useFieldArray<MuteTimingFields>({
     name: `time_intervals.${intervalIndex}.times`,
   });
 

public/app/features/alerting/unified/components/receivers/form/ChannelOptions.tsx

@@ -62,9 +62,9 @@ export function ChannelOptions<R extends ChannelValues>({
           );
         }
 
-        const error: FieldError | DeepMap<any, FieldError> | undefined = ((option.secure
-          ? errors?.secureSettings
-          : errors?.settings) as DeepMap<any, FieldError> | undefined)?.[option.propertyName];
+        const error: FieldError | DeepMap<any, FieldError> | undefined = (
+          (option.secure ? errors?.secureSettings : errors?.settings) as DeepMap<any, FieldError> | undefined
+        )?.[option.propertyName];
 
         const defaultValue = defaultValues?.settings?.[option.propertyName];
 

public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx

@@ -15,7 +15,11 @@ export interface ExpressionEditorProps {
 export const ExpressionEditor: FC<ExpressionEditorProps> = ({ value, onChange, dataSourceName }) => {
   const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);
   const [query, setQuery] = useState(mapToQuery({ refId: 'A', hide: false }, value));
-  const { error, loading, value: dataSource } = useAsync(() => {
+  const {
+    error,
+    loading,
+    value: dataSource,
+  } = useAsync(() => {
     return getDataSourceSrv().get(dataSourceName);
   }, [dataSourceName]);
 

public/app/features/alerting/unified/components/rule-editor/SelectWIthAdd.tsx

@@ -37,10 +37,10 @@ export const SelectWithAdd: FC<Props> = ({
     }
   }, [custom]);
 
-  const _options = useMemo((): Array<SelectableValue<string>> => [...options, { value: '__add__', label: addLabel }], [
-    options,
-    addLabel,
-  ]);
+  const _options = useMemo(
+    (): Array<SelectableValue<string>> => [...options, { value: '__add__', label: addLabel }],
+    [options, addLabel]
+  );
 
   if (isCustom) {
     return (

public/app/features/alerting/unified/components/rules/CloudRules.tsx

@@ -18,10 +18,10 @@ export const CloudRules: FC<Props> = ({ namespaces, expandAll }) => {
   const rules = useUnifiedAlertingSelector((state) => state.promRules);
   const rulesDataSources = useMemo(getRulesDataSources, []);
 
-  const dataSourcesLoading = useMemo(() => rulesDataSources.filter((ds) => rules[ds.name]?.loading), [
-    rules,
-    rulesDataSources,
-  ]);
+  const dataSourcesLoading = useMemo(
+    () => rulesDataSources.filter((ds) => rules[ds.name]?.loading),
+    [rules, rulesDataSources]
+  );
 
   return (
     <section className={styles.wrapper}>

public/app/features/alerting/unified/hooks/useRuleSourcesWithRuler.ts

@@ -16,7 +16,8 @@ export function useRulesSourcesWithRuler(): DataSourceInstanceSettings[] {
       .forEach((ds) => dispatch(checkIfLotexSupportsEditingRulesAction(ds.name)));
   }, [dispatch, checkEditingRequests]);
 
-  return useMemo(() => getRulesDataSources().filter((ds) => checkEditingRequests[ds.name]?.result), [
-    checkEditingRequests,
-  ]);
+  return useMemo(
+    () => getRulesDataSources().filter((ds) => checkEditingRequests[ds.name]?.result),
+    [checkEditingRequests]
+  );
 }

public/app/features/alerting/unified/mocks.ts

@@ -45,7 +45,7 @@ export function mockDataSource<T extends DataSourceJsonData = DataSourceJsonData
     name: `Prometheus-${id}`,
     access: 'proxy',
     jsonData: {} as T,
-    meta: ({
+    meta: {
       info: {
         logos: {
           small: 'https://prometheus.io/assets/prometheus_logo_grey.svg',
@@ -53,7 +53,7 @@ export function mockDataSource<T extends DataSourceJsonData = DataSourceJsonData
         },
       },
       ...meta,
-    } as any) as DataSourcePluginMeta,
+    } as any as DataSourcePluginMeta,
     ...partial,
   };
 }
@@ -280,7 +280,7 @@ export class MockDataSourceSrv implements DataSourceSrv {
   getInstanceSettings(nameOrUid: string | null | undefined): DataSourceInstanceSettings | undefined {
     return (
       DatasourceSrv.prototype.getInstanceSettings.call(this, nameOrUid) ||
-      (({ meta: { info: { logos: {} } } } as unknown) as DataSourceInstanceSettings)
+      ({ meta: { info: { logos: {} } } } as unknown as DataSourceInstanceSettings)
     );
   }
 

public/app/features/alerting/unified/mocks/grafana-notifiers.ts

@@ -322,8 +322,7 @@ export const grafanaNotifiersMock: NotifierDTO[] = [
     name: 'Threema Gateway',
     heading: 'Threema Gateway settings',
     description: 'Sends notifications to Threema using Threema Gateway (Basic IDs)',
-    info:
-      'Notifications can be configured for any Threema Gateway ID of type "Basic". End-to-End IDs are not currently supported.The Threema Gateway ID can be set up at https://gateway.threema.ch/.',
+    info: 'Notifications can be configured for any Threema Gateway ID of type "Basic". End-to-End IDs are not currently supported.The Threema Gateway ID can be set up at https://gateway.threema.ch/.',
     options: [
       {
         element: 'input',

public/app/features/alerting/unified/state/AlertingQueryRunner.test.ts

@@ -212,16 +212,16 @@ type MockBackendSrvConfig = {
 };
 
 const mockBackendSrv = ({ fetch }: MockBackendSrvConfig): BackendSrv => {
-  return ({
+  return {
     fetch,
     resolveCancelerIfExists: jest.fn(),
-  } as unknown) as BackendSrv;
+  } as unknown as BackendSrv;
 };
 
 const mockDataSourceSrv = (dsApi?: Partial<DataSourceApi>) => {
-  return ({
+  return {
     get: () => Promise.resolve(dsApi ?? {}),
-  } as unknown) as DataSourceSrv;
+  } as unknown as DataSourceSrv;
 };
 
 const expectDataFrameWithValues = ({ time, values }: { time: number[]; values: number[] }): DataFrame => {

public/app/features/alerting/unified/utils/redux.ts

@@ -75,7 +75,7 @@ export function createAsyncSlice<T, ThunkArg = void, ThunkApiConfig = {}>(
     reducers: {},
     extraReducers: (builder) =>
       builder.addDefaultCase((state, action) =>
-        requestStateReducer(asyncThunk, state, (action as unknown) as AsyncRequestAction<T>)
+        requestStateReducer(asyncThunk, state, action as unknown as AsyncRequestAction<T>)
       ),
   });
 }
@@ -97,7 +97,7 @@ export function createAsyncMapSlice<T, ThunkArg = void, ThunkApiConfig = {}>(
     extraReducers: (builder) =>
       builder.addDefaultCase((state, action) => {
         if (isAsyncThunkAction(asyncThunk)(action)) {
-          const asyncAction = (action as unknown) as AsyncRequestAction<T>;
+          const asyncAction = action as unknown as AsyncRequestAction<T>;
           const entityId = getEntityId(asyncAction.meta.arg);
           return {
             ...state,

public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts

@@ -17,7 +17,7 @@ jest.mock('app/core/store', () => {
 });
 
 jest.mock('@grafana/runtime', () => ({
-  ...((jest.requireActual('@grafana/runtime') as unknown) as object),
+  ...(jest.requireActual('@grafana/runtime') as unknown as object),
   getDataSourceSrv: () => {
     return {
       get: (v: any) => {

public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts

@@ -176,7 +176,7 @@ export class DashboardExporter {
       if (isQuery(variable)) {
         templateizeDatasourceUsage(variable);
         variable.options = [];
-        variable.current = ({} as unknown) as VariableOption;
+        variable.current = {} as unknown as VariableOption;
         variable.refresh =
           variable.refresh !== VariableRefresh.never ? variable.refresh : VariableRefresh.onDashboardLoad;
       }

public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx

@@ -93,7 +93,7 @@ describe('DashboardPrompt', () => {
     describe('when called without current dashboard', () => {
       it('then it should return true', () => {
         const { original } = getTestContext();
-        expect(ignoreChanges((null as unknown) as DashboardModel, original)).toBe(true);
+        expect(ignoreChanges(null as unknown as DashboardModel, original)).toBe(true);
       });
     });
 

public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx

@@ -31,7 +31,7 @@ describe('AutoRefreshIntervals', () => {
 
   describe('when component is mounted without refreshIntervals', () => {
     it('then default intervals should be shown', () => {
-      setupTestContext({ refreshIntervals: (null as unknown) as string[] });
+      setupTestContext({ refreshIntervals: null as unknown as string[] });
 
       expect(screen.getByRole('textbox')).toHaveValue('5s,10s,30s,1m,5m,15m,30m,1h,2h,1d');
     });
@@ -96,9 +96,9 @@ describe('getValidIntervals', () => {
       const emptyIntervals = ['', '5s', ' ', '10s', '  '];
       const dependencies = {
         getTimeSrv: () =>
-          (({
+          ({
             getValidIntervals: (intervals: any) => intervals,
-          } as unknown) as TimeSrv),
+          } as unknown as TimeSrv),
       };
 
       const result = getValidIntervals(emptyIntervals, dependencies);
@@ -112,9 +112,9 @@ describe('getValidIntervals', () => {
       const duplicateIntervals = ['5s', '10s', '1m', '5s', '30s', '10s', '5s', '2m'];
       const dependencies = {
         getTimeSrv: () =>
-          (({
+          ({
             getValidIntervals: (intervals: any) => intervals,
-          } as unknown) as TimeSrv),
+          } as unknown as TimeSrv),
       };
 
       const result = getValidIntervals(duplicateIntervals, dependencies);
@@ -128,9 +128,9 @@ describe('getValidIntervals', () => {
       const duplicateIntervals = [' 5s', '10s ', ' 1m ', ' 3 0 s ', '   2      m     '];
       const dependencies = {
         getTimeSrv: () =>
-          (({
+          ({
             getValidIntervals: (intervals: any) => intervals,
-          } as unknown) as TimeSrv),
+          } as unknown as TimeSrv),
       };
 
       const result = getValidIntervals(duplicateIntervals, dependencies);
@@ -145,9 +145,9 @@ describe('validateIntervals', () => {
     it('then it should return null', () => {
       const dependencies = {
         getTimeSrv: () =>
-          (({
+          ({
             getValidIntervals: (intervals: any) => intervals,
-          } as unknown) as TimeSrv),
+          } as unknown as TimeSrv),
       };
 
       const result = validateIntervals(defaultIntervals, dependencies);
@@ -160,11 +160,11 @@ describe('validateIntervals', () => {
     it('then it should return the exception message', () => {
       const dependencies = {
         getTimeSrv: () =>
-          (({
+          ({
             getValidIntervals: () => {
               throw new Error('Some error');
             },
-          } as unknown) as TimeSrv),
+          } as unknown as TimeSrv),
       };
 
       const result = validateIntervals(defaultIntervals, dependencies);

public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx

@@ -10,7 +10,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 const setupTestContext = (options: Partial<Props>) => {
   const defaults: Props = {
-    dashboard: ({
+    dashboard: {
       title: 'test dashboard title',
       description: 'test dashboard description',
       timepicker: {
@@ -22,7 +22,7 @@ const setupTestContext = (options: Partial<Props>) => {
         folderTitle: 'test',
       },
       timezone: 'utc',
-    } as unknown) as DashboardModel,
+    } as unknown as DashboardModel,
     updateTimeZone: jest.fn(),
     updateWeekStart: jest.fn(),
   };

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -47,24 +47,30 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   const labelCategory = item.category?.filter((c) => c !== item.name);
   let editor;
 
-  // eslint-disable-next-line react/display-name
-  const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
-    <HorizontalGroup justify="space-between">
-      <Label category={labelCategory} description={includeDescription ? item.description : undefined}>
-        <Highlighter
-          textToHighlight={item.name}
-          searchWords={[searchQuery]}
-          highlightClassName={'search-fragment-highlight'}
-        />
-        {!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
-      </Label>
-      {!isSystemOverride && (
-        <div>
-          <IconButton name="times" onClick={onRemove} />
-        </div>
-      )}
-    </HorizontalGroup>
-  );
+  /* eslint-disable react/display-name */
+  const renderLabel =
+    (includeDescription = true, includeCounter = false) =>
+    (isExpanded = false) =>
+      (
+        <HorizontalGroup justify="space-between">
+          <Label category={labelCategory} description={includeDescription ? item.description : undefined}>
+            <Highlighter
+              textToHighlight={item.name}
+              searchWords={[searchQuery]}
+              highlightClassName={'search-fragment-highlight'}
+            />
+            {!isExpanded && includeCounter && item.getItemsCount && (
+              <Counter value={item.getItemsCount(property.value)} />
+            )}
+          </Label>
+          {!isSystemOverride && (
+            <div>
+              <IconButton name="times" onClick={onRemove} />
+            </div>
+          )}
+        </HorizontalGroup>
+      );
+  /* eslint-enable react/display-name */
 
   if (isCollapsible) {
     editor = (

public/app/features/dashboard/components/PanelEditor/utils.test.ts

@@ -25,21 +25,21 @@ describe('standardFieldConfigEditorRegistry', () => {
 describe('supportsDataQuery', () => {
   describe('when called with plugin that supports queries', () => {
     it('then it should return true', () => {
-      const plugin = ({ meta: { skipDataQuery: false } } as unknown) as PanelPlugin;
+      const plugin = { meta: { skipDataQuery: false } } as unknown as PanelPlugin;
       expect(supportsDataQuery(plugin)).toBe(true);
     });
   });
 
   describe('when called with plugin that does not support queries', () => {
     it('then it should return false', () => {
-      const plugin = ({ meta: { skipDataQuery: true } } as unknown) as PanelPlugin;
+      const plugin = { meta: { skipDataQuery: true } } as unknown as PanelPlugin;
       expect(supportsDataQuery(plugin)).toBe(false);
     });
   });
 
   describe('when called without skipDataQuery', () => {
     it('then it should return false', () => {
-      const plugin = ({ meta: {} } as unknown) as PanelPlugin;
+      const plugin = { meta: {} } as unknown as PanelPlugin;
       expect(supportsDataQuery(plugin)).toBe(false);
     });
   });

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

@@ -197,14 +197,8 @@ export class ShareSnapshot extends PureComponent<Props, State> {
 
   renderStep1() {
     const { onDismiss } = this.props;
-    const {
-      snapshotName,
-      selectedExpireOption,
-      timeoutSeconds,
-      isLoading,
-      sharingButtonText,
-      externalEnabled,
-    } = this.state;
+    const { snapshotName, selectedExpireOption, timeoutSeconds, isLoading, sharingButtonText, externalEnabled } =
+      this.state;
 
     return (
       <>

public/app/features/dashboard/components/ShareModal/utils.test.ts

@@ -31,11 +31,11 @@ describe('buildParams', () => {
   `(
     "when called with search: '$search' and useCurrentTimeRange: '$useCurrentTimeRange' and selectedTheme: '$selectedTheme' and panel: '$panel'then result should be '$expected'",
     ({ search, useCurrentTimeRange, selectedTheme, panel, expected }) => {
-      const range: TimeRange = ({
+      const range: TimeRange = {
         from: 1000,
         to: 2000,
         raw: { from: 'now-6h', to: 'now' },
-      } as unknown) as TimeRange;
+      } as unknown as TimeRange;
       const orgId = '2';
       const result = buildParams({ useCurrentTimeRange, selectedTheme, panel, search, range, orgId });
 

public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts

@@ -49,7 +49,7 @@ describe('historySrv', () => {
     });
 
     it('should return an empty array when not given a dashboard', () => {
-      return historySrv.getHistoryList((null as unknown) as DashboardModel, historyListOpts).then((versions: any) => {
+      return historySrv.getHistoryList(null as unknown as DashboardModel, historyListOpts).then((versions: any) => {
         expect(versions).toEqual([]);
       });
     });

public/app/features/dashboard/components/VersionHistory/utils.test.ts

@@ -125,7 +125,7 @@ describe('getDiffText', () => {
   test.each(cases)(
     'returns a semantic message based on the type of diff, the values and the location of the change',
     (diff: Partial<Diff>, expected: string) => {
-      expect(getDiffText((diff as unknown) as Diff)).toBe(expected);
+      expect(getDiffText(diff as unknown as Diff)).toBe(expected);
     }
   );
 });

public/app/features/dashboard/dashgrid/PanelChrome.test.tsx

@@ -20,19 +20,19 @@ function setupTestContext(options: Partial<Props>) {
   const mockStore = configureMockStore<any, any>();
   const store = mockStore({ dashboard: { panels: [] } });
   const subject: ReplaySubject<PanelData> = new ReplaySubject<PanelData>();
-  const panelQueryRunner = ({
+  const panelQueryRunner = {
     getData: () => subject,
     run: () => {
       subject.next({ state: LoadingState.Done, series: [], timeRange: getDefaultTimeRange() });
     },
-  } as unknown) as PanelQueryRunner;
-  const timeSrv = ({
+  } as unknown as PanelQueryRunner;
+  const timeSrv = {
     timeRange: jest.fn(),
-  } as unknown) as TimeSrv;
+  } as unknown as TimeSrv;
   setTimeSrv(timeSrv);
 
   const defaults: Props = {
-    panel: ({
+    panel: {
       id: 123,
       hasTitle: jest.fn(),
       replaceVariables: jest.fn(),
@@ -40,16 +40,16 @@ function setupTestContext(options: Partial<Props>) {
       getQueryRunner: () => panelQueryRunner,
       getOptions: jest.fn(),
       getDisplayTitle: jest.fn(),
-    } as unknown) as PanelModel,
-    dashboard: ({
+    } as unknown as PanelModel,
+    dashboard: {
       panelInitialized: jest.fn(),
       getTimezone: () => 'browser',
       events: new EventBusSrv(),
-    } as unknown) as DashboardModel,
-    plugin: ({
+    } as unknown as DashboardModel,
+    plugin: {
       meta: { skipDataQuery: false },
       panel: TestPanelComponent,
-    } as unknown) as PanelPlugin,
+    } as unknown as PanelPlugin,
     isViewing: true,
     isEditing: false,
     isInView: false,

public/app/features/dashboard/state/DashboardModel.test.ts

@@ -964,11 +964,11 @@ describe('exitPanelEditor', () => {
   function getTestContext(setPreviousAutoRefresh = false) {
     const panel: any = { destroy: jest.fn() };
     const dashboard = new DashboardModel({});
-    const timeSrvMock = ({
+    const timeSrvMock = {
       pauseAutoRefresh: jest.fn(),
       resumeAutoRefresh: jest.fn(),
       setAutoRefresh: jest.fn(),
-    } as unknown) as TimeSrv;
+    } as unknown as TimeSrv;
     dashboard.startRefresh = jest.fn();
     dashboard.panelInEdit = panel;
     if (setPreviousAutoRefresh) {
@@ -1014,10 +1014,10 @@ describe('exitPanelEditor', () => {
 describe('initEditPanel', () => {
   function getTestContext() {
     const dashboard = new DashboardModel({});
-    const timeSrvMock = ({
+    const timeSrvMock = {
       pauseAutoRefresh: jest.fn(),
       resumeAutoRefresh: jest.fn(),
-    } as unknown) as TimeSrv;
+    } as unknown as TimeSrv;
     setTimeSrv(timeSrvMock);
     return { dashboard, timeSrvMock };
   }

public/app/features/dashboard/state/PanelModel.test.ts

@@ -55,7 +55,7 @@ describe('PanelModel', () => {
       {
         id: 'table',
       },
-      (null as unknown) as ComponentClass<PanelProps>, // react
+      null as unknown as ComponentClass<PanelProps>, // react
       {} // angular
     );
 

public/app/features/dashboard/state/actions.ts

@@ -127,12 +127,16 @@ export const cleanUpDashboardAndVariables = (): ThunkResult<void> => (dispatch,
   dispatch(cancelVariables());
 };
 
-export const updateTimeZoneDashboard = (timeZone: TimeZone): ThunkResult<void> => (dispatch) => {
-  dispatch(updateTimeZoneForSession(timeZone));
-  getTimeSrv().refreshDashboard();
-};
+export const updateTimeZoneDashboard =
+  (timeZone: TimeZone): ThunkResult<void> =>
+  (dispatch) => {
+    dispatch(updateTimeZoneForSession(timeZone));
+    getTimeSrv().refreshDashboard();
+  };
 
-export const updateWeekStartDashboard = (weekStart: string): ThunkResult<void> => (dispatch) => {
-  dispatch(updateWeekStartForSession(weekStart));
-  getTimeSrv().refreshDashboard();
-};
+export const updateWeekStartDashboard =
+  (weekStart: string): ThunkResult<void> =>
+  (dispatch) => {
+    dispatch(updateWeekStartForSession(weekStart));
+    getTimeSrv().refreshDashboard();
+  };