feat(feedback): display tracked issues on list (#60485)

Display an icon in the feedback list to show which (if any) external issue tracking is used: https://github.com/getsentry/sentry/assets/56095982/7b52fe05-ad12-4cc4-8cf2-cca94430cec0 1+ platform used: <img width="358" alt="SCR-20231122-lkjt" src="https://github.com/getsentry/sentry/assets/56095982/6620b29c-21b5-4755-84ce-736931f55e78"> Only 1 platform used: icon changes depending on type <img width="387" alt="SCR-20231122-lits" src="https://github.com/getsentry/sentry/assets/56095982/2b5fad1f-dc7b-4cf8-ac25-6bcd359f06be"> <img width="365" alt="SCR-20231122-lizs" src="https://github.com/getsentry/sentry/assets/56095982/74b1e2bb-25b9-49fb-a642-2f71bd1f4f2d"> Closes #60367
getsentry · Dec 1, 2023 · 5cad8d9 · 5cad8d9
1 parent b080c59
commit 5cad8d9
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 3 deletions.
diff --git a/static/app/components/feedback/list/feedbackListItem.tsx b/static/app/components/feedback/list/feedbackListItem.tsx
@@ -7,6 +7,7 @@ import ActorAvatar from 'sentry/components/avatar/actorAvatar';
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
 import Checkbox from 'sentry/components/checkbox';
 import FeedbackItemUsername from 'sentry/components/feedback/feedbackItem/feedbackItemUsername';
+import IssueTrackingSignals from 'sentry/components/feedback/list/issueTrackingSignals';
 import useFeedbackHasReplayId from 'sentry/components/feedback/useFeedbackHasReplayId';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import Link from 'sentry/components/links/link';
@@ -19,6 +20,7 @@ import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
+import {Group} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {FeedbackIssue} from 'sentry/utils/feedback/types';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -35,8 +37,20 @@ interface Props {
   style?: CSSProperties;
 }
 
-function FeedbackIcon({tooltipText, icon}: {icon: ReactNode; tooltipText: string}) {
-  return <StyledTooltip title={tooltipText}>{icon}</StyledTooltip>;
+export function FeedbackIcon({
+  tooltipText,
+  icon,
+}: {
+  icon: ReactNode;
+  tooltipText: string;
+}) {
+  return (
+    <StyledTooltip
+      title={<span style={{textTransform: 'capitalize'}}>{tooltipText}</span>}
+    >
+      {icon}
+    </StyledTooltip>
+  );
 }
 
 function useIsSelectedFeedback({feedbackItem}: {feedbackItem: FeedbackIssue}) {
@@ -116,6 +130,7 @@ const FeedbackListItem = forwardRef<HTMLDivElement, Props>(
               gridArea: 'icons',
             }}
           >
+            <IssueTrackingSignals group={feedbackItem as unknown as Group} />
             {isCrashReport && (
               <FeedbackIcon
                 tooltipText={t('Linked Issue')}
@@ -129,7 +144,7 @@ const FeedbackListItem = forwardRef<HTMLDivElement, Props>(
               />
             )}
             {feedbackItem.assignedTo && (
-              <ActorAvatar actor={feedbackItem.assignedTo} size={16} />
+              <StyledAvatar actor={feedbackItem.assignedTo} size={16} />
             )}
           </RightAlignedIcons>
           <Flex style={{gridArea: 'proj'}} gap={space(1)} align="center">
@@ -153,6 +168,11 @@ const StyledTooltip = styled(Tooltip)`
   align-items: center;
 `;
 
+const StyledAvatar = styled(ActorAvatar)`
+  display: flex;
+  align-items: center;
+`;
+
 const StyledTimeSince = styled(TimeSince)`
   display: flex;
   justify-content: end;
@@ -162,6 +182,7 @@ const RightAlignedIcons = styled('div')`
   display: flex;
   justify-content: end;
   gap: ${space(0.75)};
+  align-items: center;
 `;
 
 const CardSpacing = styled('div')`

diff --git a/static/app/components/feedback/list/issueTrackingSignals.tsx b/static/app/components/feedback/list/issueTrackingSignals.tsx
@@ -0,0 +1,63 @@
+import {FeedbackIcon} from 'sentry/components/feedback/list/feedbackListItem';
+import {ExternalIssueComponent} from 'sentry/components/group/externalIssuesList/types';
+import useExternalIssueData from 'sentry/components/group/externalIssuesList/useExternalIssueData';
+import {IconLink} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {Event, Group} from 'sentry/types';
+import {getIntegrationIcon} from 'sentry/utils/integrationUtil';
+
+interface Props {
+  group: Group;
+}
+
+function filterLinkedPlugins(actions: ExternalIssueComponent[]) {
+  // Plugins: need to do some extra logic to detect if the issue is linked,
+  // by checking if there exists an issue object
+  const plugins = actions.filter(
+    a =>
+      (a.type === 'plugin-issue' || a.type === 'plugin-action') &&
+      'issue' in a.props.plugin
+  );
+
+  // Non plugins: can read directly from the `hasLinkedIssue` property
+  const nonPlugins = actions.filter(
+    a => a.hasLinkedIssue && !(a.type === 'plugin-issue' || a.type === 'plugin-action')
+  );
+
+  return plugins.concat(nonPlugins);
+}
+
+export default function IssueTrackingSignals({group}: Props) {
+  const {actions} = useExternalIssueData({
+    group,
+    event: {} as Event,
+    project: group.project,
+  });
+
+  const linkedIssues = filterLinkedPlugins(actions);
+
+  if (!linkedIssues.length) {
+    return null;
+  }
+
+  if (linkedIssues.length > 1) {
+    return (
+      <FeedbackIcon
+        tooltipText={t('Linked Tickets: %d', linkedIssues.length)}
+        icon={<IconLink size="xs" />}
+      />
+    );
+  }
+
+  const name =
+    linkedIssues[0].type === 'plugin-issue' || linkedIssues[0].type === 'plugin-action'
+      ? linkedIssues[0].props.plugin.slug ?? ''
+      : linkedIssues[0].key;
+
+  return (
+    <FeedbackIcon
+      tooltipText={t('Linked %s Issue', name)}
+      icon={getIntegrationIcon(name, 'xs')}
+    />
+  );
+}
diff --git a/static/app/components/feedback/useFeedbackListQueryKey.tsx b/static/app/components/feedback/useFeedbackListQueryKey.tsx
@@ -62,6 +62,8 @@ export default function useFeedbackListQueryKey({organization}: Props): ApiQuery
           expand: [
             'owners', // Gives us assignment
             'stats', // Gives us `firstSeen`
+            'pluginActions', // Gives us plugin actions available
+            'pluginIssues', // Gives us plugin issues available
           ],
           shortIdLookup: 0,
           query: `issue.category:feedback status:${fixedQueryView.mailbox} ${fixedQueryView.query}`,