feat(metrics): add reaction metric pill

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/metrics/MetricGroup.test.tsx

@@ -48,6 +48,66 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
     });
   });
 
+  describe('reactions pills', () => {
+    it('should render reaction pill when one reaction', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.reactionsCount = 1;
+      mockNotification.subject.reactionGroups = [
+        {
+          content: 'ROCKET',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+      ];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render reaction pill when multiple reactions', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.reactionsCount = 2;
+      mockNotification.subject.reactionGroups = [
+        {
+          content: 'THUMBS_UP',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+        {
+          content: 'ROCKET',
+          reactors: {
+            totalCount: 1,
+          },
+        },
+      ];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render issues pill when linked to multiple issues/prs', async () => {
+      const mockNotification = mockGitifyNotification;
+      mockNotification.subject.linkedIssues = ['#1', '#2'];
+
+      const props: MetricGroupProps = {
+        notification: mockNotification,
+      };
+
+      const tree = renderWithAppContext(<MetricGroup {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe('comment pills', () => {
     it('should render when no comments', async () => {
       const mockNotification = mockGitifyNotification;

src/renderer/components/metrics/MetricGroup.tsx

@@ -4,6 +4,7 @@ import {
   CommentIcon,
   IssueOpenedIcon,
   MilestoneIcon,
+  SmileyIcon,
   TagIcon,
 } from '@primer/octicons-react';
 
@@ -27,22 +28,72 @@ export const MetricGroup: FC<MetricGroupProps> = ({
   const hasLinkedIssues = linkedIssues.length > 0;
   const linkedIssuesPillDescription = hasLinkedIssues
     ? `Linked to ${
-        linkedIssues.length > 1 ? 'issues' : 'issue'
+        linkedIssues.length > 1 ? 'issues:' : 'issue'
       } ${linkedIssues.join(', ')}`
     : '';
 
+  const reactionCount = notification.subject.reactionsCount ?? 0;
+  const reactionGroups = notification.subject.reactionGroups ?? [];
+  const hasReactions = reactionCount > 0;
+  const hasMultipleReactions =
+    reactionGroups.filter((rg) => rg.reactors.totalCount > 0).length > 1;
+  const reactionPillDescription = hasReactions
+    ? `${reactionCount} ${
+        reactionCount > 1 ? 'reactions' : 'reaction'
+      }: ${reactionGroups
+        .reduce((acc, rg) => {
+          if (!rg.reactors.totalCount || rg.reactors.totalCount <= 0) {
+            return acc;
+          }
+
+          let emoji = '';
+          switch (rg.content) {
+            case 'THUMBS_UP':
+              emoji = '👍';
+              break;
+            case 'THUMBS_DOWN':
+              emoji = '👎';
+              break;
+            case 'LAUGH':
+              emoji = '😆';
+              break;
+            case 'HOORAY':
+              emoji = '🎉';
+              break;
+            case 'CONFUSED':
+              emoji = '😕';
+              break;
+            case 'ROCKET':
+              emoji = '🚀';
+              break;
+            case 'EYES':
+              emoji = '👀';
+              break;
+            case 'HEART':
+              emoji = '❤️';
+              break;
+            default:
+              return acc;
+          }
+          acc.push(
+            `${emoji} ${hasMultipleReactions ? rg.reactors.totalCount : ''}`.trim(),
+          );
+          return acc;
+        }, [] as string[])
+        .join(' ')}`
+    : '';
+
   const commentCount = notification.subject.commentCount ?? 0;
   const hasComments = commentCount > 0;
   const commentsPillDescription = hasComments
-    ? `${notification.subject.commentCount} ${
-        notification.subject.commentCount > 1 ? 'comments' : 'comment'
-      }`
+    ? `${notification.subject.commentCount} ${notification.subject.commentCount > 1 ? 'comments' : 'comment'}`
     : '';
 
   const labels = notification.subject.labels ?? [];
-  const hasLabels = labels.length > 0;
+  const labelsCount = labels.length;
+  const hasLabels = labelsCount > 0;
   const labelsPillDescription = hasLabels
-    ? labels.map((label) => `🏷️ ${label}`).join(', ')
+    ? `${labelsCount} ${labelsCount > 1 ? 'labels' : 'label'}: ${labels.map((label) => `🏷️ ${label}`).join(', ')}`
     : '';
 
   const milestone = notification.subject.milestone;
@@ -59,6 +110,15 @@ export const MetricGroup: FC<MetricGroupProps> = ({
           />
         )}
 
+        {hasReactions && (
+          <MetricPill
+            color={IconColor.GRAY}
+            icon={SmileyIcon}
+            metric={notification.subject.reactionsCount}
+            title={reactionPillDescription}
+          />
+        )}
+
         {notification.subject.reviews?.map((review) => {
           const icon = getPullRequestReviewIcon(review);
           if (!icon) {