feat: link version number to release notes (#925)

Author: setchy

src/routes/Settings.test.tsx

@@ -10,6 +10,7 @@ import { AppContext } from '../context/App';
 import * as apiRequests from '../utils/api-requests';
 import Constants from '../utils/constants';
 import { SettingsRoute } from './Settings';
+import { shell } from 'electron';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -390,4 +391,30 @@ describe('routes/Settings.tsx', () => {
       ).parentNode.parentNode,
     ).toMatchSnapshot();
   });
+
+  it('should open release notes', async () => {
+    let getByTitle;
+
+    await act(async () => {
+      const { getByTitle: getByTitleLocal } = render(
+        <AppContext.Provider
+          value={{
+            settings: mockSettings,
+            accounts: mockAccounts,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+      getByTitle = getByTitleLocal;
+    });
+
+    fireEvent.click(getByTitle('View release notes'));
+    expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(shell.openExternal).toHaveBeenCalledWith(
+      'https://github.com/gitify-app/gitify/releases/tag/v0.0.1',
+    );
+  });
 });

src/routes/Settings.tsx

@@ -20,7 +20,7 @@ import { AppContext } from '../context/App';
 import { Appearance } from '../types';
 import { apiRequestAuth } from '../utils/api-requests';
 import { setAppearance } from '../utils/appearance';
-import { updateTrayIcon } from '../utils/comms';
+import { openExternalLink, updateTrayIcon } from '../utils/comms';
 import Constants from '../utils/constants';
 import { generateGitHubAPIUrl } from '../utils/helpers';
 
@@ -32,6 +32,12 @@ export const SettingsRoute: React.FC = () => {
   const [appVersion, setAppVersion] = useState<string | null>(null);
   const [colorScope, setColorScope] = useState<boolean>(false);
 
+  const openGitHubReleaseNotes = useCallback((version) => {
+    openExternalLink(
+      `https://github.com/${Constants.REPO_SLUG}/releases/tag/v${version}`,
+    );
+  }, []);
+
   useEffect(() => {
     ipcRenderer.invoke('get-platform').then((result: string) => {
       setIsLinux(result === 'linux');
@@ -166,8 +172,13 @@ export const SettingsRoute: React.FC = () => {
       </div>
 
       <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8">
-        <small className="font-semibold">Gitify v{appVersion}</small>
-
+        <small
+          className="font-semibold cursor-pointer"
+          title="View release notes"
+          onClick={() => openGitHubReleaseNotes(appVersion)}
+        >
+          Gitify v{appVersion}
+        </small>
         <div>
           <button
             className={footerButtonClass}

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -281,7 +281,8 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8"
   >
     <small
-      class="font-semibold"
+      class="font-semibold cursor-pointer"
+      title="View release notes"
     >
       Gitify v
       0.0.1