Chore: Upgrade prettier to v3 (#71764)

* Update dependency prettier to v3 (#71586) * Update dependency prettier to v3 * run prettier * ignore prettier update in legacy select scss * update command line arg --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com> * unplug prettier --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2 years ago · 9852b24d61
parent 8320b18b71
commit 9852b24d61
93 changed files with 576 additions and 381 deletions
--- a/.yarn/sdks/prettier/package.json
+++ b/.yarn/sdks/prettier/package.json
@ -1,6 +1,6 @@
 {
  "name": "prettier",
-  "version": "2.8.4-sdk",
+  "version": "3.0.0-sdk",
  "main": "./index.js",
  "type": "commonjs"
 }
--- a/e2e/cloud-plugins-suite/azure-monitor.spec.ts
+++ b/e2e/cloud-plugins-suite/azure-monitor.spec.ts
@ -92,26 +92,62 @@ const addAzureMonitorVariable = (
    .type(`${type.replace('Azure', '').trim()}{enter}`);
  switch (type) {
    case AzureQueryType.ResourceGroupsQuery:
-      e2eSelectors.variableEditor.subscription.input().find('input').type(`${options?.subscription}{enter}`);
+      e2eSelectors.variableEditor.subscription
+        .input()
+        .find('input')
+        .type(`${options?.subscription}{enter}`);
      break;
    case AzureQueryType.LocationsQuery:
-      e2eSelectors.variableEditor.subscription.input().find('input').type(`${options?.subscription}{enter}`);
+      e2eSelectors.variableEditor.subscription
+        .input()
+        .find('input')
+        .type(`${options?.subscription}{enter}`);
      break;
    case AzureQueryType.NamespacesQuery:
-      e2eSelectors.variableEditor.subscription.input().find('input').type(`${options?.subscription}{enter}`);
-      e2eSelectors.variableEditor.resourceGroup.input().find('input').type(`${options?.resourceGroup}{enter}`);
+      e2eSelectors.variableEditor.subscription
+        .input()
+        .find('input')
+        .type(`${options?.subscription}{enter}`);
+      e2eSelectors.variableEditor.resourceGroup
+        .input()
+        .find('input')
+        .type(`${options?.resourceGroup}{enter}`);
      break;
    case AzureQueryType.ResourceNamesQuery:
-      e2eSelectors.variableEditor.subscription.input().find('input').type(`${options?.subscription}{enter}`);
-      e2eSelectors.variableEditor.resourceGroup.input().find('input').type(`${options?.resourceGroup}{enter}`);
-      e2eSelectors.variableEditor.namespace.input().find('input').type(`${options?.namespace}{enter}`);
-      e2eSelectors.variableEditor.region.input().find('input').type(`${options?.region}{enter}`);
+      e2eSelectors.variableEditor.subscription
+        .input()
+        .find('input')
+        .type(`${options?.subscription}{enter}`);
+      e2eSelectors.variableEditor.resourceGroup
+        .input()
+        .find('input')
+        .type(`${options?.resourceGroup}{enter}`);
+      e2eSelectors.variableEditor.namespace
+        .input()
+        .find('input')
+        .type(`${options?.namespace}{enter}`);
+      e2eSelectors.variableEditor.region
+        .input()
+        .find('input')
+        .type(`${options?.region}{enter}`);
      break;
    case AzureQueryType.MetricNamesQuery:
-      e2eSelectors.variableEditor.subscription.input().find('input').type(`${options?.subscription}{enter}`);
-      e2eSelectors.variableEditor.resourceGroup.input().find('input').type(`${options?.resourceGroup}{enter}`);
-      e2eSelectors.variableEditor.namespace.input().find('input').type(`${options?.namespace}{enter}`);
-      e2eSelectors.variableEditor.resource.input().find('input').type(`${options?.resource}{enter}`);
+      e2eSelectors.variableEditor.subscription
+        .input()
+        .find('input')
+        .type(`${options?.subscription}{enter}`);
+      e2eSelectors.variableEditor.resourceGroup
+        .input()
+        .find('input')
+        .type(`${options?.resourceGroup}{enter}`);
+      e2eSelectors.variableEditor.namespace
+        .input()
+        .find('input')
+        .type(`${options?.namespace}{enter}`);
+      e2eSelectors.variableEditor.resource
+        .input()
+        .find('input')
+        .type(`${options?.resource}{enter}`);
      break;
  }
  e2e.pages.Dashboard.Settings.Variables.Edit.General.submitButton().click();
--- a/package.json
+++ b/package.json
@ -31,8 +31,8 @@
    "packages:pack": "mkdir -p ./npm-artifacts && lerna exec --no-private -- yarn pack --out \"../../npm-artifacts/%s-%v.tgz\"",
    "packages:typecheck": "lerna run typecheck",
    "precommit": "yarn run lint-staged",
-    "prettier:check": "prettier --check --list-different=false --loglevel=warn \"**/*.{ts,tsx,scss,md,mdx}\"",
-    "prettier:checkDocs": "prettier --check --list-different=false --loglevel=warn \"docs/**/*.md\" \"*.md\" \"packages/**/*.{ts,tsx,scss,md,mdx}\"",
+    "prettier:check": "prettier --check --list-different=false --log-level=warn \"**/*.{ts,tsx,scss,md,mdx}\"",
+    "prettier:checkDocs": "prettier --check --list-different=false --log-level=warn \"docs/**/*.md\" \"*.md\" \"packages/**/*.{ts,tsx,scss,md,mdx}\"",
    "prettier:write": "prettier --list-different \"**/*.{js,ts,tsx,scss,md,mdx}\" --write",
    "start": "yarn themes:generate && yarn dev --watch",
    "start:noTsCheck": "yarn start --env noTsCheck=1",
@ -223,7 +223,7 @@
    "postcss-loader": "7.3.3",
    "postcss-reporter": "7.0.5",
    "postcss-scss": "4.0.6",
-    "prettier": "2.8.4",
+    "prettier": "3.0.0",
    "react-refresh": "0.14.0",
    "react-select-event": "5.5.1",
    "react-simple-compat": "1.2.3",
@ -450,5 +450,10 @@
  "engines": {
    "node": ">= 18"
  },
-  "packageManager": "yarn@3.6.0"
+  "packageManager": "yarn@3.6.0",
+  "dependenciesMeta": {
+    "prettier@3.0.0": {
+      "unplugged": true
+    }
+  }
 }
--- a/packages/grafana-data/src/events/EventBus.ts
+++ b/packages/grafana-data/src/events/EventBus.ts
@ -113,7 +113,11 @@ class ScopedEventBus implements EventBus {
  filterConfig: EventFilterOptions;

  // The path is not yet exposed, but can be used to indicate nested groups and support faster filtering
-  constructor(public path: string[], private eventBus: EventBus, filter?: EventFilterOptions) {
+  constructor(
+    public path: string[],
+    private eventBus: EventBus,
+    filter?: EventFilterOptions
+  ) {
    this.filterConfig = filter ?? { onlyLocal: false };
  }

--- a/packages/grafana-data/src/panel/PanelPlugin.ts
+++ b/packages/grafana-data/src/panel/PanelPlugin.ts
@ -94,7 +94,7 @@ export type PanelOptionsSupplier<TOptions> = (

 export class PanelPlugin<
  TOptions = any,
-  TFieldConfigOptions extends object = any
+  TFieldConfigOptions extends object = any,
 > extends GrafanaPlugin<PanelPluginMeta> {
  private _defaults?: TOptions;
  private _fieldConfigDefaults: FieldConfigSource<TFieldConfigOptions> = {
--- a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts
+++ b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts
@ -33,7 +33,7 @@ export interface OptionsEditorItem<TOptions, TSettings, TEditorProps, TValue>
 export interface OptionsUIRegistryBuilderAPI<
  TOptions,
  TEditorProps,
-  T extends OptionsEditorItem<TOptions, any, TEditorProps, any>
+  T extends OptionsEditorItem<TOptions, any, TEditorProps, any>,
 > {
  addNumberInput?<TSettings extends NumberFieldConfigSettings = NumberFieldConfigSettings>(
    config: OptionEditorConfig<TOptions, TSettings, number>
@ -80,7 +80,7 @@ export interface OptionsUIRegistryBuilderAPI<
 export abstract class OptionsUIRegistryBuilder<
  TOptions,
  TEditorProps,
-  T extends OptionsEditorItem<TOptions, any, TEditorProps, any>
+  T extends OptionsEditorItem<TOptions, any, TEditorProps, any>,
 > implements OptionsUIRegistryBuilderAPI<TOptions, TEditorProps, T>
 {
  private properties: T[] = [];
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/packages/grafana-data/src/types/datasource.ts
@ -18,7 +18,7 @@ import { DataSourceRef, WithAccessControlMetadata } from '.';

 export interface DataSourcePluginOptionsEditorProps<
  JSONData extends DataSourceJsonData = DataSourceJsonData,
-  SecureJSONData = {}
+  SecureJSONData = {},
 > {
  options: DataSourceSettings<JSONData, SecureJSONData>;
  onOptionsChange: (options: DataSourceSettings<JSONData, SecureJSONData>) => void;
@ -34,7 +34,7 @@ export class DataSourcePlugin<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataSourceQueryType<DSType>,
  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>,
-  TSecureOptions = {}
+  TSecureOptions = {},
 > extends GrafanaPlugin<DataSourcePluginMeta<TOptions>> {
  components: DataSourcePluginComponents<DSType, TQuery, TOptions, TSecureOptions> = {};

@ -155,7 +155,7 @@ export interface DataSourcePluginComponents<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  TSecureOptions = {}
+  TSecureOptions = {},
 > {
  QueryCtrl?: any;
  AnnotationsQueryCtrl?: any;
@ -176,7 +176,7 @@ export interface DataSourcePluginComponents<
 export interface DataSourceConstructor<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > {
  new (instanceSettings: DataSourceInstanceSettings<TOptions>, ...args: any[]): DSType;
 }
@ -197,7 +197,7 @@ type VariableSupport<TQuery extends DataQuery, TOptions extends DataSourceJsonDa
 abstract class DataSourceApi<
  TQuery extends DataQuery = DataQuery,
  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  TQueryImportConfiguration extends Record<string, object> = {}
+  TQueryImportConfiguration extends Record<string, object> = {},
 > {
  /**
   *  Set in constructor
@ -375,7 +375,7 @@ abstract class DataSourceApi<
 export interface MetadataInspectorProps<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > {
  datasource: DSType;

@ -387,7 +387,7 @@ export interface QueryEditorProps<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  TVQuery extends DataQuery = TQuery
+  TVQuery extends DataQuery = TQuery,
 > {
  datasource: DSType;
  query: TVQuery;
@ -419,7 +419,7 @@ export enum ExploreMode {
 export type ExploreQueryFieldProps<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > = QueryEditorProps<DSType, TQuery, TOptions>;

 export interface QueryEditorHelpProps<TQuery extends DataQuery = DataQuery> {
--- a/packages/grafana-data/src/types/variables.ts
+++ b/packages/grafana-data/src/types/variables.ts
@ -32,7 +32,7 @@ export enum VariableSupportType {
 export abstract class VariableSupportBase<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataSourceQueryType<DSType>,
-  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>
+  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>,
 > {
  abstract getType(): VariableSupportType;

@ -50,7 +50,7 @@ export abstract class VariableSupportBase<
 export abstract class StandardVariableSupport<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataSourceQueryType<DSType>,
-  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>
+  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>,
 > extends VariableSupportBase<DSType, TQuery, TOptions> {
  getType(): VariableSupportType {
    return VariableSupportType.Standard;
@ -69,7 +69,7 @@ export abstract class CustomVariableSupport<
  DSType extends DataSourceApi<TQuery, TOptions>,
  VariableQuery extends DataQuery = any,
  TQuery extends DataQuery = DataSourceQueryType<DSType>,
-  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>
+  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>,
 > extends VariableSupportBase<DSType, TQuery, TOptions> {
  getType(): VariableSupportType {
    return VariableSupportType.Custom;
@ -87,7 +87,7 @@ export abstract class CustomVariableSupport<
 export abstract class DataSourceVariableSupport<
  DSType extends DataSourceApi<TQuery, TOptions>,
  TQuery extends DataQuery = DataSourceQueryType<DSType>,
-  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>
+  TOptions extends DataSourceJsonData = DataSourceOptionsType<DSType>,
 > extends VariableSupportBase<DSType, TQuery, TOptions> {
  getType(): VariableSupportType {
    return VariableSupportType.Datasource;
--- a/packages/grafana-data/src/vector/SortedVector.ts
+++ b/packages/grafana-data/src/vector/SortedVector.ts
@ -9,7 +9,10 @@ import { vectorToArray } from './vectorToArray';
 * @deprecated use a simple Arrays
 */
 export class SortedVector<T = any> extends FunctionalVector<T> {
-  constructor(private source: Vector<T>, private order: number[]) {
+  constructor(
+    private source: Vector<T>,
+    private order: number[]
+  ) {
    super();
    return makeArrayIndexableVector(this);
  }
--- a/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts
+++ b/packages/grafana-runtime/src/utils/DataSourceWithBackend.ts
@ -113,7 +113,7 @@ export interface HealthCheckResult {
 */
 class DataSourceWithBackend<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > extends DataSourceApi<TQuery, TOptions> {
  constructor(instanceSettings: DataSourceInstanceSettings<TOptions>) {
    super(instanceSettings);
--- a/packages/grafana-toolkit/src/cli/tasks/task.ts
+++ b/packages/grafana-toolkit/src/cli/tasks/task.ts
@ -3,7 +3,10 @@ export type TaskRunner<T> = (options: T) => Promise<any>;
 export class Task<TOptions> {
  options: TOptions = {} as any;

-  constructor(public name: string, public runner: TaskRunner<TOptions>) {}
+  constructor(
+    public name: string,
+    public runner: TaskRunner<TOptions>
+  ) {}
  setName = (name: string) => {
    this.name = name;
  };
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
+++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
@ -164,7 +164,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
    `,
    buttonHide: css`
      opacity: 0;
-      transition: opacity 0.1s ease, visibility 0 0.1s;
+      transition:
+        opacity 0.1s ease,
+        visibility 0 0.1s;
      visibility: hidden;
      z-index: 0;
    `,
@ -178,14 +180,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
    confirmButtonShow: css`
      z-index: 1;
      opacity: 1;
-      transition: opacity 0.08s ease-out, transform 0.1s ease-out;
+      transition:
+        opacity 0.08s ease-out,
+        transform 0.1s ease-out;
      transform: translateX(0);
      pointer-events: all;
    `,
    confirmButtonHide: css`
      opacity: 0;
      visibility: hidden;
-      transition: opacity 0.12s ease-in, transform 0.14s ease-in, visibility 0s 0.12s;
+      transition:
+        opacity 0.12s ease-in,
+        transform 0.14s ease-in,
+        visibility 0s 0.12s;
      transform: translateX(100px);
    `,
    disabled: css`
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
@ -11,6 +11,7 @@ $select-input-bg-disabled: $input-bg-disabled;
@mixin select-control-focus() {
  border-color: $input-border-focus;
  outline: none;
+  // prettier-ignore
  $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus;
  @include box-shadow($shadow);
 }
--- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx
@ -75,7 +75,9 @@ const getStyles = (theme: GrafanaTheme2) => ({

    :focus {
      outline: none !important;
-      box-shadow: 0 0 0 1px ${theme.colors.background.canvas}, 0 0 0 3px ${theme.colors.primary.main};
+      box-shadow:
+        0 0 0 1px ${theme.colors.background.canvas},
+        0 0 0 3px ${theme.colors.primary.main};
    }
  `,
  label: css`
--- a/packages/grafana-ui/src/components/Forms/commonStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts
@ -33,15 +33,20 @@ export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => {
      &:-webkit-autofill,
      &:-webkit-autofill:hover {
        /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
-        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important;
+        box-shadow:
+          inset 0 0 0 1px rgba(255, 255, 255, 0),
+          inset 0 0 0 100px ${background}!important;
        -webkit-text-fill-color: ${textColor} !important;
        border-color: ${autoFillBorder};
      }

      &:-webkit-autofill:focus {
        /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
-        box-shadow: 0 0 0 2px ${theme.colors.background.primary}, 0 0 0px 4px ${theme.colors.primary.main},
-          inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important;
+        box-shadow:
+          0 0 0 2px ${theme.colors.background.primary},
+          0 0 0px 4px ${theme.colors.primary.main},
+          inset 0 0 0 1px rgba(255, 255, 255, 0),
+          inset 0 0 0 100px ${background}!important;
        -webkit-text-fill-color: ${textColor} !important;
      }

--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@ -100,35 +100,33 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:

  return {
    // Wraps inputWrapper and addons
-    wrapper: cx(
-      css`
-        label: input-wrapper;
-        display: flex;
-        width: ${width ? `${theme.spacing(width)}` : '100%'};
-        height: ${theme.spacing(theme.components.height.md)};
-        border-radius: ${theme.shape.borderRadius()};
-        &:hover {
-          > .prefix,
-          .suffix,
-          .input {
-            border-color: ${invalid ? theme.colors.error.border : theme.colors.primary.border};
-          }
+    wrapper: cx(css`
+      label: input-wrapper;
+      display: flex;
+      width: ${width ? `${theme.spacing(width)}` : '100%'};
+      height: ${theme.spacing(theme.components.height.md)};
+      border-radius: ${theme.shape.borderRadius()};
+      &:hover {
+        > .prefix,
+        .suffix,
+        .input {
+          border-color: ${invalid ? theme.colors.error.border : theme.colors.primary.border};
+        }

-          // only show number buttons on hover
-          input[type='number'] {
-            -moz-appearance: number-input;
-            -webkit-appearance: number-input;
-            appearance: textfield;
-          }
+        // only show number buttons on hover
+        input[type='number'] {
+          -moz-appearance: number-input;
+          -webkit-appearance: number-input;
+          appearance: textfield;
+        }

-          input[type='number']::-webkit-inner-spin-button,
-          input[type='number']::-webkit-outer-spin-button {
-            -webkit-appearance: inner-spin-button !important;
-            opacity: 1;
-          }
+        input[type='number']::-webkit-inner-spin-button,
+        input[type='number']::-webkit-outer-spin-button {
+          -webkit-appearance: inner-spin-button !important;
+          opacity: 1;
        }
-      `
-    ),
+      }
+    `),
    // Wraps input and prefix/suffix
    inputWrapper: css`
      label: input-inputWrapper;
--- a/packages/grafana-ui/src/components/Menu/utils.test.ts
+++ b/packages/grafana-ui/src/components/Menu/utils.test.ts
@ -8,7 +8,7 @@ describe('utils', () => {
          getBoundingClientRect: () => ({ right }),
        },
        getBoundingClientRect: () => ({ width }),
-      } as HTMLElement);
+      }) as HTMLElement;

    Object.defineProperty(window, 'innerWidth', { value: 1000 });

--- a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
+++ b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
@ -16,9 +16,8 @@ export const PanelContainer = ({ children, className, ...props }: Props) => {
  );
 };

-const getStyles = (theme: GrafanaTheme2) =>
-  css`
-    background-color: ${theme.components.panel.background};
-    border: 1px solid ${theme.components.panel.borderColor};
-    border-radius: ${theme.shape.radius.default};
-  `;
+const getStyles = (theme: GrafanaTheme2) => css`
+  background-color: ${theme.components.panel.background};
+  border: 1px solid ${theme.components.panel.borderColor};
+  border-radius: ${theme.shape.radius.default};
+`;
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
@ -36,8 +36,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
    display: block;
    white-space: nowrap;
    cursor: pointer;
-    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-      background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition:
+      color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  `,

  typeaheadItemSelected: css`
--- a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx
+++ b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx
@ -15,7 +15,9 @@ const getStyles = stylesFactory((duration: number, measurement: 'width' | 'heigh
      label: enterActive;
      ${measurement}: ${size}px;
      opacity: 1;
-      transition: opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out;
+      transition:
+        opacity ${duration}ms ease-out,
+        ${measurement} ${duration}ms ease-out;
    `,
    exit: css`
      label: exit;
@ -26,7 +28,9 @@ const getStyles = stylesFactory((duration: number, measurement: 'width' | 'heigh
      label: exitActive;
      opacity: 0;
      ${measurement}: 0;
-      transition: opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out;
+      transition:
+        opacity ${duration}ms ease-out,
+        ${measurement} ${duration}ms ease-out;
    `,
  };
 });
--- a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
@ -17,7 +17,9 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
    css`
      background-color: white;
      background-size: 30px 30px;
-      background-position: 0 0, 15px 15px;
+      background-position:
+        0 0,
+        15px 15px;
      background-image: linear-gradient(
          45deg,
          ${checkColor} 25%,
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@ -52,5 +52,4 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
 export const withTheme =
  (handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
  // eslint-disable-next-line react/display-name
-  (story) =>
-    <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
+  (story) => <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
--- a/public/app/angular/components/form_dropdown/form_dropdown.ts
+++ b/public/app/angular/components/form_dropdown/form_dropdown.ts
@ -41,7 +41,12 @@ export class FormDropdownCtrl {

  static $inject = ['$scope', '$element', '$sce', 'templateSrv'];

-  constructor(private $scope: any, $element: JQLite, private $sce: ISCEService, private templateSrv: any) {
+  constructor(
+    private $scope: any,
+    $element: JQLite,
+    private $sce: ISCEService,
+    private templateSrv: any
+  ) {
    this.inputElement = $element.find('input').first();
    this.linkElement = $element.find('a').first();
    this.linkMode = true;
--- a/public/app/angular/components/switch.ts
+++ b/public/app/angular/components/switch.ts
@ -39,7 +39,10 @@ export class SwitchCtrl {

  static $inject = ['$scope', '$timeout'];

-  constructor($scope: any, private $timeout: any) {
+  constructor(
+    $scope: any,
+    private $timeout: any
+  ) {
    this.show = true;
    this.id = $scope.$id;
  }
--- a/public/app/angular/diff-view.ts
+++ b/public/app/angular/diff-view.ts
@ -42,7 +42,11 @@ coreModule.directive('diffDelta', delta);
 export class LinkJSONCtrl {
  static $inject = ['$scope', '$rootScope', '$anchorScroll'];

-  constructor(private $scope: any, private $rootScope: GrafanaRootScope, private $anchorScroll: any) {}
+  constructor(
+    private $scope: any,
+    private $rootScope: GrafanaRootScope,
+    private $anchorScroll: any
+  ) {}

  goToLine(line: number) {
    let unbind: () => void;
--- a/public/app/angular/panel/query_ctrl.ts
+++ b/public/app/angular/panel/query_ctrl.ts
@ -10,7 +10,10 @@ export class QueryCtrl<T = any> {
  error?: string | null;
  isLastQuery: boolean;

-  constructor(public $scope: any, public $injector: auto.IInjectorService) {
+  constructor(
+    public $scope: any,
+    public $injector: auto.IInjectorService
+  ) {
    this.panelCtrl = this.panelCtrl ?? $scope.ctrl.panelCtrl;
    this.target = this.target ?? $scope.ctrl.target;
    this.datasource = this.datasource ?? $scope.ctrl.datasource;
--- a/public/app/angular/services/AngularLoader.ts
+++ b/public/app/angular/services/AngularLoader.ts
@ -8,7 +8,10 @@ import coreModule from 'app/angular/core_module';
 export class AngularLoader implements AngularLoaderInterface {
  static $inject = ['$compile', '$rootScope'];

-  constructor(private $compile: any, private $rootScope: GrafanaRootScope) {}
+  constructor(
+    private $compile: any,
+    private $rootScope: GrafanaRootScope
+  ) {}

  load(elem: any, scopeProps: any, template: string): AngularComponent {
    const scope = this.$rootScope.$new();
--- a/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
+++ b/public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
@ -56,9 +56,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
        {item.text}
        {item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
      </a>
-      {children?.map((child, index) => (
-        <SectionNavItem item={child} key={index} />
-      ))}
+      {children?.map((child, index) => <SectionNavItem item={child} key={index} />)}
    </>
  );
 }
--- a/public/app/core/components/CloseButton/CloseButton.tsx
+++ b/public/app/core/components/CloseButton/CloseButton.tsx
@ -24,9 +24,8 @@ export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props)
  );
 };

-const getStyles = (theme: GrafanaTheme2) =>
-  css`
-    position: absolute;
-    right: ${theme.spacing(0.5)};
-    top: ${theme.spacing(1)};
-  `;
+const getStyles = (theme: GrafanaTheme2) => css`
+  position: absolute;
+  right: ${theme.spacing(0.5)};
+  top: ${theme.spacing(1)};
+`;
--- a/public/app/core/components/RolePicker/RolePickerInput.tsx
+++ b/public/app/core/components/RolePicker/RolePickerInput.tsx
@ -101,9 +101,7 @@ export const RolesLabel = ({ showBuiltInRole, numberOfRoles, appliedRoles }: Rol
        <Tooltip
          content={
            <div className={styles.tooltip}>
-              {appliedRoles?.map((role) => (
-                <p key={role.uid}>{role.displayName}</p>
-              ))}
+              {appliedRoles?.map((role) => <p key={role.uid}>{role.displayName}</p>)}
            </div>
          }
        >
--- a/public/app/core/components/help/HelpModal.tsx
+++ b/public/app/core/components/help/HelpModal.tsx
@ -140,7 +140,12 @@ function getStyles(theme: GrafanaTheme2) {
      text-align: center;
      margin-right: ${theme.spacing(0.5)};
      padding: 3px 5px;
-      font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+      font:
+        11px Consolas,
+        'Liberation Mono',
+        Menlo,
+        Courier,
+        monospace;
      line-height: 10px;
      vertical-align: middle;
      border: solid 1px ${theme.colors.border.medium};
--- a/public/app/core/history/richHistoryLocalStorageUtils.ts
+++ b/public/app/core/history/richHistoryLocalStorageUtils.ts
@ -57,8 +57,8 @@ function filterQueriesBySearchFilter(queries: RichHistoryQuery[], searchFilter:

    const listOfMatchingQueries = query.queries.filter((query) =>
      // Remove fields in which we don't want to be searching
-      Object.values(omit(query, ['datasource', 'key', 'refId', 'hide', 'queryType'])).some((value) =>
-        value?.toString().includes(searchFilter)
+      Object.values(omit(query, ['datasource', 'key', 'refId', 'hide', 'queryType'])).some(
+        (value) => value?.toString().includes(searchFilter)
      )
    );

--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@ -29,7 +29,10 @@ import { toggleTheme } from './theme';
 import { withFocusedPanel } from './withFocusedPanelId';

 export class KeybindingSrv {
-  constructor(private locationService: LocationService, private chromeService: AppChromeService) {}
+  constructor(
+    private locationService: LocationService,
+    private chromeService: AppChromeService
+  ) {}

  clearAndInitGlobalBindings(route: RouteDescriptor) {
    Mousetrap.reset();
--- a/public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroupHeader.tsx
@ -13,14 +13,17 @@ interface Props {
 export const AlertGroupHeader = ({ group }: Props) => {
  const textStyles = useStyles2(getNotificationsTextColors);
  const total = group.alerts.length;
-  const countByStatus = group.alerts.reduce((statusObj, alert) => {
-    if (statusObj[alert.status.state]) {
-      statusObj[alert.status.state] += 1;
-    } else {
-      statusObj[alert.status.state] = 1;
-    }
-    return statusObj;
-  }, {} as Record<AlertState, number>);
+  const countByStatus = group.alerts.reduce(
+    (statusObj, alert) => {
+      if (statusObj[alert.status.state]) {
+        statusObj[alert.status.state] += 1;
+      } else {
+        statusObj[alert.status.state] = 1;
+      }
+      return statusObj;
+    },
+    {} as Record<AlertState, number>
+  );

  return (
    <div>
--- a/public/app/features/alerting/unified/components/notification-policies/Modals.tsx
+++ b/public/app/features/alerting/unified/components/notification-policies/Modals.tsx
@ -206,7 +206,7 @@ const useDeletePolicyModal = (handleDelete: (route: RouteWithID) => void, loadin
 const useAlertGroupsModal = (): [
  JSX.Element,
  (alertGroups: AlertmanagerGroup[], matchers?: ObjectMatcher[]) => void,
-  () => void
+  () => void,
 ] => {
  const [showModal, setShowModal] = useState(false);
  const [alertGroups, setAlertGroups] = useState<AlertmanagerGroup[]>([]);
--- a/public/app/features/alerting/unified/components/receivers/editor/autocomplete.ts
+++ b/public/app/features/alerting/unified/components/receivers/editor/autocomplete.ts
@ -63,7 +63,10 @@ function isInsideGoExpression(model: editor.ITextModel, position: Position) {
 }

 export class CompletionProvider {
-  constructor(private readonly monaco: Monaco, private readonly range: IRange) {}
+  constructor(
+    private readonly monaco: Monaco,
+    private readonly range: IRange
+  ) {}

  getSnippetsSuggestions = (): languages.ProviderResult<languages.CompletionList> => {
    return this.getCompletionsFromDefinitions(getSnippetsSuggestions(this.monaco));
--- a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
@ -59,7 +59,7 @@ export const GrafanaReceiverForm = ({ existing, alertManagerSourceName, config }
  // transform receiver DTO to form values
  const [existingValue, id2original] = useMemo((): [
    ReceiverFormValues<GrafanaChannelValues> | undefined,
-    Record<string, GrafanaManagedReceiverConfig>
+    Record<string, GrafanaManagedReceiverConfig>,
  ] => {
    if (!existing || !grafanaNotifiers.result) {
      return [undefined, {}];
--- a/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx
@ -62,7 +62,11 @@ export const QueryOptions = ({
      </Toggletip>

      <div className={styles.staticValues}>
-        <span>{dateTime(timeRange?.from).locale('en').fromNow(true)}</span>
+        <span>
+          {dateTime(timeRange?.from)
+            .locale('en')
+            .fromNow(true)}
+        </span>
        {queryOptions.maxDataPoints && <span>, MD {queryOptions.maxDataPoints}</span>}
      </div>
    </>
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsDataSources.tsx
@ -27,16 +27,19 @@ export function RuleDetailsDataSources(props: Props): JSX.Element | null {

    if (isGrafanaRulerRule(rule.rulerRule)) {
      const { data } = rule.rulerRule.grafana_alert;
-      const unique = data.reduce((dataSources, query) => {
-        const ds = getDataSourceSrv().getInstanceSettings(query.datasourceUid);
+      const unique = data.reduce(
+        (dataSources, query) => {
+          const ds = getDataSourceSrv().getInstanceSettings(query.datasourceUid);

-        if (!ds || ds.uid === ExpressionDatasourceUID) {
-          return dataSources;
-        }
+          if (!ds || ds.uid === ExpressionDatasourceUID) {
+            return dataSources;
+          }

-        dataSources[ds.name] = { name: ds.name, icon: ds.meta.info.logos.small };
-        return dataSources;
-      }, {} as Record<string, { name: string; icon?: string }>);
+          dataSources[ds.name] = { name: ds.name, icon: ds.meta.info.logos.small };
+          return dataSources;
+        },
+        {} as Record<string, { name: string; icon?: string }>
+      );

      return Object.values(unique);
    }
--- a/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
@ -181,7 +181,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
    background: transparent;
    outline: 1px solid transparent;

-    transition: background 150ms, outline 150ms;
+    transition:
+      background 150ms,
+      outline 150ms;
    padding: ${theme.spacing(1)} ${theme.spacing(1.5)};
  `,
 });
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@ -148,14 +148,15 @@ const useFilteredSilences = (silences: Silence[], expired = false) => {
      }
      if (queryString) {
        const matchers = parseMatchers(queryString);
-        const matchersMatch = matchers.every((matcher) =>
-          silence.matchers?.some(
-            ({ name, value, isEqual, isRegex }) =>
-              matcher.name === name &&
-              matcher.value === value &&
-              matcher.isEqual === isEqual &&
-              matcher.isRegex === isRegex
-          )
+        const matchersMatch = matchers.every(
+          (matcher) =>
+            silence.matchers?.some(
+              ({ name, value, isEqual, isRegex }) =>
+                matcher.name === name &&
+                matcher.value === value &&
+                matcher.isEqual === isEqual &&
+                matcher.isRegex === isRegex
+            )
        );
        if (!matchersMatch) {
          return false;
--- a/public/app/features/alerting/unified/hooks/useURLSearchParams.ts
+++ b/public/app/features/alerting/unified/hooks/useURLSearchParams.ts
@ -5,7 +5,7 @@ import { locationService } from '@grafana/runtime';

 export function useURLSearchParams(): [
  URLSearchParams,
-  (searchValues: Record<string, string | string[] | undefined>, replace?: boolean) => void
+  (searchValues: Record<string, string | string[] | undefined>, replace?: boolean) => void,
 ] {
  const { search } = useLocation();
  const queryParams = useMemo(() => new URLSearchParams(search), [search]);
--- a/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
+++ b/public/app/features/alerting/unified/state/AlertingQueryRunner.ts
@ -35,7 +35,10 @@ export class AlertingQueryRunner {
  private subscription?: Unsubscribable;
  private lastResult: Record<string, PanelData>;

-  constructor(private backendSrv = getBackendSrv(), private dataSourceSrv = getDataSourceSrv()) {
+  constructor(
+    private backendSrv = getBackendSrv(),
+    private dataSourceSrv = getDataSourceSrv()
+  ) {
    this.subject = new ReplaySubject(1);
    this.lastResult = {};
  }
--- a/public/app/features/alerting/unified/utils/rules.ts
+++ b/public/app/features/alerting/unified/utils/rules.ts
@ -169,17 +169,20 @@ export function getFirstActiveAt(promRule?: AlertingRule) {
  if (!promRule?.alerts) {
    return null;
  }
-  return promRule.alerts.reduce((prev, alert) => {
-    const isNotNormal =
-      mapStateWithReasonToBaseState(alert.state as GrafanaAlertStateWithReason) !== GrafanaAlertState.Normal;
-    if (alert.activeAt && isNotNormal) {
-      const activeAt = new Date(alert.activeAt);
-      if (prev === null || prev.getTime() > activeAt.getTime()) {
-        return activeAt;
+  return promRule.alerts.reduce(
+    (prev, alert) => {
+      const isNotNormal =
+        mapStateWithReasonToBaseState(alert.state as GrafanaAlertStateWithReason) !== GrafanaAlertState.Normal;
+      if (alert.activeAt && isNotNormal) {
+        const activeAt = new Date(alert.activeAt);
+        if (prev === null || prev.getTime() > activeAt.getTime()) {
+          return activeAt;
+        }
      }
-    }
-    return prev;
-  }, null as Date | null);
+      return prev;
+    },
+    null as Date | null
+  );
 }

 /**
--- a/public/app/features/auth-config/ErrorContainer.tsx
+++ b/public/app/features/auth-config/ErrorContainer.tsx
@ -26,16 +26,12 @@ export const ErrorContainerUnconnected = ({ error, warning, resetError, resetWar
    <div>
      {error && (
        <Alert title={error.message} onRemove={() => resetError()}>
-          {error.errors?.map((e, i) => (
-            <div key={i}>{e}</div>
-          ))}
+          {error.errors?.map((e, i) => <div key={i}>{e}</div>)}
        </Alert>
      )}
      {warning && (
        <Alert title={warning.message} onRemove={() => resetWarning()} severity="warning">
-          {warning.errors?.map((e, i) => (
-            <div key={i}>{e}</div>
-          ))}
+          {warning.errors?.map((e, i) => <div key={i}>{e}</div>)}
        </Alert>
      )}
    </div>
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@ -36,7 +36,11 @@ export class ElementState implements LayerElement {
  // Calculated
  data?: any; // depends on the type

-  constructor(public item: CanvasElementItem, public options: CanvasElementOptions, public parent?: FrameState) {
+  constructor(
+    public item: CanvasElementItem,
+    public options: CanvasElementOptions,
+    public parent?: FrameState
+  ) {
    const fallbackName = `Element ${Date.now()}`;
    if (!options) {
      this.options = { type: item.id, name: fallbackName };
--- a/public/app/features/canvas/runtime/frame.tsx
+++ b/public/app/features/canvas/runtime/frame.tsx
@ -36,7 +36,11 @@ export class FrameState extends ElementState {
  elements: ElementState[] = [];
  scene: Scene;

-  constructor(public options: CanvasFrameOptions, scene: Scene, public parent?: FrameState) {
+  constructor(
+    public options: CanvasFrameOptions,
+    scene: Scene,
+    public parent?: FrameState
+  ) {
    super(frameItemDummy, options, parent);

    this.scene = scene;
--- a/public/app/features/canvas/runtime/root.tsx
+++ b/public/app/features/canvas/runtime/root.tsx
@ -6,7 +6,11 @@ import { FrameState } from './frame';
 import { Scene } from './scene';

 export class RootElement extends FrameState {
-  constructor(public options: CanvasFrameOptions, public scene: Scene, private changeCallback: () => void) {
+  constructor(
+    public options: CanvasFrameOptions,
+    public scene: Scene,
+    private changeCallback: () => void
+  ) {
    super(options, scene);

    this.sizeStyle = {
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@ -37,9 +37,9 @@ export const ConfigureCorrelationSourceForm = () => {
  return (
    <>
      <FieldSet
-        label={`Configure the data source that will link to ${
-          getDatasourceSrv().getInstanceSettings(correlation?.targetUID)?.name
-        } (Step 3 of 3)`}
+        label={`Configure the data source that will link to ${getDatasourceSrv().getInstanceSettings(
+          correlation?.targetUID
+        )?.name} (Step 3 of 3)`}
      >
        <p>
          Define what data source will display the correlation, and what data will replace previously defined variables.
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@ -232,10 +232,10 @@ const getStyles = (theme: GrafanaTheme2) => {
  const pulsate = keyframes`
    0% {box-shadow: 0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main};}
    50% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor(
-    theme.colors.primary.main
-  )
-    .darken(20)
-    .toHexString()};}
+      theme.colors.primary.main
+    )
+      .darken(20)
+      .toHexString()};}
    100% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px  ${theme.colors.primary.main};}
  `;

@ -249,7 +249,9 @@ const getStyles = (theme: GrafanaTheme2) => {
      overflow: hidden;
      outline: 2px dotted transparent;
      outline-offset: 2px;
-      box-shadow: 0 0 0 2px black, 0 0 0px 4px #1f60c4;
+      box-shadow:
+        0 0 0 2px black,
+        0 0 0px 4px #1f60c4;
      animation: ${pulsate} 2s ease infinite;
    `,
    actionsWrapper: css`
--- a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx
@ -100,7 +100,7 @@ describe('getValidIntervals', () => {
        getTimeSrv: () =>
          ({
            getValidIntervals: (intervals: string[]) => intervals,
-          } as unknown as TimeSrv),
+          }) as unknown as TimeSrv,
      };

      const result = getValidIntervals(emptyIntervals, dependencies);
@ -116,7 +116,7 @@ describe('getValidIntervals', () => {
        getTimeSrv: () =>
          ({
            getValidIntervals: (intervals: string[]) => intervals,
-          } as unknown as TimeSrv),
+          }) as unknown as TimeSrv,
      };

      const result = getValidIntervals(duplicateIntervals, dependencies);
@ -132,7 +132,7 @@ describe('getValidIntervals', () => {
        getTimeSrv: () =>
          ({
            getValidIntervals: (intervals: string[]) => intervals,
-          } as unknown as TimeSrv),
+          }) as unknown as TimeSrv,
      };

      const result = getValidIntervals(duplicateIntervals, dependencies);
@ -149,7 +149,7 @@ describe('validateIntervals', () => {
        getTimeSrv: () =>
          ({
            getValidIntervals: (intervals: string[]) => intervals,
-          } as unknown as TimeSrv),
+          }) as unknown as TimeSrv,
      };

      const result = validateIntervals(defaultIntervals, dependencies);
@ -166,7 +166,7 @@ describe('validateIntervals', () => {
            getValidIntervals: () => {
              throw new Error('Some error');
            },
-          } as unknown as TimeSrv),
+          }) as unknown as TimeSrv,
      };

      const result = validateIntervals(defaultIntervals, dependencies);
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@ -53,30 +53,29 @@ export const DynamicConfigValueEditor = ({
  /* 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}
-            htmlFor={componentId}
-          >
-            <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} tooltip="Remove label" />
-            </div>
+    (isExpanded = false) => (
+      <HorizontalGroup justify="space-between">
+        <Label
+          category={labelCategory}
+          description={includeDescription ? item.description : undefined}
+          htmlFor={componentId}
+        >
+          <Highlighter
+            textToHighlight={item.name}
+            searchWords={[searchQuery]}
+            highlightClassName={'search-fragment-highlight'}
+          />
+          {!isExpanded && includeCounter && item.getItemsCount && (
+            <Counter value={item.getItemsCount(property.value)} />
          )}
-        </HorizontalGroup>
-      );
+        </Label>
+        {!isSystemOverride && (
+          <div>
+            <IconButton name="times" onClick={onRemove} tooltip="Remove label" />
+          </div>
+        )}
+      </HorizontalGroup>
+    );
  /* eslint-enable react/display-name */

  if (isCollapsible) {
--- a/public/app/features/dashboard/state/PanelModel.test.ts
+++ b/public/app/features/dashboard/state/PanelModel.test.ts
@ -499,7 +499,7 @@ describe('PanelModel', () => {
    describe('destroy', () => {
      it('Should still preserve last query result', () => {
        model.getQueryRunner().useLastResultFrom({
-          getLastResult: () => ({} as PanelData),
+          getLastResult: () => ({}) as PanelData,
        } as PanelQueryRunner);

        model.destroy();
--- a/public/app/features/datasources/state/actions.test.ts
+++ b/public/app/features/datasources/state/actions.test.ts
@ -50,7 +50,7 @@ const getBackendSrvMock = () =>
      }),
    }),
    withNoBackendCache: jest.fn().mockImplementationOnce((cb) => cb()),
-  } as any);
+  }) as any;

 const failDataSourceTest = async (error: object) => {
  const dependencies: TestDataSourceDependencies = {
@ -61,7 +61,7 @@ const failDataSourceTest = async (error: object) => {
            throw error;
          }),
        }),
-      } as any),
+      }) as any,
    getBackendSrv: getBackendSrvMock,
  };
  const state = {
@ -223,7 +223,7 @@ describe('testDataSource', () => {
              type: 'cloudwatch',
              uid: 'CW1234',
            }),
-          } as any),
+          }) as any,
        getBackendSrv: getBackendSrvMock,
      };
      const state = {
@ -258,7 +258,7 @@ describe('testDataSource', () => {
              type: 'azure-monitor',
              uid: 'azM0nit0R',
            }),
-          } as any),
+          }) as any,
        getBackendSrv: getBackendSrvMock,
      };
      const result = {
--- a/public/app/features/datasources/state/reducers.test.ts
+++ b/public/app/features/datasources/state/reducers.test.ts
@ -37,7 +37,7 @@ const mockPlugin = () =>
    pinned: true,
    type: PluginType.datasource,
    module: 'path/to/module',
-  } as PluginMeta);
+  }) as PluginMeta;

 describe('dataSourcesReducer', () => {
  describe('when dataSourcesLoaded is dispatched', () => {
--- a/public/app/features/explore/FeatureTogglePage.tsx
+++ b/public/app/features/explore/FeatureTogglePage.tsx
@ -7,10 +7,9 @@ import { Page } from 'app/core/components/Page/Page';

 export default function FeatureTogglePage() {
  const styles = useStyles2(
-    (theme: GrafanaTheme2) =>
-      css`
-        margin-top: ${theme.spacing(2)};
-      `
+    (theme: GrafanaTheme2) => css`
+      margin-top: ${theme.spacing(2)};
+    `
  );

  return (
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@ -403,14 +403,13 @@ const Query = ({ query, showDsInfo = false }: QueryProps) => {
  );
 };

-const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) =>
-  css`
-    display: flex;
-    align-items: center;
-    font-size: ${theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize};
-    font-weight: ${theme.typography.fontWeightMedium};
-    white-space: nowrap;
-  `;
+const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) => css`
+  display: flex;
+  align-items: center;
+  font-size: ${theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize};
+  font-weight: ${theme.typography.fontWeightMedium};
+  white-space: nowrap;
+`;

 function DatasourceInfo({ dsApi, size }: { dsApi?: DataSourceApi; size: 'sm' | 'md' }) {
  const getStyles = useCallback((theme: GrafanaTheme2) => getDsInfoStyles(size)(theme), [size]);
--- a/public/app/features/explore/TraceView/TraceView.tsx
+++ b/public/app/features/explore/TraceView/TraceView.tsx
@ -264,8 +264,8 @@ function useFocusSpanLink(options: {
      })
    );

-  const query = useSelector((state) =>
-    state.explore.panes[options.exploreId]?.queries.find((query) => query.refId === options.refId)
+  const query = useSelector(
+    (state) => state.explore.panes[options.exploreId]?.queries.find((query) => query.refId === options.refId)
  );

  const createFocusSpanLink = (traceId: string, spanId: string) => {
--- a/public/app/features/plugins/admin/helpers.ts
+++ b/public/app/features/plugins/admin/helpers.ts
@ -223,10 +223,13 @@ export const sortPlugins = (plugins: CatalogPlugin[], sortBy: Sorters) => {
 };

 function groupErrorsByPluginId(errors: PluginError[] = []): Record<string, PluginError | undefined> {
-  return errors.reduce((byId, error) => {
-    byId[error.pluginId] = error;
-    return byId;
-  }, {} as Record<string, PluginError | undefined>);
+  return errors.reduce(
+    (byId, error) => {
+      byId[error.pluginId] = error;
+      return byId;
+    },
+    {} as Record<string, PluginError | undefined>
+  );
 }

 function getPluginSignature(options: {
--- a/public/app/features/query/state/PanelQueryRunner.ts
+++ b/public/app/features/query/state/PanelQueryRunner.ts
@ -44,7 +44,7 @@ import { runRequest } from './runRequest';

 export interface QueryRunnerOptions<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > {
  datasource: DataSourceRef | DataSourceApi<TQuery, TOptions> | null;
  queries: TQuery[];
--- a/public/app/features/storage/RootView.tsx
+++ b/public/app/features/storage/RootView.tsx
@ -72,9 +72,7 @@ export function RootView({ root, onPathChange }: Props) {
                {s.config.description}
                {s.config.git?.remote && <a href={s.config.git?.remote}>{s.config.git?.remote}</a>}
              </Card.Meta>
-              {s.notice?.map((notice) => (
-                <Alert key={notice.text} severity={notice.severity} title={notice.text} />
-              ))}
+              {s.notice?.map((notice) => <Alert key={notice.text} severity={notice.severity} title={notice.text} />)}

              <Card.Tags className={styles.clickable}>
                <HorizontalGroup>
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@ -192,10 +192,13 @@ const reorderToIndex = (fieldNames: string[], startIndex: number, endIndex: numb
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

-  return result.reduce((nameByIndex, fieldName, index) => {
-    nameByIndex[fieldName] = index;
-    return nameByIndex;
-  }, {} as Record<string, number>);
+  return result.reduce(
+    (nameByIndex, fieldName, index) => {
+      nameByIndex[fieldName] = index;
+      return nameByIndex;
+    },
+    {} as Record<string, number>
+  );
 };

 const orderFieldNamesByIndex = (fieldNames: string[], indexByName: Record<string, number> = {}): string[] => {
--- a/public/app/features/transformers/utils.ts
+++ b/public/app/features/transformers/utils.ts
@ -9,17 +9,20 @@ export function useAllFieldNamesFromDataFrames(input: DataFrame[]): string[] {
    }

    return Object.keys(
-      input.reduce((names, frame) => {
-        if (!frame || !Array.isArray(frame.fields)) {
-          return names;
-        }
+      input.reduce(
+        (names, frame) => {
+          if (!frame || !Array.isArray(frame.fields)) {
+            return names;
+          }

-        return frame.fields.reduce((names, field) => {
-          const t = getFieldDisplayName(field, frame, input);
-          names[t] = true;
-          return names;
-        }, names);
-      }, {} as Record<string, boolean>)
+          return frame.fields.reduce((names, field) => {
+            const t = getFieldDisplayName(field, frame, input);
+            names[t] = true;
+            return names;
+          }, names);
+        },
+        {} as Record<string, boolean>
+      )
    );
  }, [input]);
 }
--- a/public/app/features/variables/editor/getVariableQueryEditor.tsx
+++ b/public/app/features/variables/editor/getVariableQueryEditor.tsx
@ -17,7 +17,7 @@ import { LegacyVariableQueryEditor } from './LegacyVariableQueryEditor';
 export async function getVariableQueryEditor<
  TQuery extends DataQuery = DataQuery,
  TOptions extends DataSourceJsonData = DataSourceJsonData,
-  VariableQuery extends DataQuery = TQuery
+  VariableQuery extends DataQuery = TQuery,
 >(
  datasource: DataSourceApi<TQuery, TOptions>,
  importDataSourcePluginFunc = importDataSourcePlugin
@ -50,7 +50,7 @@ export async function getVariableQueryEditor<

 export function StandardVariableQueryEditor<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >({
  datasource: propsDatasource,
  query: propsQuery,
--- a/public/app/features/variables/guard.ts
+++ b/public/app/features/variables/guard.ts
@ -62,7 +62,7 @@ export function isLegacyAdHocDataSource(datasource: null | DataSourceRef | strin

 interface DataSourceWithLegacyVariableSupport<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > extends DataSourceApi<TQuery, TOptions> {
  metricFindQuery(query: any, options?: any): Promise<MetricFindValue[]>;
  variables: undefined;
@ -70,7 +70,7 @@ interface DataSourceWithLegacyVariableSupport<

 interface DataSourceWithStandardVariableSupport<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > extends DataSourceApi<TQuery, TOptions> {
  variables: {
    getType(): VariableSupportType;
@ -81,7 +81,7 @@ interface DataSourceWithStandardVariableSupport<

 interface DataSourceWithCustomVariableSupport<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > extends DataSourceApi<TQuery, TOptions> {
  variables: {
    getType(): VariableSupportType;
@ -92,7 +92,7 @@ interface DataSourceWithCustomVariableSupport<

 interface DataSourceWithDatasourceVariableSupport<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > extends DataSourceApi<TQuery, TOptions> {
  variables: {
    getType(): VariableSupportType;
@ -105,7 +105,7 @@ interface DataSourceWithDatasourceVariableSupport<
 * */
 export const hasLegacyVariableSupport = <
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  datasource: DataSourceApi<TQuery, TOptions>
 ): datasource is DataSourceWithLegacyVariableSupport<TQuery, TOptions> => {
@ -114,7 +114,7 @@ export const hasLegacyVariableSupport = <

 export const hasStandardVariableSupport = <
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  datasource: DataSourceApi<TQuery, TOptions>
 ): datasource is DataSourceWithStandardVariableSupport<TQuery, TOptions> => {
@ -132,7 +132,7 @@ export const hasStandardVariableSupport = <

 export const hasCustomVariableSupport = <
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  datasource: DataSourceApi<TQuery, TOptions>
 ): datasource is DataSourceWithCustomVariableSupport<TQuery, TOptions> => {
@ -155,7 +155,7 @@ export const hasCustomVariableSupport = <

 export const hasDatasourceVariableSupport = <
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  datasource: DataSourceApi<TQuery, TOptions>
 ): datasource is DataSourceWithDatasourceVariableSupport<TQuery, TOptions> => {
@ -168,7 +168,7 @@ export const hasDatasourceVariableSupport = <

 export function isLegacyQueryEditor<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  component: VariableQueryEditorType,
  datasource: DataSourceApi<TQuery, TOptions>
@ -182,7 +182,7 @@ export function isLegacyQueryEditor<

 export function isQueryEditor<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 >(
  component: VariableQueryEditorType,
  datasource: DataSourceApi<TQuery, TOptions>
--- a/public/app/features/variables/inspect/utils.ts
+++ b/public/app/features/variables/inspect/utils.ts
@ -118,52 +118,58 @@ const validVariableNames: Record<string, RegExp[]> = {
 };

 export const getPropsWithVariable = (variableId: string, parent: { key: string; value: any }, result: any) => {
-  const stringValues = Object.keys(parent.value).reduce((all, key) => {
-    const value = parent.value[key];
-    if (!value || typeof value !== 'string') {
-      return all;
-    }
-
-    const isValidName = validVariableNames[key]
-      ? validVariableNames[key].find((regex: RegExp) => regex.test(variableId))
-      : undefined;
-
-    let hasVariable = containsVariable(value, variableId);
-    if (key === 'repeat' && value === variableId) {
-      // repeat stores value without variable format
-      hasVariable = true;
-    }
-
-    if (!isValidName && hasVariable) {
-      all = {
-        ...all,
-        [key]: value,
-      };
-    }
+  const stringValues = Object.keys(parent.value).reduce(
+    (all, key) => {
+      const value = parent.value[key];
+      if (!value || typeof value !== 'string') {
+        return all;
+      }

-    return all;
-  }, {} as Record<string, any>);
+      const isValidName = validVariableNames[key]
+        ? validVariableNames[key].find((regex: RegExp) => regex.test(variableId))
+        : undefined;

-  const objectValues = Object.keys(parent.value).reduce((all, key) => {
-    const value = parent.value[key];
-    if (value && typeof value === 'object' && Object.keys(value).length) {
-      let id = value.title || value.name || value.id || key;
-      if (Array.isArray(parent.value) && parent.key === 'panels') {
-        id = `${id}[${value.id}]`;
+      let hasVariable = containsVariable(value, variableId);
+      if (key === 'repeat' && value === variableId) {
+        // repeat stores value without variable format
+        hasVariable = true;
      }

-      const newResult = getPropsWithVariable(variableId, { key, value }, {});
-
-      if (Object.keys(newResult).length) {
+      if (!isValidName && hasVariable) {
        all = {
          ...all,
-          [id]: newResult,
+          [key]: value,
        };
      }
-    }

-    return all;
-  }, {} as Record<string, any>);
+      return all;
+    },
+    {} as Record<string, any>
+  );
+
+  const objectValues = Object.keys(parent.value).reduce(
+    (all, key) => {
+      const value = parent.value[key];
+      if (value && typeof value === 'object' && Object.keys(value).length) {
+        let id = value.title || value.name || value.id || key;
+        if (Array.isArray(parent.value) && parent.key === 'panels') {
+          id = `${id}[${value.id}]`;
+        }
+
+        const newResult = getPropsWithVariable(variableId, { key, value }, {});
+
+        if (Object.keys(newResult).length) {
+          all = {
+            ...all,
+            [id]: newResult,
+          };
+        }
+      }
+
+      return all;
+    },
+    {} as Record<string, any>
+  );

  if (Object.keys(stringValues).length || Object.keys(objectValues).length) {
    result = {
--- a/public/app/features/variables/query/actions.ts
+++ b/public/app/features/variables/query/actions.ts
@ -184,22 +184,25 @@ export function flattenQuery(query: any): any {
  }

  const keys = Object.keys(query);
-  const flattened = keys.reduce((all, key) => {
-    const value = query[key];
-    if (typeof value !== 'object' || value === null) {
-      all[key] = value;
-      return all;
-    }
+  const flattened = keys.reduce(
+    (all, key) => {
+      const value = query[key];
+      if (typeof value !== 'object' || value === null) {
+        all[key] = value;
+        return all;
+      }

-    const result = flattenQuery(value);
-    for (let childProp in result) {
-      if (result.hasOwnProperty(childProp)) {
-        all[`${key}_${childProp}`] = result[childProp];
+      const result = flattenQuery(value);
+      for (let childProp in result) {
+        if (result.hasOwnProperty(childProp)) {
+          all[`${key}_${childProp}`] = result[childProp];
+        }
      }
-    }

-    return all;
-  }, {} as Record<string, any>);
+      return all;
+    },
+    {} as Record<string, any>
+  );

  return flattened;
 }
--- a/public/app/features/variables/shared/testing/datasourceVariableBuilder.ts
+++ b/public/app/features/variables/shared/testing/datasourceVariableBuilder.ts
@ -3,7 +3,7 @@ import { DataSourceVariableModel, QueryVariableModel, VariableRefresh } from 'ap
 import { MultiVariableBuilder } from './multiVariableBuilder';

 export class DatasourceVariableBuilder<
-  T extends DataSourceVariableModel | QueryVariableModel
+  T extends DataSourceVariableModel | QueryVariableModel,
 > extends MultiVariableBuilder<T> {
  withRefresh(refresh: VariableRefresh) {
    this.variable.refresh = refresh;
--- a/public/app/features/variables/types.ts
+++ b/public/app/features/variables/types.ts
@ -89,7 +89,7 @@ export interface VariableQueryEditorProps {

 export type VariableQueryEditorType<
  TQuery extends DataQuery = DataQuery,
-  TOptions extends DataSourceJsonData = DataSourceJsonData
+  TOptions extends DataSourceJsonData = DataSourceJsonData,
 > = ComponentType<VariableQueryEditorProps> | ComponentType<QueryEditorProps<any, TQuery, TOptions, any>> | null;

 export interface VariablesChangedEvent {
--- a/public/app/plugins/datasource/alertmanager/types.ts
+++ b/public/app/plugins/datasource/alertmanager/types.ts
@ -218,7 +218,7 @@ export type AlertmanagerAlert = {
  receivers: [
    {
      name: string;
-    }
+    },
  ];
  fingerprint: string;
  status: {
--- a/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchRequest.ts
+++ b/public/app/plugins/datasource/cloudwatch/query-runner/CloudWatchRequest.ts
@ -20,7 +20,10 @@ export abstract class CloudWatchRequest {
    AppNotificationTimeout.Error
  );

-  constructor(public instanceSettings: DataSourceInstanceSettings<CloudWatchJsonData>, templateSrv: TemplateSrv) {
+  constructor(
+    public instanceSettings: DataSourceInstanceSettings<CloudWatchJsonData>,
+    templateSrv: TemplateSrv
+  ) {
    this.templateSrv = templateSrv;
    this.ref = getDataSourceRef(instanceSettings);
  }
--- a/public/app/plugins/datasource/elasticsearch/ElasticResponse.ts
+++ b/public/app/plugins/datasource/elasticsearch/ElasticResponse.ts
@ -27,7 +27,10 @@ interface TopMetricBucket {
 }

 export class ElasticResponse {
-  constructor(private targets: ElasticsearchQuery[], private response: any) {
+  constructor(
+    private targets: ElasticsearchQuery[],
+    private response: any
+  ) {
    this.targets = targets;
    this.response = response;
  }
@ -784,8 +787,10 @@ const addPreferredVisualisationType = (series: any, type: PreferredVisualisation

 const toNameTypePair =
  (docs: Array<Record<string, any>>) =>
-  (propName: string): [string, FieldType] =>
-    [propName, guessType(docs.find((doc) => doc[propName] !== undefined)?.[propName])];
+  (propName: string): [string, FieldType] => [
+    propName,
+    guessType(docs.find((doc) => doc[propName] !== undefined)?.[propName]),
+  ];

 /**
 * Trying to guess data type from its value. This is far from perfect, as in order to have accurate guess
--- a/public/app/plugins/datasource/elasticsearch/IndexPattern.ts
+++ b/public/app/plugins/datasource/elasticsearch/IndexPattern.ts
@ -21,7 +21,10 @@ export const intervalMap: IntervalMap = {
 export class IndexPattern {
  private dateLocale = 'en';

-  constructor(private pattern: string, private interval?: keyof typeof intervalMap) {}
+  constructor(
+    private pattern: string,
+    private interval?: keyof typeof intervalMap
+  ) {}

  getIndexForToday() {
    if (this.interval) {
--- a/public/app/plugins/datasource/graphite/datasource.ts
+++ b/public/app/plugins/datasource/graphite/datasource.ts
@ -84,7 +84,10 @@ export class GraphiteDatasource
  requestCounter = 100;
  private readonly metricMappings: GraphiteLokiMapping[];

-  constructor(instanceSettings: any, private readonly templateSrv: TemplateSrv = getTemplateSrv()) {
+  constructor(
+    instanceSettings: any,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()
+  ) {
    super(instanceSettings);
    this.basicAuth = instanceSettings.basicAuth;
    this.url = instanceSettings.url;
--- a/public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/CompletionDataProvider.ts
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/monaco-completion-provider/CompletionDataProvider.ts
@ -13,7 +13,10 @@ interface HistoryRef {
 }

 export class CompletionDataProvider {
-  constructor(private languageProvider: LanguageProvider, private historyRef: HistoryRef = { current: [] }) {}
+  constructor(
+    private languageProvider: LanguageProvider,
+    private historyRef: HistoryRef = { current: [] }
+  ) {}

  private buildSelector(labels: Label[]): string {
    const allLabelTexts = labels.map(
--- a/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
+++ b/public/app/plugins/datasource/mysql/sqlCompletionProvider.ts
@ -53,48 +53,47 @@ export const customStatementPlacementProvider: StatementPlacementProvider = () =
 ];

 export const customSuggestionKinds: (getMeta: CompletionProviderGetterArgs['getMeta']) => SuggestionKindProvider =
-  (getMeta) => () =>
-    [
-      {
-        id: SuggestionKind.Tables,
-        overrideDefault: true,
-        suggestionsResolver: async (ctx) => {
-          const databaseName = getDatabaseName(ctx.currentToken);
-
-          const suggestions = await getMeta({ schema: databaseName });
-
-          return suggestions.map(mapToSuggestion(ctx));
-        },
+  (getMeta) => () => [
+    {
+      id: SuggestionKind.Tables,
+      overrideDefault: true,
+      suggestionsResolver: async (ctx) => {
+        const databaseName = getDatabaseName(ctx.currentToken);
+
+        const suggestions = await getMeta({ schema: databaseName });
+
+        return suggestions.map(mapToSuggestion(ctx));
      },
-      {
-        id: SuggestionKind.Columns,
-        overrideDefault: true,
-        suggestionsResolver: async (ctx) => {
-          const databaseToken = getDatabaseToken(ctx.currentToken);
-          const databaseName = getDatabaseName(databaseToken);
-          const tableName = getTableName(databaseToken);
-
-          if (!databaseName || !tableName) {
-            return [];
-          }
-
-          const suggestions = await getMeta({ schema: databaseName, table: tableName });
-
-          return suggestions.map(mapToSuggestion(ctx));
-        },
+    },
+    {
+      id: SuggestionKind.Columns,
+      overrideDefault: true,
+      suggestionsResolver: async (ctx) => {
+        const databaseToken = getDatabaseToken(ctx.currentToken);
+        const databaseName = getDatabaseName(databaseToken);
+        const tableName = getTableName(databaseToken);
+
+        if (!databaseName || !tableName) {
+          return [];
+        }
+
+        const suggestions = await getMeta({ schema: databaseName, table: tableName });
+
+        return suggestions.map(mapToSuggestion(ctx));
      },
-      {
-        id: customSuggestionKind.tablesWithinDatabase,
-        applyTo: [customStatementPlacement.afterDatabase],
-        suggestionsResolver: async (ctx) => {
-          const databaseName = getDatabaseName(ctx.currentToken);
+    },
+    {
+      id: customSuggestionKind.tablesWithinDatabase,
+      applyTo: [customStatementPlacement.afterDatabase],
+      suggestionsResolver: async (ctx) => {
+        const databaseName = getDatabaseName(ctx.currentToken);

-          const suggestions = await getMeta({ schema: databaseName });
+        const suggestions = await getMeta({ schema: databaseName });

-          return suggestions.map(mapToSuggestion(ctx));
-        },
+        return suggestions.map(mapToSuggestion(ctx));
      },
-    ];
+    },
+  ];

 function mapToSuggestion(ctx: PositionContext) {
  return function (tableDefinition: TableDefinition) {
--- a/public/app/plugins/datasource/opentsdb/datasource.ts
+++ b/public/app/plugins/datasource/opentsdb/datasource.ts
@ -46,7 +46,10 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
  aggregatorsPromise: any;
  filterTypesPromise: any;

-  constructor(instanceSettings: any, private readonly templateSrv: TemplateSrv = getTemplateSrv()) {
+  constructor(
+    instanceSettings: any,
+    private readonly templateSrv: TemplateSrv = getTemplateSrv()
+  ) {
    super(instanceSettings);
    this.type = 'opentsdb';
    this.url = instanceSettings.url;
--- a/public/app/plugins/datasource/prometheus/metric_find_query.ts
+++ b/public/app/plugins/datasource/prometheus/metric_find_query.ts
@ -18,7 +18,10 @@ import { PromQueryRequest } from './types';
 export default class PrometheusMetricFindQuery {
  range: TimeRange;

-  constructor(private datasource: PrometheusDatasource, private query: string) {
+  constructor(
+    private datasource: PrometheusDatasource,
+    private query: string
+  ) {
    this.datasource = datasource;
    this.query = query;
    this.range = getTimeSrv().timeRange();
--- a/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
@ -71,13 +71,16 @@ export const binaryScalarDefs = [
  },
 ];

-export const binaryScalarOperatorToOperatorName = binaryScalarDefs.reduce((acc, def) => {
-  acc[def.sign] = {
-    id: def.id,
-    comparison: def.comparison,
-  };
-  return acc;
-}, {} as Record<string, { id: string; comparison?: boolean }>);
+export const binaryScalarOperatorToOperatorName = binaryScalarDefs.reduce(
+  (acc, def) => {
+    acc[def.sign] = {
+      id: def.id,
+      comparison: def.comparison,
+    };
+    return acc;
+  },
+  {} as Record<string, { id: string; comparison?: boolean }>
+);

 // Not sure about this one. It could also be a more generic 'Simple math operation' where user specifies
 // both the operator and the operand in a single input
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilters.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilters.tsx
@ -85,11 +85,9 @@ export function LabelFilters({
      {variableEditor ? (
        <InlineFieldRow>
          <div
-            className={cx(
-              css`
-                display: flex;
-              `
-            )}
+            className={cx(css`
+              display: flex;
+            `)}
          >
            <InlineLabel
              width={20}
--- a/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx
+++ b/public/app/plugins/panel/annolist/AnnoListPanel.test.tsx
@ -67,7 +67,7 @@ async function setupTestContext({
      getStream: () =>
        ({
          subscribe: jest.fn(),
-        } as any),
+        }) as any,
      publish: jest.fn(),
      removeAllListeners: jest.fn(),
      newScopedBus: jest.fn(),
--- a/public/app/plugins/panel/barchart/quadtree.ts
+++ b/public/app/plugins/panel/barchart/quadtree.ts
@ -50,7 +50,13 @@ export class Quadtree {
  o: Rect[];
  q: Quads | null;

-  constructor(public x: number, public y: number, public w: number, public h: number, public l: number = 0) {
+  constructor(
+    public x: number,
+    public y: number,
+    public w: number,
+    public h: number,
+    public l: number = 0
+  ) {
    this.o = [];
    this.q = null;
  }
--- a/public/app/plugins/panel/table-old/editor.ts
+++ b/public/app/plugins/panel/table-old/editor.ts
@ -15,7 +15,10 @@ export class TablePanelEditorCtrl {

  static $inject = ['$scope', 'uiSegmentSrv'];

-  constructor($scope: any, private uiSegmentSrv: any) {
+  constructor(
+    $scope: any,
+    private uiSegmentSrv: any
+  ) {
    $scope.editor = this;
    this.panelCtrl = $scope.ctrl;
    this.panel = this.panelCtrl.panel;
--- a/public/app/plugins/panel/table-old/module.ts
+++ b/public/app/plugins/panel/table-old/module.ts
@ -56,7 +56,12 @@ export class TablePanelCtrl extends MetricsPanelCtrl {

  static $inject = ['$scope', '$injector', 'annotationsSrv', '$sanitize'];

-  constructor($scope: any, $injector: any, private annotationsSrv: any, private $sanitize: any) {
+  constructor(
+    $scope: any,
+    $injector: any,
+    private annotationsSrv: any,
+    private $sanitize: any
+  ) {
    super($scope, $injector);

    this.pageIndex = 0;
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
@ -82,9 +82,7 @@ export const AnnotationTooltip = ({
        {alertText}
        <>
          <HorizontalGroup spacing="xs" wrap>
-            {tags?.map((t, i) => (
-              <Tag name={t} key={`${t}-${i}`} />
-            ))}
+            {tags?.map((t, i) => <Tag name={t} key={`${t}-${i}`} />)}
          </HorizontalGroup>
        </>
      </div>
--- a/public/sass/base/_grafana_icons.scss
+++ b/public/sass/base/_grafana_icons.scss
@ -1,7 +1,8 @@
@font-face {
  font-family: 'grafana-icons';
  src: url('../fonts/grafana-icons.eot?okx5td');
-  src: url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
+  src:
+    url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
    url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
    url('../fonts/grafana-icons.woff?okx5td') format('woff'),
    url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
--- a/public/sass/base/font-awesome/_path.scss
+++ b/public/sass/base/font-awesome/_path.scss
@ -4,7 +4,8 @@
@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+  src:
+    url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@ -20,8 +20,12 @@
 .ps__rail-x {
  display: none;
  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
+  -webkit-transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
@ -32,8 +36,12 @@
 .ps__rail-y {
  display: none;
  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
+  -webkit-transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
@ -242,7 +250,9 @@

  // height: 15px;
  width: 15px;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
  opacity: 0;
 }

--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@ -61,8 +61,11 @@
    display: block;
    white-space: nowrap;
    cursor: pointer;
-    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-      background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition:
+      color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+      padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .typeahead-item__selected {
--- a/public/sass/components/_tagsinput.scss
+++ b/public/sass/components/_tagsinput.scss
@ -36,7 +36,9 @@
      }

      &:hover {
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.2),
+          0 1px 2px rgba(0, 0, 0, 0.05);

        &:active {
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--- a/public/test/matchers/utils.ts
+++ b/public/test/matchers/utils.ts
@ -15,8 +15,8 @@ export function forceObservableCompletion(subscription: Subscription, resolve: (
          `${matcherHint('.toEmitValues')}

    Expected ${printReceived('Observable')} to be ${printExpected(
-            `completed within ${OBSERVABLE_TEST_TIMEOUT_IN_MS}ms`
-          )} but it did not.`,
+      `completed within ${OBSERVABLE_TEST_TIMEOUT_IN_MS}ms`
+    )} but it did not.`,
      });
    })
  );
--- a/public/test/mocks/datasource_srv.ts
+++ b/public/test/mocks/datasource_srv.ts
@ -12,7 +12,10 @@ import {
 } from '@grafana/data';

 export class DatasourceSrvMock {
-  constructor(private defaultDS: DataSourceApi, private datasources: { [name: string]: DataSourceApi }) {
+  constructor(
+    private defaultDS: DataSourceApi,
+    private datasources: { [name: string]: DataSourceApi }
+  ) {
    //
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -19502,7 +19502,7 @@ __metadata:
    postcss-loader: 7.3.3
    postcss-reporter: 7.0.5
    postcss-scss: 4.0.6
-    prettier: 2.8.4
+    prettier: 3.0.0
    prismjs: 1.29.0
    prop-types: 15.8.1
    pseudoizer: ^0.1.0
@ -19594,6 +19594,9 @@ __metadata:
    whatwg-fetch: 3.6.2
    xlsx: "https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz"
    yargs: ^17.5.1
+  dependenciesMeta:
+    prettier@3.0.0:
+      unplugged: true
  languageName: unknown
  linkType: soft

@ -26332,12 +26335,12 @@ __metadata:
  languageName: node
  linkType: hard

-"prettier@npm:2.8.4":
-  version: 2.8.4
-  resolution: "prettier@npm:2.8.4"
+"prettier@npm:3.0.0":
+  version: 3.0.0
+  resolution: "prettier@npm:3.0.0"
  bin:
-    prettier: bin-prettier.js
-  checksum: c173064bf3df57b6d93d19aa98753b9b9dd7657212e33b41ada8e2e9f9884066bb9ca0b4005b89b3ab137efffdf8fbe0b462785aba20364798ff4303aadda57e
+    prettier: bin/prettier.cjs
+  checksum: 6a832876a1552dc58330d2467874e5a0b46b9ccbfc5d3531eb69d15684743e7f83dc9fbd202db6270446deba9c82b79d24383d09924c462b457136a759425e33
  languageName: node
  linkType: hard