fix(replays): fix placement of mobile banner (#82936)

## AFTER:

under ff (is a beta org) and proj is mobile replay platform:

<img width="1181" alt="SCR-20250106-jexg"
src="https://github.com/user-attachments/assets/aadea33f-99e0-4383-9cbe-1d050aaccbe4"
/>

under ff but proj is not a replay mobile platform:

<img width="1186" alt="SCR-20250106-jewc"
src="https://github.com/user-attachments/assets/30285401-194a-4bef-bbef-41e7f45df732"
/>

## BEFORE: 

under ff (is a beta org) and proj is mobile replay platform:


<img width="1184" alt="SCR-20250106-jfpb"
src="https://github.com/user-attachments/assets/8df07232-8a2a-49f1-9ea4-f61139916223"
/>

under ff but proj is not a replay mobile platform:


<img width="1178" alt="SCR-20250106-jfqf"
src="https://github.com/user-attachments/assets/75d5693e-8f24-40d1-a110-4ccd044f1a58"
/>

Author: michellewzhang

static/app/components/replays/alerts/replayUnsupportedAlert.tsx

@@ -1,3 +1,5 @@
+import styled from '@emotion/styled';
+
 import Alert from 'sentry/components/alert';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {IconInfo} from 'sentry/icons';
@@ -12,11 +14,15 @@ export default function ReplayUnsupportedAlert({projectSlug}: Props) {
     <ExternalLink href="https://docs.sentry.io/product/session-replay/getting-started/#supported-sdks" />
   );
   return (
-    <Alert icon={<IconInfo />}>
+    <StyledAlert icon={<IconInfo />}>
       <strong>{t(`Session Replay isn't available for %s.`, projectSlug)}</strong>{' '}
       {tct(`[docsLink: See our docs] to find out which platforms are supported.`, {
         docsLink,
       })}
-    </Alert>
+    </StyledAlert>
   );
 }
