Add preview icon to object versions (#1713)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx

@@ -346,10 +346,6 @@ const ObjectDetailPanel = ({
     }
   };
 
-  const closePreviewWindow = () => {
-    setPreviewOpen(false);
-  };
-
   if (!actualInfo) {
     return null;
   }
@@ -514,7 +510,9 @@ const ObjectDetailPanel = ({
             content_type: "",
             last_modified: new Date(actualInfo.last_modified),
           }}
-          onClosePreview={closePreviewWindow}
+          onClosePreview={() => {
+            setPreviewOpen(false);
+          }}
         />
       )}
       {tagModalOpen && actualInfo && (

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx

@@ -23,7 +23,12 @@ import { withStyles } from "@mui/styles";
 import { displayFileIconName } from "../ListObjects/utils";
 import { IFileInfo } from "./types";
 import { IconButton, Tooltip } from "@mui/material";
-import { DownloadIcon, RecoverIcon, ShareIcon } from "../../../../../../icons";
+import {
+  DownloadIcon,
+  PreviewIcon,
+  RecoverIcon,
+  ShareIcon,
+} from "../../../../../../icons";
 
 interface IFileVersionItem {
   fileName: string;
@@ -32,6 +37,7 @@ interface IFileVersionItem {
   onShare: (versionInfo: IFileInfo) => void;
   onDownload: (versionInfo: IFileInfo) => void;
   onRestore: (versionInfo: IFileInfo) => void;
+  onPreview: (versionInfo: IFileInfo) => void;
   globalClick: (versionInfo: IFileInfo) => void;
   classes: any;
 }
@@ -93,12 +99,18 @@ const FileVersionItem = ({
   onShare,
   onDownload,
   onRestore,
+  onPreview,
   globalClick,
   index,
 }: IFileVersionItem) => {
   const disableButtons = versionInfo.is_delete_marker;
 
   const versionItemButtons = [
+    {
+      icon: <PreviewIcon />,
+      action: onPreview,
+      tooltip: "Preview",
+    },
     {
       icon: <DownloadIcon />,
       action: onDownload,

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx

@@ -57,6 +57,7 @@ import { VersionsIcon } from "../../../../../../icons";
 import VirtualizedList from "../../../../Common/VirtualizedList/VirtualizedList";
 import FileVersionItem from "./FileVersionItem";
 import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import PreviewFileModal from "../Preview/PreviewFileModal";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -149,6 +150,7 @@ const VersionsNavigator = ({
   const [restoreVersionOpen, setRestoreVersionOpen] = useState<boolean>(false);
   const [restoreVersion, setRestoreVersion] = useState<string>("");
   const [sortValue, setSortValue] = useState<string>("date");
+  const [previewOpen, setPreviewOpen] = useState<boolean>(false);
 
   // calculate object name to display
   let objectNameArray: string[] = [];
@@ -199,6 +201,7 @@ const VersionsNavigator = ({
   const closeShareModal = () => {
     setObjectToShare(null);
     setShareFileModalOpen(false);
+    setPreviewOpen(false);
   };
 
   const downloadObject = (object: IFileInfo) => {
@@ -235,6 +238,11 @@ const VersionsNavigator = ({
     shareObject();
   };
 
+  const onPreviewItem = (item: IFileInfo) => {
+    setObjectToShare(item);
+    setPreviewOpen(true);
+  };
+
   const onRestoreItem = (item: IFileInfo) => {
     setRestoreVersion(item.version_id || "");
     setRestoreVersionOpen(true);
@@ -318,6 +326,7 @@ const VersionsNavigator = ({
         onDownload={onDownloadItem}
         onRestore={onRestoreItem}
         onShare={onShareItem}
+        onPreview={onPreviewItem}
         globalClick={onGlobalClick}
       />
     );
@@ -342,6 +351,27 @@ const VersionsNavigator = ({
           onCloseAndUpdate={closeRestoreModal}
         />
       )}
+      {previewOpen && actualInfo && (
+        <PreviewFileModal
+          open={previewOpen}
+          bucketName={bucketName}
+          object={{
+            name: actualInfo.name,
+            version_id:
+              objectToShare && objectToShare.version_id
+                ? objectToShare.version_id
+                : "null",
+            size: parseInt(
+              objectToShare && objectToShare.size ? objectToShare.size : "0"
+            ),
+            content_type: "",
+            last_modified: new Date(actualInfo.last_modified),
+          }}
+          onClosePreview={() => {
+            setPreviewOpen(false);
+          }}
+        />
+      )}
       <Grid container className={classes.versionsContainer}>
         {!actualInfo && (
           <Grid item xs={12}>