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

2022-01-31 23:40:23 -07:00
parent 5258ac3d1a
commit 71ac8d7001
6 changed files with 107 additions and 34 deletions
--- a/portal-ui/src/common/BackLink.tsx
+++ b/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,
+      },
    },
  });

--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/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={
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/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 } })}
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/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 = {
--- a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
+++ b/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
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/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>}