ref(replays): Extract the Replay tracing feature check to a component (#40161)

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

@@ -1,8 +1,5 @@
-import Feature from 'sentry/components/acl/feature';
-import FeatureDisabled from 'sentry/components/acl/featureDisabled';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import {t} from 'sentry/locale';
 import useActiveReplayTab from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useOrganization from 'sentry/utils/useOrganization';
 import Console from 'sentry/views/replays/detail/console';
@@ -10,7 +7,7 @@ import DomMutations from 'sentry/views/replays/detail/domMutations';
 import IssueList from 'sentry/views/replays/detail/issueList';
 import MemoryChart from 'sentry/views/replays/detail/memoryChart';
 import NetworkList from 'sentry/views/replays/detail/network';
-import Trace from 'sentry/views/replays/detail/trace';
+import Trace from 'sentry/views/replays/detail/trace/index';
 
 type Props = {};
 
@@ -43,26 +40,7 @@ function FocusArea({}: Props) {
         />
       );
     case 'trace':
-      const features = ['organizations:performance-view'];
-
-      const renderDisabled = () => (
-        <FeatureDisabled
-          featureName={t('Performance Monitoring')}
-          features={features}
-          message={t('Requires performance monitoring.')}
-          hideHelpToggle
-        />
-      );
-      return (
-        <Feature
-          organization={organization}
-          hookName="feature-disabled:configure-distributed-tracing"
-          features={features}
-          renderDisabled={renderDisabled}
-        >
-          <Trace organization={organization} replayRecord={replayRecord} />
-        </Feature>
-      );
+      return <Trace organization={organization} replayRecord={replayRecord} />;
     case 'issues':
       return <IssueList replayId={replayRecord.id} projectId={replayRecord.projectId} />;
     case 'dom':

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

@@ -0,0 +1,43 @@
+import {useCallback} from 'react';
+
+import Feature from 'sentry/components/acl/feature';
+import FeatureDisabled from 'sentry/components/acl/featureDisabled';
+import {t} from 'sentry/locale';
+import type {Organization} from 'sentry/types';
+import Trace from 'sentry/views/replays/detail/trace/trace';
+import type {ReplayRecord} from 'sentry/views/replays/types';
+
+type Props = {
+  organization: Organization;
+  replayRecord: ReplayRecord;
+};
+
+const features = ['organizations:performance-view'];
+
+function TraceFeature({organization, replayRecord}: Props) {
+  const renderDisabled = useCallback(
+    () => (
+      <FeatureDisabled
+        featureName={t('Performance Monitoring')}
+        features={features}
+        hideHelpToggle
+        message={t('Requires performance monitoring.')}
+      />
+    ),
+    []
+  );
+
+  // TODO(replays): Configure an upsell message for when tracing is disabled
+  return (
+    <Feature
+      features={features}
+      hookName={undefined}
+      organization={organization}
+      renderDisabled={renderDisabled}
+    >
+      <Trace organization={organization} replayRecord={replayRecord} />
+    </Feature>
+  );
+}
+
+export default TraceFeature;