Revert "feat(replays): Add link to View Replay next to the Trace Navigator on Issue Details (#43608) (#44032)

This reverts commit f0cdf95ee9a951044159bba0a75169e9509839d8.

We're back to the original white button:
<img width="869" alt="SCR-20230202-cpl"
src="https://user-images.githubusercontent.com/187460/216394566-aba1583c-d8b5-4769-bc84-f6f4fde32856.png">

static/app/components/quickTrace/styles.tsx

@@ -44,8 +44,7 @@ const nodeColors = (theme: Theme) => ({
   },
 });
 
-export const EventNode = styled(Tag)<{disabled?: boolean}>`
-  cursor: ${p => (p.disabled ? 'default' : 'pointer')};
+export const EventNode = styled(Tag)`
   span {
     display: flex;
     color: ${p => nodeColors(p.theme)[p.type || 'white'].color};

static/app/views/issueDetails/eventToolbar.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 import moment from 'moment-timezone';
 
+import {Button} from 'sentry/components/button';
 import DateTime from 'sentry/components/dateTime';
 import {DataSection} from 'sentry/components/events/styles';
 import FileSize from 'sentry/components/fileSize';
@@ -11,7 +12,7 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import NavigationButtonGroup from 'sentry/components/navigationButtonGroup';
 import {Tooltip} from 'sentry/components/tooltip';
-import {IconWarning} from 'sentry/icons';
+import {IconPlay, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Group, Organization, Project} from 'sentry/types';
@@ -19,9 +20,6 @@ import {Event} from 'sentry/types/event';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {shouldUse24Hours} from 'sentry/utils/dates';
 import getDynamicText from 'sentry/utils/getDynamicText';
-import LinkContainer from 'sentry/views/issueDetails/linkContainer';
-import ReplayLink from 'sentry/views/issueDetails/quickTrace/replayLink';
-import ReplayNode from 'sentry/views/issueDetails/quickTrace/replayNode';
 import {TraceLink} from 'sentry/views/issueDetails/quickTrace/traceLink';
 
 import EventCreatedTooltip from './eventCreatedTooltip';
@@ -33,6 +31,7 @@ type Props = {
   location: Location;
   organization: Organization;
   project: Project;
+  hasReplay?: boolean;
 };
 
 class GroupEventToolbar extends Component<Props> {
@@ -52,11 +51,9 @@ class GroupEventToolbar extends Component<Props> {
     const is24Hours = shouldUse24Hours();
     const evt = this.props.event;
 
-    const {group, organization, location, project, event} = this.props;
+    const {group, organization, location, project, hasReplay} = this.props;
     const groupId = group.id;
     const isReplayEnabled = organization.features.includes('session-replay-ui');
-    const projectHasReplay = project.hasReplays;
-    const replayId = event?.tags?.find(({key}) => key === 'replayId')?.value;
 
     const baseEventsPath = `/organizations/${organization.slug}/issues/${groupId}/events/`;
 
@@ -105,16 +102,13 @@ class GroupEventToolbar extends Component<Props> {
               {isOverLatencyThreshold && <StyledIconWarning color="warningText" />}
             </Tooltip>
             <TraceLink event={evt} />
-            {isReplayEnabled && projectHasReplay && replayId ? (
-              <ReplayLink
-                organization={organization}
-                projectSlug={project.slug}
-                replayId={replayId}
-                event={evt}
-              />
-            ) : null}
           </div>
           <NavigationContainer>
+            {hasReplay && isReplayEnabled ? (
+              <Button href="#breadcrumbs" size="sm" icon={<IconPlay size="xs" />}>
+                {t('Replay')}
+              </Button>
+            ) : null}
             <NavigationButtonGroup
               hasPrevious={!!evt.previousEventID}
               hasNext={!!evt.nextEventID}
@@ -144,17 +138,12 @@ class GroupEventToolbar extends Component<Props> {
             />
           </NavigationContainer>
         </HeadingAndNavWrapper>
-        <TraceWithReplayWrapper>
-          {isReplayEnabled && projectHasReplay ? (
-            <ReplayNode hasReplay={Boolean(replayId)} />
-          ) : null}
-          <QuickTrace
-            event={evt}
-            group={group}
-            organization={organization}
-            location={location}
-          />
-        </TraceWithReplayWrapper>
+        <QuickTrace
+          event={evt}
+          group={group}
+          organization={organization}
+          location={location}
+        />
         <StyledGlobalAppStoreConnectUpdateAlert
           project={project}
           organization={organization}
@@ -203,6 +192,23 @@ const StyledGlobalAppStoreConnectUpdateAlert = styled(GlobalAppStoreConnectUpdat
   margin: ${space(0.5)} 0;
 `;
 
+const LinkContainer = styled('span')`
+  margin-left: ${space(1)};
+  padding-left: ${space(1)};
+  position: relative;
+  font-weight: normal;
+
+  &:before {
+    display: block;
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 2px;
+    height: 14px;
+    border-left: 1px solid ${p => p.theme.border};
+  }
+`;
+
 const NavigationContainer = styled('div')`
   display: flex;
   align-items: center;
@@ -210,8 +216,4 @@ const NavigationContainer = styled('div')`
   gap: 0 ${space(1)};
 `;
 
-const TraceWithReplayWrapper = styled('div')`
-  display: flex;
-`;
-
 export default GroupEventToolbar;

static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx

@@ -239,6 +239,8 @@ class GroupEventDetails extends Component<GroupEventDetailsProps, State> {
     const {activity: activities} = group;
     const mostRecentActivity = getGroupMostRecentActivity(activities);
 
+    const hasReplay = Boolean(event?.tags?.find(({key}) => key === 'replayId')?.value);
+
     return (
       <TransactionProfileIdProvider
         projectId={event?.projectID}
@@ -274,6 +276,7 @@ class GroupEventDetails extends Component<GroupEventDetailsProps, State> {
                             organization={organization}
                             location={location}
                             project={project}
+                            hasReplay={hasReplay}
                           />
                         )}
                         {this.renderReprocessedBox(

static/app/views/issueDetails/linkContainer.tsx

@@ -1,22 +0,0 @@
-import styled from '@emotion/styled';
-
-import space from 'sentry/styles/space';
-
-const LinkContainer = styled('span')`
-  margin-left: ${space(1)};
-  padding-left: ${space(1)};
-  position: relative;
-  font-weight: normal;
-
-  &:before {
-    display: block;
-    position: absolute;
-    content: '';
-    left: 0;
-    top: 2px;
-    height: 14px;
-    border-left: 1px solid ${p => p.theme.border};
-  }
-`;
-
-export default LinkContainer;

static/app/views/issueDetails/quickTrace/replayLink.tsx

@@ -1,35 +0,0 @@
-import Link from 'sentry/components/links/link';
-import {t} from 'sentry/locale';
-import {Event, Organization} from 'sentry/types';
-import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
-import {useRoutes} from 'sentry/utils/useRoutes';
-import LinkContainer from 'sentry/views/issueDetails/linkContainer';
-
-type Props = {
-  organization: Organization;
-  projectSlug: string;
-  replayId: string;
-  event?: Event;
-};
-
-function ReplayLink({organization, projectSlug, replayId, event}: Props) {
-  const routes = useRoutes();
-
-  const replaySlug = `${projectSlug}:${replayId}`;
-  const fullReplayUrl = {
-    pathname: `/organizations/${organization.slug}/replays/${replaySlug}/`,
-    query: {
-      referrer: getRouteStringFromRoutes(routes),
-      t_main: 'console',
-      event_t: event?.dateCreated,
-    },
-  };
-
-  return (
-    <LinkContainer>
-      <Link to={fullReplayUrl}>{t('View Replay')}</Link>
-    </LinkContainer>
-  );
-}
-
-export default ReplayLink;

static/app/views/issueDetails/quickTrace/replayNode.tsx

@@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-
-import {EventNode} from 'sentry/components/quickTrace/styles';
-import {IconPlay} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import space from 'sentry/styles/space';
-import {useLocation} from 'sentry/utils/useLocation';
-
-type Props = {
-  hasReplay: boolean;
-};
-
-function ReplayNode({hasReplay}: Props) {
-  const location = useLocation();
-
-  if (hasReplay) {
-    return (
-      <EventNodeReplay
-        icon={<StyledIcon size="xs" />}
-        onClick={() => document.getElementById('breadcrumbs')?.scrollIntoView()}
-        to={{...location, hash: '#breadcrumbs'}}
-        type="black"
-      >
-        {t('Replay')}
-      </EventNodeReplay>
-    );
-  }
-  return (
-    <EventNodeReplay
-      disabled
-      icon={null}
-      tooltipText={t('Replay cannot be found')}
-      type="white"
-    >
-      {t('???')}
-    </EventNodeReplay>
-  );
-}
-
-const StyledIcon = styled(IconPlay)`
-  fill: ${p => p.theme.backgroundTertiary};
-`;
-
-export const EventNodeReplay = styled(EventNode)`
-  display: inline-flex;
-  margin-right: ${space(1)};
-  margin-top: ${space(0.5)};
-`;
-
-export default ReplayNode;

static/app/views/issueDetails/quickTrace/traceLink.tsx

@@ -1,13 +1,14 @@
 import {useCallback, useContext} from 'react';
 import {Link} from 'react-router';
+import styled from '@emotion/styled';
 
 import {generateTraceTarget} from 'sentry/components/quickTrace/utils';
 import {t} from 'sentry/locale';
+import space from 'sentry/styles/space';
 import {Event} from 'sentry/types';
 import {trackAnalyticsEvent} from 'sentry/utils/analytics';
 import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import useOrganization from 'sentry/utils/useOrganization';
-import LinkContainer from 'sentry/views/issueDetails/linkContainer';
 
 type TraceLinkProps = {
   event: Event;
@@ -42,3 +43,19 @@ export function TraceLink({event}: TraceLinkProps) {
     </LinkContainer>
   );
 }
+
+const LinkContainer = styled('span')`
+  margin-left: ${space(1)};
+  padding-left: ${space(1)};
+  position: relative;
+
+  &:before {
+    display: block;
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 2px;
+    height: 14px;
+    border-left: 1px solid ${p => p.theme.border};
+  }
+`;