From 2ffb9427388b050529a21fd62336669b1d07d785 Mon Sep 17 00:00:00 2001
From: Lucas Leblow <lucas@quiet.chat>
Date: Wed, 6 Sep 2023 10:21:54 -0600
Subject: [PATCH] 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                                  |  2 ++
 .../widgets/update/UpdateModal.test.tsx       | 20 +++++++++--
 .../components/widgets/update/UpdateModal.tsx | 33 +++++++++++++++++--
 packages/desktop/src/renderer/index.tsx       |  2 +-
 .../src/renderer/store/handlers/update.ts     |  4 +--
 5 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58bb659f52..58ad0674ad 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx
index 3741bb265b..d29212be1e 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.test.tsx
+++ b/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>
diff --git a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx b/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
index 7fa7abb4db..85ae6a0d1a 100644
--- a/packages/desktop/src/renderer/components/widgets/update/UpdateModal.tsx
+++ b/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>
   )
diff --git a/packages/desktop/src/renderer/index.tsx b/packages/desktop/src/renderer/index.tsx
index ef2e8f1e08..a3a1ecc0b5 100644
--- a/packages/desktop/src/renderer/index.tsx
+++ b/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 => {
diff --git a/packages/desktop/src/renderer/store/handlers/update.ts b/packages/desktop/src/renderer/store/handlers/update.ts
index 5f6ec83c1f..7d711b3bdc 100644
--- a/packages/desktop/src/renderer/store/handlers/update.ts
+++ b/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,
 }