🐛 Fix file icons for root upload (#826)

tdrive/frontend/src/app/components/file-uploads/pending-root-components/file-type-icon-map.tsx

@@ -8,28 +8,24 @@ import {
 } from 'app/atoms/icons-colored';
 
 // Map mime types to their respective JSX icon elements
-export const fileTypeIconsMap = {
+export const fileTypeIconsMap: Record<string, JSX.Element> = {
-  'application/pdf': <FileTypePdfIcon />,
+  pdf: <FileTypePdfIcon />,
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': (
+  doc: <FileTypeDocumentIcon />,
-    <FileTypeDocumentIcon />
+  docx: <FileTypeDocumentIcon />,
-  ),
+  xls: <FileTypeSpreadsheetIcon />,
-  'application/msword': <FileTypeDocumentIcon />,
+  xlsx: <FileTypeSpreadsheetIcon />,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': <FileTypeSpreadsheetIcon />,
+  ppt: <FileTypeSlidesIcon />,
-  'application/vnd.ms-excel': <FileTypeSpreadsheetIcon />,
+  pptx: <FileTypeSlidesIcon />,
-  'application/vnd.ms-powerpoint': <FileTypeSlidesIcon />,
+  zip: <FileTypeArchiveIcon />,
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': (
+  rar: <FileTypeArchiveIcon />,
-    <FileTypeSlidesIcon />
+  tar: <FileTypeArchiveIcon />,
-  ),
+  '7z': <FileTypeArchiveIcon />,
-  'application/zip': <FileTypeArchiveIcon />,
+  bz: <FileTypeArchiveIcon />,
-  'application/x-rar-compressed': <FileTypeArchiveIcon />,
+  bz2: <FileTypeArchiveIcon />,
-  'application/x-tar': <FileTypeArchiveIcon />,
+  gz: <FileTypeArchiveIcon />,
-  'application/x-7z-compressed': <FileTypeArchiveIcon />,
+  mp4: <FileTypeMediaIcon />,
-  'application/x-bzip': <FileTypeArchiveIcon />,
+  mpeg: <FileTypeMediaIcon />,
-  'application/x-bzip2': <FileTypeArchiveIcon />,
+  ogg: <FileTypeMediaIcon />,
-  'application/x-gzip': <FileTypeArchiveIcon />,
+  webm: <FileTypeMediaIcon />,
-  'video/mp4': <FileTypeMediaIcon />,
+  mov: <FileTypeMediaIcon />,
-  'video/mpeg': <FileTypeMediaIcon />,
-  'video/ogg': <FileTypeMediaIcon />,
-  'video/webm': <FileTypeMediaIcon />,
-  'video/quicktime': <FileTypeMediaIcon />,
 };

tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-row.tsx

@@ -30,11 +30,11 @@ const PendingRootRow = ({
   const { restore } = useDriveActions();
   const { refresh, children } = useDriveItem(item?.parent_id || '');
 
-  const firstPendingFile = root.items[0];
   const uploadedFilesSize = root.uploadedSize;
   const uploadProgress = Math.floor((uploadedFilesSize / root.size) * 100);
   const isUploadCompleted = root.status === 'completed';
   const isFileRoot = rootKey.includes('.');
+  const fileType = isFileRoot ? rootKey.split('.').pop() : '';
 
   // Callback function to open the folder after the upload is completed
   const handleShowFolder = useCallback(() => {
@@ -122,7 +122,7 @@ const PendingRootRow = ({
         <div className="flex items-center">
           <div className="w-10 h-10 flex items-center justify-center bg-[#f3f3f7] rounded-md">
             <div className="w-full h-full flex items-center justify-center testid:upload-root-modal-row-type">
-              {itemTypeIcon(firstPendingFile?.type)}
+              {itemTypeIcon(fileType || '')}
             </div>
           </div>
           <p className="ml-4">
@@ -163,9 +163,9 @@ const PendingRootRow = ({
               </button>
             ) : (
               !['cancelled', 'failed'].includes(root.status) &&
-              firstPendingFile?.status !== 'error' && (
+              root?.status !== 'error' && (
                 <>
-                  {root.status === 'paused' ? (
+                  {root.status === 'failed' ? (
                     <button
                       onClick={() => pauseOrResumeRootUpload(rootKey)}
                       className="hover:bg-blue-100 p-2 rounded-md transition-all duration-200 testid:upload-root-modal-row-resume"