fix(replay/issues): don't show onboarding banner if project already sent a replay (#75087)

was trying to debug the onboarding panel state bug, but also realized
that we're showing the onboarding banner even if the event has sent a
replay already.

static/app/components/events/eventReplay/index.spec.tsx

@@ -8,7 +8,10 @@ import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import EventReplay from 'sentry/components/events/eventReplay';
-import {useReplayOnboardingSidebarPanel} from 'sentry/utils/replays/hooks/useReplayOnboarding';
+import {
+  useHaveSelectedProjectsSentAnyReplayEvents,
+  useReplayOnboardingSidebarPanel,
+} from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 import ReplayReader from 'sentry/utils/replays/replayReader';
 import useProjects from 'sentry/utils/useProjects';
@@ -17,6 +20,7 @@ import type {ReplayError} from 'sentry/views/replays/types';
 jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 jest.mock('sentry/utils/replays/hooks/useReplayReader');
 jest.mock('sentry/utils/useProjects');
+jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 // Replay clip preview is very heavy, mock it out
 jest.mock(
   'sentry/components/events/eventReplay/replayClipPreview',
@@ -97,6 +101,10 @@ describe('EventReplay', function () {
     useReplayOnboardingSidebarPanel
   );
 
+  const MockUseHaveSelectedProjectsSentAnyReplayEvents = jest.mocked(
+    useHaveSelectedProjectsSentAnyReplayEvents
+  );
+
   const organization = OrganizationFixture({
     features: ['session-replay'],
   });
@@ -133,6 +141,10 @@ describe('EventReplay', function () {
     MockUseReplayOnboardingSidebarPanel.mockReturnValue({
       activateSidebar: jest.fn(),
     });
+    MockUseHaveSelectedProjectsSentAnyReplayEvents.mockReturnValue({
+      hasSentOneReplay: false,
+      fetching: false,
+    });
   });
 
   it('should render the replay inline onboarding component when replays are enabled and the project supports replay', async function () {

static/app/components/events/eventReplay/index.tsx

@@ -7,6 +7,7 @@ import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import useEventCanShowReplayUpsell from 'sentry/utils/event/useEventCanShowReplayUpsell';
 import {getReplayIdFromEvent} from 'sentry/utils/replays/getReplayIdFromEvent';
+import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding';
 
 interface Props {
   event: Event;
@@ -18,6 +19,7 @@ const ReplayOnboardingPanel = lazy(() => import('./replayInlineOnboardingPanel')
 
 export default function EventReplay({event, group, projectSlug}: Props) {
   const replayId = getReplayIdFromEvent(event);
+  const {hasSentOneReplay} = useHaveSelectedProjectsSentAnyReplayEvents();
   const {canShowUpsell, upsellPlatform, upsellProjectId} = useEventCanShowReplayUpsell({
     event,
     group,
@@ -28,7 +30,7 @@ export default function EventReplay({event, group, projectSlug}: Props) {
     return <ReplayClipSection event={event} replayId={replayId} group={group} />;
   }
 
-  if (canShowUpsell) {
+  if (canShowUpsell && !hasSentOneReplay) {
     return (
       <ErrorBoundary mini>
         <LazyLoad