diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index e3c715b21..00424ad4b 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -4,7 +4,6 @@ import { CommentIcon, FeedPersonIcon, IssueClosedIcon, - MarkGithubIcon, MilestoneIcon, ReadIcon, TagIcon, @@ -29,16 +28,13 @@ import { getNotificationTypeIconColor, getPullRequestReviewIcon, } from '../utils/icons'; -import { - openNotification, - openRepository, - openUserProfile, -} from '../utils/links'; +import { openNotification, openUserProfile } from '../utils/links'; import { formatReason } from '../utils/reason'; import { HoverGroup } from './HoverGroup'; import { InteractionButton } from './buttons/InteractionButton'; import { PillButton } from './buttons/PillButton'; import { AvatarIcon } from './icons/AvatarIcon'; +import { NotificationHeader } from './notification/NotificationHeader'; interface INotificationRow { notification: Notification; @@ -108,9 +104,6 @@ export const NotificationRow: FC = ({ notification.subject.linkedIssues?.length > 1 ? 'issues' : 'issue' } ${notification.subject?.linkedIssues?.join(', ')}`; - const repoAvatarUrl = notification.repository.owner.avatar_url; - const repoSlug = notification.repository.full_name; - const groupByDate = settings.groupBy === 'DATE'; return ( @@ -137,35 +130,7 @@ export const NotificationRow: FC = ({ className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer" onClick={() => handleNotification()} > - {groupByDate && ( -
- - - - ) => { - // Don't trigger onClick of parent element. - event.stopPropagation(); - openRepository(notification.repository); - }} - > - {repoSlug} - -
- )} +
@@ -1192,11 +1188,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi height="14" role="img" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 16 16" + viewBox="0 0 12 12" width="14" > diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap index bdef7919f..ba12864d5 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -4668,7 +4668,6 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr >
{ + it('should render itself & its children - group by repositories', async () => { + const props = { + notification: mockSingleNotification, + }; + + const tree = render( + + + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('should render itself & its children - group by date', async () => { + const props = { + notification: mockSingleNotification, + }; + + const tree = render( + + + , + ); + expect(tree).toMatchSnapshot(); + }); + + it('should open notification user profile - group by date', () => { + const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink'); + + const props = { + notification: mockSingleNotification, + }; + + render( + + + , + ); + + fireEvent.click(screen.getByTitle(props.notification.repository.full_name)); + expect(openExternalLinkMock).toHaveBeenCalledTimes(1); + expect(openExternalLinkMock).toHaveBeenCalledWith( + props.notification.repository.html_url, + ); + }); +}); diff --git a/src/components/notification/NotificationHeader.tsx b/src/components/notification/NotificationHeader.tsx new file mode 100644 index 000000000..248db2d0d --- /dev/null +++ b/src/components/notification/NotificationHeader.tsx @@ -0,0 +1,54 @@ +import { MarkGithubIcon } from '@primer/octicons-react'; +import { type FC, type MouseEvent, useContext } from 'react'; +import { AppContext } from '../../context/App'; +import { Opacity, Size } from '../../types'; +import type { Notification } from '../../typesGitHub'; +import { cn } from '../../utils/cn'; +import { openRepository } from '../../utils/links'; +import { AvatarIcon } from '../icons/AvatarIcon'; + +interface INotificationHeader { + notification: Notification; +} + +export const NotificationHeader: FC = ({ + notification, +}: INotificationHeader) => { + const { settings } = useContext(AppContext); + + const repoAvatarUrl = notification.repository.owner.avatar_url; + const repoSlug = notification.repository.full_name; + + const groupByDate = settings.groupBy === 'DATE'; + + return ( + groupByDate && ( +
+ + + + ) => { + // Don't trigger onClick of parent element. + event.stopPropagation(); + openRepository(notification.repository); + }} + > + {repoSlug} + +
+ ) + ); +}; diff --git a/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap b/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap new file mode 100644 index 000000000..4a959d297 --- /dev/null +++ b/src/components/notification/__snapshots__/NotificationHeader.test.tsx.snap @@ -0,0 +1,159 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/notification/NotificationHeader.tsx should render itself & its children - group by date 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ , + "container":
+
+ + gitify-app/notifications-test's avatar + + + 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[`components/notification/NotificationHeader.tsx should render itself & its children - group by repositories 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ , + "container":
, + "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], +} +`;