Merge pull request #2631 from RedisInsight/build/feature/RI-4843_New_version_is_available

#RI-4843 - Inform users that a new version is available

Author: vlad-dargel

redisinsight/desktop/app.ts

@@ -37,8 +37,6 @@ const init = async () => {
 
   nativeTheme.themeSource = electronStore?.get(ElectronStorageItem.themeSource) || config.themeSource
 
-  checkForUpdate(process.env.MANUAL_UPGRADES_LINK || process.env.UPGRADES_LINK)
-
   app.setName(config.name)
   app.setAppUserModelId(config.name)
   if (process.platform !== 'darwin') {
@@ -71,6 +69,8 @@ const init = async () => {
     }
 
     await windowFactory(WindowType.Main, splashWindow, { parsedDeepLink })
+
+    checkForUpdate(process.env.MANUAL_UPGRADES_LINK || process.env.UPGRADES_LINK)
   } catch (_err) {
     const error = _err as Error
     console.log(wrapErrorMessageSensitiveData(error))

redisinsight/desktop/preload.ts

@@ -25,6 +25,9 @@ contextBridge.exposeInMainWorld('app', {
   deepLinkAction: ((parsedDeepLink: any) => {
     ipcRenderer.on(IpcOnEvent.deepLinkAction, parsedDeepLink)
   }),
+  updateAvailable: ((updateInfo: any) => {
+    ipcRenderer.on(IpcOnEvent.appUpdateAvailable, updateInfo)
+  }),
   ipc: ipcHandler,
   config: {
     apiPort: config.apiPort

redisinsight/desktop/src/lib/updater/updater.handlers.ts

@@ -2,7 +2,7 @@ import { app } from 'electron'
 import { autoUpdater, UpdateDownloadedEvent } from 'electron-updater'
 import log from 'electron-log'
 
-import { electronStore } from 'desktopSrc/lib'
+import { electronStore, updateDownloaded } from 'desktopSrc/lib'
 import { wrapErrorMessageSensitiveData } from 'desktopSrc/utils'
 import { ElectronStorageItem } from 'uiSrc/electron/constants'
 
@@ -40,5 +40,7 @@ export const initAutoUpdaterHandlers = () => {
     electronStore?.set(ElectronStorageItem.updateDownloadedForTelemetry, true)
     electronStore?.set(ElectronStorageItem.updateDownloadedVersion, info.version)
     electronStore?.set(ElectronStorageItem.updatePreviousVersion, app.getVersion())
+
+    updateDownloaded(info)
   })
 }

redisinsight/desktop/src/lib/updater/updater.ts

@@ -1,8 +1,18 @@
 import log from 'electron-log'
-import { autoUpdater } from 'electron-updater'
+import { UpdateDownloadedEvent, autoUpdater } from 'electron-updater'
 import { wrapErrorMessageSensitiveData } from 'desktopSrc/utils'
+import { getWindows } from 'desktopSrc/lib/window'
+import { IpcOnEvent } from 'uiSrc/electron/constants'
 
-export const checkForUpdate = (url: string = '') => {
+export const updateDownloaded = (updateInfo: UpdateDownloadedEvent) => {
+  setTimeout(() => {
+    const [currentWindow] = getWindows().values()
+
+    currentWindow?.webContents.send(IpcOnEvent.appUpdateAvailable, updateInfo)
+  }, 60 * 1_000) // 1 min
+}
+
+export const checkForUpdate = async (url: string = '') => {
   if (!url || process.mas) {
     return
   }
@@ -20,7 +30,12 @@ export const checkForUpdate = (url: string = '') => {
     log.error(wrapErrorMessageSensitiveData(error))
   }
 
-  autoUpdater.checkForUpdatesAndNotify()
   autoUpdater.autoDownload = true
   autoUpdater.autoInstallOnAppQuit = true
+
+  await autoUpdater.checkForUpdates()
+}
+
+export const quitAndInstallUpdate = () => {
+  autoUpdater.quitAndInstall(true, true)
 }

redisinsight/desktop/src/lib/window/window.handlers.ts

@@ -8,6 +8,7 @@ import {
   electronStore,
   windowFactory,
   WindowType,
+  quitAndInstallUpdate,
 } from 'desktopSrc/lib'
 import { IpcInvokeEvent, ElectronStorageItem, IpcOnEvent } from 'uiSrc/electron/constants'
 
@@ -99,4 +100,7 @@ export const initWindowIPCHandlers = () => {
   ipcMain.handle(IpcInvokeEvent.windowOpen, async (_event, { location }) => {
     await windowFactory(WindowType.Main, null, { parsedDeepLink: { initialPage: location } })
   })
+  ipcMain.handle(IpcInvokeEvent.appRestart, async () => {
+    quitAndInstallUpdate()
+  })
 }

redisinsight/ui/src/components/notifications/Notifications.tsx

@@ -130,6 +130,11 @@ const Notifications = () => {
               event: TelemetryEvent.CLOUD_CREATE_DATABASE_IN_SUBSCRIPTION_FORM_CLOSED,
             })
             break
+          case InfiniteMessagesIds.appUpdateAvailable:
+            sendEventTelemetry({
+              event: TelemetryEvent.UPDATE_NOTIFICATION_CLOSED,
+            })
+            break
 
           default:
             break

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.spec.tsx

@@ -97,4 +97,23 @@ describe('INFINITE_MESSAGES', () => {
       expect(render(<>{Inner}</>)).toBeTruthy()
     })
   })
+
+  describe('APP_UPDATE_AVAILABLE', () => {
+    it('should render message', () => {
+      const { Inner } = INFINITE_MESSAGES.APP_UPDATE_AVAILABLE('1', jest.fn())
+      expect(render(<>{Inner}</>)).toBeTruthy()
+    })
+
+    it('should call onSuccess', () => {
+      const onSuccess = jest.fn()
+      const { Inner } = INFINITE_MESSAGES.APP_UPDATE_AVAILABLE('1', onSuccess)
+      render(<>{Inner}</>)
+
+      fireEvent.click(screen.getByTestId('app-restart-btn'))
+      fireEvent.mouseUp(screen.getByTestId('app-update-available-notification'))
+      fireEvent.mouseDown(screen.getByTestId('app-update-available-notification'))
+
+      expect(onSuccess).toBeCalled()
+    })
+  })
 })

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx

