Connected Object details page to navigation (#394)

Connected Object details page to navigation schema. Also connected file details view with backend Co-authored-by: Kaan Kabalak <kaan@minio.io>
2020-11-17 15:03:50 -06:00
parent be569aee4f
commit 1f832fa294
29 changed files with 1211 additions and 58 deletions
--- a/portal-ui/package-lock.json
+++ b/portal-ui/package-lock.json
@@ -1827,6 +1827,14 @@
        "csstype": "^2.2.0"
      }
    },
+    "@types/react-copy-to-clipboard": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz",
+      "integrity": "sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/react-dom": {
      "version": "16.9.4",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz",
@@ -3943,6 +3951,14 @@
      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
    },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "core-js": {
      "version": "3.6.5",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
@@ -13932,6 +13948,15 @@
      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.1.0.tgz",
      "integrity": "sha512-Rel0QbPnCTjHxgZYt6TkGw4icSZXNyONHb72a+1wWA+PlYJIvzFAv4pZlDPG0rpKpKmy4kSUlkoWgneH7w3A0g=="
    },
+    "react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-dev-utils": {
      "version": "10.2.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -16325,6 +16350,11 @@
        "repeat-string": "^1.6.1"
      }
    },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
    "toidentifier": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -13,6 +13,7 @@
    "@types/lodash": "^4.14.149",
    "@types/node": "12.12.8",
    "@types/react": "16.9.11",
+    "@types/react-copy-to-clipboard": "^4.3.0",
    "@types/react-dom": "16.9.4",
    "@types/react-redux": "^7.1.5",
    "@types/react-router": "^5.1.3",
@@ -35,6 +36,7 @@
    "react-async-hook": "^3.6.1",
    "react-chartjs-2": "^2.9.0",
    "react-codemirror2": "^7.1.0",
+    "react-copy-to-clipboard": "^5.0.2",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.13.0",
    "react-moment": "^0.9.7",
--- a/portal-ui/src/icons/CopyIcon.tsx
+++ b/portal-ui/src/icons/CopyIcon.tsx
@@ -0,0 +1,39 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 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";
+import { SvgIcon } from "@material-ui/core";
+class CopyIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <title>ic_h_copy-new_sl</title>
+          <g id="Layer_2" data-name="Layer 2">
+            <g id="Layer_1-2" data-name="Layer 1">
+              <path
+                className="cls-1"
+                d="M0,0V16H16V0ZM11.886,9.048H9.048v2.838h-2.1V9.048H4.114v-2.1H6.952V4.114h2.1V6.952h2.838Z"
+              />
+            </g>
+          </g>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default CopyIcon;
--- a/portal-ui/src/icons/DeleteIcon.tsx
+++ b/portal-ui/src/icons/DeleteIcon.tsx
@@ -15,21 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React from "react";
-import {SvgIcon} from "@material-ui/core";
+import { SvgIcon } from "@material-ui/core";
 class DeleteIcon extends React.Component {
-    render() {
-        return (<SvgIcon>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                <title>ic_h_delete</title>
-                <g id="Layer_2" data-name="Layer 2">
-                    <g id="Layer_1-2" data-name="Layer 1">
-                        <path className="cls-1"
-                              d="M0,8H0a8,8,0,0,0,8,8H8a8,8,0,0,0,8-8h0A8,8,0,0,0,8,0H8A8,8,0,0,0,0,8Zm10.007,3.489L8,9.482,5.993,11.489,4.511,10.007,6.518,8,4.511,5.993,5.993,4.511,8,6.518l2.007-2.007,1.482,1.482L9.482,8l2.007,2.007Z"/>
-                    </g>
-                </g>
-            </svg>
-        </SvgIcon>)
-    }
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.402 13">
+          <path
+            d="M6.761 1V0H3.64v1H.004v1h10.4V1zM.004 2.998l1.672 10h7.052l1.673-10zm3.412 8.243l-.552-6.478h.653l.553 6.472zm3.569 0h-.653l.551-6.472h.654z"
+            className="a"
+          ></path>
+        </svg>
+      </SvgIcon>
+    );
+  }
 }

 export default DeleteIcon;
--- a/portal-ui/src/icons/DownloadIcon.tsx
+++ b/portal-ui/src/icons/DownloadIcon.tsx
@@ -0,0 +1,33 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 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";
+import SvgIcon from "@material-ui/core/SvgIcon";
+
+class DownloadIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12.996">
+          <path d="M11.05 9.096v1.95h-9.1v-1.95H0v3.9h13v-3.9z"></path>
+          <path d="M6.5 9.75L9 6.672H7.475V0h-1.95v6.672H4z"></path>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default DownloadIcon;
--- a/portal-ui/src/icons/ShareIcon.tsx
+++ b/portal-ui/src/icons/ShareIcon.tsx
@@ -0,0 +1,39 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2020 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";
+import SvgIcon from "@material-ui/core/SvgIcon";
+
+class ShareIcon extends React.Component {
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13">
+          <path
+            d="M11.05 8.617v2.429h-9.1v-9.1h2.429v-1.95H0v13h13V8.617z"
+            className="a"
+          ></path>
+          <path
+            d="M3.854 9.256h1.95a4.945 4.945 0 013.6-4.74v1.3l.6-.487 2.474-2.012L9.4.817v1.7a6.9 6.9 0 00-5.546 6.739z"
+            className="a"
+          ></path>
+        </svg>
+      </SvgIcon>
+    );
+  }
+}
+
+export default ShareIcon;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 export { default as PermissionIcon } from "./PermissionIcon";
+export { default as CopyIcon } from "./CopyIcon";
 export { default as CreateIcon } from "./CreateIcon";
 export { default as DeleteIcon } from "./DeleteIcon";
 export { default as ServiceAccountIcon } from "./ServiceAccountIcon";
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -221,7 +221,7 @@ const AddBucket = ({
                  addBucketVersioned(event.target.checked);
                }}
                label={"Versioning"}
