feat: labels indicator (#1161)

Co-authored-by: Afonso Jorge Ramos <[email protected]>

Author: setchy

src/components/NotificationRow.test.tsx

@@ -117,6 +117,25 @@ describe('components/NotificationRow.tsx', () => {
     });
   });
 
+  describe('notification labels', () => {
+    it('should render labels metric when available', async () => {
+      jest
+        .spyOn(global.Date, 'now')
+        .mockImplementation(() => new Date('2024').valueOf());
+
+      const mockNotification = mockSingleNotification;
+      mockNotification.subject.labels = ['enhancement', 'good-first-issue'];
+
+      const props = {
+        notification: mockNotification,
+        hostname: 'github.com',
+      };
+
+      const tree = render(<NotificationRow {...props} />);
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe('linked issues/prs', () => {
     it('should render when linked to one issue/pr', async () => {
       jest

src/components/NotificationRow.tsx

@@ -5,6 +5,7 @@ import {
   FeedPersonIcon,
   IssueClosedIcon,
   ReadIcon,
+  TagIcon,
 } from '@primer/octicons-react';
 import {
   type FC,
@@ -92,6 +93,10 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
     notification.subject.comments > 1 ? 'comments' : 'comment'
   }`;
 
+  const labelsPillDescription = notification.subject.labels
+    ?.map((label) => `🏷️ ${label}`)
+    .join('\n');
+
   const linkedIssuesPillDescription = `Linked to ${
     notification.subject.linkedIssues?.length > 1 ? 'issues' : 'issue'
   } ${notification.subject?.linkedIssues?.join(', ')}`;
@@ -201,6 +206,18 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                   </button>
                 </span>
               )}
+              {notification.subject?.labels?.length > 0 && (
+                <span className="ml-1" title={labelsPillDescription}>
+                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <TagIcon
+                      size={12}
+                      className={`mr-1 ${IconColor.GRAY}`}
+                      aria-label={labelsPillDescription}
+                    />
+                    {notification.subject.labels.length}
+                  </button>
+                </span>
+              )}
             </span>
           </span>
         </div>