ref(replays): hide selector widgets and disable tab if only mobile proj selected (#67173)

- If only mobile projects are selected, disable the selectors tab & hide
the widgets
- New hook!


https://github.com/getsentry/sentry/assets/56095982/d9e1d579-3900-4ce6-b111-32ffffdd051a

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

@@ -0,0 +1,19 @@
+import {mobile} from 'sentry/data/platformCategories';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjects from 'sentry/utils/useProjects';
+
+export default function useAllMobileProj() {
+  const organization = useOrganization();
+  const {
+    selection: {projects: projectIds},
+  } = usePageFilters();
+
+  const {projects} = useProjects();
+  const projectsSelected = projects.filter(p => projectIds.map(String).includes(p.id));
+  const allMobileProj =
+    organization.features.includes('session-replay-mobile-player') &&
+    projectsSelected.every(p => mobile.includes(p.platform ?? 'other'));
+
+  return {allMobileProj};
+}

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

@@ -12,6 +12,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
 import DeadRageSelectorCards from 'sentry/views/replays/deadRageClick/deadRageSelectorCards';
+import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import ReplaysFilters from 'sentry/views/replays/list/filters';
 import ReplayOnboardingPanel from 'sentry/views/replays/list/replayOnboardingPanel';
 import ReplaysList from 'sentry/views/replays/list/replaysList';
@@ -30,6 +31,9 @@ export default function ListContent() {
     organization,
     projectId: projects.map(String),
   });
+
+  const {allMobileProj} = useAllMobileProj();
+
   const [widgetIsOpen, setWidgetIsOpen] = useState(true);
 
   useRouteAnalyticsParams({
@@ -73,12 +77,14 @@ export default function ListContent() {
         <ReplaysFilters />
         <SearchWrapper>
           <ReplaysSearch />
-          <Button onClick={() => setWidgetIsOpen(!widgetIsOpen)}>
-            {widgetIsOpen ? t('Hide Widgets') : t('Show Widgets')}
-          </Button>
+          {!allMobileProj && (
+            <Button onClick={() => setWidgetIsOpen(!widgetIsOpen)}>
+              {widgetIsOpen ? t('Hide Widgets') : t('Show Widgets')}
+            </Button>
+          )}
         </SearchWrapper>
       </FiltersContainer>
-      {widgetIsOpen ? <DeadRageSelectorCards /> : null}
+      {widgetIsOpen && !allMobileProj ? <DeadRageSelectorCards /> : null}
       <ReplaysList />
     </Fragment>
   );

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

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import type {Location} from 'history';
 
 import Pagination from 'sentry/components/pagination';
-import {mobile} from 'sentry/data/platformCategories';
 import {t, tct} from 'sentry/locale';
 import type {Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -16,8 +15,8 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import useProjects from 'sentry/utils/useProjects';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
+import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import ReplayTable from 'sentry/views/replays/replayTable';
 import {ReplayColumn} from 'sentry/views/replays/replayTable/types';
 import type {ReplayListLocationQuery} from 'sentry/views/replays/types';
@@ -72,16 +71,15 @@ function ReplaysListTable({
   });
 
   const {
-    selection: {projects: projectIds},
+    selection: {projects},
   } = usePageFilters();
 
-  const {projects} = useProjects();
-  const projectsSelected = projects.filter(p => projectIds.map(String).includes(p.id));
+  const {allMobileProj} = useAllMobileProj();
 
   const {needsUpdate: allSelectedProjectsNeedUpdates} = useProjectSdkNeedsUpdate({
     minVersion: MIN_REPLAY_CLICK_SDK,
     organization,
-    projectId: projectIds.map(String),
+    projectId: projects.map(String),
   });
 
   const conditions = useMemo(() => {
@@ -90,10 +88,6 @@ function ReplaysListTable({
 
   const hasReplayClick = conditions.getFilterKeys().some(k => k.startsWith('click.'));
 
-  const allMobileProj =
-    organization.features.includes('session-replay-mobile-player') &&
-    projectsSelected.every(p => mobile.includes(p.platform ?? 'other'));
-
   // browser isn't applicable for mobile projects
   // rage and dead clicks not available yet
   const visibleCols = allMobileProj

static/app/views/replays/tabs.tsx

@@ -5,6 +5,7 @@ import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
+import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 
 interface Props {
   selected: 'replays' | 'selectors';
@@ -13,6 +14,7 @@ interface Props {
 export default function ReplayTabs({selected}: Props) {
   const organization = useOrganization();
   const location = useLocation();
+  const {allMobileProj} = useAllMobileProj();
 
   const tabs = useMemo(
     () => [
@@ -43,6 +45,7 @@ export default function ReplayTabs({selected}: Props) {
               pathname: tab.pathname,
               query: tab.query,
             }}
+            disabled={tab.key === 'selectors' && allMobileProj}
           >
             {tab.label}
           </TabList.Item>