ref(eventTagsPill): Consolidate release hovercard & tooltip (#33841)

* ref(timeSince): Add tooltip underlines

* ref(eventTagsPill): Consolidate release hovercard & tooltip

static/app/components/events/eventTags/eventTags.tsx

@@ -21,7 +21,6 @@ const EventTags = ({event: {tags = []}, organization, projectId, location}: Prop
 
   const orgSlug = organization.slug;
   const streamPath = `/organizations/${orgSlug}/issues/`;
-  const releasesPath = `/organizations/${orgSlug}/releases/`;
 
   return (
     <Pills>
@@ -33,7 +32,6 @@ const EventTags = ({event: {tags = []}, organization, projectId, location}: Prop
           organization={organization}
           query={generateQueryWithTag(location.query, tag)}
           streamPath={streamPath}
-          releasesPath={releasesPath}
         />
       ))}
     </Pills>

static/app/components/events/eventTags/eventTagsPill.tsx

@@ -5,10 +5,10 @@ import * as qs from 'query-string';
 import AnnotatedText from 'sentry/components/events/meta/annotatedText';
 import {getMeta} from 'sentry/components/events/meta/metaProxy';
 import ExternalLink from 'sentry/components/links/externalLink';
-import Link from 'sentry/components/links/link';
 import Pill from 'sentry/components/pill';
+import Version from 'sentry/components/version';
 import VersionHoverCard from 'sentry/components/versionHoverCard';
-import {IconInfo, IconOpen} from 'sentry/icons';
+import {IconOpen} from 'sentry/icons';
 import {Organization} from 'sentry/types';
 import {EventTag} from 'sentry/types/event';
 import {isUrl} from 'sentry/utils';
@@ -24,19 +24,11 @@ type Props = {
   organization: Organization;
   projectId: string;
   query: Query;
-  releasesPath: string;
   streamPath: string;
   tag: EventTag;
 };
 
-const EventTagsPill = ({
-  tag,
-  query,
-  organization,
-  projectId,
-  streamPath,
-  releasesPath,
-}: Props) => {
+const EventTagsPill = ({tag, query, organization, projectId, streamPath}: Props) => {
   const locationSearch = `?${qs.stringify(query)}`;
   const {key, value} = tag;
   const isRelease = key === 'release';
@@ -45,31 +37,29 @@ const EventTagsPill = ({
 
   return (
     <Pill name={name} value={value} type={type}>
-      <EventTagsPillValue
-        tag={tag}
-        meta={getMeta(tag, 'value')}
-        streamPath={streamPath}
-        locationSearch={locationSearch}
-        isRelease={isRelease}
-      />
+      {isRelease ? (
+        <VersionHoverCard
+          organization={organization}
+          projectSlug={projectId}
+          releaseVersion={value}
+          showUnderline
+          underlineColor="linkUnderline"
+        >
+          <Version version={String(value)} truncate />
+        </VersionHoverCard>
+      ) : (
+        <EventTagsPillValue
+          tag={tag}
+          meta={getMeta(tag, 'value')}
+          streamPath={streamPath}
+          locationSearch={locationSearch}
+        />
+      )}
       {isUrl(value) && (
         <ExternalLink href={value} className="external-icon">
           <IconOpen size="xs" css={iconStyle} />
         </ExternalLink>
       )}
-      {isRelease && (
-        <div className="pill-icon">
-          <VersionHoverCard
-            organization={organization}
-            projectSlug={projectId}
-            releaseVersion={value}
-          >
-            <Link to={{pathname: `${releasesPath}${value}/`, search: locationSearch}}>
-              <IconInfo size="xs" css={iconStyle} />
-            </Link>
-          </VersionHoverCard>
-        </div>
-      )}
     </Pill>
   );
 };

static/app/components/events/eventTags/eventTagsPillValue.tsx

@@ -1,13 +1,11 @@
 import {DeviceName} from 'sentry/components/deviceName';
 import AnnotatedText from 'sentry/components/events/meta/annotatedText';
 import Link from 'sentry/components/links/link';
-import Version from 'sentry/components/version';
 import {Meta} from 'sentry/types';
 import {EventTag} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
 
 type Props = {
-  isRelease: boolean;
   locationSearch: string;
   streamPath: string;
   tag: EventTag;
@@ -17,21 +15,15 @@ type Props = {
 const EventTagsPillValue = ({
   tag: {key, value},
   meta,
-  isRelease,
   streamPath,
   locationSearch,
 }: Props) => {
-  const getContent = () =>
-    isRelease ? (
-      <Version version={String(value)} anchor={false} tooltipRawVersion truncate />
-    ) : (
-      <AnnotatedText
-        value={defined(value) && <DeviceName value={String(value)} />}
-        meta={meta}
-      />
-    );
-
-  const content = getContent();
+  const content = (
+    <AnnotatedText
+      value={defined(value) && <DeviceName value={String(value)} />}
+      meta={meta}
+    />
+  );
 
   if (!meta?.err?.length && defined(key)) {
     return <Link to={{pathname: streamPath, search: locationSearch}}>{content}</Link>;

static/app/components/hovercard.tsx

@@ -7,6 +7,7 @@ import {motion} from 'framer-motion';
 
 import space from 'sentry/styles/space';
 import domId from 'sentry/utils/domId';
+import {ColorOrAlias} from 'sentry/utils/theme';
 
 export const HOVERCARD_PORTAL_ID = 'hovercard-portal';
 
@@ -79,6 +80,10 @@ interface HovercardProps {
    * Color of the arrow tip
    */
   tipColor?: string;
+  /**
+   * Color of the dotted underline, if available. See also: showUnderline.
+   */
+  underlineColor?: ColorOrAlias;
 }
 
 function Hovercard(props: HovercardProps): React.ReactElement {
@@ -159,6 +164,7 @@ function Hovercard(props: HovercardProps): React.ReactElement {
             aria-describedby={tooltipId}
             className={props.containerClassName}
             showUnderline={props.showUnderline}
+            underlineColor={props.underlineColor}
             {...hoverProps}
           >
             {props.children}
@@ -279,8 +285,8 @@ function getTipDirection(
   return (prefix || 'top') as 'top' | 'bottom' | 'left' | 'right';
 }
 
-const Trigger = styled('span')<{showUnderline?: boolean}>`
-  ${p => p.showUnderline && p.theme.tooltipUnderline()};
+const Trigger = styled('span')<{showUnderline?: boolean; underlineColor?: ColorOrAlias}>`
+  ${p => p.showUnderline && p.theme.tooltipUnderline(p.underlineColor)};
 `;
 
 const HovercardContainer = styled('div')`

static/app/components/versionHoverCard.tsx

@@ -21,7 +21,7 @@ import withApi from 'sentry/utils/withApi';
 import withRelease from 'sentry/utils/withRelease';
 import withRepositories from 'sentry/utils/withRepositories';
 
-type Props = {
+interface Props extends React.ComponentProps<typeof Hovercard> {
   api: Client;
   organization: Organization;
   projectSlug: string;
@@ -36,7 +36,7 @@ type Props = {
   repositories?: Array<Repository>;
   repositoriesError?: Error;
   repositoriesLoading?: boolean;
-};
+}
 
 type State = {
   visible: boolean;

static/app/utils/theme.tsx

@@ -244,6 +244,7 @@ const generateAliases = (colors: BaseColors) => ({
    */
   linkColor: colors.blue300,
   linkHoverColor: colors.blue300,
+  linkUnderline: colors.blue200,
   linkFocus: colors.blue300,
 
   /**

static/app/views/performance/traceDetails/styles.tsx

@@ -88,7 +88,6 @@ export function Tags({
   }
 
   const orgSlug = organization.slug;
-  const releasesPath = `/organizations/${orgSlug}/releases/`;
 
   return (
     <tr>
@@ -114,7 +113,6 @@ export function Tags({
                 organization={organization}
                 query={query}
                 streamPath={streamPath}
-                releasesPath={releasesPath}
               />
             );
           })}