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>

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 };
   }
 

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> = {

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[] = [];

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> {

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;

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);
   }

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);

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;
   };

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`

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);
 }

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`

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;
       }
 

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};
-          }
-
-          // 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;
-          }
+    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;
+        }
+
+        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;

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 });
 

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};
+`;

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`

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;
     `,
   };
 });

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%,

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>;