fix(issues): Restyle non member in suspect commit (#76579)

getsentry · Aug 28, 2024 · 8032d59 · 8032d59
1 parent 77749ef
commit 8032d59
Showing 1 changed file with 68 additions and 47 deletions.
diff --git a/static/app/components/commitRow.tsx b/static/app/components/commitRow.tsx
@@ -12,9 +12,10 @@ import Link from 'sentry/components/links/link';
 import PanelItem from 'sentry/components/panels/panelItem';
 import TextOverflow from 'sentry/components/textOverflow';
 import TimeSince from 'sentry/components/timeSince';
+import {Tooltip} from 'sentry/components/tooltip';
 import Version from 'sentry/components/version';
 import VersionHoverCard from 'sentry/components/versionHoverCard';
-import {IconWarning} from 'sentry/icons';
+import {IconQuestion, IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {space} from 'sentry/styles/space';
@@ -78,16 +79,25 @@ function CommitRow({
 
  const firstRelease = commit.releases?.[0];
 
- const tctArgs = {
- author: <span>{isUser ? t('You') : commit.author?.name ?? t('Unknown author')}</span>,
- unknownLabel: (
- <Hovercard
- body={
- <EmailWarning>
- {tct(
+ return hasStreamlinedUI ? (
+ <StreamlinedCommitRow data-test-id="commit-row">
+ {commit.pullRequest?.externalUrl ? (
+ <StyledExternalLink href={commit.pullRequest?.externalUrl}>
+ <Message>{formatCommitMessage(commit.message)}</Message>
+ </StyledExternalLink>
+ ) : (
+ <Message>{formatCommitMessage(commit.message)}</Message>
+ )}
+ <MetaWrapper>
+ <span>
+ {customAvatar ? customAvatar : <UserAvatar size={16} user={commit.author} />}
+ </span>
+ <Meta>
+ <Tooltip
+ title={tct(
  'The email [actorEmail] is not a member of your organization. [inviteUser:Invite] them or link additional emails in [accountSettings:account settings].',
  {
- actorEmail: <strong>{commit.author?.email}</strong>,
+ actorEmail: <BoldEmail>{commit.author?.email}</BoldEmail>,
  accountSettings: (
  <StyledLink
  to="/settings/account/emails/"
@@ -102,41 +112,30 @@ function CommitRow({
  inviteUser: <StyledLink to="" onClick={handleInviteClick} />,
  }
  )}
- </EmailWarning>
- }
- >
- <UnknownAuthorWrapper>{t('(not a member)')}</UnknownAuthorWrapper>
- </Hovercard>
- ),
- commitLink: (
- <CommitLink
- inline
- showIcon={false}
- commitId={commit.id}
- repository={commit.repository}
- onClick={onCommitClick ? () => onCommitClick(commit) : undefined}
- />
- ),
- date: <TimeSince date={commit.dateCreated} disabledAbsoluteTooltip />,
- };
-
- return hasStreamlinedUI ? (
- <StreamlinedCommitRow data-test-id="commit-row">
- {commit.pullRequest?.externalUrl ? (
- <StyledExternalLink href={commit.pullRequest?.externalUrl}>
- <Message>{formatCommitMessage(commit.message)}</Message>
- </StyledExternalLink>
- ) : (
- <Message>{formatCommitMessage(commit.message)}</Message>
- )}
- <MetaWrapper>
- <span>
- {customAvatar ? customAvatar : <UserAvatar size={16} user={commit.author} />}
- </span>
- <Meta>
- {commit.author && commit.author.id === undefined
- ? tct('[author] [unknownLabel] committed [commitLink] [date]', tctArgs)
- : tct('[author] committed [commitLink] [date]', tctArgs)}
+ disabled={!commit.author || commit.author.id !== undefined}
+ overlayStyle={{maxWidth: '350px'}}
+ skipWrapper
+ isHoverable
+ >
+ <AuthorWrapper>
+ {isUser ? t('You') : commit.author?.name ?? t('Unknown author')}
+ {commit.author && commit.author.id === undefined && (
+ <IconQuestion size="xs" />
+ )}
+ </AuthorWrapper>
+ </Tooltip>
+ {tct(' committed [commitLink]', {
+ commitLink: (
+ <CommitLink
+ inline
+ showIcon={false}
+ commitId={commit.id}
+ repository={commit.repository}
+ onClick={onCommitClick ? () => onCommitClick(commit) : undefined}
+ />
+ ),
+ })}{' '}
+ <TimeSince date={commit.dateCreated} disabledAbsoluteTooltip />
  </Meta>
  {project && firstRelease && (
  <Fragment>
@@ -261,6 +260,11 @@ const EmailWarning = styled('div')`
  margin: -4px;
 `;
 
+const BoldEmail = styled('strong')`
+ font-weight: bold;
+ word-break: break-all;
+`;
+
 const StyledLink = styled(Link)`
  color: ${p => p.theme.textColor};
  border-bottom: 1px dotted ${p => p.theme.textColor};
@@ -304,6 +308,10 @@ const Meta = styled(TextOverflow)<{hasStreamlinedUI?: boolean}>`
  text-decoration: underline;
  text-decoration-style: dotted;
  }
+
+ a:hover {
+ color: ${p => p.theme.textColor};
+ }
 `;
 
 const StreamlinedCommitRow = styled('div')`
@@ -330,10 +338,23 @@ const StyledExternalLink = styled(ExternalLink)`
  }
 `;
 
-const UnknownAuthorWrapper = styled('div')`
+const AuthorWrapper = styled('span')`
+ display: inline-flex;
+ align-items: center;
+ gap: ${space(0.25)};
  color: ${p => p.theme.subText};
- text-decoration: underline;
- text-decoration-style: dotted;
+
+ & svg {
+ transition: 120ms opacity;
+ opacity: 0.6;
+ }
+
+ &:has(svg):hover {
+ color: ${p => p.theme.textColor};
+ & svg {
+ opacity: 1;
+ }
+ }
 `;
 
 export {CommitRow};