feat(replays): Always show the Issue Link inside replay Console tab (#43614)

**Before:**

![SCR-20230124-gvt](https://user-images.githubusercontent.com/187460/214360552-5dca5c34-1a9c-488c-9a29-2514500f77d3.png)

**After:**

![SCR-20230124-gv7](https://user-images.githubusercontent.com/187460/214360487-604570de-27b4-4121-858f-76154d421d12.png)

Also, now we can see the 'play' icon whenever we hover over a row.
Before the play icon would only appear when hovering over the timestamp
itself which is a small target.

Fixes #42840

static/app/views/replays/detail/console/consoleLogRow.tsx

@@ -122,11 +122,12 @@ const ConsoleLog = styled('div')<{
       ? 'inherit'
       : p.theme.gray300};
 
-  & ${IssueLinkWrapper} {
-    visibility: hidden;
-  }
-
-  &:hover ${IssueLinkWrapper} {
+  /*
+  Show the timestamp button "Play" icon when we hover the row.
+  This is a really generic selector that could find many things, but for now it
+  only targets the one thing that we expect.
+  */
+  &:hover button > svg {
     visibility: visible;
   }
 `;

static/app/views/replays/detail/console/viewIssueLink.tsx

@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
 
-import {Hovercard} from 'sentry/components/hovercard';
-import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Link from 'sentry/components/links/link';
 import ShortId from 'sentry/components/shortId';
-import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {BreadcrumbTypeDefault, Crumb} from 'sentry/types/breadcrumbs';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -20,27 +17,17 @@ function ViewIssueLink({breadcrumb}: Props) {
   if (!breadcrumbHasIssue(breadcrumb)) {
     return null;
   }
-  const {project: projectSlug, groupId, groupShortId, eventId} = breadcrumb.data || {};
+  const {groupId, groupShortId, eventId} = breadcrumb.data || {};
 
   const to = {
     pathname: `/organizations/${organization.slug}/issues/${groupId}/events/${eventId}/?referrer=replay-console`,
   };
   return (
-    <StyledHovercard
-      body={
-        <ShortIdBreadrcumb>
-          <ProjectBadge
-            project={{slug: projectSlug}}
-            avatarSize={16}
-            hideName
-            avatarProps={{tooltip: projectSlug}}
-          />
-          <ShortId to={to} shortId={groupShortId} />
-        </ShortIdBreadrcumb>
-      }
-    >
-      <Link to={to}>{t('View Details')}</Link>
-    </StyledHovercard>
+    <Link to={to}>
+      <ShortIdBreadrcumb>
+        <ShortId to={to} shortId={groupShortId} />
+      </ShortIdBreadrcumb>
+    </Link>
   );
 }
 
@@ -50,17 +37,4 @@ const ShortIdBreadrcumb = styled('div')`
   align-items: center;
 `;
 
-const StyledHovercard = styled(
-  ({children, bodyClassName, ...props}: React.ComponentProps<typeof Hovercard>) => (
-    <Hovercard bodyClassName={bodyClassName || '' + ' view-issue-hovercard'} {...props}>
-      {children}
-    </Hovercard>
-  )
-)`
-  width: auto;
-  .view-issue-hovercard {
-    padding: ${space(0.75)} ${space(1.5)};
-  }
-`;
-
 export default ViewIssueLink;