diff --git a/src/renderer/components/notifications/NotificationHeader.test.tsx b/src/renderer/components/notifications/NotificationHeader.test.tsx index 366b1f5fe..9415ba26e 100644 --- a/src/renderer/components/notifications/NotificationHeader.test.tsx +++ b/src/renderer/components/notifications/NotificationHeader.test.tsx @@ -26,19 +26,60 @@ describe('renderer/components/notifications/NotificationHeader.tsx', () => { expect(tree).toMatchSnapshot(); }); - it('should render itself & its children - group by date', async () => { - const props = { - notification: mockSingleNotification, - }; + describe('should render itself & its children - group by date', () => { + it('with notification number', async () => { + const props = { + notification: mockSingleNotification, + }; - const tree = render( - - - , - ); - expect(tree).toMatchSnapshot(); + const tree = render( + + + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('with showNumber setting disabled', async () => { + const props = { + notification: mockSingleNotification, + }; + + const tree = render( + + + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('without notification number', async () => { + const props = { + notification: { + ...mockSingleNotification, + subject: { ...mockSingleNotification.subject, number: null }, + }, + }; + + const tree = render( + + + , + ); + expect(tree).toMatchSnapshot(); + }); }); it('should open notification user profile - group by date', () => { diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx index c28052cf0..f424ba541 100644 --- a/src/renderer/components/notifications/NotificationHeader.tsx +++ b/src/renderer/components/notifications/NotificationHeader.tsx @@ -3,8 +3,9 @@ import { type FC, type MouseEvent, useContext } from 'react'; import { Avatar, Stack, Tooltip } from '@primer/react'; import { AppContext } from '../../context/App'; -import { Size } from '../../types'; +import { GroupBy, Opacity, Size } from '../../types'; import type { Notification } from '../../typesGitHub'; +import { cn } from '../../utils/cn'; import { openRepository } from '../../utils/links'; interface INotificationHeader { @@ -19,7 +20,11 @@ export const NotificationHeader: FC = ({ const repoAvatarUrl = notification.repository.owner.avatar_url; const repoSlug = notification.repository.full_name; - const groupByDate = settings.groupBy === 'DATE'; + const notificationNumber = notification.subject?.number + ? `#${notification.subject.number}` + : ''; + + const groupByDate = settings.groupBy === GroupBy.DATE; return ( groupByDate && ( @@ -35,6 +40,15 @@ export const NotificationHeader: FC = ({ {repoSlug} + + {notificationNumber} + diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx index 1804947cd..da29a6ba4 100644 --- a/src/renderer/components/notifications/NotificationRow.tsx +++ b/src/renderer/components/notifications/NotificationRow.tsx @@ -10,7 +10,7 @@ import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react'; import { IconButton, Tooltip } from '@primer/react'; import { AppContext } from '../../context/App'; -import { Opacity, Size } from '../../types'; +import { GroupBy, Opacity, Size } from '../../types'; import type { Notification } from '../../typesGitHub'; import { cn } from '../../utils/cn'; import { isMarkAsDoneFeatureSupported } from '../../utils/features'; @@ -84,6 +84,8 @@ export const NotificationRow: FC = ({ const notificationTitle = `${notification.subject.title} ${notificationNumber}`.trim(); + const groupByDate = settings.groupBy === GroupBy.DATE; + return (
= ({ className={cn( 'text-xxs', Opacity.READ, - !settings.showNumber && 'hidden', + (groupByDate || !settings.showNumber) && 'hidden', )} > {notificationNumber} diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap index 57c103815..59dd6950b 100644 --- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap @@ -833,6 +833,9 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende > gitify-app/notifications-test +
@@ -847,7 +850,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende I am a robot and this is a test!
gitify-app/notifications-test +
@@ -1182,7 +1188,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende Improve the UI
gitify-app/notifications-test +
@@ -1648,7 +1657,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende I am a robot and this is a test!
gitify-app/notifications-test +
@@ -1983,7 +1995,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende Improve the UI
@@ -38,6 +38,9 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render > gitify-app/notifications-test +
@@ -77,6 +80,291 @@ exports[`renderer/components/notifications/NotificationHeader.tsx should render > gitify-app/notifications-test + + + + + , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/notifications/NotificationHeader.tsx should render itself & its children - group by date with showNumber setting disabled 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+
+ + + gitify-app/notifications-test + +
+
+
+
+ , + "container":
+ +
+
+ + + gitify-app/notifications-test + +
+
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`renderer/components/notifications/NotificationHeader.tsx should render itself & its children - group by date without notification number 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+
+ + + gitify-app/notifications-test + + +
+
+
+
+ , + "container":
+ +
+
+ + + gitify-app/notifications-test + +
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap index e3e594920..6bd5a6b7b 100644 --- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap @@ -75,6 +75,9 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its > gitify-app/notifications-test +
@@ -89,7 +92,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its I am a robot and this is a test!
gitify-app/notifications-test +
@@ -427,7 +433,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its I am a robot and this is a test!