+
+const StyledAlert = styled(Alert)`
+  margin: 0;
+`;

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -64,7 +64,7 @@ function GroupReplays({group}: Props) {
     location,
     organization,
   });
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   useEffect(() => {
     trackAnalytics('replay.render-issues-group-list', {
@@ -137,7 +137,7 @@ function GroupReplaysTableInner({
     replaySlug,
     group,
   });
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   return (
     <ReplayContextProvider
@@ -189,7 +189,7 @@ function GroupReplaysTable({
     queryReferrer: 'issueReplays',
   });
   const {replays} = replayListData;
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   const rawReplayIndex = urlParams.getParamValue('selected_replay_index');
   const selectedReplayIndex = parseInt(

static/app/views/performance/transactionSummary/transactionReplays/transactionReplays.tsx

@@ -162,7 +162,7 @@ function ReplaysContent({
     events,
   });
 
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   return (
     <Layout.Main fullWidth>

static/app/views/replays/detail/useAllMobileProj.tsx

@@ -1,8 +1,8 @@
-import {mobile} from 'sentry/data/platformCategories';
+import {mobile, replayMobilePlatforms} from 'sentry/data/platformCategories';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 
-export default function useAllMobileProj() {
+export default function useAllMobileProj({replayPlatforms}: {replayPlatforms?: boolean}) {
   const {
     selection: {projects: projectIds},
   } = usePageFilters();
@@ -13,7 +13,9 @@ export default function useAllMobileProj() {
   // if no projects selected, look through all projects
   const proj = projectsSelected.length ? projectsSelected : projects;
 
-  const allMobileProj = proj.every(p => mobile.includes(p.platform ?? 'other'));
+  const allMobileProj = replayPlatforms
+    ? proj.every(p => replayMobilePlatforms.includes(p.platform ?? 'other'))
+    : proj.every(p => mobile.includes(p.platform ?? 'other'));
 
   return {allMobileProj};
 }

static/app/views/replays/list.tsx

@@ -1,19 +1,15 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import Alert from 'sentry/components/alert';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
-import ExternalLink from 'sentry/components/links/externalLink';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
-import {IconInfo} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
 import useOrganization from 'sentry/utils/useOrganization';
-import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import ListContent from 'sentry/views/replays/list/listContent';
 import ReplayTabs from 'sentry/views/replays/tabs';
 
@@ -25,8 +21,6 @@ const ReplayListPageHeaderHook = HookOrDefault({
 function ReplaysListContainer() {
   useReplayPageview('replay.list-time-spent');
   const organization = useOrganization();
-  const {allMobileProj} = useAllMobileProj();
-  const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs');
 
   return (
     <SentryDocumentTitle title={`Session Replay — ${organization.slug}`}>
@@ -50,19 +44,6 @@ function ReplaysListContainer() {
           <Layout.Main fullWidth>
             <LayoutGap>
               <ReplayListPageHeaderHook />
-              {allMobileProj && mobileBetaOrg ? (
-                <StyledAlert icon={<IconInfo />} showIcon>
-                  {tct(
-                    `[strong:Mobile Replay is now generally available.] Since you participated in the beta, will have a two month grace period of free usage, until March 6. After that, you will be billed for [link:additional replays not included in your plan].`,
-                    {
-                      strong: <strong />,
-                      link: (
-                        <ExternalLink href="https://docs.sentry.io/pricing/#replays-pricing" />
-                      ),
-                    }
-                  )}
-                </StyledAlert>
-              ) : null}
               <ListContent />
             </LayoutGap>
           </Layout.Main>
@@ -77,8 +58,4 @@ const LayoutGap = styled('div')`
   gap: ${space(2)};
 `;
 
-const StyledAlert = styled(Alert)`
-  margin: 0;
-`;
-
 export default ReplaysListContainer;

static/app/views/replays/list/listContent.tsx

@@ -1,10 +1,13 @@
 import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
+import Alert from 'sentry/components/alert';
 import {Button} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import ReplayRageClickSdkVersionBanner from 'sentry/components/replays/replayRageClickSdkVersionBanner';
-import {t} from 'sentry/locale';
+import {IconInfo} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useHaveSelectedProjectsSentAnyReplayEvents} from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import {MIN_DEAD_RAGE_CLICK_SDK} from 'sentry/utils/replays/sdkVersions';
@@ -33,7 +36,8 @@ export default function ListContent() {
     projectId: projects.map(String),
   });
 
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({replayPlatforms: true});
+  const mobileBetaOrg = organization.features.includes('mobile-replay-beta-orgs');
 
   const [widgetIsOpen, setWidgetIsOpen] = useState(true);
 
@@ -62,6 +66,19 @@ export default function ListContent() {
           <ReplaysFilters />
           <ReplaysSearch />
         </FiltersContainer>
+        {allMobileProj && mobileBetaOrg ? (
+          <StyledAlert icon={<IconInfo />} showIcon>
+            {tct(
+              `[strong:Mobile Replay is now generally available.] Orgs that participated in the beta will have a two month grace period of unlimited usage until March 6. After that, you will be billed for [link:additional replays not included in your plan].`,
+              {
+                strong: <strong />,
+                link: (
+                  <ExternalLink href="https://docs.sentry.io/pricing/#replays-pricing" />
+                ),
+              }
+            )}
+          </StyledAlert>
+        ) : null}
         <ReplayOnboardingPanel />
       </Fragment>
     );
@@ -110,3 +127,7 @@ const SearchWrapper = styled(FiltersContainer)`
   flex-grow: 1;
   flex-wrap: nowrap;
 `;
+
+const StyledAlert = styled(Alert)`
+  margin: 0;
+`;

static/app/views/replays/list/replayOnboardingPanel.tsx

@@ -122,7 +122,7 @@ export function SetupReplaysCTA({
 }: SetupReplaysCTAProps) {
   const {activateSidebar} = useReplayOnboardingSidebarPanel();
   const [expanded, setExpanded] = useState(-1);
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   const FAQ = [
     {

static/app/views/replays/list/replaysList.tsx

@@ -52,7 +52,7 @@ function ReplaysList() {
     selection: {projects},
   } = usePageFilters();
 
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   const {needsUpdate: allSelectedProjectsNeedUpdates} = useProjectSdkNeedsUpdate({
     minVersion: MIN_REPLAY_CLICK_SDK,

static/app/views/replays/tabs.tsx

@@ -14,7 +14,7 @@ interface Props {
 export default function ReplayTabs({selected}: Props) {
   const organization = useOrganization();
   const location = useLocation();
-  const {allMobileProj} = useAllMobileProj();
+  const {allMobileProj} = useAllMobileProj({});
 
   const tabs = useMemo(
     () => [