feat(updates): display update details and add update and restart butt…

…on (#1550)

client/src/state/Updates/UpdatesAPI.ts

@@ -0,0 +1,11 @@
+import superagent from 'superagent';
+
+import { IUpdateInfo } from './UpdatesTypes';
+
+export async function getUpdates(): Promise<IUpdateInfo> {
+    return (await superagent.get(`/api/v1/updates`)).body;
+}
+
+export async function update(): Promise<void> {
+    await superagent.post('api/v1/updates');
+}

client/src/state/Updates/UpdatesActions.ts

@@ -0,0 +1,65 @@
+import * as Sentry from '@sentry/browser';
+
+import {
+    UPDATES_GET_UPDATES_REQUEST,
+    UPDATES_GET_UPDATES_ERROR,
+    UPDATES_GET_UPDATES_SUCCESS,
+    UPDATES_UPDATE_REQUEST,
+    UPDATES_UPDATE_ERROR,
+    UPDATES_UPDATE_SUCCESS
+} from './UpdatesTypes';
+
+import * as API from './UpdatesAPI';
+
+export function getUpdates(): any {
+    return async (dispatch: any) => {
+        try {
+            dispatch({
+                payload: {},
+                type: UPDATES_GET_UPDATES_REQUEST
+            });
+
+            try {
+                const updateInfo = await API.getUpdates();
+
+                dispatch({
+                    payload: updateInfo,
+                    type: UPDATES_GET_UPDATES_SUCCESS
+                });
+                return updateInfo;
+            } catch (error) {
+                Sentry.captureException(error);
+
+                dispatch({
+                    payload: { error },
+                    type: UPDATES_GET_UPDATES_ERROR
+                });
+            }
+        } catch (error) {}
+    };
+}
+
+export function update(): any {
+    return async (dispatch: any) => {
+        try {
+            dispatch({
+                type: UPDATES_UPDATE_REQUEST
+            });
+
+            try {
+                await API.update();
+
+                dispatch({
+                    type: UPDATES_UPDATE_SUCCESS
+                });
+            } catch (error) {
+                Sentry.captureException(error);
+
+                dispatch({
+                    payload: { error },
+                    type: UPDATES_UPDATE_ERROR
+                });
+            }
+        } catch (error) {}
+    };
+}

client/src/state/Updates/UpdatesReducer.ts

@@ -0,0 +1,45 @@
+import * as Sentry from '@sentry/browser';
+
+import {
+    IUpdatesState,
+    IUpdatesActionTypes,
+    UPDATES_GET_UPDATES_SUCCESS
+} from './UpdatesTypes';
+
+export const initialState: IUpdatesState = {
+    updateAvailable: false,
+    checkingForUpdates: false,
+    updateInfo: {
+        version: '',
+        releaseName: '',
+        releaseNotes: '',
+        releaseDate: ''
+    },
+    downloadProgress: {
+        progress: 0,
+        bytesPersecond: 0,
+        percent: 0,
+        total: 0,
+        transferred: 0
+    }
+};
+
+export default function updatesReducer(
+    state: IUpdatesState = initialState,
+    action: IUpdatesActionTypes
+): IUpdatesState {
+    try {
+        switch (action.type) {
+            case UPDATES_GET_UPDATES_SUCCESS:
+                return {
+                    ...state,
+                    updateInfo: action.payload
+                };
+            default:
+                return state;
+        }
+    } catch (error) {
+        Sentry.captureException(error);
+        return state;
+    }
+}

client/src/state/Updates/UpdatesTypes.ts

@@ -0,0 +1,68 @@
+export interface IState {
+    updates: IUpdatesState;
+}
+
+export interface IUpdateInfo {
+    // derived from https://www.electron.build/auto-update#UpdateInfo
+    version: string;
+    releaseName: string;
+    releaseNotes: string;
+    releaseDate: string;
+}
+
+export interface IUpdatesState {
+    updateAvailable: boolean;
+    checkingForUpdates: boolean;
+    updateInfo: IUpdateInfo;
+    downloadProgress: {
+        // dervied from https://www.electron.build/auto-update#event-download-progress
+        progress: number;
+        bytesPersecond: number;
+        percent: number;
+        total: number;
+        transferred: number;
+    };
+}
+
+export const UPDATES_GET_UPDATES_REQUEST = 'UPDATES_GET_UPDATES_REQUEST';
+export const UPDATES_GET_UPDATES_SUCCESS = 'UPDATES_GET_UPDATES_SUCCESS';
+export const UPDATES_GET_UPDATES_ERROR = 'UPDATES_GET_UPDATES_ERROR';
+
+export const UPDATES_UPDATE_REQUEST = 'UPDATES_UPDATE_REQUEST';
+export const UPDATES_UPDATE_SUCCESS = 'UPADTES_UPDATE_SUCCESS';
+export const UPDATES_UPDATE_ERROR = 'UPADTES_UPDATE_ERROR';
+
+export interface IUpdateRequestAction {
+    type: typeof UPDATES_UPDATE_REQUEST;
+}
+
+export interface IUpdateSuccessAction {
+    type: typeof UPDATES_UPDATE_SUCCESS;
+}
+export interface IUpdateErrorAction {
+    type: typeof UPDATES_UPDATE_ERROR;
+}
+
+export interface IGetUpdatesRequestAction {
+    payload: {};
+    type: typeof UPDATES_GET_UPDATES_REQUEST;
+}
+
+export interface IGetUpdatesSuccessAction {
+    payload: IUpdateInfo;
+    type: typeof UPDATES_GET_UPDATES_SUCCESS;
+}
+export interface IGetUpdatesErrorAction {
+    payload: {
+        error: string;
+    };
+    type: typeof UPDATES_GET_UPDATES_ERROR;
+}
+
+export type IUpdatesActionTypes =
+    | IGetUpdatesRequestAction
+    | IGetUpdatesSuccessAction
+    | IGetUpdatesErrorAction
+    | IUpdateErrorAction
+    | IUpdateRequestAction
+    | IUpdateSuccessAction;

client/src/state/index.ts

@@ -23,6 +23,10 @@ import * as SystemTypes from './System/SystemTypes';
 import SystemReducer from './System/SystemReducer';
 import * as SystemActions from './System/SystemActions';
 
+import * as UpdatesTypes from './Updates/UpdatesTypes';
+import UpdatesReducer from './Updates/UpdatesReducer';
+import * as UpdatesActions from './Updates/UpdatesActions';
+
 import RunReducer from './Run/RunReducer';
 import * as RunTypes from './Run/RunTypes';
 import * as RunActions from './Run/RunActions';
@@ -53,7 +57,8 @@ const rootReducer = () =>
         analytics: AnalyticsReducer,
         run: RunReducer,
         settings: SettingsReducer,
-        system: SystemReducer
+        system: SystemReducer,
+        updates: UpdatesReducer
     });
 
 const store = createStore(
@@ -68,15 +73,17 @@ export interface IState
         AnalyticsTypes.IState,
         SettingsTypes.IState,
         RunTypes.IState,
-        SystemTypes.IState {}
+        SystemTypes.IState,
+        UpdatesTypes.IState {}
 
 export const actions = {
     notifications: NotificationsActions,
     h5peditor: H5PEditorActions,
     analytics: AnalyticsActions,
     settings: SettingsActions,
     run: RunActions,
-    system: SystemActions
+    system: SystemActions,
+    updates: UpdatesActions
 };
 
 export const selectors = {

client/src/views/App.tsx

@@ -23,7 +23,6 @@ import RunSetupDialogContainer from './container/RunSetupDialogContainer';
 import RunUploadDialogContainer from './container/RunUploadDialogContainer';
 
 import ErrorDialog from './components/ErrorDialog';
-
 import { actions } from '../state';
 
 const log = new Logger('container:app');
@@ -35,11 +34,14 @@ export default function AppContainer() {
 
     useEffect(() => {
         dispatch(actions.settings.getSettings()).then(
-            async (settings: { language: string }) => {
+            async (settings: { language: string; autoUpdates: boolean }) => {
                 if (settings?.language) {
                     await i18n.loadLanguages(settings.language);
                     i18n.changeLanguage(settings.language);
                 }
+                if (settings?.autoUpdates) {
+                    dispatch(actions.updates.getUpdates());
+                }
             }
         );
 

client/src/views/Settings.tsx

@@ -15,7 +15,7 @@ import Slide from '@material-ui/core/Slide';
 import { TransitionProps } from '@material-ui/core/transitions';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-
+import Badge from '@material-ui/core/Badge';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
 import Divider from '@material-ui/core/Divider';
@@ -107,6 +107,10 @@ export default function FullScreenDialog() {
         (state: IState) => state.system.platformSupportsUpdates
     );
 
+    const updateAvailable = useSelector(
+        (state: IState) => state.updates.updateInfo.releaseName !== ''
+    );
+
     const [section, setSection] = React.useState('general');
 
     const handleClickOpen = () => {
@@ -121,9 +125,19 @@ export default function FullScreenDialog() {
 
     return (
         <div>
-            <IconButton color="inherit" onClick={handleClickOpen}>
-                <SettingsIcon />
-            </IconButton>
+            <Badge
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                }}
+                color="secondary"
+                badgeContent={t('updates.badge')}
+                invisible={!updateAvailable}
+            >
+                <IconButton color="inherit" onClick={handleClickOpen}>
+                    <SettingsIcon />
+                </IconButton>
+            </Badge>
             <Dialog
                 fullScreen={true}
                 open={open}