deps(ui): Upgrade prettier

package.json

@@ -140,7 +140,7 @@
     "peggy": "^4.1.1",
     "platformicons": "^8.0.0",
     "po-catalog-loader": "2.1.0",
-    "prettier": "3.3.2",
+    "prettier": "3.5.3",
     "prismjs": "^1.29.0",
     "process": "^0.11.10",
     "qrcode.react": "^3.1.0",

static/app/actionCreators/pageFilters.tsx

@@ -361,7 +361,7 @@ export function initializeUrlState({
 
   const pinnedFilters = organization.features.includes('new-page-filter')
     ? new Set<PinnedPageFilter>(['projects', 'environments', 'datetime'])
-    : storedPageFilters?.pinnedFilters ?? new Set();
+    : (storedPageFilters?.pinnedFilters ?? new Set());
 
   PageFiltersStore.onInitializeUrlState(pageFilters, pinnedFilters, shouldPersist);
   if (shouldUpdateLocalStorage) {

static/app/components/avatarUploader.tsx

@@ -455,12 +455,13 @@ const ImageCropper = styled('div')<{resizeDirection: Position | null}>`
     10px -10px,
     -10px 0px;
   background-color: ${p => p.theme.background};
-  background-image: linear-gradient(
-      45deg,
+  background-image:
+    linear-gradient(45deg, ${p => p.theme.backgroundSecondary} 25%, rgba(0, 0, 0, 0) 25%),
+    linear-gradient(
+      -45deg,
       ${p => p.theme.backgroundSecondary} 25%,
       rgba(0, 0, 0, 0) 25%
     ),
-    linear-gradient(-45deg, ${p => p.theme.backgroundSecondary} 25%, rgba(0, 0, 0, 0) 25%),
     linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%),
     linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%);
 `;

static/app/components/breadcrumbs.tsx

@@ -110,7 +110,7 @@ export function Breadcrumbs({crumbs, linkLastItem = false, ...props}: Props) {
         const {label, to, preservePageFilters, key} = crumb;
         const labelKey = typeof label === 'string' ? label : '';
         const mapKey =
-          key ?? typeof to === 'string' ? `${labelKey}${to}` : `${labelKey}${index}`;
+          (key ?? typeof to === 'string') ? `${labelKey}${to}` : `${labelKey}${index}`;
 
         return (
           <Fragment key={mapKey}>

static/app/components/charts/components/tooltip.tsx

@@ -401,7 +401,7 @@ export function computeChartTooltip(
 
       const chartElement: Element =
         props.appendToBody && chartId
-          ? document.getElementById(chartId) ?? parentNode
+          ? (document.getElementById(chartId) ?? parentNode)
           : parentNode;
 
       // Get the left offset of the tip container (the chart)

static/app/components/charts/eventsChart.tsx

@@ -274,8 +274,8 @@ class Chart extends Component<ChartProps, State> {
       );
     }
     const chartColors = timeseriesData.length
-      ? colors?.slice(0, series.length) ??
-        getChartColorPalette(timeseriesData.length - 2 - (hasOther ? 1 : 0)).slice()
+      ? (colors?.slice(0, series.length) ??
+        getChartColorPalette(timeseriesData.length - 2 - (hasOther ? 1 : 0)).slice())
       : undefined;
     if (chartColors?.length && hasOther) {
       chartColors.push(theme.chartOther);

static/app/components/checkInTimeline/utils/getTickStyle.tsx

@@ -19,7 +19,8 @@ export function getTickStyle<Status extends string>(
     border: 1px solid ${theme[style.tickColor]};
     background-size: 3px 3px;
     opacity: 0.5;
-    background-image: linear-gradient(
+    background-image:
+      linear-gradient(
         -45deg,
         ${theme[style.hatchTick]} 25%,
         transparent 25%,

static/app/components/circleIndicator.tsx

@@ -24,7 +24,7 @@ const CircleIndicator = styled('div')<Props>`
   height: ${p => p.size ?? defaultProps.size}px;
   width: ${p => p.size ?? defaultProps.size}px;
   background: ${p =>
-    p.color ?? (p.enabled ?? defaultProps.enabled ? p.theme.success : p.theme.error)};
+    p.color ?? ((p.enabled ?? defaultProps.enabled) ? p.theme.success : p.theme.error)};
 `;
 
 export default CircleIndicator;

static/app/components/clippedBox.tsx

@@ -287,7 +287,7 @@ function ClippedBox(props: ClippedBoxProps) {
         {props.title ? <Title>{props.title}</Title> : null}
         {props.children}
         {clipped
-          ? props.clipFade?.({showMoreButton}) ?? <ClipFade>{showMoreButton}</ClipFade>
+          ? (props.clipFade?.({showMoreButton}) ?? <ClipFade>{showMoreButton}</ClipFade>)
           : null}
       </div>
     </Wrapper>

static/app/components/commitRow.tsx

@@ -118,7 +118,7 @@ function CommitRow({
             isHoverable
           >
             <AuthorWrapper>
-              {isUser ? t('You') : commit.author?.name ?? t('Unknown author')}
+              {isUser ? t('You') : (commit.author?.name ?? t('Unknown author'))}
               {commit.author && commit.author.id === undefined && (
                 <IconQuestion size="xs" />
               )}
@@ -209,7 +209,7 @@ function CommitRow({
           {tct('[author] committed [commitLink] \u2022 [date]', {
             author: (
               <strong>
-                {isUser ? t('You') : commit.author?.name ?? t('Unknown author')}
+                {isUser ? t('You') : (commit.author?.name ?? t('Unknown author'))}
               </strong>
             ),
             commitLink: (

static/app/components/compactSelect/gridList/option.tsx

@@ -121,7 +121,7 @@ export function GridListOption({node, listState, size}: GridListOptionProps) {
       isSelected={isSelected}
       isPressed={isPressed}
       isFocused={isFocusWithin}
-      priority={priority ?? (isSelected && !multiple) ? 'primary' : 'default'}
+      priority={(priority ?? (isSelected && !multiple)) ? 'primary' : 'default'}
       innerWrapProps={gridCellPropsMemo}
       labelProps={labelPropsMemo}
       leadingItems={leadingItemsMemo}

static/app/components/compactSelect/listBox/option.tsx

@@ -100,7 +100,7 @@ export function ListBoxOption({
       isPressed={isPressed}
       isSelected={isSelected}
       isFocused={listState.selectionManager.isFocused && isFocused}
-      priority={priority ?? (isSelected && !multiple) ? 'primary' : 'default'}
+      priority={(priority ?? (isSelected && !multiple)) ? 'primary' : 'default'}
       labelProps={labelPropsMemo}
       leadingItems={leadingItemsMemo}
       trailingItems={trailingItems}

static/app/components/container/negativeSpaceContainer.tsx

@@ -10,7 +10,8 @@ const NegativeSpaceContainer = styled('div')`
   overflow: hidden;
 
   background-color: ${p => p.theme.backgroundSecondary};
-  background-image: repeating-linear-gradient(
+  background-image:
+    repeating-linear-gradient(
       -145deg,
       transparent,
       transparent 8px,

static/app/components/deprecatedSmartSearchBar/index.tsx

@@ -521,7 +521,7 @@ class DeprecatedSmartSearchBar extends Component<DefaultProps & Props, State> {
 
   get initialQuery() {
     const {query, defaultQuery} = this.props;
-    return query !== null ? addSpace(query) : defaultQuery ?? '';
+    return query !== null ? addSpace(query) : (defaultQuery ?? '');
   }
 
   makeQueryState(query: string) {

static/app/components/deprecatedSmartSearchBar/searchDropdown.tsx

@@ -404,7 +404,7 @@ function DropdownItem({
           !isDisabled
             ? item.type && invalidTypes.includes(item.type) && !!customInvalidTagMessage
               ? undefined
-              : item.callback ?? onClick.bind(null, item.value, item)
+              : (item.callback ?? onClick.bind(null, item.value, item))
             : undefined
         }
         ref={element => item.active && element?.scrollIntoView?.({block: 'nearest'})}

static/app/components/discover/quickContextCommitRow.tsx

@@ -36,7 +36,7 @@ function QuickContextCommitRow({commit}: CommitRowProps) {
           data-test-id="quick-context-commit-row-commit-link"
         >
           {tct('View commit [commitLink] by [author]', {
-            author: isUser ? t('You') : commit.author?.name ?? t('Unknown author'),
+            author: isUser ? t('You') : (commit.author?.name ?? t('Unknown author')),
             commitLink: (
               <CommitLink
                 inline

static/app/components/events/autofix/autofixTimeline.tsx

@@ -40,8 +40,8 @@ function getEventIcon(eventType: AutofixTimelineEvent['timeline_item_type']) {
 function getEventColor(isActive?: boolean, activeColor?: Color): ColorConfig {
   return {
     title: 'gray400',
-    icon: isActive ? activeColor ?? 'pink400' : 'gray400',
-    iconBorder: isActive ? activeColor ?? 'pink400' : 'gray400',
+    icon: isActive ? (activeColor ?? 'pink400') : 'gray400',
+    iconBorder: isActive ? (activeColor ?? 'pink400') : 'gray400',
   };
 }
 

static/app/components/events/featureFlags/featureFlagOnboardingSidebar.tsx

@@ -237,7 +237,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   );
 
   const currentPlatform = currentProject.platform
-    ? platforms.find(p => p.id === currentProject.platform) ?? otherPlatform
+    ? (platforms.find(p => p.id === currentProject.platform) ?? otherPlatform)
     : otherPlatform;
 
   const {

static/app/components/events/groupingInfo/useEventGroupingInfo.tsx

@@ -76,7 +76,7 @@ export function useEventGroupingInfo({
 
   const groupInfo = hasPerformanceGrouping
     ? generatePerformanceGroupInfo({group, event})
-    : data ?? null;
+    : (data ?? null);
 
   return {groupInfo, isPending, isError, isSuccess, hasPerformanceGrouping};
 }

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -249,7 +249,7 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
 
     // The new spans UI relies on the group hash assigned by Relay, which is different from the hash available on the span itself
     const groupHash = hasNewSpansUIFlag
-      ? props.node.value.sentry_tags?.group ?? ''
+      ? (props.node.value.sentry_tags?.group ?? '')
       : props.node.value.hash;
 
     // Do not render a button if there is no group hash, since this can result in broken links

static/app/components/events/interfaces/threads/threadSelector/index.tsx

@@ -71,16 +71,16 @@ function ThreadSelector({threads, event, exception, activeThread, onChange}: Pro
           return isSortAscending ? threadA.id - threadB.id : threadB.id - threadA.id;
         case SortAttribute.NAME:
           return isSortAscending
-            ? threadA.name?.localeCompare(threadB.name ?? '') ?? 0
-            : threadB.name?.localeCompare(threadA.name ?? '') ?? 0;
+            ? (threadA.name?.localeCompare(threadB.name ?? '') ?? 0)
+            : (threadB.name?.localeCompare(threadA.name ?? '') ?? 0);
         case SortAttribute.LABEL:
           return isSortAscending
-            ? threadInfoA.label?.localeCompare(threadInfoB.label ?? '') ?? 0
-            : threadInfoB.label?.localeCompare(threadInfoA.label ?? '') ?? 0;
+            ? (threadInfoA.label?.localeCompare(threadInfoB.label ?? '') ?? 0)
+            : (threadInfoB.label?.localeCompare(threadInfoA.label ?? '') ?? 0);
         case SortAttribute.STATE:
           return isSortAscending
-            ? threadInfoA.state?.localeCompare(threadInfoB.state ?? '') ?? 0
-            : threadInfoB.state?.localeCompare(threadInfoA.state ?? '') ?? 0;
+            ? (threadInfoA.state?.localeCompare(threadInfoB.state ?? '') ?? 0)
+            : (threadInfoB.state?.localeCompare(threadInfoA.state ?? '') ?? 0);
         default:
           return 0;
       }

static/app/components/events/interfaces/threads/threadSelector/styles.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
 
+/* prettier-ignore */
 export const ThreadSelectorGrid = styled('div')<{hasThreadStates: boolean}>`
   font-size: ${p => p.theme.fontSizeSmall};
   display: grid;

static/app/components/events/interfaces/uptime/uptimeDataSection.tsx

@@ -125,7 +125,7 @@ export function UptimeDataSection({group, event, project}: Props) {
     ruleIds: alertRuleId ? [alertRuleId] : [],
     timeWindowConfig,
   });
-  const bucketedData = alertRuleId ? uptimeStats?.[alertRuleId] ?? [] : [];
+  const bucketedData = alertRuleId ? (uptimeStats?.[alertRuleId] ?? []) : [];
 
   const actions = (
     <ButtonBar gap={1}>

static/app/components/events/viewHierarchy/utils.tsx

@@ -64,8 +64,8 @@ export function getHierarchyDimensions(
     const node = {
       node: child,
       rect: new Rect(
-        useAbsolutePosition ? child.x ?? 0 : (parent?.x ?? 0) + (child.x ?? 0),
-        useAbsolutePosition ? child.y ?? 0 : (parent?.y ?? 0) + (child.y ?? 0),
+        useAbsolutePosition ? (child.x ?? 0) : (parent?.x ?? 0) + (child.x ?? 0),
+        useAbsolutePosition ? (child.y ?? 0) : (parent?.y ?? 0) + (child.y ?? 0),
         child.width ?? 0,
         child.height ?? 0
       ),

static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -50,7 +50,7 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
 
   const URL_NOT_FOUND = t('URL not found');
   const displayUrl =
-    eventData?.contexts?.feedback || eventData?.tags ? url ?? URL_NOT_FOUND : '';
+    eventData?.contexts?.feedback || eventData?.tags ? (url ?? URL_NOT_FOUND) : '';
   const urlIsLink = displayUrl.length && displayUrl !== URL_NOT_FOUND;
 
   return (

static/app/components/feedback/feedbackOnboarding/sidebar.tsx

@@ -223,7 +223,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   );
 
   const currentPlatform = currentProject.platform
-    ? platforms.find(p => p.id === currentProject.platform) ?? otherPlatform
+    ? (platforms.find(p => p.id === currentProject.platform) ?? otherPlatform)
     : otherPlatform;
 
   const webBackendPlatform = replayBackendPlatforms.includes(currentPlatform.id);

static/app/components/group/groupSummary.tsx

@@ -199,7 +199,7 @@ export function GroupSummary({
           {
             id: 'resources',
             title: t('Resources'),
-            insight: `${isValidElement(config.resources?.description) ? '' : config.resources?.description ?? ''}\n\n${config.resources?.links?.map(link => `[${link.text}](${link.link})`).join(' • ') ?? ''}`,
+            insight: `${isValidElement(config.resources?.description) ? '' : (config.resources?.description ?? '')}\n\n${config.resources?.links?.map(link => `[${link.text}](${link.link})`).join(' • ') ?? ''}`,
             insightElement: isValidElement(config.resources?.description)
               ? config.resources?.description
               : null,

static/app/components/hotkeysLabel.tsx

@@ -64,7 +64,7 @@ function HotkeysLabel({value, forcePlatform}: Props) {
 
   const isMac = forcePlatform
     ? forcePlatform === 'macos'
-    : window?.navigator?.platform?.toLowerCase().startsWith('mac') ?? false;
+    : (window?.navigator?.platform?.toLowerCase().startsWith('mac') ?? false);
 
   // If we're not using mac find the first key set that is generic.
   // Otherwise show whatever the first hotkey is.

static/app/components/interactionStateLayer.tsx

@@ -49,7 +49,7 @@ const InteractionStateLayer = styled(
   border: inherit;
   color: ${p =>
     p.color
-      ? (p.theme[p.color as keyof typeof p.theme] as string | undefined) ?? p.color
+      ? ((p.theme[p.color as keyof typeof p.theme] as string | undefined) ?? p.color)
       : 'currentcolor'};
   background-color: currentcolor;
   border-color: currentcolor;

static/app/components/nav/issueViews/issueViewNavItemContent.tsx

@@ -272,8 +272,8 @@ const hasUnsavedChanges = (
   const queryTimeFilters =
     start || end || statsPeriod || utc
       ? {
-          start: statsPeriod ? null : start?.toString() ?? null,
-          end: statsPeriod ? null : end?.toString() ?? null,
+          start: statsPeriod ? null : (start?.toString() ?? null),
+          end: statsPeriod ? null : (end?.toString() ?? null),
           period: statsPeriod?.toString() ?? null,
           utc: statsPeriod ? null : utc?.toString() === 'true',
         }

static/app/components/nav/issueViews/issueViewNavQueryCount.tsx

@@ -59,9 +59,9 @@ export function IssueViewNavQueryCount({view}: IssueViewNavQueryCountProps) {
       : undefined;
   const count = isError
     ? 0
-    : queryCount?.[view.unsavedChanges?.query ?? view.query] ??
+    : (queryCount?.[view.unsavedChanges?.query ?? view.query] ??
       queryCount?.[defaultQuery ?? ''] ??
-      0;
+      0);
 
   return (
     <QueryCountBubble

static/app/components/nav/utils.tsx

@@ -9,7 +9,7 @@ export function isLinkActive(
   pathname: string,
   options: {end?: boolean} = {end: false}
 ): boolean {
-  const toPathname = normalizeUrl(typeof to === 'string' ? to : to.pathname ?? '/');
+  const toPathname = normalizeUrl(typeof to === 'string' ? to : (to.pathname ?? '/'));
 
   if (options.end) {
     return pathname === toPathname;

static/app/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted.tsx

@@ -78,7 +78,7 @@ export function useLoadGettingStarted({
     refetch: projectKeys.refetch,
     isLoading: projectKeys.isPending || module === undefined,
     isError: projectKeys.isError,
-    docs: module === 'none' ? null : module?.default ?? null,
+    docs: module === 'none' ? null : (module?.default ?? null),
     dsn: projectKeys.data?.[0]?.dsn,
     projectKeyId: projectKeys.data?.[0]?.id,
   };

static/app/components/onboarding/platformOptionsControl.tsx

@@ -30,7 +30,7 @@ export function useUrlPlatformOptions<PlatformOptions extends BasePlatformOption
       const values = platformOptions[key]!.items.map(({value}) => value);
       acc[key as keyof PlatformOptions] = values.includes(query[key])
         ? query[key]
-        : defaultValue ?? values[0];
+        : (defaultValue ?? values[0]);
       return acc;
     }, {} as SelectedPlatformOptions<PlatformOptions>);
   }, [platformOptions, query]);

static/app/components/onboarding/productSelection.tsx

@@ -269,7 +269,7 @@ function Product({
     >
       <ProductWrapper
         onClick={disabled?.onClick ?? onClick}
-        disabled={disabled?.onClick ?? permanentDisabled ? false : !!disabled}
+        disabled={(disabled?.onClick ?? permanentDisabled) ? false : !!disabled}
         priority={permanentDisabled || checked ? 'primary' : 'default'}
         aria-label={label}
       >

static/app/components/organizations/datePageFilter.tsx

@@ -57,7 +57,7 @@ export function DatePageFilter({
         });
       }}
       menuTitle={menuTitle ?? t('Filter Time Range')}
-      menuWidth={menuWidth ?? desynced ? '22em' : undefined}
+      menuWidth={(menuWidth ?? desynced) ? '22em' : undefined}
       menuBody={desynced && <DesyncedFilterMessage />}
       triggerProps={triggerProps}
     />

static/app/components/organizations/pageFilters/parse.tsx

@@ -243,12 +243,12 @@ export function normalizeDateTimeParams(
 
   const dateTimeStart = allowAbsoluteDatetime
     ? allowAbsolutePageDatetime
-      ? getDateTimeString(pageStart) ?? getDateTimeString(start)
+      ? (getDateTimeString(pageStart) ?? getDateTimeString(start))
       : getDateTimeString(start)
     : null;
   const dateTimeEnd = allowAbsoluteDatetime
     ? allowAbsolutePageDatetime
-      ? getDateTimeString(pageEnd) ?? getDateTimeString(end)
+      ? (getDateTimeString(pageEnd) ?? getDateTimeString(end))
       : getDateTimeString(end)
     : null;
 
@@ -258,8 +258,8 @@ export function normalizeDateTimeParams(
 
   const object = {
     statsPeriod: coercedPeriod,
-    start: coercedPeriod ? null : dateTimeStart ?? null,
-    end: coercedPeriod ? null : dateTimeEnd ?? null,
+    start: coercedPeriod ? null : (dateTimeStart ?? null),
+    end: coercedPeriod ? null : (dateTimeEnd ?? null),
     // coerce utc into a string (it can be both: a string representation from
     // router, or a boolean from time range picker)
     utc: coercedPeriod ? null : getUtcValue(pageUtc ?? utc),