ref(replays): Remove the session-replay-ui flag in FE code (#45400)

1st of 4:
- https://github.com/getsentry/sentry/pull/45400 (you are here)
- https://github.com/getsentry/sentry/pull/45401
- https://github.com/getsentry/getsentry/pull/9712
- https://github.com/getsentry/self-hosted/pull/2010

Related to https://github.com/getsentry/sentry/issues/45197

static/app/components/eventOrGroupExtraDetails.tsx

@@ -50,7 +50,7 @@ function EventOrGroupExtraDetails({
   const issuesPath = `/organizations/${organization.slug}/issues/`;
 
   const showReplayCount =
-    organization.features.includes('session-replay-ui') && projectSupportsReplay(project);
+    organization.features.includes('session-replay') && projectSupportsReplay(project);
 
   return (
     <GroupExtra>

static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx

@@ -219,7 +219,7 @@ describe('Breadcrumbs', () => {
             platform: 'javascript',
           })}
           organization={TestStubs.Organization({
-            features: ['session-replay', 'session-replay-ui'],
+            features: ['session-replay'],
           })}
         />
       );
@@ -244,7 +244,7 @@ describe('Breadcrumbs', () => {
             tags: [],
           })}
           organization={TestStubs.Organization({
-            features: ['session-replay', 'session-replay-ui'],
+            features: ['session-replay'],
           })}
         />
       );
@@ -273,7 +273,7 @@ describe('Breadcrumbs', () => {
             platform: 'javascript',
           })}
           organization={TestStubs.Organization({
-            features: ['session-replay', 'session-replay-ui'],
+            features: ['session-replay'],
           })}
         />
       );

static/app/components/events/interfaces/breadcrumbs/index.tsx

@@ -272,7 +272,7 @@ function BreadcrumbsContainer({data, event, organization, projectSlug, isShare}:
   }
 
   const replayId = event?.tags?.find(({key}) => key === 'replayId')?.value;
-  const showReplay = !isShare && organization.features.includes('session-replay-ui');
+  const showReplay = !isShare && organization.features.includes('session-replay');
 
   const actions = (
     <SearchAndSortWrapper isFullWidth={showReplay}>

static/app/components/replays/issuesReplayCountProvider.tsx

@@ -24,7 +24,7 @@ type Props = {
  */
 export default function IssuesReplayCountProvider({children, groupIds}: Props) {
   const organization = useOrganization();
-  const hasSessionReplay = organization.features.includes('session-replay-ui');
+  const hasSessionReplay = organization.features.includes('session-replay');
 
   if (hasSessionReplay) {
     return (

static/app/components/sidebar/index.tsx

@@ -242,7 +242,7 @@ function Sidebar({location, organization}: Props) {
   );
 
   const replays = hasOrganization && (
-    <Feature features={['session-replay-ui']} organization={organization}>
+    <Feature features={['session-replay']} organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
         icon={<IconPlay size="md" />}

static/app/views/discover/results.tsx

@@ -297,7 +297,7 @@ export class Results extends Component<Props, State> {
 
     // If the view is not valid, redirect to a known valid state.
     const {location, organization, selection, isHomepage, savedQuery} = this.props;
-    const isReplayEnabled = organization.features.includes('session-replay-ui');
+    const isReplayEnabled = organization.features.includes('session-replay');
     const defaultEventView = Object.assign({}, DEFAULT_EVENT_VIEW, {
       fields: isReplayEnabled
         ? DEFAULT_EVENT_VIEW.fields.concat(['replayId'])

static/app/views/issueDetails/allEventsTable.tsx

@@ -77,7 +77,7 @@ type ColumnInfo = {columnTitles: string[]; fields: string[]};
 
 const getColumns = (group: Group, organization: Organization): ColumnInfo => {
   const isPerfIssue = group.issueCategory === IssueCategory.PERFORMANCE;
-  const isReplayEnabled = organization.features.includes('session-replay-ui');
+  const isReplayEnabled = organization.features.includes('session-replay');
 
   const {fields: platformSpecificFields, columnTitles: platformSpecificColumnTitles} =
     getPlatformColumns(group.project.platform ?? group.platform, {isReplayEnabled});

static/app/views/issueDetails/eventToolbar.tsx

@@ -53,7 +53,7 @@ class GroupEventToolbar extends Component<Props> {
 
     const {group, organization, location, project, hasReplay} = this.props;
     const groupId = group.id;
-    const isReplayEnabled = organization.features.includes('session-replay-ui');
+    const isReplayEnabled = organization.features.includes('session-replay');
 
     const baseEventsPath = `/organizations/${organization.slug}/issues/${groupId}/events/`;
 

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

@@ -21,9 +21,7 @@ type InitializeOrgProps = {
 const REPLAY_ID_1 = '346789a703f6454384f1de473b8b9fcc';
 const REPLAY_ID_2 = 'b05dae9b6be54d21a4d5ad9f8f02b780';
 
-function init({
-  organizationProps = {features: ['session-replay-ui']},
-}: InitializeOrgProps) {
+function init({organizationProps = {features: ['session-replay']}}: InitializeOrgProps) {
   const mockProject = TestStubs.Project();
   const {router, organization, routerContext} = initializeOrg({
     organization: {

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

@@ -23,7 +23,7 @@ const GroupReplaysContainer = (props: Props) => {
 
   return (
     <Feature
-      features={['session-replay-ui']}
+      features={['session-replay']}
       organization={organization}
       renderDisabled={renderNoAccess}
     >