fix(2679): Fix issue with download buttons missing from large files

.github/workflows/desktop-test-scroll.yml

@@ -54,6 +54,7 @@ jobs:
           install: false
           command: npm run regression-test:ci
           working-directory: packages/desktop
+          cache-key: os-${{ runner.os }}-hash-${{ hashFiles('package-lock.json') }}
 
       - name: Archive test screenshots
         if: steps.filter.outputs.desktop == 'true'

packages/desktop/package.json

@@ -102,9 +102,10 @@
     "test": "jest --runInBand",
     "test:watch": "jest --watchAll",
     "rtl-test": "jest ./src/rtl-tests",
-    "regression-test:update": "cypress install && ./node_modules/.bin/cypress run --component --env type=base --config screenshotsFolder=cypress/snapshots/base-local",
+    "regression-test:update": "cypress install && ./node_modules/.bin/cypress run --component --env type=base,SNAPSHOT_BASE_DIRECTORY=cypress/snapshots/base-local --config screenshotsFolder=cypress/snapshots/base-local",
+    "regression-test:update:ci": "cypress install && ./node_modules/.bin/cypress run --component --env type=base,SNAPSHOT_BASE_DIRECTORY=cypress/snapshots/base --config screenshotsFolder=cypress/snapshots/base",
     "regression-test": "./node_modules/.bin/cypress run --component --env type=actual,SNAPSHOT_BASE_DIRECTORY=cypress/snapshots/base-local",
-    "regression-test:ci": "cypress install && ./node_modules/.bin/cypress run --component --env type=actual",
+    "regression-test:ci": "cypress install --force && ./node_modules/.bin/cypress run --component --env type=actual,SNAPSHOT_BASE_DIRECTORY=cypress/snapshots/base",
     "cypress:open": "cypress open --env type=actual,SNAPSHOT_BASE_DIRECTORY=$PWD/cypress/snapshots/base-local",
     "prepare": "npm run build:main",
     "build:prod": "concurrently \"npm run build:main:prod\" \"npm run build:renderer:prod\"",

packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.stories.tsx

@@ -26,7 +26,7 @@ export const Completed = Template.bind({})
 export const Malicious = Template.bind({})
 
 const mid = '32'
