9580903449

Committed 19 Jun 2024 11:05AM UTC coverage: 96.804% (-0.09%) from 96.891%

Build # 9580903449

Build Type

Pull #1273

github

Committed by

web-flow

Commit Message

Merge a28c13f2e into 0027d8488

Pull Request Pull Request #1273: feat: group notifications by repository or date

Run Details

473 of 485 branches covered (97.53%)

Branch coverage included in aggregate %.

11 of 12 new or added lines in 3 files covered. (91.67%)

8 existing lines in 1 file now uncovered.

1193 of 1236 relevant lines covered (96.52%)

22.54 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.7

/src/components/NotificationRow.tsx

import {
  BellSlashIcon,
  CheckIcon,
  CommentIcon,
  FeedPersonIcon,
  IssueClosedIcon,
  MarkGithubIcon,
  MilestoneIcon,
  ReadIcon,
  TagIcon,
} from '@primer/octicons-react';
import {
  type FC,
  type MouseEvent,
  useCallback,
  useContext,
  useState,
} from 'react';
import { AppContext } from '../context/App';
import { IconColor } from '../types';
import type { Notification } from '../typesGitHub';
import { cn } from '../utils/cn';
import {
  formatForDisplay,
  formatNotificationUpdatedAt,
} from '../utils/helpers';
import {
  getNotificationTypeIcon,
  getNotificationTypeIconColor,
  getPullRequestReviewIcon,
} from '../utils/icons';
import {
  openNotification,
  openRepository,
  openUserProfile,
} from '../utils/links';
import { formatReason } from '../utils/reason';
import { PillButton } from './buttons/PillButton';

interface INotificationRow {
  notification: Notification;
}