@@ -8,6 +8,7 @@ export enum InfiniteMessagesIds {
   autoCreateDb = 'autoCreateDb',
   databaseExists = 'databaseExists',
   subscriptionExists = 'subscriptionExists',
+  appUpdateAvailable = 'appUpdateAvailable',
 }
 
 export const INFINITE_MESSAGES = {
@@ -180,5 +181,41 @@ export const INFINITE_MESSAGES = {
         </EuiFlexGroup>
       </div>
     )
-  })
+  }),
+  APP_UPDATE_AVAILABLE: (version: string, onSuccess?: () => void) => ({
+    id: InfiniteMessagesIds.appUpdateAvailable,
+    Inner: (
+      <div
+        role="presentation"
+        onMouseDown={(e) => { e.preventDefault() }}
+        onMouseUp={(e) => { e.preventDefault() }}
+        data-testid="app-update-available-notification"
+      >
+        <EuiTitle className="infiniteMessage__title">
+          <span>
+            New version is now available
+          </span>
+        </EuiTitle>
+        <EuiText size="s">
+          <>
+            With RedisInsight
+            {` ${version} `}
+            you have access to new useful features and optimizations.
+            <br />
+            Restart RedisInsight to install updates.
+          </>
+        </EuiText>
+        <br />
+        <EuiButton
+          fill
+          size="s"
+          color="secondary"
+          onClick={() => onSuccess?.()}
+          data-testid="app-restart-btn"
+        >
+          Restart
+        </EuiButton>
+      </div>
+    )
+  }),
 }

redisinsight/ui/src/electron/components/ConfigElectron/ConfigElectron.tsx

@@ -1,13 +1,17 @@
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
+import { UpdateInfo } from 'electron-updater'
 import { IParsedDeepLink } from 'desktopSrc/lib/app/deep-link.handlers'
 import {
   appServerInfoSelector,
-  appElectronInfoSelector
+  appElectronInfoSelector,
 } from 'uiSrc/slices/app/info'
-import { ipcCheckUpdates, ipcSendEvents } from 'uiSrc/electron/utils'
+import { ipcAppRestart, ipcCheckUpdates, ipcSendEvents } from 'uiSrc/electron/utils'
 import { ipcDeleteDownloadedVersion } from 'uiSrc/electron/utils/ipcDeleteStoreValues'
+import { addInfiniteNotification } from 'uiSrc/slices/app/notifications'
+import { INFINITE_MESSAGES } from 'uiSrc/components/notifications/components'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 
 const ConfigElectron = () => {
   let isCheckedUpdates = false
@@ -19,6 +23,7 @@ const ConfigElectron = () => {
 
   useEffect(() => {
     window.app?.deepLinkAction?.(deepLinkAction)
+    window.app?.updateAvailable?.(updateAvailableAction)
   }, [])
 
   useEffect(() => {
@@ -48,6 +53,14 @@ const ConfigElectron = () => {
     }
   }
 
+  const updateAvailableAction = (_e: any, { version }: UpdateInfo) => {
+    sendEventTelemetry({ event: TelemetryEvent.UPDATE_NOTIFICATION_DISPLAYED })
+    dispatch(addInfiniteNotification(INFINITE_MESSAGES.APP_UPDATE_AVAILABLE(version, () => {
+      sendEventTelemetry({ event: TelemetryEvent.UPDATE_NOTIFICATION_RESTART_CLICKED })
+      ipcAppRestart()
+    })))
+  }
+
   return null
 }
 

redisinsight/ui/src/electron/constants/ipcEvent.ts

@@ -5,12 +5,14 @@ enum IpcInvokeEvent {
   cloudOauth = 'cloud:oauth',
   windowOpen = 'window:open',
   themeChange = 'theme:change',
+  appRestart = 'app:restart',
 }
 
 enum IpcOnEvent {
   sendWindowId = 'window:send:id',
   cloudOauthCallback = 'cloud:oauth:callback',
   deepLinkAction = 'deep-link:action',
+  appUpdateAvailable = 'app:update:available',
 }
 
 export {