-const cid = '12D3KooWSYQf8zzr5rYnUdLxYyLzHruQHPaMssja1ADifGAcN3qY'
+const cid: string = 'bafybeias7om3oq2qdbmcniflurs676cmuis7cnhczqx623lwesi2fzmwie'
 
 const args: FileComponentProps = {
   message: {
@@ -65,9 +65,8 @@ Uploading.args = {
   ...args,
   message: {
     ...args.message,
-    // @ts-expect-error
     media: {
-      ...args.message.media,
+      ...args.message.media!,
       size: undefined,
     },
   },

packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx

@@ -156,7 +156,7 @@ export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
             variant='indeterminate'
             size={18}
             thickness={4}
-            style={{ position: 'absolute', color: theme.palette.colors.purple }}
+            style={{ position: 'absolute', color: theme.palette.colors.lightGray }}
           />
         )
       case DownloadState.Downloading:
@@ -167,14 +167,14 @@ export const FileComponent: React.FC<FileComponentProps & FileActionsProps> = ({
               size={18}
               thickness={4}
               value={100}
-              style={{ position: 'absolute', color: theme.palette.colors.purple }}
+              style={{ position: 'absolute', color: theme.palette.colors.lightGray }}
             />
             <CircularProgress
               variant='determinate'
               size={18}
               thickness={4}
               value={downloadProgress?.size && (downloadProgress.downloaded / downloadProgress.size) * 100}
-              style={{ color: theme.palette.colors.lightGray }}
+              style={{ color: theme.palette.colors.purple }}
             />
           </>
         )

packages/desktop/src/renderer/components/widgets/channels/NestedMessageContent.test.tsx

@@ -235,7 +235,7 @@ describe('NestedMessageContent', () => {
                         aria-valuenow="100"
                         class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                         role="progressbar"
-                        style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(82, 28, 116);"
+                        style="width: 18px; height: 18px; transform: rotate(-90deg); position: absolute; color: rgb(178, 178, 178);"
                       >
                         <svg
                           class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
@@ -256,7 +256,7 @@ describe('NestedMessageContent', () => {
                         aria-valuenow="50"
                         class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary css-1036n7b-MuiCircularProgress-root"
                         role="progressbar"
-                        style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(178, 178, 178);"
+                        style="width: 18px; height: 18px; transform: rotate(-90deg); color: rgb(82, 28, 116);"
                       >
                         <svg
                           class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"

packages/logger/src/index.ts

@@ -313,7 +313,12 @@ export class QuietLogger {
           replacerFunc: (value: any) => {
             if (value != null && typeof value === 'bigint') {
               return (value as bigint).toString()
+            } else if (value != null && (value.toV1 != null || value.toV0 != null)) {
+              return value.toString()
+            } else if (value != null && value instanceof Uint8Array) {
+              return Buffer.from(value).toString('base64')
             }
+
             return value
           },
         },

packages/logger/src/utils.ts

@@ -26,7 +26,7 @@ const populateReplacerFuncs = (replacers: KeyValueReplacerConfig<any>[]): Replac
 export const findAllByKeyAndReplace = (object: any, replacers: KeyValueReplacerConfig<any>[]) => {
   const replacerMap = populateReplacerFuncs(replacers)
   const anyReplacer: ReplacerFunc<any> | undefined = replacerMap.get(ANY_KEY)
-  const newObject = { ...object }
+  const newObject = structuredClone(object)
   const looper = (obj: any) => {
     for (const k in obj) {
       if (replacerMap.has(k) || anyReplacer != null) {

packages/state-manager/src/sagas/files/autoDownloadFiles/autoDownloadFiles.saga.ts

@@ -32,7 +32,7 @@ export function* autoDownloadFilesSaga(
     const draft = channelMessages[message.id]
 
     // Do not download if already present in local file system
-    if (draft?.media?.path) return
+    if (draft?.media?.path) continue
 
     // Do not autodownload above certain size
     const messageMediaSize = message.media.size || 0
@@ -44,7 +44,7 @@ export function* autoDownloadFilesSaga(
           downloadState: DownloadState.Ready,
         })
       )
-      return
+      continue
     }
 
     yield* put(

packages/state-manager/src/sagas/messages/addMessages/addMessages.saga.ts

@@ -5,6 +5,9 @@ import { messagesSelectors } from '../messages.selectors'
 import { publicChannelsSelectors } from '../../publicChannels/publicChannels.selectors'
 import { publicChannelsActions } from '../../publicChannels/publicChannels.slice'
 import { type CacheMessagesPayload, type ChannelMessage } from '@quiet/types'
+import { createLogger } from '../../../utils/logger'
+
+const logger = createLogger('addMessagesSaga')
 
 export function* addMessagesSaga(
   action: PayloadAction<ReturnType<typeof messagesActions.addMessages>['payload']>
@@ -13,23 +16,29 @@ export function* addMessagesSaga(
     // Proceed only for messages from current channel
     const currentChannelId = yield* select(publicChannelsSelectors.currentChannelId)
     if (incomingMessage.channelId !== currentChannelId) {
-      return
+      logger.warn(`Skipping message because channel ID is not the current channel ID`, incomingMessage.id)
+      continue
     }
 
     // Do not proceed if signature is not verified
+    let isVerified: boolean = false
     while (true) {
       const messageVerificationStatus = yield* select(messagesSelectors.messagesVerificationStatus)
       const status = messageVerificationStatus[incomingMessage.signature]
       if (status) {
         if (!status.isVerified) {
-          return
-        } else {
-          break
+          logger.warn(`Message is not verified`, incomingMessage.id, status)
         }
+        isVerified = status.isVerified
+        break
       }
       yield* delay(50)
     }
 
+    if (!isVerified) {
+      continue
+    }
+
     let message: ChannelMessage = incomingMessage
 
     // Update message media path if draft is present (file hosting case)
@@ -61,7 +70,7 @@ export function* addMessagesSaga(
     } else {
       // Check if incoming message fits between (newest known message)...(number of messages to display)
       if (message.createdAt < lastDisplayedMessage?.createdAt && cachedMessages.length >= 50) {
-        return
+        continue
       }
       if (cachedMessages.length >= 50) {
         cachedMessages.shift()

packages/state-manager/src/sagas/messages/messages.slice.ts

@@ -83,11 +83,11 @@ export const messagesSlice = createSlice({
       for (const message of messages) {
         if (!instanceOfChannelMessage(message)) {
           logger.error('Failed to add message, object not instance of message')
-          return
+          continue
         }
         if (!state.publicChannelsMessagesBase.entities[message.channelId]) {
           logger.error('Failed to add message, could not find channel', message.channelId)
-          return
+          continue
         }
 
         let toAdd = message
@@ -109,7 +109,7 @@ export const messagesSlice = createSlice({
           throw new Error('Failed to add message, channel went missing')
         }
 
-        logger.info('Upserting message to Redux store')
+        logger.info('Upserting message to Redux store', toAdd.id)
         channelMessagesAdapter.upsertOne(messagesBase.messages, toAdd)
       }
     },

packages/state-manager/src/sagas/messages/sendMessage/sendMessage.saga.ts

@@ -72,7 +72,7 @@ export function* sendMessageSaga(
   )
 
   // Display sent message immediately, to improve user experience
-  logger.info('Adding message to Redux store')
+  logger.info('Adding message to Redux store on send', message.id)
   yield* put(
     messagesActions.addMessages({
       messages: [message],

packages/state-manager/src/sagas/messages/verifyMessage/verifyMessages.saga.ts

@@ -39,7 +39,10 @@ export function* verifyMessagesSaga(
         yield* delay(500)
       }
       const channel = yield* select(publicChannelsSelectors.getChannelById(message.channelId))
-      if (!channel) return
+      if (!channel) {
+        logger.warn(`No channel for ID found in redux`, message.channelId, message.id)
+        return
+      }
 
       const expectedMessage = yield* call(verifyUserInfoMessage, user.username, channel)