export const NotificationRow: FC<INotificationRow> = ({
  notification,
}: INotificationRow) => {
  const {
    settings,
    removeNotificationFromState,
    markNotificationRead,
    markNotificationDone,
    unsubscribeNotification,
  } = useContext(AppContext);
  const [animateExit, setAnimateExit] = useState(false);
  const [showAsRead, setShowAsRead] = useState(false);

  const handleNotification = useCallback(() => {
    setAnimateExit(!settings.delayNotificationState);
    setShowAsRead(settings.delayNotificationState);

    openNotification(notification);

    if (settings.markAsDoneOnOpen) {
      markNotificationDone(notification);
    } else {
      // no need to mark as read, github does it by default when opening it
      removeNotificationFromState(settings, notification);
    }
  }, [
    notification,
    markNotificationDone,
    removeNotificationFromState,
    settings,
  ]);
  const unsubscribeFromThread = (event: MouseEvent<HTMLElement>) => {
    // Don't trigger onClick of parent element.
    event.stopPropagation();

    unsubscribeNotification(notification);
  };

  const reason = formatReason(notification.reason);
  const NotificationIcon = getNotificationTypeIcon(notification.subject);
  const iconColor = getNotificationTypeIconColor(notification.subject);

  const updatedAt = formatNotificationUpdatedAt(notification);
  const updatedLabel = notification.subject.user
    ? `${notification.subject.user.login} updated ${updatedAt}`
    : `Updated ${updatedAt}`;

  const notificationTitle = formatForDisplay([
    notification.subject.state,
    notification.subject.type,
  ]);

  const commentsPillDescription = `${notification.subject.comments} ${
    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(', ')}`;

  const repoAvatarUrl = notification.repository.owner.avatar_url;
  const repoSlug = notification.repository.full_name;

  return (
    <div
      id={notification.id}
      className={cn(
        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
        animateExit &&
          'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
        showAsRead && 'opacity-50 dark:opacity-50',
      )}
    >
      <div
        className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
        title={notificationTitle}
      >
        <NotificationIcon
          size={settings.groupByRepository ? 16 : 20}
          aria-label={notification.subject.type}
        />
      </div>

      <div
        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
        onClick={() => handleNotification()}
      >
        {!settings.groupByRepository && (
          <div
            className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
            title={repoSlug}
          >
            <span>
              {repoAvatarUrl ? (
                <img
                  className="size-4 rounded object-cover"
                  src={repoAvatarUrl}
                  alt={`${repoSlug}'s avatar`}
                />
              ) : (
                <MarkGithubIcon size={18} />
              )}
            </span>
            <span
              className="cursor-pointer truncate opacity-90"
              onClick={() => openRepository(notification.repository)}
            >
              {repoSlug}
            </span>
          </div>
        )}

        <div
          className="mb-1 cursor-pointer truncate text-sm"
          role="main"
          title={notification.subject.title}
        >
          {notification.subject.title}
        </div>

        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
          {notification.subject.user ? (
            <button
              type="button"
              title="View User Profile"
              onClick={(event: MouseEvent<HTMLElement>) => {
                // Don't trigger onClick of parent element.
                event.stopPropagation();
                openUserProfile(notification.subject.user);
              }}
              className="flex-shrink-0"
            >
              <img
                className="size-4 cursor-pointer rounded-full object-cover"
                src={notification.subject.user.avatar_url}
                title={notification.subject.user.login}
                alt={`${notification.subject.user.login}'s avatar`}
              />
            </button>
          ) : (
            <div>
              <FeedPersonIcon
                size={16}
                className="text-gray-500 dark:text-gray-300"
              />
            </div>
          )}
          <div title={reason.description}>{reason.title}</div>
          <div title={updatedLabel}>{updatedAt}</div>
          {settings.showPills && (
            <div className="flex">
              {notification.subject?.linkedIssues?.length > 0 && (
                <PillButton
                  title={linkedIssuesPillDescription}
                  metric={notification.subject.linkedIssues.length}
                  icon={IssueClosedIcon}
                  color={IconColor.GREEN}
                />
              )}

              {notification.subject.reviews?.map((review) => {
                const icon = getPullRequestReviewIcon(review);
                if (!icon) {
                  return null;
                }

                return (
                  <PillButton
                    key={review.state}
                    title={icon.description}
                    metric={review.users.length}
                    icon={icon.type}
                    color={icon.color}
                  />
                );
              })}
              {notification.subject?.comments > 0 && (
                <PillButton
                  title={commentsPillDescription}
                  metric={notification.subject.comments}
                  icon={CommentIcon}
                  color={IconColor.GRAY}
                />
              )}
              {notification.subject?.labels?.length > 0 && (
                <PillButton
                  title={labelsPillDescription}
                  metric={notification.subject.labels.length}
                  icon={TagIcon}
                  color={IconColor.GRAY}
                />
              )}
              {notification.subject.milestone && (
                <PillButton
                  title={notification.subject.milestone.title}
                  icon={MilestoneIcon}
                  color={
                    notification.subject.milestone.state === 'open'
                      ? IconColor.GREEN
                      : IconColor.RED
                  }
                />
              )}
            </div>
          )}
        </div>
      </div>

      <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
        <button
          type="button"
          className="h-full hover:text-green-500 focus:outline-none"
          title="Mark as Done"
          onClick={() => {
            setAnimateExit(!settings.delayNotificationState);
            setShowAsRead(settings.delayNotificationState);
            markNotificationDone(notification);
          }}
        >
          <CheckIcon size={16} aria-label="Mark as Done" />
        </button>

        <button
          type="button"
          className="h-full hover:text-green-500 focus:outline-none"
          title="Mark as Read"
          onClick={() => {
            setAnimateExit(!settings.delayNotificationState);
            setShowAsRead(settings.delayNotificationState);
            markNotificationRead(notification);
          }}
        >
          <ReadIcon size={14} aria-label="Mark as Read" />
        </button>

        <button
          type="button"
          className="h-full hover:text-red-500 focus:outline-none"
          title="Unsubscribe from Thread"
          onClick={unsubscribeFromThread}
        >
          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
        </button>
      </div>
    </div>
  );
};

