Repository: gitify-app/gitify
Pull request #587 (2023-06-05 18:50:12)

feat: remove gh icon & keep notifications icon
Fixes what was discussed in #551 and closes #543.


Patch:
diff --git a/package.json b/package.json
index 2ae34cde..580b5325 100644
--- a/package.json
+++ b/package.json
@@ -146,11 +146,11 @@
     "postcss-loader": "^4.1.0",
     "prettier": "^2.8.8",
     "react-test-renderer": "=16.14.0",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.3.3",
     "ts-jest": "^26.4.4",
     "webpack": "^5.83.1",
     "webpack-cli": "^5.1.1",
     "webpack-merge": "^5.8.0"
   },
-  "packageManager": "pnpm@8.6.0"
+  "packageManager": "pnpm@8.6.1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 929a6b5a..74983490 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,8 +125,8 @@ devDependencies:
     specifier: '=16.14.0'
     version: 16.14.0(react@16.14.0)
   style-loader:
-    specifier: ^2.0.0
-    version: 2.0.0(webpack@5.83.1)
+    specifier: ^3.3.3
+    version: 3.3.3(webpack@5.83.1)
   ts-jest:
     specifier: ^26.4.4
     version: 26.4.4(jest@26.6.3)(typescript@4.1.3)
@@ -5623,14 +5623,12 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /style-loader@2.0.0(webpack@5.83.1):
-    resolution: {integrity: sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==}
-    engines: {node: '>= 10.13.0'}
+  /style-loader@3.3.3(webpack@5.83.1):
+    resolution: {integrity: sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==}
+    engines: {node: '>= 12.13.0'}
     peerDependencies:
-      webpack: ^4.0.0 || ^5.0.0
+      webpack: ^5.0.0
     dependencies:
-      loader-utils: 2.0.4
-      schema-utils: 3.1.2
       webpack: 5.83.1(webpack-cli@5.1.1)
     dev: true
 
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index be3364ff..c0a404e1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,14 +1,14 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { shell, ipcRenderer } from 'electron';
 import * as Octicons from '@primer/octicons-react';
+import { ipcRenderer, shell } from 'electron';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
+import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
-import { Constants } from '../utils/constants';
 import { IconCog } from '../icons/Cog';
-import { IconRefresh } from '../icons/Refresh';
-import { Logo } from '../components/Logo';
 import { IconQuit } from '../icons/Quit';
+import { IconRefresh } from '../icons/Refresh';
+import { Constants } from '../utils/constants';
 
 export const Sidebar: React.FC = () => {
   const history = useHistory();
@@ -46,16 +46,16 @@ export const Sidebar: React.FC = () => {
           onClick={onOpenBrowser}
         />
 
-        {notificationsCount > 0 && (
-          <div
-            className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
-            onClick={onOpenGitHubNotifications}
-            aria-label={`${notificationsCount} Unread Notifications`}
-          >
-            <Octicons.BellIcon size={12} />
-            {notificationsCount}
-          </div>
-        )}
+        <div
+          className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
+            notificationsCount > 0 ? 'text-green-500' : 'text-white'
+          }`}
+          onClick={onOpenGitHubNotifications}
+          aria-label={`${notificationsCount} Unread Notifications`}
+        >
+          <Octicons.BellIcon size={12} />
+          {notificationsCount > 0 && notificationsCount}
+        </div>
       </div>
 
       <div className="py-4 px-3">
@@ -88,14 +88,6 @@ export const Sidebar: React.FC = () => {
             <IconQuit className="w-3.5 h-3.5" />
           </button>
         )}
-
-        <div
-          className={footerButtonClasses}
-          onClick={onOpenBrowser}
-          aria-label="View project on GitHub"
-        >
-          <Octicons.MarkGithubIcon size={15} />
-        </div>
       </div>
     </div>
   );


Test patch:
diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 55039aa6..6f8fbea8 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import * as TestRenderer from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import * as React from 'react';
 import { Router } from 'react-router';
 import { MemoryRouter } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import * as TestRenderer from 'react-test-renderer';
 
 const { shell, ipcRenderer } = require('electron');
 
-import { Sidebar } from './Sidebar';
 import { mockSettings } from '../__mocks__/mock-state';
-import { AppContext } from '../context/App';
 import { mockedAccountNotifications } from '../__mocks__/mockedData';
+import { AppContext } from '../context/App';
+import { Sidebar } from './Sidebar';
 
 describe('components/Sidebar.tsx', () => {
   const fetchNotifications = jest.fn();
@@ -102,18 +102,41 @@ describe('components/Sidebar.tsx', () => {
     );
   });
 
-  it('opens the gitify repo in browser', () => {
-    const { getByLabelText } = render(
-      <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
-        <MemoryRouter>
-          <Sidebar />
-        </MemoryRouter>
-      </AppContext.Provider>
-    );
-    fireEvent.click(getByLabelText('View project on GitHub'));
-    expect(shell.openExternal).toHaveBeenCalledTimes(1);
-    expect(shell.openExternal).toHaveBeenCalledWith(
-      'https://github.com/manosim/gitify'
-    );
+  describe('should render the notifications icon', () => {
+    it('when there are 0 notifications', () => {
+      const { getByLabelText } = render(
+        <AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
+          <MemoryRouter>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>
+      );
+
+      const notificationsIcon = getByLabelText('0 Unread Notifications');
+      expect(notificationsIcon.className).toContain('text-white');
+      expect(notificationsIcon.childNodes.length).toBe(1);
+      expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
+    });
+
+    it('when there are more than 0 notifications', () => {
+      const { getByLabelText } = render(
+        <AppContext.Provider
+          value={{
+            isLoggedIn: true,
+            notifications: mockedAccountNotifications,
+          }}
+        >
+          <MemoryRouter>
+            <Sidebar />
+          </MemoryRouter>
+        </AppContext.Provider>
+      );
+
+      const notificationsIcon = getByLabelText('4 Unread Notifications');
+      expect(notificationsIcon.className).toContain('text-green-500');
+      expect(notificationsIcon.childNodes.length).toBe(2);
+      expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
+      expect(notificationsIcon.childNodes[1].nodeValue).toBe('4');
+    });
   });
 });
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index f83c05b2..682ebbb1 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
     </svg>
     <div
       aria-label="4 Unread Notifications"
-      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
+      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
     >
       <svg
@@ -114,33 +114,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="View project on GitHub"
-      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
-      onClick={[Function]}
-    >
-      <svg
-        aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </div>
   </div>
 </div>
 `;
@@ -198,7 +171,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
     </svg>
     <div
       aria-label="4 Unread Notifications"
-      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
+      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
       onClick={[Function]}
     >
       <svg
@@ -259,33 +232,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         </g>
       </svg>
     </button>
-    <div
-      aria-label="View project on GitHub"
-      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
-      onClick={[Function]}
-    >
-      <svg
-        aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
-          }
-        }
-        fill="currentColor"
-        height={15}
-        role="img"
-        style={
-          Object {
-            "display": "inline-block",
-            "userSelect": "none",
-            "verticalAlign": "text-bottom",
-          }
-        }
-        viewBox="0 0 16 16"
-        width={15}
-      />
-    </div>
   </div>
 </div>
 `;