ref(replays): show network tab under ff (#69171)

static/app/utils/replays/hooks/useActiveReplayTab.tsx

@@ -13,11 +13,22 @@ export enum TabKey {
   TRACE = 'trace',
 }
 
-function isReplayTab(tab: string): tab is TabKey {
+function isReplayTab({tab, isVideoReplay}: {isVideoReplay: boolean; tab: string}) {
+  const supportedVideoTabs = [
+    TabKey.TAGS,
+    TabKey.ERRORS,
+    TabKey.BREADCRUMBS,
+    TabKey.NETWORK,
+  ];
+
+  if (isVideoReplay) {
+    return supportedVideoTabs.includes(tab as TabKey);
+  }
+
   return Object.values<string>(TabKey).includes(tab);
 }
 
-function useActiveReplayTab({isVideoReplay}: {isVideoReplay?: boolean}) {
+function useActiveReplayTab({isVideoReplay = false}: {isVideoReplay?: boolean}) {
   const defaultTab = isVideoReplay ? TabKey.TAGS : TabKey.BREADCRUMBS;
   const {getParamValue, setParamValue} = useUrlParams('t_main', defaultTab);
 
@@ -25,16 +36,18 @@ function useActiveReplayTab({isVideoReplay}: {isVideoReplay?: boolean}) {
 
   return {
     getActiveTab: useCallback(
-      () => (isReplayTab(paramValue) ? (paramValue as TabKey) : defaultTab),
-      [paramValue, defaultTab]
+      () => (isReplayTab({tab: paramValue, isVideoReplay}) ? paramValue : defaultTab),
+      [paramValue, defaultTab, isVideoReplay]
     ),
     setActiveTab: useCallback(
       (value: string) => {
         setParamValue(
-          isReplayTab(value.toLowerCase()) ? value.toLowerCase() : defaultTab
+          isReplayTab({tab: value.toLowerCase(), isVideoReplay})
+            ? value.toLowerCase()
+            : defaultTab
         );
       },
-      [setParamValue, defaultTab]
+      [setParamValue, defaultTab, isVideoReplay]
     ),
   };
 }

static/app/views/replays/detail/layout/focusArea.tsx

@@ -11,19 +11,6 @@ import Trace from 'sentry/views/replays/detail/trace/index';
 export default function FocusArea({isVideoReplay}: {isVideoReplay?: boolean}) {
   const {getActiveTab} = useActiveReplayTab({isVideoReplay});
 
-  if (isVideoReplay) {
-    switch (getActiveTab()) {
-      case TabKey.ERRORS:
-        return <ErrorList />;
-      case TabKey.BREADCRUMBS:
-        return <Breadcrumbs />;
-      case TabKey.TAGS:
-      default: {
-        return <TagPanel />;
-      }
-    }
-  }
-
   switch (getActiveTab()) {
     case TabKey.A11Y:
       return <A11y />;

static/app/views/replays/detail/layout/focusTabs.tsx

@@ -70,10 +70,13 @@ function FocusTabs({className, isVideoReplay}: Props) {
   const {pathname, query} = useLocation();
   const {getActiveTab, setActiveTab} = useActiveReplayTab({isVideoReplay});
   const activeTab = getActiveTab();
-  const supportedVideoTabs = [TabKey.TAGS, TabKey.ERRORS, TabKey.BREADCRUMBS];
 
-  const unsupportedVideoTab = tab => {
-    return isVideoReplay && !supportedVideoTabs.includes(tab);
+  const isTabDisabled = (tab: string) => {
+    return (
+      tab === TabKey.NETWORK &&
+      isVideoReplay &&
+      !organization.features.includes('session-replay-mobile-network-tab')
+    );
   };
 
   return (
@@ -81,10 +84,10 @@ function FocusTabs({className, isVideoReplay}: Props) {
       {Object.entries(getReplayTabs({organization, isVideoReplay})).map(([tab, label]) =>
         label ? (
           <ListLink
-            disabled={unsupportedVideoTab(tab)}
+            disabled={isTabDisabled(tab)}
             data-test-id={`replay-details-${tab}-btn`}
             key={tab}
-            isActive={() => (unsupportedVideoTab(tab) ? false : tab === activeTab)}
+            isActive={() => tab === activeTab}
             to={`${pathname}?${queryString.stringify({...query, t_main: tab})}`}
             onClick={e => {
               e.preventDefault();
@@ -96,9 +99,7 @@ function FocusTabs({className, isVideoReplay}: Props) {
               });
             }}
           >
-            <Tooltip
-              title={unsupportedVideoTab(tab) ? t('This feature is coming soon') : null}
-            >
+            <Tooltip title={isTabDisabled(tab) ? t('This feature is coming soon') : null}>
               {label}
             </Tooltip>
           </ListLink>