ref(tsc): fix inference of motion props on firsteventindicator (#32151)

* ref(tsc): fix type union

* ref(tsc): fix type union

* ref(tsc): fix type union

* ref(firstEventFooter): remove provided API

static/app/utils/eventWaiter.tsx

@@ -21,7 +21,7 @@ const recordAnalyticsFirstEvent = ({key, organization, project}) =>
  */
 type FirstIssue = null | true | Group;
 
-type Props = {
+export interface EventWaiterProps {
   api: Client;
   children: (props: {firstIssue: FirstIssue}) => React.ReactNode;
   eventType: 'error' | 'transaction';
@@ -31,9 +31,9 @@ type Props = {
   onIssueReceived?: (props: {firstIssue: FirstIssue}) => void;
   onTransactionReceived?: (props: {firstIssue: FirstIssue}) => void;
   pollInterval?: number;
-};
+}
 
-type State = {
+type EventWaiterState = {
   firstIssue: FirstIssue;
 };
 
@@ -41,8 +41,8 @@ type State = {
  * This is a render prop component that can be used to wait for the first event
  * of a project to be received via polling.
  */
-class EventWaiter extends React.Component<Props, State> {
-  state: State = {
+class EventWaiter extends React.Component<EventWaiterProps, EventWaiterState> {
+  state: EventWaiterState = {
     firstIssue: null,
   };
 

static/app/views/onboarding/components/firstEventFooter.tsx

@@ -10,19 +10,19 @@ import CreateSampleEventButton from 'sentry/views/onboarding/createSampleEventBu
 
 import FirstEventIndicator from './firstEventIndicator';
 
-type Props = {
+interface FirstEventFooterProps {
   organization: Organization;
   project: Project;
   docsLink?: string;
   docsOnClick?: () => void;
-};
+}
 
 export default function FirstEventFooter({
   organization,
   project,
   docsLink,
   docsOnClick,
-}: Props) {
+}: FirstEventFooterProps) {
   return (
     <Fragment>
       <FirstEventIndicator

static/app/views/onboarding/components/firstEventIndicator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {AnimatePresence, motion, Variants} from 'framer-motion';
+import {AnimatePresence, HTMLMotionProps, motion, Variants} from 'framer-motion';
 
 import Button from 'sentry/components/button';
 import {IconCheckmark} from 'sentry/icons';
@@ -9,22 +9,19 @@ import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
 import space from 'sentry/styles/space';
 import {Group} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
-import EventWaiter from 'sentry/utils/eventWaiter';
+import EventWaiter, {EventWaiterProps} from 'sentry/utils/eventWaiter';
 import testableTransition from 'sentry/utils/testableTransition';
 
-type EventWaiterProps = Omit<React.ComponentProps<typeof EventWaiter>, 'children'>;
-type FirstIssue = null | true | Group;
-
 type RenderProps = {
   firstEventButton: React.ReactNode;
   indicator: React.ReactNode;
 };
 
-type Props = EventWaiterProps & {
+interface FirstEventIndicatorProps extends Omit<EventWaiterProps, 'children' | 'api'> {
   children: (props: RenderProps) => React.ReactNode;
-};
+}
 
-const FirstEventIndicator = ({children, ...props}: Props) => (
+const FirstEventIndicator = ({children, ...props}: FirstEventIndicatorProps) => (
   <EventWaiter {...props}>
     {({firstIssue}) =>
       children({
@@ -52,7 +49,11 @@ const FirstEventIndicator = ({children, ...props}: Props) => (
   </EventWaiter>
 );
 
-const Indicator = ({firstIssue}: EventWaiterProps & {firstIssue: FirstIssue}) => (
+interface IndicatorProps extends Omit<EventWaiterProps, 'children' | 'api'> {
+  firstIssue: Group | null | true;
+}
+
+const Indicator = ({firstIssue}: IndicatorProps) => (
   <Container>
     <AnimatePresence>
       {!firstIssue ? <Waiting key="waiting" /> : <Success key="received" />}
@@ -92,14 +93,14 @@ StatusWrapper.defaultProps = {
   },
 };
 
-const Waiting = (props: React.ComponentProps<typeof StatusWrapper>) => (
+const Waiting = (props: HTMLMotionProps<'div'>) => (
   <StatusWrapper {...props}>
     <AnimatedText>{t('Waiting to receive first event to continue')}</AnimatedText>
     <WaitingIndicator />
   </StatusWrapper>
 );
 
-const Success = (props: React.ComponentProps<typeof StatusWrapper>) => (
+const Success = (props: HTMLMotionProps<'div'>) => (
   <StatusWrapper {...props}>
     <AnimatedText>{t('Event was received!')}</AnimatedText>
     <ReceivedIndicator />