style(prettier): Upgrade prettier to 2.8.3 (#44045)

Importantly, Prettier 2.8 [supports the new satisfies
operator](https://prettier.io/blog/2022/11/23/2.8.0.html#support-typescript-49-satisfies-operatorhttpsdevblogsmicrosoftcomtypescriptannouncing-typescript-4-9satisfies-13764httpsgithubcomprettierprettierpull13764-13783httpsgithubcomprettierprettierpull13783-13872httpsgithubcomprettierprettierpull13872-by-sosukesuzukihttpsgithubcomsosukesuzuki),
which 2.7 did not allow.

This updates the library and runs new formatter on all files.

package.json

@@ -126,7 +126,7 @@
     "pegjs-loader": "^0.5.6",
     "platformicons": "^5.4.0",
     "po-catalog-loader": "2.0.0",
-    "prettier": "2.7.1",
+    "prettier": "^2.8.3",
     "prismjs": "^1.27.0",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",

static/app/components/avatar/baseAvatar.tsx

@@ -90,7 +90,7 @@ type BaseProps = DefaultProps & {
   /**
    * This is the size of the remote image to request.
    */
-  remoteImageSize?: typeof ALLOWED_SIZES[number];
+  remoteImageSize?: (typeof ALLOWED_SIZES)[number];
   size?: number;
   title?: string;
   /**

static/app/components/charts/chartZoom.tsx

@@ -41,7 +41,7 @@ const ZoomPropKeys = [
   'onFinished',
 ] as const;
 
-export type ZoomRenderProps = Pick<Props, typeof ZoomPropKeys[number]> & {
+export type ZoomRenderProps = Pick<Props, (typeof ZoomPropKeys)[number]> & {
   dataZoom?: DataZoomComponentOption[];
   end?: Date;
   isGroupedByDate?: boolean;

static/app/components/deprecatedforms/genericField.tsx

@@ -53,7 +53,7 @@ interface FormData {
 type Props = {
   config: Config | SelectFieldConfig | AsyncSelectFieldConfig;
   formData: FormData;
-  formState: typeof FormState[keyof typeof FormState];
+  formState: (typeof FormState)[keyof typeof FormState];
   onChange: FormField['props']['onChange'];
   formErrors?: object;
 };

static/app/components/deprecatedforms/passwordField.tsx

@@ -4,7 +4,7 @@ import FormState from 'sentry/components/forms/state';
 
 type Props = InputField['props'] & {
   prefix: string;
-  formState?: typeof FormState[keyof typeof FormState];
+  formState?: (typeof FormState)[keyof typeof FormState];
   hasSavedValue?: boolean;
 };
 

static/app/components/forms/formField/index.tsx

@@ -49,8 +49,8 @@ type ObservedFn<_P, T> = (props: FormFieldPropModel) => T;
 type ObservedFnOrValue<P, T> = T | ObservedFn<P, T>;
 
 type ObservedPropResolver = [
-  typeof propsToObserve[number],
-  () => ResolvedObservableProps[typeof propsToObserve[number]]
+  (typeof propsToObserve)[number],
+  () => ResolvedObservableProps[(typeof propsToObserve)[number]]
 ];
 
 /**

static/app/components/forms/types.tsx

@@ -206,7 +206,7 @@ export type Field = (
   | SentryProjectSelectorType
   | SelectAsyncType
   | ChoiceMapperType
-  | {type: typeof FieldType[number]}
+  | {type: (typeof FieldType)[number]}
   | FileType
   | DateTimeType
 ) &

static/app/components/letterAvatar.tsx

@@ -19,7 +19,7 @@ const COLORS = [
   '#847a8c', // gray
 ] as const;
 
-type Color = typeof COLORS[number];
+type Color = (typeof COLORS)[number];
 
 function hashIdentifier(identifier: string) {
   identifier += '';

static/app/components/multiPlatformPicker.tsx

@@ -25,8 +25,8 @@ import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAna
 const PLATFORM_CATEGORIES = [{id: 'all', name: t('All')}, ...categoryList] as const;
 
 // Category needs the all option while CategoryObj does not
-type Category = typeof PLATFORM_CATEGORIES[number]['id'];
-type CategoryObj = typeof categoryList[number];
+type Category = (typeof PLATFORM_CATEGORIES)[number]['id'];
+type CategoryObj = (typeof categoryList)[number];
 type Platform = CategoryObj['platforms'][number];
 
 // create a lookup table for each platform
@@ -52,7 +52,7 @@ const getIndexOfPlatformInCategory = (
 
 const isPopular = (platform: PlatformIntegration) =>
   popularPlatformCategories.includes(
-    platform.id as typeof popularPlatformCategories[number]
+    platform.id as (typeof popularPlatformCategories)[number]
   );
 
 const popularIndex = (platform: PlatformIntegration) =>

static/app/components/platformPicker.tsx

@@ -27,7 +27,7 @@ const PlatformList = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-type Category = typeof PLATFORM_CATEGORIES[number]['id'];
+type Category = (typeof PLATFORM_CATEGORIES)[number]['id'];
 
 interface PlatformPickerProps {
   setPlatform: (key: PlatformKey | null) => void;