feat: account notifications toggle via chevron (#1218)

* feat: account notifications toggle via chevron

* feat: account notifications toggle via chevron

Author: setchy

src/components/AccountNotifications.test.tsx

@@ -49,4 +49,21 @@ describe('components/AccountNotifications.tsx', () => {
     expect(openAccountProfileMock).toHaveBeenCalledTimes(1);
     expect(openAccountProfileMock).toHaveBeenCalledWith(mockGitHubCloudAccount);
   });
+
+  it('should toggle account notifications visibility', async () => {
+    const props = {
+      account: mockGitHubCloudAccount,
+      notifications: mockGitHubNotifications,
+      showAccountHostname: true,
+    };
+
+    await act(async () => {
+      render(<AccountNotifications {...props} />);
+    });
+
+    fireEvent.click(screen.getByTitle('Hide account notifications'));
+
+    const tree = render(<AccountNotifications {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/AccountNotifications.tsx

@@ -1,4 +1,9 @@
-import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronUpIcon,
+} from '@primer/octicons-react';
+import { useState } from 'react';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
@@ -26,7 +31,25 @@ export const AccountNotifications = (props: IProps) => {
     ),
   );
 
-  const Chevron = notifications.length > 0 ? ChevronDownIcon : ChevronLeftIcon;
+  const [showNotifications, setShowNotifications] = useState(true);
+
+  const toggleNotifications = () => {
+    setShowNotifications(!showNotifications);
+  };
+
+  const ChevronIcon =
+    notifications.length === 0
+      ? ChevronLeftIcon
+      : showNotifications
+        ? ChevronDownIcon
+        : ChevronUpIcon;
+
+  const toggleNotificationsLabel =
+    notifications.length === 0
+      ? 'No notifications for account'
+      : showNotifications
+        ? 'Hide account notifications'
+        : 'Show account notifications';
 
   return (
     <>
@@ -43,23 +66,30 @@ export const AccountNotifications = (props: IProps) => {
             </button>
           </div>
           <div>
-            <Chevron size={20} />
+            <button
+              type="button"
+              title={toggleNotificationsLabel}
+              onClick={toggleNotifications}
+            >
+              <ChevronIcon size={20} />
+            </button>
           </div>
         </div>
       )}
 
-      {Object.values(groupedNotifications).map((repoNotifications) => {
-        const repoSlug = repoNotifications[0].repository.full_name;
+      {showNotifications &&
+        Object.values(groupedNotifications).map((repoNotifications) => {
+          const repoSlug = repoNotifications[0].repository.full_name;
 
-        return (
-          <RepositoryNotifications
-            key={repoSlug}
-            account={account}
-            repoName={repoSlug}
-            repoNotifications={repoNotifications}
-          />
-        );
-      })}
+          return (
+            <RepositoryNotifications
+              key={repoSlug}
+              account={account}
+              repoName={repoSlug}
+              repoNotifications={repoNotifications}
+            />
+          );
+        })}
     </>
   );
 };