From 25f33b85444abe94a52cafdb56c48d5494a78ff4 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Sat, 15 Jun 2024 12:30:00 -0400 Subject: [PATCH 1/5] feat: toggle repository notification --- src/components/AccountNotifications.tsx | 24 ++--- src/components/Repository.tsx | 44 +++++++-- .../AccountNotifications.test.tsx.snap | 49 +++++++--- .../__snapshots__/Repository.test.tsx.snap | 96 +++++++++++++++++-- 4 files changed, 173 insertions(+), 40 deletions(-) diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index b11d05e5b..411cdb369 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -31,30 +31,31 @@ export const AccountNotifications = (props: IProps) => { ), ); - const [showNotifications, setShowNotifications] = useState(true); + const [showAccountNotifications, setShowAccountNotifications] = + useState(true); - const toggleNotifications = () => { - setShowNotifications(!showNotifications); + const toggleAccountNotifications = () => { + setShowAccountNotifications(!showAccountNotifications); }; const ChevronIcon = notifications.length === 0 ? ChevronLeftIcon - : showNotifications + : showAccountNotifications ? ChevronDownIcon : ChevronUpIcon; - const toggleNotificationsLabel = + const toggleAccountNotificationsLabel = notifications.length === 0 ? 'No notifications for account' - : showNotifications + : showAccountNotifications ? 'Hide account notifications' : 'Show account notifications'; return ( <> {showAccountHostname && ( -
+
-
+
@@ -77,7 +79,7 @@ export const AccountNotifications = (props: IProps) => {
)} - {showNotifications && + {showAccountNotifications && Object.values(groupedNotifications).map((repoNotifications) => { const repoSlug = repoNotifications[0].repository.full_name; diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx index ace1d48a4..835eb7069 100644 --- a/src/components/Repository.tsx +++ b/src/components/Repository.tsx @@ -1,5 +1,11 @@ -import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react'; -import { type FC, useCallback, useContext } from 'react'; +import { + CheckIcon, + ChevronDownIcon, + ChevronUpIcon, + MarkGithubIcon, + ReadIcon, +} from '@primer/octicons-react'; +import { type FC, useCallback, useContext, useState } from 'react'; import { AppContext } from '../context/App'; import type { Notification } from '../typesGitHub'; import { openRepository } from '../utils/links'; @@ -28,10 +34,25 @@ export const RepositoryNotifications: FC = ({ const avatarUrl = repoNotifications[0].repository.owner.avatar_url; const repoSlug = repoNotifications[0].repository.full_name; + const [showRepositoryNotifications, setShowRepositoryNotifications] = + useState(true); + + const toggleRepositoryNotifications = () => { + setShowRepositoryNotifications(!showRepositoryNotifications); + }; + + const ChevronIcon = showRepositoryNotifications + ? ChevronDownIcon + : ChevronUpIcon; + + const toggleRepositoryNotificationsLabel = showRepositoryNotifications + ? 'Hide repository notifications' + : 'Show repository notifications'; + return ( <> -
-
+
+
{avatarUrl ? ( = ({
+
- {repoNotifications.map((obj) => ( - - ))} + {showRepositoryNotifications && + repoNotifications.map((obj) => ( + + ))} ); }; diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index fbd8f9167..f002b5238 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -6,7 +6,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi "baseElement":
-
+
-
+
+ +
+ +
+
+
+
+
+
+ + + gitify-app/notifications-test + +
+
+ + +
+ +
+
+
+ NotificationRow +
+
+ NotificationRow +
+
+ , + "container":
+
+
+ + + gitify-app/notifications-test + +
+
+ + +
+ +
+
+
+ NotificationRow +
+
+ NotificationRow +
+
, + "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/Repository.tsx should use default repository icon when avatar is not available 1`] = ` { "asFragment": [Function], From 29521d93ef2af5c58eab87720ea5683524f80832 Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Sun, 16 Jun 2024 17:48:49 +0100 Subject: [PATCH 3/5] style: toggle on row click & action buttons order --- biome.json | 3 +++ src/components/AccountNotifications.tsx | 7 +++++-- src/components/NotificationRow.tsx | 19 +++++++++---------- src/components/Repository.tsx | 25 +++++++++++++------------ 4 files changed, 30 insertions(+), 24 deletions(-) diff --git a/biome.json b/biome.json index 8b73637ee..bac4f37fb 100644 --- a/biome.json +++ b/biome.json @@ -11,6 +11,9 @@ "noUnusedFunctionParameters": "error", "useDefaultSwitchClause": "error" }, + "a11y": { + "useKeyWithClickEvents": "off" + }, "correctness": { "useExhaustiveDependencies": { "level": "warn", diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index 411cdb369..6593414a5 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -55,7 +55,10 @@ export const AccountNotifications = (props: IProps) => { return ( <> {showAccountHostname && ( -
+
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 975d09d94..4fb8d05fd 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -114,7 +114,6 @@ export const NotificationRow: FC = ({ notification }) => {
handleNotification()} - onKeyDown={() => handleNotification()} >
= ({ notification }) => { - - + +
); diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx index 835eb7069..6c275426f 100644 --- a/src/components/Repository.tsx +++ b/src/components/Repository.tsx @@ -51,7 +51,10 @@ export const RepositoryNotifications: FC = ({ return ( <> -
+
{avatarUrl ? ( = ({ openRepository(repoNotifications[0].repository)} - onKeyDown={() => openRepository(repoNotifications[0].repository)} > {repoName}
- -
- + +
From 2a7b12e05cccf29b00228f01a77a66d2d4bb4ac7 Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Sun, 16 Jun 2024 17:56:12 +0100 Subject: [PATCH 4/5] chore: update snapshots --- src/components/NotificationRow.test.tsx | 2 +- .../AccountNotifications.test.tsx.snap | 48 +- .../NotificationRow.test.tsx.snap | 480 +++++++++--------- .../__snapshots__/Repository.test.tsx.snap | 245 ++++----- 4 files changed, 377 insertions(+), 398 deletions(-) diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx index 0473aa2c5..6021e5e35 100644 --- a/src/components/NotificationRow.test.tsx +++ b/src/components/NotificationRow.test.tsx @@ -370,7 +370,7 @@ describe('components/NotificationRow.tsx', () => { , ); - fireEvent.keyDown(screen.getByRole('main')); + fireEvent.click(screen.getByRole('main')); expect(links.openNotification).toHaveBeenCalledTimes(1); expect(removeNotificationFromState).toHaveBeenCalledTimes(1); }); diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index f002b5238..c68b432f8 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -49,13 +49,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi class="octicon octicon-chevron-down" fill="currentColor" focusable="false" - height="20" + height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 16 16" - width="20" + viewBox="0 0 12 12" + width="14" > @@ -111,13 +111,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi class="octicon octicon-chevron-down" fill="currentColor" focusable="false" - height="20" + height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 16 16" - width="20" + viewBox="0 0 12 12" + width="14" > @@ -230,10 +230,10 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi class="octicon octicon-chevron-left" fill="currentColor" focusable="false" - height="20" + height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" viewBox="0 0 16 16" - width="20" + width="14" > @@ -463,13 +463,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications class="octicon octicon-chevron-down" fill="currentColor" focusable="false" - height="20" + height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 16 16" - width="20" + viewBox="0 0 12 12" + width="14" > @@ -525,13 +525,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications class="octicon octicon-chevron-down" fill="currentColor" focusable="false" - height="20" + height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 16 16" - width="20" + 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 de10784af..dfa6e0e86 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -203,13 +203,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -447,13 +447,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -748,13 +748,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -992,13 +992,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -1268,13 +1268,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -1487,13 +1487,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil @@ -1815,13 +1815,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills @@ -2086,13 +2086,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills @@ -2362,13 +2362,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu @@ -2581,13 +2581,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu @@ -2857,13 +2857,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu @@ -3076,13 +3076,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu @@ -3428,13 +3428,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p @@ -3723,13 +3723,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p @@ -4075,13 +4075,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p @@ -4370,13 +4370,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p @@ -4566,13 +4566,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d @@ -4705,13 +4705,13 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d @@ -4949,13 +4949,13 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`] @@ -5136,13 +5136,13 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`] @@ -5380,13 +5380,13 @@ exports[`components/NotificationRow.tsx should render itself & its children when @@ -5567,13 +5567,13 @@ exports[`components/NotificationRow.tsx should render itself & its children when @@ -5815,13 +5815,13 @@ exports[`components/NotificationRow.tsx should render itself & its children with @@ -6006,13 +6006,13 @@ exports[`components/NotificationRow.tsx should render itself & its children with diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap index c7476bca4..3635e6a4d 100644 --- a/src/components/__snapshots__/Repository.test.tsx.snap +++ b/src/components/__snapshots__/Repository.test.tsx.snap @@ -27,66 +27,63 @@ exports[`components/Repository.tsx should render itself & its children 1`] = ` > -
@@ -123,66 +120,63 @@ exports[`components/Repository.tsx should render itself & its children 1`] = ` > -
@@ -285,66 +279,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit > -
@@ -383,66 +374,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit > -
@@ -488,66 +476,63 @@ exports[`components/Repository.tsx should toggle account notifications visibilit > -
@@ -650,66 +635,63 @@ exports[`components/Repository.tsx should use default repository icon when avata > -
@@ -755,66 +737,63 @@ exports[`components/Repository.tsx should use default repository icon when avata > -
From d2730b8ff511ddf6540849626251bb2af6ae092f Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Sun, 16 Jun 2024 23:58:08 +0100 Subject: [PATCH 5/5] fix: restore `gap` in account spacing --- src/components/AccountNotifications.tsx | 2 +- .../AccountNotifications.test.tsx.snap | 28 ++++++++++++++----- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index cd6a5621a..15dbe2232 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -59,7 +59,7 @@ export const AccountNotifications = (props: IProps) => { className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white" onClick={toggleAccountNotifications} > -
+