diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx index 8c16f7ad..93b6b1d5 100644 --- a/src/components/Sidebar.test.tsx +++ b/src/components/Sidebar.test.tsx @@ -146,6 +146,50 @@ describe('components/Sidebar.tsx', () => { ); }); + it('opens my github issues page', () => { + const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink'); + + render( + + + + + , + ); + fireEvent.click(screen.getByLabelText('My Issues')); + expect(openExternalLinkMock).toHaveBeenCalledTimes(1); + expect(openExternalLinkMock).toHaveBeenCalledWith( + 'https://github.com/issues', + ); + }); + + it('opens my github pull requests page', () => { + const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink'); + + render( + + + + + , + ); + fireEvent.click(screen.getByLabelText('My Pull Requests')); + expect(openExternalLinkMock).toHaveBeenCalledTimes(1); + expect(openExternalLinkMock).toHaveBeenCalledWith( + 'https://github.com/pulls', + ); + }); + it('should quit the app', () => { const quitAppMock = jest.spyOn(comms, 'quitApp'); diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index eee0c2c8..bad09512 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,6 +1,8 @@ import { BellIcon, GearIcon, + GitPullRequestIcon, + IssueOpenedIcon, SyncIcon, XCircleIcon, } from '@primer/octicons-react'; @@ -11,7 +13,12 @@ import { AppContext } from '../context/App'; import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify'; import { cn } from '../utils/cn'; import { quitApp } from '../utils/comms'; -import { openGitHubNotifications, openGitifyRepository } from '../utils/links'; +import { + openGitHubIssues, + openGitHubNotifications, + openGitHubPulls, + openGitifyRepository, +} from '../utils/links'; import { getNotificationCount } from '../utils/notifications'; export const Sidebar: FC = () => { @@ -33,6 +40,11 @@ export const Sidebar: FC = () => { return getNotificationCount(notifications); }, [notifications]); + const hasNotifications = useMemo( + () => notificationsCount > 0, + [notificationsCount], + ); + return (
@@ -50,7 +62,7 @@ export const Sidebar: FC = () => { type="button" className={cn( 'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold', - notificationsCount > 0 ? 'text-green-500' : 'text-white', + hasNotifications ? 'text-green-500' : 'text-white', )} onClick={() => openGitHubNotifications()} title={`${notificationsCount} Unread Notifications`} @@ -59,7 +71,25 @@ export const Sidebar: FC = () => { size={12} aria-label={`${notificationsCount} Unread Notifications`} /> - {notificationsCount > 0 && notificationsCount} + {hasNotifications && notificationsCount} + + + + +
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap index 6ef542d2..043b38dd 100644 --- a/src/components/__snapshots__/Sidebar.test.tsx.snap +++ b/src/components/__snapshots__/Sidebar.test.tsx.snap @@ -84,6 +84,51 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in) 4 + +
4 + +
4 + +
4 + +
{ ); }); + it('openGitHubIssues', () => { + openGitHubIssues(); + expect(comms.openExternalLink).toHaveBeenCalledWith( + 'https://github.com/issues', + ); + }); + + it('openGitHubPulls', () => { + openGitHubPulls(); + expect(comms.openExternalLink).toHaveBeenCalledWith( + 'https://github.com/pulls', + ); + }); + it('openAccountProfile', () => { openAccountProfile(mockGitHubCloudAccount); expect(comms.openExternalLink).toHaveBeenCalledWith( diff --git a/src/utils/links.ts b/src/utils/links.ts index 3b6f84e6..6edd4477 100644 --- a/src/utils/links.ts +++ b/src/utils/links.ts @@ -19,6 +19,14 @@ export function openGitHubNotifications() { openExternalLink('https://github.com/notifications' as Link); } +export function openGitHubIssues() { + openExternalLink('https://github.com/issues' as Link); +} + +export function openGitHubPulls() { + openExternalLink('https://github.com/pulls' as Link); +} + export function openAccountProfile(account: Account) { const url = new URL(`https://${account.hostname}`); url.pathname = account.user.login;