feat: Update the File Preview component to work with new file types

src/api/common.ts

@@ -454,3 +454,7 @@ export function needsQuoting(value: string) {
   const quotedValue = quote(value);
   return quotedValue !== value;
 }
+
+export const getFileName = (name: string) => {
+  return name.split("/").slice(-1).join("");
+};

src/api/model.ts

@@ -1,5 +1,9 @@
 import _ from "lodash";
-import type { FeedFile, PluginInstance } from "@fnndsc/chrisapi";
+import type {
+  FileBrowserFolderFile,
+  PACSFile,
+  PluginInstance,
+} from "@fnndsc/chrisapi";
 
 export interface IActionTypeParam {
   type: string;
@@ -162,7 +166,7 @@ export class TreeModel {
 
 export interface IFileBlob {
   blob?: Blob;
-  file?: FeedFile;
+  file?: FileBrowserFolderFile | PACSFile;
   url?: string;
   fileType: string;
 }
@@ -175,6 +179,7 @@ export const fileViewerMap: any = {
   html: "IframeDisplay",
   pdf: "PdfDisplay",
   csv: "TextDisplay",
+  md: "TextDisplay",
   ctab: "TextDisplay",
   json: "JsonDisplay",
   png: "ImageDisplay",
@@ -209,7 +214,7 @@ export function getFileExtension(filename: string) {
 }
 
 export class FileViewerModel {
-  public getFileName(item: FeedFile) {
+  public getFileName(item: FileBrowserFolderFile) {
     const splitString = item.data.fname.split("/");
     const filename = splitString[splitString.length - 1];
     return filename;

src/components/Common/index.tsx

@@ -1,5 +1,5 @@
-import { InfoIcon as InfoIconComponent } from "../Icons";
 import {
+  ClipboardCopy,
   ClipboardCopyButton,
   Dropdown,
   DropdownItem,
@@ -14,12 +14,22 @@ import {
   Hint,
   MenuToggle,
   TextInput,
-  ClipboardCopy,
 } from "@patternfly/react-core";
-import { CubesIcon, SearchIcon } from "../Icons";
 import { Alert, Popover, Spin, Typography } from "antd";
-import React, { ReactNode, useState } from "react";
+import React, { type ReactNode, useState } from "react";
 import Dots from "react-activity/dist/Dots";
+import {
+  ArchiveIcon,
+  CubesIcon,
+  ExternalLinkSquareAltIcon,
+  FileIcon,
+  FileImageIcon,
+  FilePdfIcon,
+  FileTxtIcon,
+  FolderIcon,
+  InfoIcon as InfoIconComponent,
+  SearchIcon,
+} from "../Icons";
 import "react-activity/dist/library.css";
 import { Cookies } from "react-cookie";
 import ReactJson from "react-json-view";
@@ -350,3 +360,26 @@ export const ClipboardCopyFixed = ({
     </ClipboardCopy>
   );
 };
+
+export const getIcon = (type: string) => {
+  switch (type.toLowerCase()) {
+    case "dir":
+      return <FolderIcon />;
+    case "dcm":
+    case "jpg":
+    case "png":
+      return <FileImageIcon />;
+    case "txt":
+      return <FileTxtIcon />;
+    case "pdf":
+      return <FilePdfIcon />;
+    case "zip":
+      return <ArchiveIcon />;
+    case "link":
+      return <ExternalLinkSquareAltIcon />;
+    case "folder":
+      return <FolderIcon />;
+    default:
+      return <FileIcon />;
+  }
+};

src/components/FeedOutputBrowser/FileBrowser.tsx

@@ -20,28 +20,16 @@ import {
   setSelectedFile,
 } from "../../store/explorer/actions";
 import useDownload, { useTypedSelector } from "../../store/hooks";
-import { ClipboardCopyContainer, SpinContainer } from "../Common";
+import { ClipboardCopyContainer, SpinContainer, getIcon } from "../Common";
 import { ThemeContext } from "../DarkTheme/useTheme";
 import { DrawerActionButton } from "../Feeds/DrawerUtils";
 import { handleMaximize, handleMinimize } from "../Feeds/utilties";
-import {
-  DownloadIcon,
-  ExternalLinkSquareAltIcon,
-  FileIcon,
-  FileImageIcon,
-  FilePdfIcon,
-  FileTxtIcon,
-  FolderIcon,
-  HomeIcon,
-} from "../Icons";
+import { DownloadIcon, HomeIcon } from "../Icons";
 import FileDetailView from "../Preview/FileDetailView";
 import XtkViewer from "../XtkViewer/XtkViewer";
 import type { FileBrowserProps } from "./types";
 import { bytesToSize } from "./utilities";
-
-export const getFileName = (name: string) => {
-  return name.split("/").slice(-1).join("");
-};
+import { getFileExtension } from "../../api/model";
 
 const previewAnimation = [{ opacity: "0.0" }, { opacity: "1.0" }];
 
@@ -193,7 +181,7 @@ const FileBrowser = (props: FileBrowserProps) => {
 
     fileName = pathList[pathList.length - 1];
     if (type === "file" && fileName.indexOf(".") > -1) {
-      iconType = getFileName(fileName)[0].toUpperCase();
+      iconType = getFileExtension(fileName);
       fsize = bytesToSize(item.data.fsize);
     } else {
       iconType = type;
@@ -316,29 +304,3 @@ const FileBrowser = (props: FileBrowserProps) => {
 };
 
 export default FileBrowser;
-
-const getIcon = (type: string) => {
-  switch (type.toLowerCase()) {
-    case "dir":
-      return <FolderIcon />;
-    case "dcm":
-    case "jpg":
-    case "png":
-      return <FileImageIcon />;
-    case "html":
-    case "json":
-      return <FileIcon />;
-    case "txt":
-      return <FileTxtIcon />;
-    case "pdf":
-      return <FilePdfIcon />;
-
-    case "link":
-      return <ExternalLinkSquareAltIcon />;
-    case "folder":
-      return <FolderIcon />;
-
-    default:
-      return <FileIcon />;
-  }
-};

src/components/Icons/index.tsx

@@ -40,7 +40,6 @@ const CartIcon = ({
   return (
     <svg
       fill="currentColor"
-      className="pf-v5-svg"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 576 512"
       style={style}

src/components/LibraryCopy/FileCard.tsx

@@ -11,7 +11,7 @@ import {
 } from "@patternfly/react-core";
 import { useMutation } from "@tanstack/react-query";
 import { notification } from "antd";
-import axios, { AxiosProgressEvent } from "axios";
+import axios, { type AxiosProgressEvent } from "axios";
 import { useContext, useEffect, useState } from "react";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { FileViewerModel } from "../../api/model";

src/components/NewLibrary/components/Cart.tsx

@@ -46,9 +46,7 @@ const Cart = () => {
           <Button
             style={{ color: "inherit" }}
             variant="danger"
-            onClick={() => {
-              console.log("Clicked");
-            }}
+            onClick={() => {}}
           >
             Clear Cart
           </Button>

src/components/NewLibrary/components/FileCard.tsx

@@ -24,6 +24,8 @@ import useLongPress, {
   elipses,
   getBackgroundRowColor,
 } from "../utils/longpress";
+import { getFileExtension } from "../../../api/model";
+import { getIcon } from "../../Common";
 
 type Pagination = {
   totalCount: number;
@@ -43,7 +45,7 @@ export const LinkCard = ({
         const linkName = pathList[pathList.length - 1];
         const creation_date = val.data.creation_date;
         return (
-          <GridItem xl={5} lg={4} xl2={5} md={3} sm={1} key={val.data.fname}>
+          <GridItem xl={4} lg={5} xl2={3} md={6} sm={12} key={val.data.fname}>
             <Card
               isCompact
               isSelectable
@@ -105,9 +107,12 @@ export const SubFileCard = ({ file }: { file: FileBrowserFolderFile }) => {
   const { isSuccess, isError, error: downloadError } = handleDownloadMutation;
 
   const isSelected = selectedPaths.some((payload) => {
-    payload.path === file.data.fname;
+    return payload.path === file.data.fname;
   });
+
   const selectedBgRow = getBackgroundRowColor(isSelected, isDarkTheme);
+  const ext = getFileExtension(file.data.fname);
+  const icon = getIcon(ext);
 
   useEffect(() => {
     if (isSuccess) {
@@ -164,9 +169,7 @@ export const SubFileCard = ({ file }: { file: FileBrowserFolderFile }) => {
         {contextHolder}
         <CardHeader>
           <Split>
-            <SplitItem style={{ marginRight: "1em" }}>
-              <FileIcon />
-            </SplitItem>
+            <SplitItem style={{ marginRight: "1em" }}>{icon}</SplitItem>
 
             <SplitItem>
               <Button