Merge pull request #1774 from TryQuiet/pr-fix-update-modal-text

Clarify autoupdate language

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.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { withTheme } from '../../../storybook/decorators'
+import UpdateModal, { UpdateModalProps } from './UpdateModal'
+
+const Template: ComponentStory<typeof UpdateModal> = args => {
+  return <UpdateModal {...args} />
+}
+
+export const Component = Template.bind({})
+
+const args: UpdateModalProps = {
+  open: true,
+  handleClose: function (): void {},
+  handleUpdate: function (): void {},
+}
+
+Component.args = args
+
+const component: ComponentMeta<typeof UpdateModal> = {
+  title: 'Components/UpdateModal',
+  decorators: [withTheme],
+  component: UpdateModal,
+}
+
+export default component

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,9 +49,27 @@ 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 {
+export interface UpdateModalProps {
   open: boolean
   handleClose: () => void
   handleUpdate: () => void
@@ -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,
 }