Clarify autoupdate language

When a new update is available, it is applied automatically on
restart. The update modal now let's you know that an update is
available and allows you to restart now or later.

Fixes #1540

CHANGELOG.md

@@ -21,3 +21,5 @@
 * Use csrs instead of certificates as a source of user data
 
 * Integration state manager layer with UI layer(desktop and mobile)
+
+* Clarify autoupdate language in update modal to let users know that the app will update on restart.

packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx

@@ -84,7 +84,7 @@ describe('UpdateModal', () => {
                 style="width: 600px;"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-puyhqi-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1emakh5-MuiGrid-root"
                 >
                   <div
                     class="MuiGrid-root MuiGrid-container UpdateModalinfo css-1lym95h-MuiGrid-root"
@@ -119,7 +119,7 @@ describe('UpdateModal', () => {
                       <p
                         class="MuiTypography-root MuiTypography-body2 css-16d47hw-MuiTypography-root"
                       >
-                        An update is available for Quiet.
+                        A new update for Quiet is available and will be applied on your next restart.
                       </p>
                     </div>
                   </div>
@@ -134,13 +134,27 @@ describe('UpdateModal', () => {
                         tabindex="0"
                         type="submit"
                       >
-                        Update now
+                        Restart now
                         <span
                           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                         />
                       </button>
                     </div>
                   </div>
+                  <div
+                    class="MuiGrid-root MuiGrid-container MuiGrid-item UpdateModalsecondaryButtonContainer css-1h16bbz-MuiGrid-root"
+                  >
+                    <button
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-fullWidth UpdateModalsecondaryButton css-14mi2mx-MuiButtonBase-root-MuiButton-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      Later
+                      <span
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx

@@ -18,6 +18,8 @@ const classes = {
   updateIcon: `${PREFIX}updateIcon`,
   title: `${PREFIX}title`,
   subTitle: `${PREFIX}subTitle`,
+  secondaryButtonContainer: `${PREFIX}secondaryButtonContainer`,
+  secondaryButton: `${PREFIX}secondaryButton`,
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
@@ -47,6 +49,24 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.subTitle}`]: {
     marginBottom: 32,
   },
+
+  [`& .${classes.secondaryButtonContainer}`]: {
+    marginTop: 16,
+    marginBottom: 32,
+  },
+
+  [`& .${classes.secondaryButton}`]: {
+    width: 160,
+    height: 40,
+    color: theme.palette.colors.darkGray,
+    backgroundColor: theme.palette.colors.white,
+    padding: theme.spacing(2),
+    '&:hover': {
+      boxShadow: 'none',
+      cursor: 'pointer',
+      backgroundColor: theme.palette.colors.white,
+    },
+  },
 }))
 
 interface UpdateModalProps {
@@ -71,9 +91,12 @@ export const UpdateModal: React.FC<UpdateModalProps> = ({ open, handleClose, han
         </Grid>
         <Grid container item justifyContent='center'>
           <Grid item className={classes.subTitle}>
-            <Typography variant='body2'>An update is available for Quiet.</Typography>
+            <Typography variant='body2'>
+              A new update for Quiet is available and will be applied on your next restart.
+            </Typography>
           </Grid>
         </Grid>
+
         <Grid container spacing={8} justifyContent='center'>
           <Grid item xs={4}>
             <Button
@@ -85,10 +108,16 @@ export const UpdateModal: React.FC<UpdateModalProps> = ({ open, handleClose, han
               fullWidth
               className={classes.button}
             >
-              Update now
+              Restart now
             </Button>
           </Grid>
         </Grid>
+
+        <Grid container item className={classes.secondaryButtonContainer} justifyContent='center'>
+          <Button variant='contained' onClick={handleClose} size='small' fullWidth className={classes.secondaryButton}>
+            Later
+          </Button>
+        </Grid>
       </StyledModalContent>
     </Modal>
   )

packages/desktop/src/renderer/index.tsx

@@ -12,7 +12,7 @@ if (window && process.env.DEBUG) {
 }
 
 ipcRenderer.on('newUpdateAvailable', _event => {
-  store.dispatch(updateHandlers.epics.checkForUpdate() as any)
+  store.dispatch(updateHandlers.epics.openUpdateModal() as any)
 })
 
 ipcRenderer.on('force-save-state', async _event => {

packages/desktop/src/renderer/store/handlers/update.ts

@@ -3,7 +3,7 @@ import { ModalName } from '../../sagas/modals/modals.types'
 import { modalsActions } from '../../sagas/modals/modals.slice'
 import { AnyAction, Dispatch } from 'redux'
 
-export const checkForUpdate = () => async (dispatch: Dispatch<AnyAction>) => {
+export const openUpdateModal = () => async (dispatch: Dispatch<AnyAction>) => {
   dispatch(modalsActions.openModal({ name: ModalName.applicationUpdate }))
 }
 
@@ -17,7 +17,7 @@ export const declineUpdate = () => async (dispatch: Dispatch<AnyAction>) => {
 }
 
 export const epics = {
-  checkForUpdate,
+  openUpdateModal,
   startApplicationUpdate,
   declineUpdate,
 }