💄 Ensure link colors are appropriate for streamline UI

static/app/components/resolutionBox.spec.tsx

@@ -1,4 +1,5 @@
 import {CommitFixture} from 'sentry-fixture/commit';
+import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {UserFixture} from 'sentry-fixture/user';
 
@@ -9,13 +10,22 @@ import {GroupActivityType} from 'sentry/types/group';
 import ResolutionBox from './resolutionBox';
 
 describe('ResolutionBox', function () {
+  const organization = OrganizationFixture();
+  const project = ProjectFixture();
+
   it('handles default', function () {
-    const {container} = render(<ResolutionBox statusDetails={{}} projectId="1" />);
+    const {container} = render(
+      <ResolutionBox statusDetails={{}} project={project} organization={organization} />
+    );
     expect(container).toHaveTextContent('This issue has been marked as resolved.');
   });
   it('handles inNextRelease', function () {
     const {container} = render(
-      <ResolutionBox statusDetails={{inNextRelease: true}} projectId="1" />
+      <ResolutionBox
+        statusDetails={{inNextRelease: true}}
+        project={project}
+        organization={organization}
+      />
     );
     expect(container).toHaveTextContent(
       'This issue has been marked as resolved in the upcoming release.'
@@ -34,7 +44,8 @@ describe('ResolutionBox', function () {
             email: '[email protected]',
           },
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
       />
     );
     expect(container).toHaveTextContent(
@@ -48,7 +59,8 @@ describe('ResolutionBox', function () {
           inNextRelease: true,
           actor: UserFixture(),
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
         activities={[
           {
             id: '1',
@@ -57,7 +69,7 @@ describe('ResolutionBox', function () {
               current_release_version: '[email protected]',
             },
             dateCreated: new Date().toISOString(),
-            project: ProjectFixture(),
+            project,
           },
         ]}
       />
@@ -72,7 +84,8 @@ describe('ResolutionBox', function () {
         statusDetails={{
           inRelease: '1.0',
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
       />
     );
     expect(container).toHaveTextContent(
@@ -92,7 +105,8 @@ describe('ResolutionBox', function () {
             email: '[email protected]',
           },
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
       />
     );
     expect(container).toHaveTextContent(
@@ -105,7 +119,8 @@ describe('ResolutionBox', function () {
         statusDetails={{
           inCommit: CommitFixture(),
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
       />
     );
     expect(container).toHaveTextContent(
@@ -126,7 +141,8 @@ describe('ResolutionBox', function () {
             email: '[email protected]',
           },
         }}
-        projectId="1"
+        project={project}
+        organization={organization}
       />
     );
     expect(container).toHaveTextContent(

static/app/components/resolutionBox.tsx

@@ -6,6 +6,7 @@ import CommitLink from 'sentry/components/commitLink';
 import {BannerContainer, BannerSummary} from 'sentry/components/events/styles';
 import TimeSince from 'sentry/components/timeSince';
 import Version from 'sentry/components/version';
+import VersionHoverCard from 'sentry/components/versionHoverCard';
 import {IconCheckmark} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -17,20 +18,27 @@ import type {
 } from 'sentry/types/group';
 import {GroupActivityType} from 'sentry/types/group';
 import type {Repository} from 'sentry/types/integrations';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 
 type Props = {
-  projectId: string;
+  organization: Organization;
+  project: Project;
   // TODO(ts): This should be a union type `IgnoredStatusDetails | ResolvedStatusDetails`
   statusDetails: ResolvedStatusDetails;
   activities?: GroupActivity[];
 };
 
 export function renderResolutionReason({
   statusDetails,
-  projectId,
+  project,
+  organization,
   activities = [],
   hasStreamlinedUI = false,
 }: Props & {hasStreamlinedUI?: boolean}) {
+  const VersionComponent = hasStreamlinedUI ? StreamlinedVersion : Version;
+  const CommitLinkComponent = hasStreamlinedUI ? StreamlinedCommitLink : CommitLink;
+
   const actor = statusDetails.actor ? (
     <strong>
       {!hasStreamlinedUI && (
@@ -53,11 +61,16 @@ export function renderResolutionReason({
     // Resolved in next release has current_release_version (semver only)
     if (relevantActivity && 'current_release_version' in relevantActivity.data) {
       const version = (
-        <Version
-          version={relevantActivity.data.current_release_version}
-          projectId={projectId}
-          tooltipRawVersion
-        />
+        <VersionHoverCard
+          organization={organization}
+          projectSlug={project.slug}
+          releaseVersion={relevantActivity.data.current_release_version}
+        >
+          <VersionComponent
+            version={relevantActivity.data.current_release_version}
+            projectId={project.id}
+          />
+        </VersionHoverCard>
       );
       return statusDetails.actor
         ? tct(
@@ -90,11 +103,13 @@ export function renderResolutionReason({
 
   if (statusDetails.inRelease) {
     const version = (
-      <Version
-        version={statusDetails.inRelease}
-        projectId={projectId}
-        tooltipRawVersion
-      />
+      <VersionHoverCard
+        organization={organization}
+        projectSlug={project.slug}
+        releaseVersion={statusDetails.inRelease}
+      >
+        <VersionComponent version={statusDetails.inRelease} projectId={project.id} />
+      </VersionHoverCard>
     );
     return actor
       ? tct('[actor] marked this issue as resolved in version [version].', {
@@ -107,28 +122,35 @@ export function renderResolutionReason({
     return tct('This issue has been marked as resolved by [commit]', {
       commit: (
         <Fragment>
-          <CommitLink
+          <CommitLinkComponent
             inline
             showIcon={false}
             commitId={statusDetails.inCommit.id}
             repository={statusDetails.inCommit.repository as Repository}
           />
-          {statusDetails.inCommit.dateCreated && (
-            <StyledTimeSince date={statusDetails.inCommit.dateCreated} />
-          )}
+          {statusDetails.inCommit.dateCreated &&
+            (hasStreamlinedUI ? (
+              <Fragment>
+                {'('}
+                <StreamlinedTimeSince date={statusDetails.inCommit.dateCreated} />
+                {')'}
+              </Fragment>
+            ) : (
+              <StyledTimeSince date={statusDetails.inCommit.dateCreated} />
+            ))}
         </Fragment>
       ),
     });
   }
   return hasStreamlinedUI ? null : t('This issue has been marked as resolved.');
 }
 
-function ResolutionBox({statusDetails, projectId, activities = []}: Props) {
+function ResolutionBox(props: Props) {
   return (
     <BannerContainer priority="default">
       <BannerSummary>
         <StyledIconCheckmark color="successText" />
-        <span>{renderResolutionReason({statusDetails, projectId, activities})}</span>
+        <span>{renderResolutionReason(props)}</span>
       </BannerSummary>
     </BannerContainer>
   );
@@ -140,6 +162,13 @@ const StyledTimeSince = styled(TimeSince)`
   font-size: ${p => p.theme.fontSizeSmall};
 `;
 
+const StreamlinedTimeSince = styled(TimeSince)`
+  color: ${p => p.theme.green400};
+  font-size: inherit;
+  text-decoration-style: dotted;
+  text-decoration-color: ${p => p.theme.green400};
+`;
+
 const StyledIconCheckmark = styled(IconCheckmark)`
   /* override margin defined in BannerSummary */
   margin-top: 0 !important;
@@ -151,4 +180,27 @@ const StyledIconCheckmark = styled(IconCheckmark)`
   }
 `;
 
+const StreamlinedVersion = styled(Version)`
+  color: ${p => p.theme.green400};
+  font-weight: ${p => p.theme.fontWeightBold};
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  &:hover {
+    color: ${p => p.theme.green400};
+    text-decoration: none;
+  }
+`;
+
+const StreamlinedCommitLink = styled(CommitLink)`
+  color: ${p => p.theme.green400};
+  font-weight: ${p => p.theme.fontWeightBold};
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  margin-right: ${space(0.5)};
+  &:hover {
+    color: ${p => p.theme.green400};
+    text-decoration: none;
+  }
+`;
+
 export default ResolutionBox;

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

@@ -377,9 +377,10 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp
                   {group.status === 'resolved'
                     ? renderResolutionReason({
                         statusDetails: group.statusDetails,
-                        projectId: project.id,
                         activities: group.activity,
                         hasStreamlinedUI,
+                        project,
+                        organization,
                       })
                     : null}
                   {group.status === 'ignored'

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

@@ -152,7 +152,8 @@ function GroupEventDetails() {
           <ResolutionBox
             statusDetails={group.statusDetails}
             activities={group.activity}
-            projectId={project.id}
+            project={project}
+            organization={organization}
           />
         </GroupStatusBannerWrapper>
       );