[WEB-3996] fix: attachment icon rendering and added support for rar and zip icons (#7007)

* chore: zip and rar file icon

* chore: zip and rar file icon

* fix: attachment icon

* chore: application/x-rar type added

* fix: compressed file extensions

* chore: updated file upload extensions

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

apiserver/plane/settings/common.py

@@ -376,10 +376,21 @@ ATTACHMENT_MIME_TYPES = [
     "video/x-ms-wmv",
     # Archives
     "application/zip",
+    "application/x-rar",
     "application/x-rar-compressed",
-    "application/x-zip-compressed",
     "application/x-tar",
     "application/gzip",
+    "application/x-zip",
+    "application/x-zip-compressed",
+    "application/x-7z-compressed",
+    "application/x-compressed",
+    "application/x-compressed-tar",
+    "application/x-compressed-tar-gz",
+    "application/x-compressed-tar-bz2",
+    "application/x-compressed-tar-zip",
+    "application/x-compressed-tar-7z",
+    "application/x-compressed-tar-rar",
+    "application/x-compressed-tar-zip",
     # 3D Models
     "model/gltf-binary",
     "model/gltf+json",

web/core/components/icons/attachment/attachment-icon.tsx

@@ -10,10 +10,12 @@ import {
   JpgIcon,
   PdfIcon,
   PngIcon,
+  RarIcon,
   SheetIcon,
   SvgIcon,
   TxtIcon,
   VideoIcon,
+  ZipIcon,
 } from "@/components/icons/attachment";
 
 export const getFileIcon = (fileType: string, size: number = 28) => {
@@ -52,6 +54,10 @@ export const getFileIcon = (fileType: string, size: number = 28) => {
       return <VideoIcon height={size} width={size} />;
     case "mkv":
       return <VideoIcon height={size} width={size} />;
+    case "zip":
+      return <ZipIcon height={size} width={size} />;
+    case "rar":
+      return <RarIcon height={size} width={size} />;
 
     default:
       return <DefaultIcon height={size} width={size} />;

web/core/components/icons/attachment/index.ts

@@ -18,3 +18,5 @@ export * from "./svg-file-icon";
 export * from "./tune-icon";
 export * from "./txt-file-icon";
 export * from "./video-file-icon";
+export * from "./zip-file-icon";
+export * from "./rar-file-icon";

web/core/components/icons/attachment/rar-file-icon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Image from "next/image";
+// image
+import RarFileIcon from "@/public/attachment/rar-icon.png";
+// type
+import type { ImageIconPros } from "../types";
+
+export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
+  <Image src={RarFileIcon} height={height} width={width} alt="RarFileIcon" />
+);

web/core/components/icons/attachment/zip-file-icon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Image from "next/image";
+// image
+import ZipFileIcon from "@/public/attachment/zip-icon.png";
+// type
+import type { ImageIconPros } from "../types";
+
+export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
+  <Image src={ZipFileIcon} height={height} width={width} alt="ZipFileIcon" />
+);

web/core/components/issues/attachment/attachment-list-item.tsx

@@ -38,7 +38,7 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
   // derived values
   const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
   const fileName = getFileName(attachment?.attributes.name ?? "");
-  const fileExtension = getFileExtension(attachment?.asset_url ?? "");
+  const fileExtension = getFileExtension(attachment?.attributes.name ?? "");
   const fileIcon = getFileIcon(fileExtension, 18);
   const fileURL = getFileURL(attachment?.asset_url ?? "");
   // hooks