-                indicatorLabel={"On"}
+                indicatorLabels={["On", "Off"]}
              />
            </Grid>
            <Grid item xs={12}>
@@ -234,7 +234,7 @@ const AddBucket = ({
                  addBucketQuota(event.target.checked);
                }}
                label={"Enable Bucket Quota"}
-                indicatorLabel={"On"}
+                indicatorLabels={["On", "Off"]}
              />
            </Grid>
            {enableQuota && (
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -129,7 +129,7 @@ const styles = (theme: Theme) =>
 interface IListObjectsProps {
  classes: any;
  match: any;
-  addRoute: (param1: string, param2: string) => any;
+  addRoute: (param1: string, param2: string, param3: string) => any;
  setAllRoutes: (path: string) => any;
  routesList: Route[];
 }
@@ -319,13 +319,16 @@ const ListObjects = ({
      const lastIndex = idElementClean.length - 1;
      const newPath = `${currentPath}/${idElementClean[lastIndex]}`;

-      addRoute(newPath, idElementClean[lastIndex]);
+      addRoute(newPath, idElementClean[lastIndex], "path");
      return;
    }
-
    // Element is a file. we open details here
-    // TODO: Add details open function here.
-    //console.log("object", idElementClean);
+    const pathInArray = idElement.split("/");
+    const fileName = pathInArray[pathInArray.length - 1];
+    const newPath = `${currentPath}/${fileName}`;
+
+    addRoute(newPath, fileName, "file");
+    return;
  };

  const uploadObject = (e: any): void => {
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectRouting.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectRouting.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import ListObjects from "./ListObjects";
+import ObjectDetails from "../ObjectDetails/ObjectDetails";
+import get from "lodash/get";
+import { addRoute, setAllRoutes } from "../../../../ObjectBrowser/actions";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { ObjectBrowserState, Route } from "../../../../ObjectBrowser/reducers";
+
+interface ObjectBrowserReducer {
+  objectBrowser: ObjectBrowserState;
+}
+
+interface ObjectRoutingProps {
+  routesList: Route[];
+  match: any;
+}
+
+const ObjectRouting = ({ routesList, match }: ObjectRoutingProps) => {
+  const currentItem = routesList[routesList.length - 1];
+
+  useEffect(() => {
+    const url = get(match, "url", "/object-browser");
+
+    if (url !== routesList[routesList.length - 1].route) {
+      setAllRoutes(url);
+    }
+  }, [match, routesList, setAllRoutes]);
+
+  return currentItem.type === "path" ? (
+    <ListObjects />
+  ) : (
+    <ObjectDetails routesList={routesList} />
+  );
+};
+
+const mapStateToProps = ({ objectBrowser }: ObjectBrowserReducer) => ({
+  routesList: get(objectBrowser, "routesList", []),
+});
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    dispatchSetAllRoutes: (route: string) => dispatch(setAllRoutes(route)),
+  };
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+export default withRouter(connector(ObjectRouting));
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -0,0 +1,407 @@
+import React, { useState, useEffect } from "react";
+import { withRouter } from "react-router-dom";
+import * as reactMoment from "react-moment";
+import clsx from "clsx";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Chip from "@material-ui/core/Chip";
+import TextField from "@material-ui/core/TextField";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
+import AddIcon from "@material-ui/icons/Add";
+import CloseIcon from "@material-ui/icons/Close";
+import ShareFile from "./ShareFile";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../../../Common/FormComponents/common/styleLibrary";
+import PageHeader from "../../../../Common/PageHeader/PageHeader";
+import ShareIcon from "../../../../../../icons/ShareIcon";
+import DownloadIcon from "../../../../../../icons/DownloadIcon";
+import DeleteIcon from "../../../../../../icons/DeleteIcon";
+import TableWrapper from "../../../../Common/TableWrapper/TableWrapper";
+import PencilIcon from "../../../../Common/TableWrapper/TableActionIcons/PencilIcon";
+import SetRetention from "./SetRetention";
+import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
+import { Button, Input } from "@material-ui/core";
+import { CreateIcon } from "../../../../../../icons";
+import UploadFile from "../../../../../../icons/UploadFile";
+import { connect } from "react-redux";
+import api from "../../../../../../common/api";
+import { ObjectBrowserState, Route } from "../../../../ObjectBrowser/reducers";
+import get from "lodash/get";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    objectNameContainer: {
+      marginBottom: 8,
+    },
+    objectPathContainer: {
+      marginBottom: 26,
+      fontSize: 10,
+    },
+    objectPathLink: {
+      "&:visited": {
+        color: "#000",
+      },
+    },
+    objectName: {
+      fontSize: 24,
+    },
+    propertiesContainer: {
+      display: "flex",
+      flexDirection: "row",
+      marginBottom: 15,
+    },
+    propertiesItem: {
+      display: "flex",
+      flexDirection: "row",
+      marginRight: 21,
+    },
+    propertiesItemBold: {
+      fontWeight: 700,
+    },
+    propertiesValue: {
+      marginLeft: 8,
+      textTransform: "capitalize",
+    },
+    propertiesIcon: {
+      marginLeft: 5,
+    },
+    actionsIconContainer: {
+      marginLeft: 12,
+    },
+    actionsIcon: {
+      height: 16,
+      width: 16,
+      "& .MuiSvgIcon-root": {
+        height: 16,
+      },
+    },
+    tagsContainer: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: 15,
+    },
+    tagText: {
+      marginRight: 13,
+    },
+    tag: {
+      marginRight: 6,
+      fontSize: 10,
+      fontWeight: 700,
+      "&.MuiChip-sizeSmall": {
+        height: 18,
+      },
+      "& .MuiSvgIcon-root": {
+        height: 10,
+        width: 10,
+      },
+    },
+    search: {
+      marginBottom: 8,
+      "&.MuiFormControl-root": {
+        marginRight: 0,
+      },
+    },
+    ...actionsTray,
+    ...searchField,
+    ...containerForHeader(theme.spacing(4)),
+  });
+
+interface IObjectDetailsProps {
+  classes: any;
+  routesList: Route[];
+}
+
+interface IFileInfo {
+  is_latest?: boolean;
+  last_modified: string;
+  legal_hold_status?: string;
+  name: string;
+  retention_mode?: string;
+  retention_until_date?: string;
+  size?: string;
+  tags?: object;
+  version_id: string;
+}
+
+const emptyFile: IFileInfo = {
+  is_latest: true,
+  last_modified: "",
+  legal_hold_status: "",
+  name: "",
+  retention_mode: "",
+  retention_until_date: "",
+  size: "0",
+  tags: {},
+  version_id: "",
+};
+
+const ObjectDetails = ({ classes, routesList }: IObjectDetailsProps) => {
+  const [shareFileModalOpen, setShareFileModalOpen] = useState<boolean>(false);
+  const [retentionModalOpen, setRetentionModalOpen] = useState<boolean>(false);
+  const [actualInfo, setActualInfo] = useState<IFileInfo>(emptyFile);
+  const [versions, setVersions] = useState<IFileInfo[]>([]);
+  const [filterVersion, setFilterVersion] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const currentItem = routesList[routesList.length - 1];
+  const allPathData = currentItem.route.split("/");
+  const objectName = allPathData[allPathData.length - 1];
+  const bucketName = allPathData[2];
+  const pathInBucket = allPathData.slice(3).join("/");
+
+  useEffect(() => {
+    api
+      .invoke(
+        "GET",
+        `/api/v1/buckets/${bucketName}/objects?prefix=${pathInBucket}&with_versions=true`
+      )
+      .then((res: IFileInfo[]) => {
+        const result = get(res, "objects", []);
+        setActualInfo(
+          result.find((el: IFileInfo) => el.is_latest) || emptyFile
+        );
+        setVersions(result.filter((el: IFileInfo) => !el.is_latest));
+      })
+      .catch((error) => {
+        setError(error);
+      });
+  }, []);
+
+  const openRetentionModal = () => {
+    setRetentionModalOpen(true);
+    console.log("open retention modal");
+  };
+
+  const closeRetentionModal = () => {
+    setRetentionModalOpen(false);
+    console.log("close retention modal");
+  };
+
+  const shareObject = () => {
+    setShareFileModalOpen(true);
+    console.log("share object");
+  };
+
+  const closeShareModal = () => {
+    setShareFileModalOpen(false);
+    console.log("close share modal");
+  };
+
+  const deleteTag = () => {
+    console.log("delete tag");
+  };
+
+  const downloadObject = () => {
+    console.log("download object");
+  };
+
+  const confirmDeleteObject = () => {
+    console.log("confirm delete object");
+  };
+
+  const tableActions = [
+    { type: "share", onClick: shareObject, sendOnlyId: true },
+    { type: "download", onClick: downloadObject, sendOnlyId: true },
+  ];
+
+  const filteredRecords = versions.filter((version) =>
+    version.version_id.includes(filterVersion)
+  );
+
+  const displayParsedDate = (date: string) => {
+    return <reactMoment.default>{date}</reactMoment.default>;
+  };
+
+  return (
+    <React.Fragment>
+      <PageHeader label={"Object Browser"} />
+      {shareFileModalOpen && (
+        <ShareFile
+          open={shareFileModalOpen}
+          closeModalAndRefresh={closeShareModal}
+        />
+      )}
+      {retentionModalOpen && (
+        <SetRetention
+          open={retentionModalOpen}
+          closeModalAndRefresh={closeRetentionModal}
+          objectName={objectName}
+        />
+      )}
+      <Grid container>
+        <Grid item xs={12} className={classes.container}>
+          <Grid item xs={12} className={classes.obTitleSection}>
+            <div>
+              <BrowserBreadcrumbs />
+            </div>
+          </Grid>
+          <br />
+          <Grid item xs={12} className={classes.propertiesContainer}>
+            <div className={classes.propertiesItem}>
+              <div>
+                <span className={classes.propertiesItemBold}>Legal Hold:</span>
+                <span className={classes.propertiesValue}>
+                  {actualInfo.legal_hold_status
+                    ? actualInfo.legal_hold_status.toLowerCase()
+                    : "Off"}
+                </span>
+              </div>
+              <div>
+                <IconButton
+                  color="primary"
+                  aria-label="legal-hold"
+                  size="small"
+                  className={classes.propertiesIcon}
+                  onClick={() => {
+                    console.log("open legal hold modal");
+                  }}
+                >
+                  <PencilIcon active={true} />
+                </IconButton>
+              </div>
+            </div>
+            <div className={classes.propertiesItem}>
+              <div>
+                <span className={classes.propertiesItemBold}>Retention:</span>
+                <span className={classes.propertiesValue}>
+                  {actualInfo.retention_mode
+                    ? actualInfo.retention_mode.toLowerCase()
+                    : "Undefined"}
+                </span>
+              </div>
+              <div>
+                <IconButton
+                  color="primary"
+                  aria-label="retention"
+                  size="small"
+                  className={classes.propertiesIcon}
+                  onClick={() => {
+                    openRetentionModal();
+                  }}
+                >
+                  <PencilIcon active={true} />
+                </IconButton>
+              </div>
+            </div>
+            <div className={classes.propertiesItem}>
+              <div className={classes.propertiesItemBold}>File Actions:</div>
+              <div className={classes.actionsIconContainer}>
+                <IconButton
+                  color="primary"
+                  aria-label="share"
+                  size="small"
+                  className={classes.actionsIcon}
+                  onClick={() => {
+                    shareObject();
+                  }}
+                >
+                  <ShareIcon />
+                </IconButton>
+              </div>
+              <div className={classes.actionsIconContainer}>
+                <IconButton
+                  color="primary"
+                  aria-label="download/upload"
+                  size="small"
+                  className={classes.actionsIcon}
+                  onClick={() => {
+                    console.log("download/upload");
+                  }}
+                >
+                  <DownloadIcon />
+                </IconButton>
+              </div>
+              <div className={classes.actionsIconContainer}>
+                <IconButton
+                  color="primary"
+                  aria-label="delete"
+                  size="small"
+                  className={classes.actionsIcon}
+                  onClick={() => {
+                    console.log("delete");
+                  }}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              </div>
+            </div>
+          </Grid>
+          <Grid item xs={12} className={classes.tagsContainer}>
+            <div className={classes.tagText}>Tags:</div>
+            {actualInfo.tags &&
+              Object.keys(actualInfo.tags).map((itemKey, index) => {
+                const tag = get(actualInfo, `tags.${itemKey}`, "");
+                if (tag !== "") {
+                  return (
+                    <Chip
+                      key={`chip-${index}`}
+                      className={classes.tag}
+                      size="small"
+                      label={tag}
+                      color="primary"
+                      deleteIcon={<CloseIcon />}
+                      onDelete={deleteTag}
+                    />
+                  );
+                }
+                return null;
+              })}
+            <Chip
+              className={classes.tag}
+              icon={<AddIcon />}
+              clickable
+              size="small"
+              label="Add tag"
+              color="primary"
+              variant="outlined"
+            />
+          </Grid>
+          <Grid item xs={12} className={classes.actionsTray}>
+            <TextField
+              placeholder={`Search ${objectName}`}
+              className={clsx(classes.search, classes.searchField)}
+              id="search-resource"
+              label=""
+              onChange={(val) => {
+                setFilterVersion(val.target.value);
+              }}
+              InputProps={{
+                disableUnderline: true,
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <TableWrapper
+              itemActions={tableActions}
+              columns={[
+                { label: "Version ID", elementKey: "version_id" },
+                {
+                  label: "Last Modified",
+                  elementKey: "last_modified",
+                  renderFunction: displayParsedDate,
+                },
+              ]}
+              isLoading={false}
+              entityName="Versions"
+              idField="version_id"
+              records={filteredRecords}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(ObjectDetails);
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useRef } from "react";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
+import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
+import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import RadioGroupSelector from "../../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
+import DateSelector from "../../../../Common/FormComponents/DateSelector/DateSelector";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    objectName: {
+      fontSize: 18,
+      fontWeight: 700,
+      marginBottom: 40,
+    },
+    buttonContainer: {
+      textAlign: "right",
+    },
+    ...modalBasic,
+  });
+
+interface ISetRetentionProps {
+  classes: any;
+  open: boolean;
+  closeModalAndRefresh: () => void;
+  objectName: string;
+}
+
+interface IRefObject {
+  resetDate: () => void;
+}
+
+const SetRetention = ({
+  classes,
+  open,
+  closeModalAndRefresh,
+  objectName,
+}: ISetRetentionProps) => {
+  const [statusEnabled, setStatusEnabled] = useState<boolean>(false);
+  const [type, setType] = useState<string>("");
+
+  const dateElement = useRef<IRefObject>(null);
+
+  const dateFieldDisabled = () => {
+    return !(statusEnabled && (type === "governance" || type === "compliance"));
+  };
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+
+  const resetForm = () => {
+    setStatusEnabled(false);
+    setType("");
+    if (dateElement.current) {
+      dateElement.current.resetDate();
+    }
+  };
+
+  return (
+    <ModalWrapper
+      title="Set Retention Policy"
+      modalOpen={open}
+      onClose={() => {
+        resetForm();
+        closeModalAndRefresh();
+      }}
+    >
+      <Grid item xs={12} className={classes.objectName}>
+        {objectName}
+      </Grid>
+      <form
+        noValidate
+        autoComplete="off"
+        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+          onSubmit(e);
+        }}
+      >
+        <Grid item xs={12}>
+          <FormSwitchWrapper
+            value="status"
+            id="status"
+            name="status"
+            checked={statusEnabled}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setStatusEnabled(!statusEnabled);
+              setType("");
+            }}
+            label={"Status"}
+            indicatorLabels={["Enabled", "Disabled"]}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <RadioGroupSelector
+            currentSelection={type}
+            id="type"
+            name="type"
+            label="Type"
+            disableOptions={!statusEnabled}
+            onChange={(e) => {
+              setType(e.target.value);
+            }}
+            selectorOptions={[
+              { label: "Governance", value: "governance" },
+              { label: "Compliance", value: "compliance" },
+            ]}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <DateSelector
+            id="date"
+            label="Date"
+            disableOptions={dateFieldDisabled()}
+            ref={dateElement}
+            borderBottom={true}
+          />
+        </Grid>
+        <Grid item xs={12} className={classes.buttonContainer}>
+          <button
+            type="button"
+            color="primary"
+            className={classes.clearButton}
+            onClick={resetForm}
+          >
+            Reset
+          </button>
+          <Button type="submit" variant="contained" color="primary">
+            Save
+          </Button>
+        </Grid>
+      </form>
+    </ModalWrapper>
+  );
+};
+
+export default withStyles(styles)(SetRetention);
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
+import {
+  modalBasic,
+  predefinedList,
+} from "../../../../Common/FormComponents/common/styleLibrary";
+import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
+import DateSelector from "../../../../Common/FormComponents/DateSelector/DateSelector";
+import { CopyIcon } from "../../../../../../icons";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    copyButtonContainer: {
+      paddingLeft: 16,
+    },
+    modalContent: {
+      paddingBottom: 53,
+    },
+    ...modalBasic,
+    ...predefinedList,
+  });
+
+interface IShareFileProps {
+  classes: any;
+  open: boolean;
+  closeModalAndRefresh: () => void;
+}
+
+const ShareFile = ({
+  classes,
+  open,
+  closeModalAndRefresh,
+}: IShareFileProps) => {
+  return (
+    <ModalWrapper
+      title="Share File"
+      modalOpen={open}
+      onClose={() => {
+        closeModalAndRefresh();
+      }}
+    >
+      <Grid container className={classes.modalContent}>
+        <Grid item xs={12} className={classes.dateContainer}>
+          <DateSelector
+            id="date"
+            label="Active until"
+            borderBottom={false}
+            addSwitch={true}
+          />
+        </Grid>
+        <Grid container item xs={12}>
+          <Grid item xs={10} className={classes.predefinedList}>
+            {"https://somelink.will/go/here"}
+          </Grid>
+          <Grid item xs={2} className={classes.copyButtonContainer}>
+            <CopyToClipboard text={"https://somelink.will/go/here"}>
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<CopyIcon />}
+                onClick={() => {
+                  console.log("copied!");
+                }}
+              >
+                Copy
+              </Button>
+            </CopyToClipboard>
+          </Grid>
+        </Grid>
+      </Grid>
+    </ModalWrapper>
+  );
+};
+
+export default withStyles(styles)(ShareFile);
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateSelector/DateSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DateSelector/DateSelector.tsx
@@ -0,0 +1,245 @@
+import React, { useState, forwardRef, useImperativeHandle } from "react";
+import clsx from "clsx";
+import Grid from "@material-ui/core/Grid";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import InputLabel from "@material-ui/core/InputLabel";
+import Tooltip from "@material-ui/core/Tooltip";
+import HelpIcon from "@material-ui/icons/Help";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import InputBase from "@material-ui/core/InputBase";
+import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import FormSwitchWrapper from "../FormSwitchWrapper/FormSwitchWrapper";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    dateInput: {
+      "&:not(:last-child)": {
+        marginRight: 22,
+      },
+    },
+    ...fieldBasic,
+    ...tooltipHelper,
+    labelContainer: {
+      flex: 1,
+    },
+    fieldContainer: {
+      ...fieldBasic.fieldContainer,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingBottom: 10,
+      marginTop: 11,
+      marginBottom: 6,
+    },
+    fieldContainerBorder: {
+      borderBottom: "#9c9c9c 1px solid",
+      marginBottom: 20,
+    },
+  });
+
+const SelectStyled = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      "& .MuiSelect-icon": {
+        color: "#000",
+        "&.Mui-disabled": {
+          color: "#9c9c9c",
+        },
+      },
+    },
+    input: {
+      borderBottom: 0,
+      fontSize: 12,
+    },
+  })
+)(InputBase);
+
+interface IDateSelectorProps {
+  classes: any;
+  id: string;
+  label: string;
+  disableOptions?: boolean;
+  addSwitch?: boolean;
+  tooltip?: string;
+  borderBottom?: boolean;
+}
+
+const DateSelector = forwardRef(
+  (
+    {
+      classes,
+      id,
+      label,
+      disableOptions = false,
+      addSwitch = false,
+      tooltip = "",
+      borderBottom = false,
+    }: IDateSelectorProps,
+    ref: any
+  ) => {
+    useImperativeHandle(ref, () => ({ resetDate }));
+
+    const [dateEnabled, setDateEnabled] = useState<boolean>(false);
+    const [month, setMonth] = useState<string>("");
+    const [day, setDay] = useState<string>("");
+    const [year, setYear] = useState<string>("");
+
+    const resetDate = () => {
+      setMonth("");
+      setDay("");
+      setYear("");
+    };
+
+    const isDateDisabled = () => {
+      if (disableOptions) {
+        return disableOptions;
+      } else if (addSwitch) {
+        return !dateEnabled;
+      } else {
+        return false;
+      }
+    };
+
+    const onMonthChange = (
+      e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
+    ) => {
+      setMonth(e.target.value as string);
+    };
+
+    const onDayChange = (
+      e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
+    ) => {
+      setDay(e.target.value as string);
+    };
+
+    const onYearChange = (
+      e: React.ChangeEvent<{ name?: string | undefined; value: unknown }>
+    ) => {
+      setYear(e.target.value as string);
+    };
+
+    return (
+      <Grid
+        item
+        xs={12}
+        className={clsx(classes.fieldContainer, {
+          [classes.fieldContainerBorder]: borderBottom,
+        })}
+      >
+        <div className={classes.labelContainer}>
+          <Grid container>
+            <InputLabel htmlFor={id} className={classes.inputLabel}>
+              <span>{label}</span>
+              {tooltip !== "" && (
+                <div className={classes.tooltipContainer}>
+                  <Tooltip title={tooltip} placement="top-start">
+                    <HelpIcon className={classes.tooltip} />
+                  </Tooltip>
+                </div>
+              )}
+            </InputLabel>
+            {addSwitch && (
+              <FormSwitchWrapper
+                indicatorLabels={["Specific Date", "Always active"]}
+                checked={dateEnabled}
+                value={"date_enabled"}
+                id="date-status"
+                name="date-status"
+                onChange={(e) => {
+                  setDateEnabled(e.target.checked);
+                }}
+                switchOnly
+              />
+            )}
+          </Grid>
+        </div>
+        <div>
+          <FormControl
+            disabled={isDateDisabled()}
+            className={classes.dateInput}
+          >
+            <Select
+              id={`${id}-month`}
+              name={`${id}-month`}
+              value={month}
+              displayEmpty
+              onChange={onMonthChange}
+              input={<SelectStyled />}
+            >
+              <MenuItem value="" disabled>
+                {"<Month>"}
+              </MenuItem>
+              <MenuItem value={"1"}>January</MenuItem>
+              {/* {options.map((option) => (
+              <MenuItem
+                value={option.value}
+                key={`select-${name}-${option.label}`}
+              >
+                {option.label}
+              </MenuItem>
+            ))} */}
+            </Select>
+          </FormControl>
+          <FormControl
+            disabled={isDateDisabled()}
+            className={classes.dateInput}
+          >
+            <Select
+              id={`${id}-day`}
+              name={`${id}-day`}
+              value={day}
+              displayEmpty
+              onChange={onDayChange}
+              input={<SelectStyled />}
+            >
+              <MenuItem value="" disabled>
+                {"<Day>"}
+              </MenuItem>
+              <MenuItem value={"1"}>1</MenuItem>
+              <MenuItem value={"2"}>2</MenuItem>
+              {/* {options.map((option) => (
+              <MenuItem
+                value={option.value}
+                key={`select-${name}-${option.label}`}
+              >
+                {option.label}
+              </MenuItem>
+            ))} */}
+            </Select>
+          </FormControl>
+          <FormControl
+            disabled={isDateDisabled()}
+            className={classes.dateInput}
+          >
+            <Select
+              id={`${id}-year`}
+              name={`${id}-year`}
+              value={year}
+              displayEmpty
+              onChange={onYearChange}
+              input={<SelectStyled />}
+            >
+              <MenuItem value="" disabled>
+                {"<Year>"}
+              </MenuItem>
+              <MenuItem value={"2020"}>2020</MenuItem>
+              <MenuItem value={"2021"}>2021</MenuItem>
+              {/* {options.map((option) => (
+              <MenuItem
+                value={option.value}
+                key={`select-${name}-${option.label}`}
+              >
+                {option.label}
+              </MenuItem>
+            ))} */}
+            </Select>
+          </FormControl>
+        </div>
+      </Grid>
+    );
+  }
+);
+
+export default withStyles(styles)(DateSelector);
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -31,7 +31,7 @@ interface IFormSwitch {
  disabled?: boolean;
  tooltip?: string;
  index?: number;
-  indicatorLabel?: string;
+  indicatorLabels?: string[];
  checked: boolean;
  switchOnly?: boolean;
 }
