refactor: split metrics into individual components (#2582)

* refactor: split metrics into individual components

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

* refactor: split metrics into individual components

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

---------

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

Author: setchy

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

@@ -0,0 +1,39 @@
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+import { mockGitifyNotification } from '../../__mocks__/notifications-mocks';
+
+import { CommentsPill } from './CommentsPill';
+
+describe('renderer/components/metrics/CommentsPill.tsx', () => {
+  it('renders with no comments (null)', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.commentCount = null;
+
+    const tree = renderWithAppContext(
+      <CommentsPill commentCount={mockNotification.subject.commentCount} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with 1 comment', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.commentCount = 1;
+
+    const tree = renderWithAppContext(
+      <CommentsPill commentCount={mockNotification.subject.commentCount} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with multiple comments', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.commentCount = 2;
+
+    const tree = renderWithAppContext(
+      <CommentsPill commentCount={mockNotification.subject.commentCount} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/metrics/CommentsPill.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+
+import { CommentIcon } from '@primer/octicons-react';
+
+import { IconColor } from '../../types';
+
+import { formatMetricDescription } from '../../utils/notifications/formatters';
+import { MetricPill } from './MetricPill';
+
+export interface CommentsPillProps {
+  commentCount: number;
+}
+
+export const CommentsPill: FC<CommentsPillProps> = ({ commentCount }) => {
+  if (!commentCount) {
+    return null;
+  }
+
+  const description = formatMetricDescription(commentCount, 'comment');
+
+  return (
+    <MetricPill
+      color={IconColor.GRAY}
+      icon={CommentIcon}
+      metric={commentCount}
+      title={description}
+    />
+  );
+};

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

@@ -0,0 +1,17 @@
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+import { mockGitifyNotification } from '../../__mocks__/notifications-mocks';
+
+import { LabelsPill } from './LabelsPill';
+
+describe('renderer/components/metrics/LabelsPill.tsx', () => {
+  it('renders labels pill', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.labels = ['enhancement', 'good-first-issue'];
+
+    const tree = renderWithAppContext(
+      <LabelsPill labels={mockNotification.subject.labels} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/metrics/LabelsPill.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+
+import { TagIcon } from '@primer/octicons-react';
+
+import { IconColor } from '../../types';
+
+import { formatMetricDescription } from '../../utils/notifications/formatters';
+import { MetricPill } from './MetricPill';
+
+export interface LabelsPillProps {
+  labels: string[];
+}
+
+export const LabelsPill: FC<LabelsPillProps> = ({ labels }) => {
+  if (!labels?.length) {
+    return null;
+  }
+
+  const description = formatMetricDescription(
+    labels.length,
+    'label',
+    (count, noun) => {
+      const formatted = labels.map((label) => `🏷️ ${label}`).join(', ');
+
+      return `${count} ${noun}: ${formatted}`;
+    },
+  );
+
+  return (
+    <MetricPill
+      color={IconColor.GRAY}
+      icon={TagIcon}
+      metric={labels.length}
+      title={description}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+import { mockGitifyNotification } from '../../__mocks__/notifications-mocks';
+
+import { LinkedIssuesPill } from './LinkedIssuesPill';
+
+describe('renderer/components/metrics/LinkedIssuesPill.tsx', () => {
+  it('renders when linked to one issue/pr', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.linkedIssues = ['#1'];
+
+    const tree = renderWithAppContext(
+      <LinkedIssuesPill linkedIssues={mockNotification.subject.linkedIssues} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders when linked to multiple issues/prs', () => {
+    const mockNotification = { ...mockGitifyNotification };
+    mockNotification.subject.linkedIssues = ['#1', '#2'];
+
+    const tree = renderWithAppContext(
+      <LinkedIssuesPill linkedIssues={mockNotification.subject.linkedIssues} />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/metrics/LinkedIssuesPill.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+
+import { IssueOpenedIcon } from '@primer/octicons-react';
+
+import { IconColor } from '../../types';
+
+import { formatMetricDescription } from '../../utils/notifications/formatters';
+import { MetricPill } from './MetricPill';
+
+export interface LinkedIssuesPillProps {
+  linkedIssues: string[];
+}
+
+export const LinkedIssuesPill: FC<LinkedIssuesPillProps> = ({
+  linkedIssues,
+}) => {
+  if (!linkedIssues?.length) {
+    return null;
+  }
+
+  const description = formatMetricDescription(
+    linkedIssues.length,
+    'issue',
+    (count, noun) => `Linked to ${count} ${noun}: ${linkedIssues.join(', ')}`,
+  );
+
+  return (
+    <MetricPill
+      color={IconColor.GRAY}
+      icon={IssueOpenedIcon}
+      metric={linkedIssues.length}
+      title={description}
+    />
+  );
+};