Show notification if server is updated

ui/src/i18n/en.json

@@ -278,7 +278,8 @@
       "data_provider_error": "dataProvider error. Check the console for details.",
       "i18n_error": "Cannot load the translations for the specified language",
       "canceled": "Action cancelled",
-      "logged_out": "Your session has ended, please reconnect."
+      "logged_out": "Your session has ended, please reconnect.",
+      "new_version": "New version available! Please refresh this window."
     },
     "toggleFieldsMenu": {
       "columnsToDisplay": "Columns To Display",

ui/src/layout/ActivityPanel.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useTranslate } from 'react-admin'
+import { useNotify, useTranslate } from 'react-admin'
 import {
   Popover,
   Badge,
@@ -22,6 +22,7 @@ import subsonic from '../subsonic'
 import { scanStatusUpdate } from '../actions'
 import { useInterval } from '../common'
 import { formatDuration } from '../utils'
+import config from '../config'
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -58,9 +59,10 @@ const Uptime = () => {
 
 const ActivityPanel = () => {
   const serverStart = useSelector((state) => state.activity.serverStart)
-  const up = serverStart && serverStart.startTime
+  const up = serverStart.startTime
   const classes = useStyles({ up })
   const translate = useTranslate()
+  const notify = useNotify()
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
   const dispatch = useDispatch()
@@ -82,6 +84,12 @@ const ActivityPanel = () => {
       })
   }, [dispatch])
 
+  useEffect(() => {
+    if (serverStart.version !== config.version) {
+      notify('ra.notification.new_version', 'info', {}, false, 604800000 * 50)
+    }
+  }, [serverStart, notify])
+
   return (
     <div className={classes.wrapper}>
       <Tooltip title={translate('activity.title')}>

ui/src/reducers/activityReducer.js

@@ -3,17 +3,14 @@ import {
   EVENT_SCAN_STATUS,
   EVENT_SERVER_START,
 } from '../actions'
+import config from '../config'
 
-const defaultState = {
+const initialState = {
   scanStatus: { scanning: false, folderCount: 0, count: 0 },
+  serverStart: { version: config.version },
 }
 
-export const activityReducer = (
-  previousState = {
-    scanStatus: defaultState,
-  },
-  payload
-) => {
+export const activityReducer = (previousState = initialState, payload) => {
   const { type, data } = payload
   switch (type) {
     case EVENT_SCAN_STATUS:
@@ -23,6 +20,7 @@ export const activityReducer = (
         ...previousState,
         serverStart: {
           startTime: data.startTime && Date.parse(data.startTime),
+          version: data.version,
         },
       }
     case EVENT_REFRESH_RESOURCE: