diff --git a/src/renderer/components/metrics/MetricGroup.test.tsx b/src/renderer/components/metrics/MetricGroup.test.tsx
index ade9d6c31..4e3f2cda8 100644
--- a/src/renderer/components/metrics/MetricGroup.test.tsx
+++ b/src/renderer/components/metrics/MetricGroup.test.tsx
@@ -48,6 +48,102 @@ 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();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should render reaction pill when multiple reactions', async () => {
+ const mockNotification = mockGitifyNotification;
+ mockNotification.subject.reactionsCount = 53;
+ mockNotification.subject.reactionGroups = [
+ {
+ content: 'THUMBS_UP',
+ reactors: {
+ totalCount: 1,
+ },
+ },
+ {
+ content: 'THUMBS_DOWN',
+ reactors: {
+ totalCount: 1,
+ },
+ },
+ {
+ content: 'LAUGH',
+ reactors: {
+ totalCount: 2,
+ },
+ },
+ {
+ content: 'HOORAY',
+ reactors: {
+ totalCount: 3,
+ },
+ },
+ {
+ content: 'CONFUSED',
+ reactors: {
+ totalCount: 5,
+ },
+ },
+ {
+ content: 'ROCKET',
+ reactors: {
+ totalCount: 8,
+ },
+ },
+ {
+ content: 'EYES',
+ reactors: {
+ totalCount: 13,
+ },
+ },
+ {
+ content: 'HEART',
+ reactors: {
+ totalCount: 21,
+ },
+ },
+ ];
+
+ const props: MetricGroupProps = {
+ notification: mockNotification,
+ };
+
+ const tree = renderWithAppContext();
+ 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();
+ expect(tree).toMatchSnapshot();
+ });
+ });
+
describe('comment pills', () => {
it('should render when no comments', async () => {
const mockNotification = mockGitifyNotification;
diff --git a/src/renderer/components/metrics/MetricGroup.tsx b/src/renderer/components/metrics/MetricGroup.tsx
index 2cdd800fd..07a150f45 100644
--- a/src/renderer/components/metrics/MetricGroup.tsx
+++ b/src/renderer/components/metrics/MetricGroup.tsx
@@ -4,6 +4,7 @@ import {
CommentIcon,
IssueOpenedIcon,
MilestoneIcon,
+ SmileyIcon,
TagIcon,
} from '@primer/octicons-react';
@@ -12,6 +13,7 @@ import { useAppContext } from '../../hooks/useAppContext';
import { type GitifyNotification, IconColor } from '../../types';
import { getPullRequestReviewIcon } from '../../utils/icons';
+import { formatMetricDescription } from '../../utils/notifications/formatters';
import { MetricPill } from './MetricPill';
export interface MetricGroupProps {
@@ -25,25 +27,73 @@ export const MetricGroup: FC = ({
const linkedIssues = notification.subject.linkedIssues ?? [];
const hasLinkedIssues = linkedIssues.length > 0;
- const linkedIssuesPillDescription = hasLinkedIssues
- ? `Linked to ${
- linkedIssues.length > 1 ? 'issues' : 'issue'
- } ${linkedIssues.join(', ')}`
- : '';
+ const linkedIssuesPillDescription = formatMetricDescription(
+ linkedIssues.length,
+ 'issue',
+ (count, noun) => {
+ return `Linked to ${count} ${noun}: ${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 reactionEmojiMap: Record = {
+ THUMBS_UP: '👍',
+ THUMBS_DOWN: '👎',
+ LAUGH: '😆',
+ HOORAY: '🎉',
+ CONFUSED: '😕',
+ ROCKET: '🚀',
+ EYES: '👀',
+ HEART: '❤️',
+ };
+
+ const reactionPillDescription = formatMetricDescription(
+ reactionCount,
+ 'reaction',
+ (count, noun) => {
+ const formatted = reactionGroups
+ .map((rg) => {
+ const emoji = reactionEmojiMap[rg.content];
+ if (!emoji || !rg.reactors.totalCount) {
+ return '';
+ }
+
+ return `${emoji} ${hasMultipleReactions ? rg.reactors.totalCount : ''}`.trim();
+ })
+ .filter(Boolean)
+ .join(' ');
+
+ return `${count} ${noun}: ${formatted}`;
+ },
+ );
const commentCount = notification.subject.commentCount ?? 0;
const hasComments = commentCount > 0;
- const commentsPillDescription = hasComments
- ? `${notification.subject.commentCount} ${
- notification.subject.commentCount > 1 ? 'comments' : 'comment'
- }`
- : '';
+ const commentsPillDescription = formatMetricDescription(
+ commentCount,
+ 'comment',
+ );
const labels = notification.subject.labels ?? [];
- const hasLabels = labels.length > 0;
- const labelsPillDescription = hasLabels
- ? labels.map((label) => `🏷️ ${label}`).join(', ')
- : '';
+ const labelsCount = labels.length;
+ const hasLabels = labelsCount > 0;
+ const labelsPillDescription = formatMetricDescription(
+ labelsCount,
+ 'label',
+ (count, noun) => {
+ const formatted = labels
+ .map((label) => {
+ return `🏷️ ${label}`.trim();
+ })
+ .join(', ');
+
+ return `${count} ${noun}: ${formatted}`;
+ },
+ );
const milestone = notification.subject.milestone;
@@ -59,6 +109,15 @@ export const MetricGroup: FC = ({
/>
)}
+ {hasReactions && (
+
+ )}
+
{notification.subject.reviews?.map((review) => {
const icon = getPullRequestReviewIcon(review);
if (!icon) {
diff --git a/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap b/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
index c632a7e5b..0766a3935 100644
--- a/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
+++ b/src/renderer/components/metrics/__snapshots__/MetricGroup.test.tsx.snap
@@ -71,7 +71,60 @@ exports[`renderer/components/metrics/MetricGroup.tsx comment pills should render
popover="auto"
role="tooltip"
>
- Linked to issues #1, #2
+ Linked to 2 issues: #1, #2
+
+
+
+ 53 reactions: 👍 1 👎 1 😆 2 🎉 3 😕 5 🚀 8 👀 13 ❤️ 21
,
+ "container":