@@ -142,14 +142,21 @@ const StyledSwitch = withStyles({
      opacity: 1,
      height: 15,
    },
+    "&:hover": {
+      backgroundColor: "#fff",
+    },
  },
  checked: {},
  track: {
    height: 15,
-    backgroundColor: "#081C42",
+    backgroundColor: "#9C9C9C",
+    border: "#081C42 1px solid",
    opacity: 1,
    padding: 0,
    marginTop: 1.5,
+    "&$checked": {
+      backgroundColor: "#081C42",
+    },
  },
  thumb: {
    backgroundColor: "#fff",
@@ -172,7 +179,7 @@ const FormSwitchWrapper = ({
  disabled = false,
  switchOnly = false,
  tooltip = "",
-  indicatorLabel = "",
+  indicatorLabels = [],
  classes,
 }: IFormSwitch) => {
  const switchComponent = (
@@ -190,8 +197,10 @@ const FormSwitchWrapper = ({
          disableTouchRipple
          value={value}
        />
-        {indicatorLabel !== "" && (
-          <span className={classes.indicatorLabel}>{indicatorLabel}</span>
+        {indicatorLabels.length === 2 && (
+          <span className={classes.indicatorLabel}>
+            {checked ? indicatorLabels[0] : indicatorLabels[1]}
+          </span>
        )}
      </div>
    </React.Fragment>
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx
@@ -18,12 +18,12 @@ import isString from "lodash/isString";
 import { IconButton } from "@material-ui/core";
 import ViewIcon from "./TableActionIcons/ViewIcon";
 import PencilIcon from "./TableActionIcons/PencilIcon";
+import ShareIcon from "./TableActionIcons/ShareIcon";
 import DeleteIcon from "./TableActionIcons/DeleteIcon";
 import DescriptionIcon from "./TableActionIcons/DescriptionIcon";
 import CloudIcon from "./TableActionIcons/CloudIcon";
 import ConsoleIcon from "./TableActionIcons/ConsoleIcon";
-import GetAppIcon from "@material-ui/icons/GetApp";
-import SvgIcon from "@material-ui/core/SvgIcon";
+import DownloadIcon from "./TableActionIcons/DownloadIcon";
 import { Link } from "react-router-dom";
 import { createStyles, withStyles } from "@material-ui/core/styles";

@@ -55,14 +55,14 @@ const defineIcon = (type: string, selected: boolean) => {
      return <DeleteIcon active={selected} />;
    case "description":
      return <DescriptionIcon active={selected} />;
+    case "share":
+      return <ShareIcon active={selected} />;
    case "cloud":
      return <CloudIcon active={selected} />;
    case "console":
      return <ConsoleIcon active={selected} />;
    case "download":
-      return (
-        <SvgIcon component={GetAppIcon} fontSize="small" color="primary" />
-      );
+      return <DownloadIcon active={selected} />;
  }

  return null;
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DeleteIcon.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DeleteIcon.tsx
@@ -9,17 +9,10 @@ const DeleteIcon = ({ active = false }: IIcon) => {
      height="16"
      viewBox="0 0 10.402 13"
    >
-      <g transform="translate(0.004 -28.959)">
-        <path
-          fill={active ? selected : unSelected}
-          d="M6.757,29.959v-1H3.636v1H0v1H10.4v-1Z"
-        />
-        <path
-          fill={active ? selected : unSelected}
-          d="M0,31.957l1.672,10H8.724l1.673-10ZM3.412,40.2,2.86,33.722h.653l.553,6.472Zm3.569,0H6.328l.551-6.472h.654Z"
-          transform="translate(0 0)"
-        />
-      </g>
+      <path
+        fill={active ? selected : unSelected}
+        d="M6.761 1V0H3.64v1H.004v1h10.4V1zM.004 2.998l1.672 10h7.052l1.673-10zm3.412 8.243l-.552-6.478h.653l.553 6.472zm3.569 0h-.653l.551-6.472h.654z"
+      />
    </svg>
  );
 };
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DownloadIcon.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DownloadIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const DeleteIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 13 12.996"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M11.05 9.096v1.95h-9.1v-1.95H0v3.9h13v-3.9z"
+      ></path>
+      <path
+        fill={active ? selected : unSelected}
+        d="M6.5 9.75L9 6.672H7.475V0h-1.95v6.672H4z"
+      ></path>
+    </svg>
+  );
+};
+
+export default DeleteIcon;
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ShareIcon.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ShareIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { IIcon, selected, unSelected } from "./common";
+
+const ShareIcon = ({ active = false }: IIcon) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 13 13"
+    >
+      <path
+        fill={active ? selected : unSelected}
+        d="M11.05 8.617v2.429h-9.1v-9.1h2.429v-1.95H0v13h13V8.617z"
+        className="a"
+      ></path>
+      <path
+        fill={active ? selected : unSelected}
+        d="M3.854 9.256h1.95a4.945 4.945 0 013.6-4.74v1.3l.6-.487 2.474-2.012L9.4.817v1.7a6.9 6.9 0 00-5.546 6.739z"
+        className="a"
+      ></path>
+    </svg>
+  );
+};
+
+export default ShareIcon;
--- a/portal-ui/src/screens/Console/Configurations/ConfTargetGeneric.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfTargetGeneric.tsx
@@ -100,7 +100,7 @@ const ConfTargetGeneric = ({

        return (
          <FormSwitchWrapper
-            indicatorLabel="On"
+            indicatorLabels={["On", "Off"]}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              const value = e.target.checked ? "true" : "false";
              setValueElement(field.name, value, item);
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfMySql.tsx
@@ -143,7 +143,7 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
          name="checkedB"
          onChange={switcherChangeEvt}
          value={"dnsString"}
-          indicatorLabel={"On"}
+          indicatorLabels={["On", "Off"]}
        />
      </Grid>
      {useDsnString ? (
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/ConfPostgres.tsx
@@ -216,7 +216,7 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
            setUseConnectionString(e.target.checked);
          }}
          value={"manualString"}
-          indicatorLabel={"On"}
+          indicatorLabels={["On", "Off"]}
        />
      </Grid>
      {useConnectionString ? (
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -49,6 +49,8 @@ import { ISessionResponse } from "./types";
 import TenantDetails from "./Tenants/TenantDetails/TenantDetails";
 import ObjectBrowser from "./ObjectBrowser/ObjectBrowser";
 import ListObjects from "./Buckets/ListBuckets/Objects/ListObjects/ListObjects";
+import ObjectDetails from "./Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails";
+import ObjectRouting from "./Buckets/ListBuckets/Objects/ListObjects/ObjectRouting";
 import License from "./License/License";

 const drawerWidth = 245;
@@ -212,11 +214,11 @@ const Console = ({
      path: "/object-browser",
    },
    {
-      component: ListObjects,
+      component: ObjectRouting,
      path: "/object-browser/:bucket",
    },
    {
-      component: ListObjects,
+      component: ObjectRouting,
      path: "/object-browser/:bucket/*",
    },
    {
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -179,7 +179,7 @@ const AddGroup = ({
      {selectedGroup !== null && (
        <div className={classes.floatingEnabled}>
          <FormSwitchWrapper
-            indicatorLabel={"Enabled"}
+            indicatorLabels={["Enabled", "Disabled"]}
            checked={groupEnabled}
            value={"group_enabled"}
            id="group-status"
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -104,7 +104,7 @@ const styles = (theme: Theme) =>

 interface IBrowseBucketsProps {
  classes: any;
-  addRoute: (path: string, label: string) => any;
+  addRoute: (path: string, label: string, type: string) => any;
  resetRoutesList: (doVar: boolean) => any;
  match: any;
 }
@@ -187,7 +187,7 @@ const BrowseBuckets = ({
    const currentPath = get(match, "url", "/object-browser");
    const newPath = `${currentPath}/${idElement}`;

-    addRoute(newPath, idElement);
+    addRoute(newPath, idElement, "path");
  };

  const renderBucket = (bucketName: string) => {
--- a/portal-ui/src/screens/Console/ObjectBrowser/actions.ts
+++ b/portal-ui/src/screens/Console/ObjectBrowser/actions.ts
@@ -26,6 +26,7 @@ interface AddRouteAction {
  type: typeof OBJECT_BROWSER_ADD_ROUTE;
  route: string;
  label: string;
+  routeType: string;
 }

 interface ResetRoutesList {
@@ -55,16 +56,16 @@ export type ObjectBrowserActionTypes =
  | SetAllRoutes
  | CreateFolder;

-export const addRoute = (route: string, label: string) => {
+export const addRoute = (route: string, label: string, routeType: string) => {
  return {
    type: OBJECT_BROWSER_ADD_ROUTE,
    route,
    label,
+    routeType,
  };
 };

 export const resetRoutesList = (reset: boolean) => {
-  console.log("RESET");
  return {
    type: OBJECT_BROWSER_RESET_ROUTES_LIST,
    reset,
--- a/portal-ui/src/screens/Console/ObjectBrowser/reducers.ts
+++ b/portal-ui/src/screens/Console/ObjectBrowser/reducers.ts
@@ -27,13 +27,16 @@ import {
 export interface Route {
  route: string;
  label: string;
+  type: string;
 }

 export interface ObjectBrowserState {
  routesList: Route[];
 }

-const initialRoute = [{ route: "/object-browser", label: "All Buckets" }];
+const initialRoute = [
+  { route: "/object-browser", label: "All Buckets", type: "path" },
+];

 const initialState: ObjectBrowserState = {
  routesList: initialRoute,
@@ -47,7 +50,7 @@ export function objectBrowserReducer(
    case OBJECT_BROWSER_ADD_ROUTE:
      const newRouteList = [
        ...state.routesList,
-        { route: action.route, label: action.label },
+        { route: action.route, label: action.label, type: action.routeType },
      ];
      history.push(action.route);

@@ -76,7 +79,12 @@ export function objectBrowserReducer(
      splitRoutes.forEach((route) => {
        if (route !== "" && route !== "object-browser") {
          initRoute = `${initRoute}/${route}`;
-          routesArray.push({ route: initRoute, label: route });
+
+          routesArray.push({
+            route: initRoute,
+            label: route,
+            type: "path",
+          });
        }
      });

@@ -97,7 +105,7 @@ export function objectBrowserReducer(
        if (folderTrim !== "") {
          lastRoute = `${lastRoute}/${folderTrim}`;

-          const newItem = { route: lastRoute, label: folderTrim };
+          const newItem = { route: lastRoute, label: folderTrim, type: "path" };
          newFoldersRoutes.push(newItem);
        }
      });
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -222,7 +222,7 @@ class AddUserContent extends React.Component<
        {selectedUser !== null && (
          <div className={classes.floatingEnabled}>
            <FormSwitchWrapper
-              indicatorLabel={"Enabled"}
+              indicatorLabels={["Enabled", "Disabled"]}
              checked={enabled}
              value={"user_enabled"}
              id="user-status"
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -1685,6 +1685,13 @@
  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==

+"@types/react-copy-to-clipboard@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-4.3.0.tgz#8e07becb4f11cfced4bd36038cb5bdf5c2658be5"
+  integrity sha512-iideNPRyroENqsOFh1i2Dv3zkviYS9r/9qD9Uh3Z9NNoAAqqa2x53i7iGndGNnJFIo20wIu7Hgh77tx1io8bgw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@16.9.4":
  version "16.9.4"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
@@ -3376,6 +3383,13 @@ copy-descriptor@^0.1.0:
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

+copy-to-clipboard@^3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2:
  version "3.6.5"
  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
@@ -8883,7 +8897,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.4"

-prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9084,6 +9098,14 @@ react-codemirror2@^7.1.0:
  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-7.2.1.tgz#38dab492fcbe5fb8ebf5630e5bb7922db8d3a10c"
  integrity sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==

+react-copy-to-clipboard@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
+  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^10.2.1:
  version "10.2.1"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -10761,6 +10783,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
    regex-not "^1.0.2"
    safe-regex "^1.1.0"

+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"