1	import {	4✔
2	BellSlashIcon,
3	CheckIcon,
4	CommentIcon,
5	FeedPersonIcon,
6	IssueClosedIcon,
7	MarkGithubIcon,
8	MilestoneIcon,
9	ReadIcon,
10	TagIcon,
11	} from '@primer/octicons-react';
12	import {	4✔
13	type FC,
14	type MouseEvent,
15	useCallback,
16	useContext,
17	useState,
18	} from 'react';
19	import { AppContext } from '../context/App';	4✔
20	import { IconColor } from '../types';	4✔
21	import type { Notification } from '../typesGitHub';
22	import { cn } from '../utils/cn';	4✔
23	import {	4✔
24	formatForDisplay,
25	formatNotificationUpdatedAt,
26	} from '../utils/helpers';
27	import {	4✔
28	getNotificationTypeIcon,
29	getNotificationTypeIconColor,
30	getPullRequestReviewIcon,
31	} from '../utils/icons';
32	import {	4✔
33	openNotification,
34	openRepository,
35	openUserProfile,
36	} from '../utils/links';
37	import { formatReason } from '../utils/reason';	4✔
38	import { PillButton } from './buttons/PillButton';	4✔
39
40	interface INotificationRow {
41	notification: Notification;
42	}
43
44	export const NotificationRow: FC<INotificationRow> = ({	4✔
45	notification,
46	}: INotificationRow) => {
47	const {
48	settings,
49	removeNotificationFromState,
50	markNotificationRead,
51	markNotificationDone,
52	unsubscribeNotification,
53	} = useContext(AppContext);	62✔
54	const [animateExit, setAnimateExit] = useState(false);	62✔
55	const [showAsRead, setShowAsRead] = useState(false);	62✔
56
57	const handleNotification = useCallback(() => {	62✔
58	setAnimateExit(!settings.delayNotificationState);	8✔
59	setShowAsRead(settings.delayNotificationState);	8✔
60
61	openNotification(notification);	8✔
62
63	if (settings.markAsDoneOnOpen) {	8✔
64	markNotificationDone(notification);	2✔
65	} else {
66	// no need to mark as read, github does it by default when opening it
67	removeNotificationFromState(settings, notification);	6✔
68	}
69	}, [
70	notification,
71	markNotificationDone,
72	removeNotificationFromState,
73	settings,
74	]);
75	const unsubscribeFromThread = (event: MouseEvent<HTMLElement>) => {	62✔
76	// Don't trigger onClick of parent element.
77	event.stopPropagation();	2✔
78
79	unsubscribeNotification(notification);	2✔
80	};
81
82	const reason = formatReason(notification.reason);	62✔
83	const NotificationIcon = getNotificationTypeIcon(notification.subject);	62✔
84	const iconColor = getNotificationTypeIconColor(notification.subject);	62✔
85
86	const updatedAt = formatNotificationUpdatedAt(notification);	62✔
87	const updatedLabel = notification.subject.user	62✔
88	? `${notification.subject.user.login} updated ${updatedAt}`
89	: `Updated ${updatedAt}`;
90
91	const notificationTitle = formatForDisplay([	62✔
92	notification.subject.state,
93	notification.subject.type,
94	]);
95
96	const commentsPillDescription = `${notification.subject.comments} ${	62✔
97	notification.subject.comments > 1 ? 'comments' : 'comment'	31✔
98	}`;
99
100	const labelsPillDescription = notification.subject.labels	62✔
101	?.map((label) => `🏷️ ${label}`)	68✔
102	.join('\n');
103
104	const linkedIssuesPillDescription = `Linked to ${	62✔
105	notification.subject.linkedIssues?.length > 1 ? 'issues' : 'issue'	31✔
106	} ${notification.subject?.linkedIssues?.join(', ')}`;
107
108	const repoAvatarUrl = notification.repository.owner.avatar_url;	62✔
109	const repoSlug = notification.repository.full_name;	62✔
110
111	return (	62✔
112	<div
113	id={notification.id}
114	className={cn(
115	'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
116	animateExit &&	36✔
117	'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
118	showAsRead && 'opacity-50 dark:opacity-50',	32✔
119	)}
120	>
121	<div
122	className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
123	title={notificationTitle}
124	>
125	<NotificationIcon
126	size={settings.groupByRepository ? 16 : 20}	31✔
127	aria-label={notification.subject.type}
128	/>
129	</div>
130
131	<div
132	className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
133	onClick={() => handleNotification()}	8✔
134	>
135	{!settings.groupByRepository && (	34✔
136	<div
137	className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
138	title={repoSlug}
139	>
140	<span>
141	{repoAvatarUrl ? (	3!
142	<img
143	className="size-4 rounded object-cover"
144	src={repoAvatarUrl}
145	alt={`${repoSlug}'s avatar`}
146	/>
147	) : (
148	<MarkGithubIcon size={18} />
149	)}
150	</span>
151	<span
152	className="cursor-pointer truncate opacity-90"
NEW 153	onClick={() => openRepository(notification.repository)}	×
154	>
155	{repoSlug}
156	</span>
157	</div>
158	)}
159
160	<div
161	className="mb-1 cursor-pointer truncate text-sm"
162	role="main"
163	title={notification.subject.title}
164	>
165	{notification.subject.title}
166	</div>
167
168	<div className="flex flex-wrap items-center gap-1 text-xs capitalize">
169	{notification.subject.user ? (	31✔
170	<button
171	type="button"
172	title="View User Profile"
173	onClick={(event: MouseEvent<HTMLElement>) => {
174	// Don't trigger onClick of parent element.
175	event.stopPropagation();	2✔
176	openUserProfile(notification.subject.user);	2✔
177	}}
178	className="flex-shrink-0"
179	>
180	<img
181	className="size-4 cursor-pointer rounded-full object-cover"
182	src={notification.subject.user.avatar_url}
183	title={notification.subject.user.login}
184	alt={`${notification.subject.user.login}'s avatar`}
185	/>
186	</button>
187	) : (
188	<div>
189	<FeedPersonIcon
190	size={16}
191	className="text-gray-500 dark:text-gray-300"
192	/>
193	</div>
194	)}
195	<div title={reason.description}>{reason.title}</div>
196	<div title={updatedLabel}>{updatedAt}</div>
197	{settings.showPills && (	61✔
198	<div className="flex">
199	{notification.subject?.linkedIssues?.length > 0 && (	52✔
200	<PillButton
201	title={linkedIssuesPillDescription}
202	metric={notification.subject.linkedIssues.length}
203	icon={IssueClosedIcon}
204	color={IconColor.GREEN}
205	/>
206	)}
207
208	{notification.subject.reviews?.map((review) => {
209	const icon = getPullRequestReviewIcon(review);	162✔
210	if (!icon) {	162✔
211	return null;	54✔
212	}
213
214	return (	108✔
215	<PillButton
216	key={review.state}
217	title={icon.description}
218	metric={review.users.length}
219	icon={icon.type}
220	color={icon.color}
221	/>
222	);
223	})}
224	{notification.subject?.comments > 0 && (	49✔
225	<PillButton
226	title={commentsPillDescription}
227	metric={notification.subject.comments}
228	icon={CommentIcon}
229	color={IconColor.GRAY}
230	/>
231	)}
232	{notification.subject?.labels?.length > 0 && (	47✔
233	<PillButton
234	title={labelsPillDescription}
235	metric={notification.subject.labels.length}
236	icon={TagIcon}
237	color={IconColor.GRAY}
238	/>
239	)}
240	{notification.subject.milestone && (	46✔
241	<PillButton
242	title={notification.subject.milestone.title}
243	icon={MilestoneIcon}
244	color={
245	notification.subject.milestone.state === 'open'	16✔
246	? IconColor.GREEN
247	: IconColor.RED
248	}
249	/>
250	)}
251	</div>
252	)}
253	</div>
254	</div>
255
256	<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
257	<button
258	type="button"
259	className="h-full hover:text-green-500 focus:outline-none"
260	title="Mark as Done"
261	onClick={() => {
262	setAnimateExit(!settings.delayNotificationState);	2✔
263	setShowAsRead(settings.delayNotificationState);	2✔
264	markNotificationDone(notification);	2✔
265	}}
266	>
267	<CheckIcon size={16} aria-label="Mark as Done" />
268	</button>
269
270	<button
271	type="button"
272	className="h-full hover:text-green-500 focus:outline-none"
273	title="Mark as Read"
274	onClick={() => {
275	setAnimateExit(!settings.delayNotificationState);	2✔
276	setShowAsRead(settings.delayNotificationState);	2✔
277	markNotificationRead(notification);	2✔
278	}}
279	>
280	<ReadIcon size={14} aria-label="Mark as Read" />
281	</button>
282
283	<button
284	type="button"
285	className="h-full hover:text-red-500 focus:outline-none"
286	title="Unsubscribe from Thread"
287	onClick={unsubscribeFromThread}
288	>
289	<BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
290	</button>
291	</div>
292	</div>
293	);
294	};

gitify-app / gitify / 9580903449

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous