ref: put refs closer to typedef (#91757)

This is likely adding pressure on the type checker, as intersections
with large types are a struggle for the compiler to process

Author: JonasBa

static/app/components/charts/barChart.tsx

@@ -16,6 +16,7 @@ export interface BarChartProps extends BaseChartProps {
   animation?: boolean;
   barOpacity?: number;
   hideZeros?: boolean;
+  ref?: React.Ref<ReactEchartsRef>;
   stacked?: boolean;
 }
 
@@ -69,9 +70,7 @@ export function BarChart({
   xAxis,
   animation,
   ...props
-}: BarChartProps & {
-  ref?: React.Ref<ReactEchartsRef>;
-}) {
+}: BarChartProps) {
   const transformedSeries = useMemo(() => {
     return transformToBarSeries({barOpacity, hideZeros, series, stacked, animation});
   }, [animation, barOpacity, hideZeros, series, stacked]);

static/app/components/charts/heatMapChart.tsx

@@ -2,7 +2,7 @@ import './components/visualMap';
 
 import type {HeatmapSeriesOption, VisualMapComponentOption} from 'echarts';
 
-import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
+import type {Series} from 'sentry/types/echarts';
 
 import HeatMapSeries from './series/heatMapSeries';
 import type {BaseChartProps} from './baseChart';
@@ -20,12 +20,7 @@ interface HeatmapProps extends Omit<BaseChartProps, 'series'> {
   seriesOptions?: HeatmapSeriesOption;
 }
 
-export default function HeatMapChart({
-  ref,
-  ...props
-}: HeatmapProps & {
-  ref?: React.Ref<ReactEchartsRef>;
-}) {
+export default function HeatMapChart({ref, ...props}: HeatmapProps) {
   const {series, seriesOptions, visualMaps, ...otherProps} = props;
   return (
     <BaseChart

static/app/components/core/avatar/actorAvatar.tsx

@@ -12,6 +12,7 @@ import {useTeamsById} from 'sentry/utils/useTeamsById';
 
 export interface ActorAvatarProps extends BaseAvatarProps {
   actor: Actor;
+  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
 }
 
 export function ActorAvatar({
@@ -20,9 +21,7 @@ export function ActorAvatar({
   hasTooltip = true,
   actor,
   ...props
-}: ActorAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
-}) {
+}: ActorAvatarProps) {
   const otherProps = {
     size,
     hasTooltip,
@@ -51,15 +50,10 @@ export function ActorAvatar({
 
 interface AsyncTeamAvatarProps extends Omit<TeamAvatarProps, 'team'> {
   teamId: string;
+  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
 }
 
-function AsyncTeamAvatar({
-  ref,
-  teamId,
-  ...props
-}: AsyncTeamAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
-}) {
+function AsyncTeamAvatar({ref, teamId, ...props}: AsyncTeamAvatarProps) {
   const {teams, isLoading} = useTeamsById({ids: [teamId]});
   const team = teams.find(t => t.id === teamId);
 
@@ -76,15 +70,10 @@ function AsyncTeamAvatar({
  */
 interface AsyncMemberAvatarProps extends Omit<UserAvatarProps, 'user'> {
   userActor: Actor;
+  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
 }
 
-function AsyncMemberAvatar({
-  ref,
-  userActor,
-  ...props
-}: AsyncMemberAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
-}) {
+function AsyncMemberAvatar({ref, userActor, ...props}: AsyncMemberAvatarProps) {
   const ids = useMemo(() => [userActor.id], [userActor.id]);
   const {members, fetching} = useMembers({ids});
   const member = members.find(u => u.id === userActor.id);

static/app/components/core/avatar/docIntegrationAvatar.tsx

@@ -4,15 +4,14 @@ import type {DocIntegration} from 'sentry/types/integrations';
 
 export interface DocIntegrationAvatarProps extends BaseAvatarProps {
   docIntegration?: DocIntegration;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
 export function DocIntegrationAvatar({
   ref,
   docIntegration,
   ...props
-}: DocIntegrationAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}) {
+}: DocIntegrationAvatarProps) {
   if (!docIntegration?.avatar) {
     // @TODO(jonasbadalic): This is not passing a ref!
     return <PluginIcon size={props.size} pluginId={docIntegration?.slug ?? ''} />;

static/app/components/core/avatar/gravatar.tsx

@@ -15,6 +15,7 @@ interface GravatarProps extends BaseAvatarComponentProps {
   onError?: () => void;
   onLoad?: () => void;
   placeholder?: string;
+  ref?: React.Ref<HTMLImageElement>;
 }
 
 export function Gravatar({
@@ -26,9 +27,7 @@ export function Gravatar({
   onError,
   onLoad,
   suggested,
-}: GravatarProps & {
-  ref?: React.Ref<HTMLImageElement>;
-}) {
+}: GravatarProps) {
   const [sha256, setSha256] = useState<string | null>(null);
   useEffect(() => {
     if (!isCryptoSubtleDigestAvailable()) {

static/app/components/core/avatar/index.tsx

@@ -32,44 +32,62 @@ type AvatarProps =
   | DocIntegrationAvatarProps
   | SentryAppAvatarProps;
 
-function Avatar({
-  ref,
-  hasTooltip = false,
-  ...props
-}: AvatarProps & {ref?: React.Ref<HTMLDivElement>}) {
-  const commonProps = {hasTooltip, ref, ...props};
+function Avatar({hasTooltip = false, ref, ...props}: AvatarProps) {
+  const commonProps = {hasTooltip, ...props};
 
   // @TODO(jonas): the old code included the falsy check, I attempted to remove it, but
   // learned the hard way that it breaks tests, meaning there some type unsafety in the
   // old code and this should be kept around.
   if ('actor' in props && props.actor) {
-    return <ActorAvatar actor={props.actor} {...commonProps} />;
+    return <ActorAvatar actor={props.actor} {...commonProps} ref={ref} />;
   }
 
   if ('user' in props && props.user) {
-    return <UserAvatar user={props.user} {...commonProps} />;
+    return <UserAvatar user={props.user} {...commonProps} ref={ref} />;
   }
 
   if ('team' in props && props.team) {
-    return <TeamAvatar team={props.team} {...commonProps} />;
+    return <TeamAvatar team={props.team} {...commonProps} ref={ref} />;
   }
 
   if ('project' in props && props.project) {
-    return <ProjectAvatar project={props.project} {...commonProps} ref={ref} />;
+    return (
+      <ProjectAvatar
+        project={props.project}
+        {...commonProps}
+        ref={ref as React.Ref<HTMLDivElement>}
+      />
+    );
   }
 
   if ('sentryApp' in props && props.sentryApp) {
-    return <SentryAppAvatar sentryApp={props.sentryApp} {...commonProps} />;
+    return (
+      <SentryAppAvatar
+        sentryApp={props.sentryApp}
+        {...commonProps}
+        ref={ref as React.Ref<HTMLSpanElement>}
+      />
+    );
   }
 
   if ('docIntegration' in props && props.docIntegration) {
     return (
-      <DocIntegrationAvatar docIntegration={props.docIntegration} {...commonProps} />
+      <DocIntegrationAvatar
+        docIntegration={props.docIntegration}
+        {...commonProps}
+        ref={ref as React.Ref<HTMLSpanElement>}
+      />
     );
   }
 
   if ('organization' in props && props.organization) {
-    return <OrganizationAvatar organization={props.organization} {...commonProps} />;
+    return (
+      <OrganizationAvatar
+        organization={props.organization}
+        {...commonProps}
+        ref={ref as React.Ref<HTMLSpanElement>}
+      />
+    );
   }
 
   Sentry.captureMessage(

static/app/components/core/avatar/organizationAvatar.tsx

@@ -4,15 +4,14 @@ import {explodeSlug} from 'sentry/utils';
 
 export interface OrganizationAvatarProps extends BaseAvatarProps {
   organization?: OrganizationSummary;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
 export function OrganizationAvatar({
   ref,
   organization,
   ...props
-}: OrganizationAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}) {
+}: OrganizationAvatarProps) {
   if (!organization) {
     // @TODO(jonasbadalic): Do we need a placeholder here?
     return null;

static/app/components/core/avatar/projectAvatar.tsx

@@ -6,6 +6,7 @@ import type {AvatarProject} from 'sentry/types/project';
 export interface ProjectAvatarProps extends BaseAvatarProps {
   project: AvatarProject;
   direction?: 'left' | 'right';
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 export function ProjectAvatar({
@@ -14,9 +15,7 @@ export function ProjectAvatar({
   hasTooltip,
   tooltip,
   ...props
-}: ProjectAvatarProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}) {
+}: ProjectAvatarProps) {
   return (
     <Tooltip disabled={!hasTooltip} title={tooltip}>
       <PlatformList

static/app/components/core/avatar/sentryAppAvatar.tsx

@@ -5,6 +5,7 @@ import type {AvatarSentryApp} from 'sentry/types/integrations';
 export interface SentryAppAvatarProps extends BaseAvatarProps {
   isColor?: boolean;
   isDefault?: boolean;
+  ref?: React.Ref<HTMLSpanElement>;
   sentryApp?: AvatarSentryApp;
 }
 
@@ -14,9 +15,7 @@ export function SentryAppAvatar({
   sentryApp,
   isDefault = false,
   ...props
-}: SentryAppAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}) {
+}: SentryAppAvatarProps) {
   const avatarDetails = sentryApp?.avatars?.find(({color}) => color === isColor);
 
   // Render the default if the prop is provided, there is no existing avatar, or it has been reverted to 'default'

static/app/components/core/avatar/teamAvatar.tsx

@@ -6,16 +6,10 @@ import {explodeSlug} from 'sentry/utils';
 
 export interface TeamAvatarProps extends BaseAvatarProps {
   team: Team | undefined;
+  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
 }
 
-export function TeamAvatar({
-  ref,
-  team,
-  tooltip: tooltipProp,
-  ...props
-}: TeamAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
-}) {
+export function TeamAvatar({ref, team, tooltip: tooltipProp, ...props}: TeamAvatarProps) {
   if (!team) {
     // @TODO(jonasbadalic): Do we need a placeholder here?
     return null;

static/app/components/core/avatar/userAvatar.tsx

@@ -8,6 +8,7 @@ import {isRenderFunc} from 'sentry/utils/isRenderFunc';
 
 export interface UserAvatarProps extends BaseAvatarProps {
   gravatar?: boolean;
+  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
   renderTooltip?: (user: AvatarUser | Actor) => React.ReactNode;
   user?: Actor | AvatarUser;
 }
@@ -24,9 +25,7 @@ export function UserAvatar({
   renderTooltip,
   user,
   ...props
-}: UserAvatarProps & {
-  ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
-}) {
+}: UserAvatarProps) {
   if (!user) {
     // @TODO(jonasbadalic): Do we need a placeholder here?
     return null;

static/app/components/core/badge/tag.tsx

@@ -27,6 +27,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
    * Shows clickable IconClose on the right side.
    */
   onDismiss?: () => void;
+  ref?: React.Ref<HTMLDivElement>;
   /**
    * Dictates color scheme of the tag.
    */
@@ -40,9 +41,7 @@ export function Tag({
   onDismiss,
   children,
   ...props
-}: TagProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}) {
+}: TagProps) {
   return (
     <StyledTag type={type} data-test-id="tag-background" ref={ref} {...props}>
       {icon && (

static/app/components/core/input/index.tsx

@@ -8,7 +8,9 @@ import type {FormSize} from 'sentry/utils/theme';
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly'>,
-    InputStylesProps {}
+    InputStylesProps {
+  ref?: React.Ref<HTMLInputElement>;
+}
 
 export const inputStyles = (p: InputStylesProps & {theme: Theme}) =>
   p.theme.isChonk ? chonkInputStyles(p as any) : legacyInputStyles(p);
@@ -34,9 +36,7 @@ export const Input = styled(
     nativeSize,
 
     ...props
-  }: InputProps & {
-    ref?: React.Ref<HTMLInputElement>;
-  }) => <input {...props} ref={ref} size={nativeSize} />,
+  }: InputProps) => <input {...props} ref={ref} size={nativeSize} />,
   {shouldForwardProp: prop => typeof prop === 'string' && isPropValid(prop)}
 )`
   ${inputStyles};

static/app/components/core/input/inputGroup.tsx

@@ -80,14 +80,7 @@ export function InputGroup({children, ...props}: React.HTMLAttributes<HTMLDivEle
   );
 }
 
-function Input({
-  ref,
-  size,
-  disabled,
-  ...props
-}: InputProps & {
-  ref?: React.Ref<HTMLInputElement>;
-}) {
+function Input({ref, size, disabled, ...props}: InputProps) {
   const {leadingWidth, trailingWidth, setInputProps} = useContext(InputGroupContext);
 
   useLayoutEffect(() => {
@@ -106,14 +99,7 @@ function Input({
   );
 }
 
-function TextArea({
-  ref,
-  size,
-  disabled,
-  ...props
-}: TextAreaProps & {
-  ref?: React.Ref<HTMLTextAreaElement>;
-}) {
+function TextArea({ref, size, disabled, ...props}: TextAreaProps) {
   const {leadingWidth, trailingWidth, setInputProps} = useContext(InputGroupContext);
 
   useLayoutEffect(() => {

static/app/components/core/input/numberInput.tsx

@@ -23,6 +23,7 @@ interface NumberInputProps
     > {
   max?: number;
   min?: number;
+  ref?: React.Ref<HTMLInputElement>;
 }
 
 export function NumberInput({
@@ -37,9 +38,7 @@ export function NumberInput({
   nativeSize,
   className,
   ...props
-}: NumberInputProps & {
-  ref?: React.Ref<HTMLInputElement>;
-}) {
+}: NumberInputProps) {
   const localRef = useRef<HTMLInputElement>(null);
 
   const ariaProps = {