replay(feat): Add a new badge on the Replay Details>Network tab to announce the feature (#47997)

Guarded by the feature flag:
`organizations:session-replay-network-details`


![SCR-20230426-jatv](https://user-images.githubusercontent.com/187460/234646478-5eb2c3be-776c-4258-a861-d0cfd57daea3.png)


Fixes #47834

---------

Co-authored-by: Billy Vong <[email protected]>

Author: ryan953

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

@@ -1,22 +1,38 @@
-import {ReactNode} from 'react';
+import {Fragment, ReactNode} from 'react';
 import queryString from 'query-string';
 
+import FeatureBadge from 'sentry/components/featureBadge';
 import ListLink from 'sentry/components/links/listLink';
 import ScrollableTabs from 'sentry/components/replays/scrollableTabs';
 import {t} from 'sentry/locale';
+import {Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useActiveReplayTab, {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 
-const ReplayTabs: Record<TabKey, ReactNode> = {
-  [TabKey.console]: t('Console'),
-  [TabKey.network]: t('Network'),
-  [TabKey.dom]: t('DOM Events'),
-  [TabKey.issues]: t('Issues'),
-  [TabKey.memory]: t('Memory'),
-  [TabKey.trace]: t('Trace'),
-};
+function getReplayTabs(organization: Organization): Record<TabKey, ReactNode> {
+  const hasReplayNetworkDetails = organization.features.includes(
+    'session-replay-network-details'
+  );
+
+  const networkLabel = hasReplayNetworkDetails ? (
+    <Fragment>
+      {t('Network')} <FeatureBadge type="new" />
+    </Fragment>
+  ) : (
+    t('Network')
+  );
+
+  return {
+    [TabKey.console]: t('Console'),
+    [TabKey.network]: networkLabel,
+    [TabKey.dom]: t('DOM Events'),
+    [TabKey.issues]: t('Issues'),
+    [TabKey.memory]: t('Memory'),
+    [TabKey.trace]: t('Trace'),
+  };
+}
 
 type Props = {
   className?: string;
@@ -30,7 +46,7 @@ function FocusTabs({className}: Props) {
 
   return (
     <ScrollableTabs className={className} underlined>
-      {Object.entries(ReplayTabs).map(([tab, label]) => (
+      {Object.entries(getReplayTabs(organization)).map(([tab, label]) => (
         <ListLink
           key={tab}
           isActive={() => tab === activeTab}

static/app/views/replays/detail/network/index.tsx

@@ -3,10 +3,16 @@ import {AutoSizer, CellMeasurer, GridCellProps, MultiGrid} from 'react-virtualiz
 import styled from '@emotion/styled';
 
 import Feature from 'sentry/components/acl/feature';
+import {Alert} from 'sentry/components/alert';
+import {Button} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import {t} from 'sentry/locale';
+import {IconClose, IconInfo} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
+import useDismissAlert from 'sentry/utils/useDismissAlert';
 import useOrganization from 'sentry/utils/useOrganization';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import NetworkDetails from 'sentry/views/replays/detail/network/networkDetails';
@@ -39,6 +45,8 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {
   const organization = useOrganization();
   const {currentTime, currentHoverTime} = useReplayContext();
 
+  const {dismiss, isDismissed} = useDismissAlert({key: 'replay-network-bodies'});
+
   const initialRequestDetailsHeight = useMemo(
     () => Math.max(150, window.innerHeight * 0.25),
     []
@@ -113,6 +121,36 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {
   return (
     <FluidHeight>
       <NetworkFilters networkSpans={networkSpans} {...filterProps} />
+      <Feature
+        features={['session-replay-network-details']}
+        organization={organization}
+        renderDisabled={false}
+      >
+        {isDismissed ? null : (
+          <StyledAlert
+            icon={<IconInfo />}
+            opaque={false}
+            showIcon
+            type="info"
+            trailingItems={
+              <StyledButton priority="link" size="sm" onClick={() => {}}>
+                <IconClose color="gray500" size="sm" />
+              </StyledButton>
+            }
+          >
+            {tct('Start collecting the body of requests and responses. [link]', {
+              link: (
+                <ExternalLink
+                  href="https://github.com/getsentry/sentry-javascript/issues/7103"
+                  onClick={dismiss}
+                >
+                  {t('Learn More')}
+                </ExternalLink>
+              ),
+            })}
+          </StyledAlert>
+        )}
+      </Feature>
       <NetworkTable>
         <FluidHeight>
           {networkSpans ? (
@@ -214,4 +252,12 @@ const NetworkTable = styled(OverflowHidden)`
   }
 `;
 
+const StyledAlert = styled(Alert)`
+  margin-bottom: ${space(1)};
+`;
+
+const StyledButton = styled(Button)`
+  color: inherit;
+`;
+
 export default NetworkList;