check latest version on startup and show tooltip when a new version is available

Author: jsajal

packages/flowtest-electron/electron-main.js

@@ -6,6 +6,8 @@ const template = require('./electron-menu');
 const Watcher = require('./src/app/watcher');
 const registerRendererEventHandlers = require('./src/ipc/collection');
 const registerSettingsEventHandlers = require('./src/ipc/settings');
+const packageJson = require('./package.json'); // app's package.json
+const https = require('https');
 
 let mainWindow;
 let watcher;
@@ -20,6 +22,41 @@ if (process.env.NODE_ENV === 'production') {
   console.trace = noop;
 }
 
+const version = {
+  current: packageJson.version,
+  latest: packageJson.version,
+};
+
+function checkForUpdates() {
+  const url = `https://raw.githubusercontent.com/FlowTestAI/FlowTest/main/packages/flowtest-electron/package.json`;
+
+  https
+    .get(url, (res) => {
+      let data = '';
+
+      res.on('data', (chunk) => {
+        data += chunk;
+      });
+
+      res.on('end', () => {
+        try {
+          const remotePackageJson = JSON.parse(data);
+          const latestVersion = remotePackageJson.version;
+
+          if (latestVersion !== version.current) {
+            version.latest = latestVersion;
+            //shell.openExternal(`https://github.com/${username}/${repo}/releases`);
+          }
+        } catch (error) {
+          console.error('Error parsing JSON:', error);
+        }
+      });
+    })
+    .on('error', (err) => {
+      console.error('Error fetching package.json:', err);
+    });
+}
+
 app.on('ready', async () => {
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);
@@ -59,6 +96,12 @@ app.on('ready', async () => {
 
   watcher = new Watcher();
 
+  checkForUpdates();
+  mainWindow.webContents.on('did-finish-load', () => {
+    // Send a message to the renderer process
+    mainWindow.webContents.send('main:app-version', version);
+  });
+
   registerRendererEventHandlers(mainWindow, watcher);
   registerSettingsEventHandlers(mainWindow);
 });

src/components/molecules/headers/MainHeader.js

@@ -1,16 +1,35 @@
 import React from 'react';
 import ThemeController from 'components/atoms/ThemeController';
 import AppLogo from 'components/atoms/Logo';
+import useSettingsStore from 'stores/SettingsStore';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
 
 const MainHeader = () => {
+  const appVersion = useSettingsStore((state) => state.appVersion);
+
   return (
     // <header className='flex items-center justify-between px-4 py-3 font-semibold tracking-widest dark:bg-slate-800 dark:text-white'>
     <header className='flex items-center justify-between px-4 py-3 font-semibold tracking-widest'>
       <div className='flex items-center gap-3'>
         <AppLogo styleClasses='w-6 h-6' />
         <div className='flex items-baseline gap-1'>
           <h2>FlowTestAI</h2>
-          <span className='text-xs font-normal'>v1.1.0</span>
+          <span className='text-xs font-normal'>
+            <a href='https://github.com/FlowTestAI/FlowTest/releases' target='_blank' rel='noreferrer' className='link'>
+              {`v${appVersion.current}`}
+            </a>
+          </span>
+          {appVersion.current != appVersion.latest ? (
+            <span className='text-xs font-normal'>
+              <Tippy content={`v${appVersion.latest} available`} placement='top'>
+                <ExclamationCircleIcon className='w-5 h-5' />
+              </Tippy>
+            </span>
+          ) : (
+            <></>
+          )}
         </div>
       </div>
       <ThemeController />

src/ipc/settings.js

@@ -4,6 +4,7 @@ import useSettingsStore from 'stores/SettingsStore';
 const registerSettingsEventHandlers = () => {
   const _addLogSyncConfig = useSettingsStore((state) => state.addLogSyncConfig);
   const _addGenAIUsageDisclaimer = useSettingsStore((state) => state.addGenAIUsageDisclaimer);
+  const _updateAppVersion = useSettingsStore((state) => state.updateAppVersion);
 
   useEffect(() => {
     const { ipcRenderer } = window;
@@ -19,6 +20,10 @@ const registerSettingsEventHandlers = () => {
       }
     });
 
+    ipcRenderer.on('main:app-version', (version) => {
+      _updateAppVersion(version);
+    });
+
     ipcRenderer.invoke('renderer:settings-window-ready');
   }, []);
 };

src/stores/SettingsStore.js

@@ -3,12 +3,16 @@ import { create } from 'zustand';
 const useSettingsStore = create((set, get) => ({
   logSyncConfig: {},
   genAIUsageDisclaimer: false,
+  appVersion: {},
   addLogSyncConfig: (enabled, hostUrl, accessId, accessKey) => {
     set((state) => ({ logSyncConfig: { ...state.logSyncConfig, ...{ enabled, hostUrl, accessId, accessKey } } }));
   },
   addGenAIUsageDisclaimer: (accepted) => {
     set((state) => ({ genAIUsageDisclaimer: accepted }));
   },
+  updateAppVersion: (version) => {
+    set((state) => ({ appVersion: version }));
+  },
 }));
 
 export default useSettingsStore;