From 1a92c59e3f3232edd4029571f554328fb9a57d67 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Tue, 15 Mar 2022 20:42:12 -0700
Subject: [PATCH] Added background color to selected version (#1723)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../Objects/ObjectDetails/FileVersionItem.tsx | 147 ++++++++++--------
 .../ObjectDetails/VersionsNavigator.tsx       |   6 +-
 2 files changed, 89 insertions(+), 64 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
index 964f3b39b..73cdbe1ef 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
@@ -35,6 +35,7 @@ interface IFileVersionItem {
   fileName: string;
   versionInfo: IFileInfo;
   index: number;
+  isSelected?: boolean;
   onShare: (versionInfo: IFileInfo) => void;
   onDownload: (versionInfo: IFileInfo) => void;
   onRestore: (versionInfo: IFileInfo) => void;
@@ -48,9 +49,18 @@ const styles = (theme: Theme) =>
     mainFileVersionItem: {
       borderBottom: "#E2E2E2 1px solid",
       padding: "1rem 0",
-      margin: "0 2rem 0 3.5rem",
+      margin: "0 0.5rem 0 2.5rem",
       cursor: "pointer",
     },
+    intermediateLayer: {
+      margin: "0 1.5rem 0 1.5rem",
+      "&:hover, &.selected": {
+        backgroundColor: "#F8F8F8",
+        "& > div": {
+          borderBottomColor: "#F8F8F8",
+        },
+      },
+    },
     versionContainer: {
       fontSize: 16,
       fontWeight: "bold",
@@ -97,6 +107,7 @@ const FileVersionItem = ({
   classes,
   fileName,
   versionInfo,
+  isSelected,
   onShare,
   onDownload,
   onRestore,
@@ -138,73 +149,83 @@ const FileVersionItem = ({
         globalClick(versionInfo);
       }}
     >
-      <Grid item xs={12} className={classes.mainFileVersionItem}>
-        <Grid item xs={12} justifyContent={"space-between"}>
-          <Grid container>
-            <Grid item xs={4} className={classes.versionContainer}>
-              {displayFileIconName(fileName, true)} v{index.toString()}
-            </Grid>
-            <Grid item xs={8} className={classes.buttonContainer}>
-              {versionItemButtons.map((button, index) => {
-                return (
-                  <Tooltip
-                    title={button.tooltip}
-                    key={`version-action-${button.tooltip}-${index.toString()}`}
-                  >
-                    <IconButton
-                      size={"small"}
-                      id={`version-action-${
+      <Grid
+        item
+        xs={12}
+        className={`${classes.intermediateLayer} ${
+          isSelected ? "selected" : ""
+        }`}
+      >
+        <Grid item xs={12} className={classes.mainFileVersionItem}>
+          <Grid item xs={12} justifyContent={"space-between"}>
+            <Grid container>
+              <Grid item xs={4} className={classes.versionContainer}>
+                {displayFileIconName(fileName, true)} v{index.toString()}
+              </Grid>
+              <Grid item xs={8} className={classes.buttonContainer}>
+                {versionItemButtons.map((button, index) => {
+                  return (
+                    <Tooltip
+                      title={button.tooltip}
+                      key={`version-action-${
                         button.tooltip
                       }-${index.toString()}`}
-                      className={`${classes.spacing} ${
-                        disableButtons ? classes.buttonDisabled : ""
-                      }`}
-                      disabled={disableButtons}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (!disableButtons) {
-                          button.action(versionInfo);
-                        } else {
-                          e.preventDefault();
-                        }
-                      }}
-                      sx={{
-                        backgroundColor: "#F8F8F8",
-                        borderRadius: "100%",
-                        width: "28px",
-                        height: "28px",
-                        padding: "5px",
-                        "& .min-icon": {
-                          width: "14px",
-                          height: "14px",
-                        },
-                      }}
                     >
-                      {button.icon}
-                    </IconButton>
-                  </Tooltip>
-                );
-              })}
+                      <IconButton
+                        size={"small"}
+                        id={`version-action-${
+                          button.tooltip
+                        }-${index.toString()}`}
+                        className={`${classes.spacing} ${
+                          disableButtons ? classes.buttonDisabled : ""
+                        }`}
+                        disabled={disableButtons}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (!disableButtons) {
+                            button.action(versionInfo);
+                          } else {
+                            e.preventDefault();
+                          }
+                        }}
+                        sx={{
+                          backgroundColor: "#F8F8F8",
+                          borderRadius: "100%",
+                          width: "28px",
+                          height: "28px",
+                          padding: "5px",
+                          "& .min-icon": {
+                            width: "14px",
+                            height: "14px",
+                          },
+                        }}
+                      >
+                        {button.icon}
+                      </IconButton>
+                    </Tooltip>
+                  );
+                })}
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
-        <Grid item xs={12} className={classes.versionID}>
-          {versionInfo.version_id}
-        </Grid>
-        <Grid item xs={12}>
-          <span className={classes.versionData}>
-            <strong>Last modified:</strong>{" "}
-            <reactMoment.default>
-              {versionInfo.last_modified}
-            </reactMoment.default>
-          </span>
-          <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 item xs={12} className={classes.versionID}>
+            {versionInfo.version_id}
+          </Grid>
+          <Grid item xs={12}>
+            <span className={classes.versionData}>
+              <strong>Last modified:</strong>{" "}
+              <reactMoment.default>
+                {versionInfo.last_modified}
+              </reactMoment.default>
+            </span>
+            <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>
     </Grid>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
index ed200144a..86f25a001 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
@@ -113,6 +113,7 @@ interface IVersionsNavigatorProps {
   bucketName: string;
   searchVersions: string;
   loadingVersions: boolean;
+  selectedVersion: string;
   setErrorSnackMessage: typeof setErrorSnackMessage;
   setSnackBarMessage: typeof setSnackBarMessage;
   setNewObject: typeof setNewObject;
@@ -143,6 +144,7 @@ const VersionsNavigator = ({
   updateProgress,
   searchVersions,
   loadingVersions,
+  selectedVersion,
   completeObject,
   internalPaths,
   bucketName,
@@ -329,6 +331,7 @@ const VersionsNavigator = ({
         onShare={onShareItem}
         onPreview={onPreviewItem}
         globalClick={onGlobalClick}
+        isSelected={selectedVersion === item.version_id}
       />
     );
   };
@@ -441,7 +444,7 @@ const VersionsNavigator = ({
                 <VirtualizedList
                   rowRenderFunction={renderVersion}
                   totalItems={filteredRecords.length}
-                  defaultHeight={110}
+                  defaultHeight={108}
                 />
               )}
             </Grid>
@@ -456,6 +459,7 @@ const mapStateToProps = ({ system, objectBrowser }: AppState) => ({
   distributedSetup: get(system, "distributedSetup", false),
   searchVersions: objectBrowser.searchVersions,
   loadingVersions: objectBrowser.loadingVersions,
+  selectedVersion: objectBrowser.selectedVersion,
 });
 
 const mapDispatchToProps = {