Replaced top breadcrumbs & redesign of bucket breadcrumbs (#1498)

Author: bexsoft

portal-ui/src/common/BackLink.tsx

@@ -40,6 +40,9 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      "& svg.min-icon": {
+        width: 12,
+      },
     },
   });
 

portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx

@@ -41,6 +41,7 @@ import {
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
 import SearchBox from "../../Common/SearchBox";
+import BackLink from "../../../../common/BackLink";
 
 interface IBrowserHandlerProps {
   fileMode: boolean;
@@ -60,6 +61,12 @@ const styles = (theme: Theme) =>
       textDecoration: "none",
       color: "black",
     },
+    backToBuckets: {
+      color: "#000",
+      fontSize: 14,
+      padding: 0,
+      marginTop: -8,
+    },
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -88,10 +95,22 @@ const BrowserHandler = ({
       <PageHeader
         label={
           <Fragment>
-            <Link to={"/buckets"} className={classes.breadcrumLink}>
-              Buckets
-            </Link>{" "}
-            &gt; {bucketName}
+            {fileMode ? (
+              <Fragment>
+                <Link to={"/buckets"} className={classes.breadcrumLink}>
+                  Buckets
+                </Link>{" "}
+                &gt; {bucketName}
+              </Fragment>
+            ) : (
+              <Fragment>
+                <BackLink
+                  label={"Back to Buckets"}
+                  to={"/buckets"}
+                  className={classes.backToBuckets}
+                />
+              </Fragment>
+            )}
           </Fragment>
         }
         actions={

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

@@ -89,7 +89,12 @@ import SecureComponent, {
 
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
-import { DownloadIcon, PreviewIcon, ShareIcon } from "../../../../../../icons";
+import {
+  BucketsIcon,
+  DownloadIcon,
+  PreviewIcon,
+  ShareIcon,
+} from "../../../../../../icons";
 import UploadFilesButton from "../../UploadFilesButton";
 import DetailsListPanel from "./DetailsListPanel";
 import ObjectDetailPanel from "./ObjectDetailPanel";
@@ -100,9 +105,6 @@ const AddFolderIcon = React.lazy(
 const HistoryIcon = React.lazy(
   () => import("../../../../../../icons/HistoryIcon")
 );
-const FolderIcon = React.lazy(
-  () => import("../../../../../../icons/FolderIcon")
-);
 const RefreshIcon = React.lazy(
   () => import("../../../../../../icons/RefreshIcon")
 );
@@ -127,7 +129,7 @@ const PreviewFileModal = withSuspense(
 const styles = (theme: Theme) =>
   createStyles({
     browsePaper: {
-      height: "calc(100vh - 280px)",
+      height: "calc(100vh - 210px)",
       "&.actionsPanelOpen": {
         height: "100%",
       },
@@ -690,9 +692,9 @@ const ListObjects = ({
   };
 
   const openPath = (idElement: string) => {
-    if(idElement.endsWith("/")) {
+    if (idElement.endsWith("/")) {
       const newPath = `/buckets/${bucketName}/browse${
-          idElement ? `/${encodeFileName(idElement)}` : ``
+        idElement ? `/${encodeFileName(idElement)}` : ``
       }`;
       history.push(newPath);
       return;
@@ -1091,6 +1093,28 @@ const ListObjects = ({
   if (currentPath.length > 0) {
     uploadPath = uploadPath.concat(currentPath);
   }
+
+  // TODO: Add bucket information panel
+  /*
+      *
+      * subTitle={
+                  <Fragment>
+                    <Grid item xs={12} className={classes.bucketDetails}>
+                      <span className={classes.detailsSpacer}>
+                        Created:&nbsp;&nbsp;&nbsp;<strong></strong>
+                      </span>
+                      <span className={classes.detailsSpacer}>
+                        Access:&nbsp;&nbsp;&nbsp;<strong></strong>
+                      </span>
+                      <span className={classes.detailsSpacer}>
+                        SIZE / TOTAL OBJECTS
+                      </span>
+                    </Grid>
+                  </Fragment>
+                }
+      *
+      * */
+
   return (
     <React.Fragment>
       {shareFileModalOpen && selectedPreview && (
@@ -1144,19 +1168,15 @@ const ListObjects = ({
             className={classes.screenTitle}
             icon={
               <Fragment>
-                <FolderIcon width={40} />
+                <BucketsIcon width={40} />
               </Fragment>
             }
             title={
-              currentPath.length > 0 ? currentPath[currentPath.length - 1] : "/"
-            }
-            subTitle={
-              <Fragment>
-                <BrowserBreadcrumbs
-                  bucketName={bucketName}
-                  internalPaths={pageTitle}
-                />
-              </Fragment>
+              <BrowserBreadcrumbs
+                bucketName={bucketName}
+                internalPaths={pageTitle}
+                fullSizeBreadcrumbs
+              />
             }
             actions={
               <Fragment>
@@ -1194,9 +1214,6 @@ const ListObjects = ({
             }
           />
         </Grid>
-        <Grid item xs={12}>
-          <br />
-        </Grid>
         <div
           id="object-list-wrapper"
           {...getRootProps({ style: { ...dndStyles } })}

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -371,11 +371,23 @@ export const objectBrowserCommon = {
         textDecoration: "underline",
       },
     },
+    "&.fullSize": {
+      fontSize: 18,
+      marginLeft: 10,
+    }
   },
   smallLabel: {
     color: "#9C9C9C",
     fontSize: 15,
   },
+  bucketDetails: {
+    marginLeft: 10,
+    fontSize:14,
+    color: "#969FA8"
+  },
+  detailsSpacer: {
+    marginRight: 18,
+  },
 };
 
 export const selectorsCommon = {

portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx

@@ -76,7 +76,7 @@ const styles = (theme: Theme) =>
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-    }
+    },
   });
 
 const PageHeader = ({
@@ -87,7 +87,7 @@ const PageHeader = ({
   operatorMode,
   managerObjects,
   toggleList,
-                      middleComponent,
+  middleComponent,
 }: IPageHeader) => {
   return (
     <Grid
@@ -96,9 +96,16 @@ const PageHeader = ({
       direction="row"
       alignItems="center"
     >
-      <Grid item xs={12} sm={12} md={middleComponent? 3: 6} className={classes.label} sx={{
-        paddingTop: ["15px", "15px", "0", "0"],
-      }}>
+      <Grid
+        item
+        xs={12}
+        sm={12}
+        md={middleComponent ? 3 : 6}
+        className={classes.label}
+        sx={{
+          paddingTop: ["15px", "15px", "0", "0"],
+        }}
+      >
         {!sidebarOpen && (
           <div className={classes.logo}>
             {operatorMode ? <OperatorLogo /> : <ConsoleLogo />}
@@ -109,11 +116,24 @@ const PageHeader = ({
         </Typography>
       </Grid>
       {middleComponent && (
-          <Grid item xs={12} sm={12} md={6} className={classes.middleComponent}>
-            {middleComponent}
-          </Grid>
+        <Grid
+          item
+          xs={12}
+          sm={12}
+          md={6}
+          className={classes.middleComponent}
+          sx={{ marginTop: ["10px", "10px", "0", "0"] }}
+        >
+          {middleComponent}
+        </Grid>
       )}
-      <Grid item xs={12} sm={12} md={middleComponent? 3:6} className={classes.rightMenu}>
+      <Grid
+        item
+        xs={12}
+        sm={12}
+        md={middleComponent ? 3 : 6}
+        className={classes.rightMenu}
+      >
         {actions && actions}
         {managerObjects && managerObjects.length > 0 && (
           <IconButton

portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx

@@ -37,6 +37,7 @@ interface IObjectBrowser {
   internalPaths: string;
   rewindEnabled?: boolean;
   rewindDate?: any;
+  fullSizeBreadcrumbs?: boolean;
 }
 
 const styles = (theme: Theme) =>
@@ -50,6 +51,7 @@ const BrowserBreadcrumbs = ({
   internalPaths,
   rewindEnabled,
   rewindDate,
+                                fullSizeBreadcrumbs,
 }: IObjectBrowser) => {
   let paths = internalPaths;
 
@@ -92,7 +94,7 @@ const BrowserBreadcrumbs = ({
         </Grid>
       )}
 
-      <Grid item xs={12} className={classes.breadcrumbs}>
+      <Grid item xs={12} className={`${classes.breadcrumbs} ${fullSizeBreadcrumbs ? "fullSize" : ""}`}>
         <React.Fragment>
           <Link to={`/buckets/${bucketName}/browse`}>{bucketName}</Link>
           {listBreadcrumbs.length > 0 && <span> / </span>}