runfix(cells): use correct url to download files [WPB-20155] (#19558)

Author: V-Gira

src/script/components/CellsGlobalView/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -53,6 +53,7 @@ export const CellsFilePreviewModal = () => {
       isOpen={!!selectedFile}
       onClose={handleCloseFile}
       filePreviewUrl={getFileUrl()}
+      fileUrl={url}
       fileName={name}
       fileExtension={extension}
       status={!getFileUrl() ? 'unavailable' : 'success'}

src/script/components/Conversation/ConversationCells/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -55,6 +55,7 @@ export const CellsFilePreviewModal = () => {
       filePreviewUrl={getFileUrl()}
       fileName={name}
       fileExtension={extension}
+      fileUrl={url}
       status={!getFileUrl() ? 'unavailable' : 'success'}
       senderName={owner}
       timestamp={uploadedAtTimestamp}

src/script/components/FileFullscreenModal/FileFullscreenModal.tsx

@@ -36,6 +36,7 @@ interface FileFullscreenModalProps {
   filePreviewUrl?: string;
   fileName: string;
   fileExtension: string;
+  fileUrl?: string;
   status?: Status;
   senderName: string;
   timestamp: number;
@@ -47,6 +48,7 @@ export const FileFullscreenModal = ({
   isOpen,
   onClose,
   filePreviewUrl,
+  fileUrl,
   status = 'success',
   fileName,
   fileExtension,
@@ -59,15 +61,17 @@ export const FileFullscreenModal = ({
       <FileHeader
         onClose={onClose}
         fileName={fileName}
-        filePreviewUrl={filePreviewUrl}
         fileExtension={fileExtension}
+        fileUrl={fileUrl}
         senderName={senderName}
         timestamp={timestamp}
         badges={badges}
       />
       <ModalContent
+        fileExtension={fileExtension}
         filePreviewUrl={filePreviewUrl}
         fileName={fileName}
+        fileUrl={fileUrl}
         senderName={senderName}
         timestamp={timestamp}
         status={status}
@@ -77,20 +81,30 @@ export const FileFullscreenModal = ({
 };
 
 interface ModalContentProps {
-  filePreviewUrl?: string;
+  fileExtension: string;
   fileName: string;
   status: Status;
   senderName: string;
   timestamp: number;
+  filePreviewUrl?: string;
+  fileUrl?: string;
 }
 
-const ModalContent = ({filePreviewUrl, fileName, senderName, timestamp, status}: ModalContentProps) => {
+const ModalContent = ({
+  fileExtension,
+  filePreviewUrl,
+  fileName,
+  fileUrl,
+  senderName,
+  timestamp,
+  status,
+}: ModalContentProps) => {
   if (status === 'loading' && !filePreviewUrl) {
     return <FileLoader />;
   }
 
   if (status === 'unavailable' || !filePreviewUrl) {
-    return <NoPreviewAvailable fileUrl={filePreviewUrl} fileName={fileName} />;
+    return <NoPreviewAvailable fileUrl={fileUrl} fileName={fileName} fileExtension={fileExtension} />;
   }
 
   const extension = getFileExtensionFromUrl(filePreviewUrl);
@@ -104,5 +118,5 @@ const ModalContent = ({filePreviewUrl, fileName, senderName, timestamp, status}:
     return <ImageFileView src={filePreviewUrl} senderName={senderName} timestamp={timestamp} />;
   }
 
-  return <NoPreviewAvailable fileUrl={filePreviewUrl} fileName={fileName} />;
+  return <NoPreviewAvailable fileUrl={fileUrl} fileName={fileName} fileExtension={fileExtension} />;
 };

src/script/components/FileFullscreenModal/FileHeader/FileHeader.tsx

@@ -38,17 +38,17 @@ import {
 
 interface FileHeaderProps {
   onClose: () => void;
-  filePreviewUrl?: string;
   fileName: string;
   fileExtension: string;
   senderName: string;
   timestamp: number;
   badges?: string[];
+  fileUrl?: string;
 }
 
 export const FileHeader = ({
   onClose,
-  filePreviewUrl,
+  fileUrl,
   fileName,
   fileExtension,
   senderName,
@@ -82,7 +82,7 @@ export const FileHeader = ({
         <Button
           variant={ButtonVariant.TERTIARY}
           css={downloadButtonStyles}
-          onClick={() => forcedDownloadFile({url: filePreviewUrl || '', name: `${fileName}.${fileExtension}`})}
+          onClick={() => forcedDownloadFile({url: fileUrl || '', name: fileName})}
           aria-label={t('cells.imageFullScreenModal.downloadButton')}
         >
           <DownloadIcon />

src/script/components/FileFullscreenModal/NoPreviewAvailable/NoPreviewAvailable.tsx

@@ -25,11 +25,12 @@ import {forcedDownloadFile} from 'Util/util';
 import {FilePlaceholder} from '../common/FilePlaceholder/FilePlaceholder';
 
 interface NoPreviewAvailableProps {
-  fileUrl?: string;
+  fileExtension: string;
   fileName: string;
+  fileUrl?: string;
 }
 
-export const NoPreviewAvailable = ({fileUrl, fileName}: NoPreviewAvailableProps) => {
+export const NoPreviewAvailable = ({fileUrl, fileName, fileExtension}: NoPreviewAvailableProps) => {
   return (
     <FilePlaceholder
       title={t('fileFullscreenModal.noPreviewAvailable.title')}

src/script/components/MessagesList/Message/ContentMessage/asset/MultipartAssets/FileAssetCard/common/FilePreviewModal/FilePreviewModal.tsx

@@ -72,6 +72,7 @@ export const FilePreviewModal = ({
     <FileFullscreenModal
       id={id}
       filePreviewUrl={getFileUrl()}
+      fileUrl={fileUrl}
       fileName={fileName}
       fileExtension={fileExtension}
       senderName={senderName}