feat: add pr review icons (approved, requested changes, commented, dismissed) (#1078)

* feat: add icon for previously approved  prs

* feat: add pr review icons (approved, requested changes, commented, dismissed)

* feat: add pr review icons (approved, requested changes, commented, dismissed)

* fix tests

* update coverage

* feat: move icon to notification row footer.  include all reviewers

* feat: move icon to notification row footer.  include all reviewers

* feat: move icon to notification row footer.  include all reviewers

* feat: move icon to notification row footer.  include all reviewers

* update commented icon color to green.

ensure ordering is consistent

* update commented icon color to yellow.

ensure ordering is consistent

* refactor: alphabetic order for icon color enum

* revert token

* revert partial mock

Author: setchy

src/__mocks__/mockedData.ts

@@ -72,6 +72,20 @@ export const mockedGitHubNotifications: Notification[] = [
           'https://avatars.githubusercontent.com/u/133795385?s=200&v=4',
         type: 'User',
       },
+      reviews: [
+        {
+          state: 'APPROVED',
+          users: ['octocat'],
+        },
+        {
+          state: 'CHANGES_REQUESTED',
+          users: ['gitify-app'],
+        },
+        {
+          state: 'PENDING',
+          users: ['gitify-user'],
+        },
+      ],
     },
     repository: {
       id: 57216596,
@@ -198,6 +212,7 @@ export const mockedGitHubNotifications: Notification[] = [
       latest_comment_url:
         'https://api.github.com/repos/gitify-app/notifications-test/issues/comments/302885965',
       type: 'Issue',
+      reviews: null,
     },
     repository: {
       id: 57216596,
@@ -255,6 +270,7 @@ export const mockedEnterpriseNotifications: Notification[] = [
       latest_comment_url:
         'https://github.gitify.io/api/v3/repos/myorg/notifications-test/releases/3',
       type: 'Release',
+      reviews: null,
     },
     repository: {
       id: 1,
@@ -308,6 +324,7 @@ export const mockedEnterpriseNotifications: Notification[] = [
       latest_comment_url:
         'https://github.gitify.io/api/v3/repos/myorg/notifications-test/issues/comments/21',
       type: 'PullRequest',
+      reviews: null,
     },
     repository: {
       id: 1,

src/components/NotificationRow.test.tsx

@@ -207,6 +207,7 @@ describe('components/NotificationRow.tsx', () => {
             avatar_url: 'https://avatars.githubusercontent.com/u/123456789?v=4',
             type: 'User' as UserType,
           },
+          reviews: null,
         },
       },
       hostname: 'github.com',

src/components/NotificationRow.tsx

@@ -20,6 +20,7 @@ import { formatForDisplay, openInBrowser } from '../utils/helpers';
 import {
   getNotificationTypeIcon,
   getNotificationTypeIconColor,
+  getPullRequestReviewIcon,
 } from '../utils/icons';
 import { formatReason } from '../utils/reason';
 
@@ -69,13 +70,14 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   const reason = formatReason(notification.reason);
   const NotificationIcon = getNotificationTypeIcon(notification.subject);
   const iconColor = getNotificationTypeIconColor(notification.subject);
+
   const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
     addSuffix: true,
   });
-
   const updatedLabel = notification.subject.user
     ? `${notification.subject.user.login} updated ${updatedAt}`
     : `Updated ${updatedAt}`;
+
   const notificationTitle = formatForDisplay([
     notification.subject.state,
     notification.subject.type,
@@ -131,6 +133,28 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                 {reason.title}
               </span>
               <span className="ml-1">{updatedAt}</span>
+              {notification.subject.reviews
+                ? notification.subject.reviews.map((review) => {
+                    const icon = getPullRequestReviewIcon(review);
+                    if (!icon) {
+                      return null;
+                    }
+
+                    return (
+                      <span
+                        key={review.state}
+                        title={icon.description}
+                        className="ml-1"
+                      >
+                        <icon.type
+                          size={16}
+                          className={icon.color}
+                          aria-label={icon.description}
+                        />
+                      </span>
+                    );
+                  })
+                : null}
             </span>
           </span>
         </div>

src/components/__snapshots__/NotificationRow.test.tsx.snap

@@ -1,3 +1,5 @@
+import type { OcticonProps } from '@primer/octicons-react';
+import type { FC } from 'react';
 import type { Notification } from './typesGitHub';
 
 export interface AuthState {
@@ -101,4 +103,11 @@ export enum IconColor {
   GREEN = 'text-green-500',
   PURPLE = 'text-purple-500',
   RED = 'text-red-500',
+  YELLOW = 'text-yellow-500 dark:text-yellow-300',
 }
+
+export type PullRequestApprovalIcon = {
+  type: FC<OcticonProps>;
+  color: IconColor;
+  description: string;
+};

src/routes/__snapshots__/Notifications.test.tsx.snap

@@ -76,6 +76,23 @@ export type CheckSuiteStatus =
   | 'timed_out'
   | 'waiting';
 
+export type PullRequestReviewState =
+  | 'APPROVED'
+  | 'CHANGES_REQUESTED'
+  | 'COMMENTED'
+  | 'DISMISSED'
+  | 'PENDING';
+
+export type PullRequestReviewAuthorAssociation =
+  | 'COLLABORATOR'
+  | 'CONTRIBUTOR'
+  | 'FIRST_TIMER'
+  | 'FIRST_TIME_CONTRIBUTOR'
+  | 'MANNEQUIN'
+  | 'MEMBER'
+  | 'NONE'
+  | 'OWNER';
+
 export interface Notification {
   id: string;
   unread: boolean;
@@ -241,6 +258,7 @@ interface GitHubSubject {
 export interface GitifySubject {
   state?: StateType;
   user?: SubjectUser;
+  reviews?: GitifyPullRequestReview[];
 }
 
 export interface PullRequest {
@@ -281,6 +299,24 @@ export interface PullRequest {
   changed_files: number;
 }
 
+export interface GitifyPullRequestReview {
+  state: PullRequestReviewState;
+  users: string[];
+}
+
+export interface PullRequestReview {
+  id: number;
+  node_id: string;
+  user: User;
+  body: string;
+  state: PullRequestReviewState;
+  html_url: string;
+  pull_request_url: string;
+  author_association: PullRequestReviewAuthorAssociation;
+  submitted_at: string;
+  commit_id: string;
+}
+
 export interface Commit {
   sha: string;
   node_id: string;