Added versions pill to versions page elements (#1728)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

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

@@ -30,6 +30,7 @@ import {
   ShareIcon,
 } from "../../../../../../icons";
 import { niceBytes } from "../../../../../../common/utils";
+import SpecificVersionPill from "./SpecificVersionPill";
 
 interface IFileVersionItem {
   fileName: string;
@@ -51,6 +52,9 @@ const styles = (theme: Theme) =>
       padding: "1rem 0",
       margin: "0 0.5rem 0 2.5rem",
       cursor: "pointer",
+      "&.deleted": {
+        color: "#868686",
+      },
     },
     intermediateLayer: {
       margin: "0 1.5rem 0 1.5rem",
@@ -64,12 +68,13 @@ const styles = (theme: Theme) =>
     versionContainer: {
       fontSize: 16,
       fontWeight: "bold",
-      color: "#000",
       display: "flex",
       alignItems: "center",
       "& svg.min-icon": {
         width: 18,
         height: 18,
+        minWidth: 18,
+        minHeight: 18,
         marginRight: 10,
       },
     },
@@ -81,7 +86,6 @@ const styles = (theme: Theme) =>
     },
     versionID: {
       fontSize: "12px",
-      color: "#000",
       margin: "2px 0",
     },
     versionData: {
@@ -140,6 +144,16 @@ const FileVersionItem = ({
     },
   ];
 
+  let pill: "deleted" | "current" | "null" | null = null;
+
+  if (versionInfo.is_delete_marker) {
+    pill = "deleted";
+  } else if (versionInfo.is_latest) {
+    pill = "current";
+  } else if (versionInfo.version_id === "null") {
+    pill = "null";
+  }
+
   return (
     <Grid
       container
@@ -156,11 +170,18 @@ const FileVersionItem = ({
           isSelected ? "selected" : ""
         }`}
       >
-        <Grid item xs={12} className={classes.mainFileVersionItem}>
+        <Grid
+          item
+          xs={12}
+          className={`${classes.mainFileVersionItem} ${
+            versionInfo.is_delete_marker ? "deleted" : ""
+          }`}
+        >
           <Grid item xs={12} justifyContent={"space-between"}>
             <Grid container>
               <Grid item xs={4} className={classes.versionContainer}>
                 {displayFileIconName(fileName, true)} v{index.toString()}
+                {pill && <SpecificVersionPill type={pill} />}
               </Grid>
               <Grid item xs={8} className={classes.buttonContainer}>
                 {versionItemButtons.map((button, index) => {
@@ -209,7 +230,7 @@ const FileVersionItem = ({
             </Grid>
           </Grid>
           <Grid item xs={12} className={classes.versionID}>
-            {versionInfo.version_id}
+            {versionInfo.version_id !== "null" ? versionInfo.version_id : "-"}
           </Grid>
           <Grid item xs={12}>
             <span className={classes.versionData}>
@@ -221,10 +242,6 @@ const FileVersionItem = ({
             <span className={classes.versionData}>
               <strong>Size:</strong> {niceBytes(versionInfo.size || "0")}
             </span>
-            <span className={classes.versionData}>
-              <strong>Deleted:</strong>{" "}
-              {versionInfo.is_delete_marker ? "Yes" : "No"}
-            </span>
           </Grid>
         </Grid>
       </Grid>

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

@@ -0,0 +1,60 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+
+interface ISpecificVersionPillProps {
+  type: "null" | "current" | "deleted";
+}
+
+const SpecificVersionPill = ({ type }: ISpecificVersionPillProps) => {
+  let bgColor = "#000";
+  let message = "";
+
+  switch (type) {
+    case "null":
+      bgColor = "#07193E";
+      message = "NULL VERSION";
+      break;
+    case "deleted":
+      bgColor = "#868686";
+      message = "DELETED";
+      break;
+    default:
+      bgColor = "#174551";
+      message = "CURRENT VERSION";
+  }
+
+  return (
+    <span
+      style={{
+        backgroundColor: bgColor,
+        padding: "0 5px",
+        display: "inline-block",
+        color: "#FFF",
+        fontWeight: "bold",
+        fontSize: 12,
+        borderRadius: 2,
+        whiteSpace: "nowrap",
+        margin: "0 10px",
+      }}
+    >
+      {message}
+    </span>
+  );
+};
+
+export default SpecificVersionPill;