Changed breadcrumbs bar position (#1783)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2022-03-30 21:27:08 -07:00
parent 87468571ae
commit 301c4a83b5
5 changed files with 111 additions and 78 deletions
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx
@@ -48,9 +48,6 @@ const styles = (theme: Theme) =>
      "&.open": {
        width: 300,
        minWidth: 300,
-        borderTopWidth: 1,
-        borderBottomWidth: 1,
-        borderRightWidth: 1,
        borderLeftWidth: 1,
        opacity: 1,
      },
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -135,6 +135,7 @@ const PreviewFileModal = withSuspense(
 const styles = (theme: Theme) =>
  createStyles({
    browsePaper: {
+      border: 0,
      height: "calc(100vh - 210px)",
      "&.actionsPanelOpen": {
        minHeight: "100%",
@@ -174,13 +175,15 @@ const styles = (theme: Theme) =>
    },
    screenTitleContainer: {
      border: "#EAEDEE 1px solid",
-      borderBottom: 0,
      padding: "0.8rem 15px 0",
    },
    labelStyle: {
      color: "#969FA8",
      fontSize: "12px",
    },
+    breadcrumbsContainer: {
+      padding: "12px 14px 5px",
+    },
    ...objectBrowserExtras,
    ...objectBrowserCommon,
    ...containerForHeader(theme.spacing(4)),
@@ -1319,35 +1322,17 @@ const ListObjects = ({
            }
          />
        </Grid>
-        <Grid item xs={12}>
-          <BrowserBreadcrumbs
-            bucketName={bucketName}
-            internalPaths={pageTitle}
-            existingFiles={records || []}
-            additionalOptions={
-              !isVersioned || rewindEnabled ? null : (
-                <div>
-                  <CheckboxWrapper
-                    name={"deleted_objects"}
-                    id={"showDeletedObjects"}
-                    value={"deleted_on"}
-                    label={"Show deleted objects"}
-                    onChange={setDeletedAction}
-                    checked={showDeleted}
-                    overrideLabelClasses={classes.labelStyle}
-                    noTopMargin
-                  />
-                </div>
-              )
-            }
-          />
-        </Grid>
        <div
          id="object-list-wrapper"
          {...getRootProps({ style: { ...dndStyles } })}
        >
          <input {...getInputProps()} />
-          <Grid item xs={12} className={classes.tableBlock}>
+          <Grid
+            item
+            xs={12}
+            className={classes.tableBlock}
+            sx={{ border: "#EAEDEE 1px solid", borderTop: 0 }}
+          >
            {versionsMode ? (
              <Fragment>
                {selectedInternalPaths !== null && (
@@ -1363,36 +1348,64 @@ const ListObjects = ({
                resource={bucketName}
                errorProps={{ disabled: true }}
              >
-                <TableWrapper
-                  itemActions={tableActions}
-                  columns={rewindEnabled ? rewindModeColumns : listModeColumns}
-                  isLoading={rewindEnabled ? loadingRewind : loading}
-                  loadingMessage={loadingMessage}
-                  entityName="Objects"
-                  idField="name"
-                  records={payload}
-                  customPaperHeight={`${classes.browsePaper} ${
-                    detailsOpen ? "actionsPanelOpen" : ""
-                  }`}
-                  selectedItems={selectedObjects}
-                  onSelect={selectListObjects}
-                  customEmptyMessage={`This location is empty${
-                    !rewindEnabled ? ", please try uploading a new file" : ""
-                  }`}
-                  sortConfig={{
-                    currentSort: currentSortField,
-                    currentDirection: sortDirection,
-                    triggerSort: sortChange,
-                  }}
-                  onSelectAll={selectAllItems}
-                  rowStyle={({ index }) => {
-                    if (payload[index]?.delete_flag) {
-                      return "deleted";
+                <Grid item xs={12}>
+                  <Grid item xs={12} className={classes.breadcrumbsContainer}>
+                    <BrowserBreadcrumbs
+                      bucketName={bucketName}
+                      internalPaths={pageTitle}
+                      existingFiles={records || []}
+                      additionalOptions={
+                        !isVersioned || rewindEnabled ? null : (
+                          <div>
+                            <CheckboxWrapper
+                              name={"deleted_objects"}
+                              id={"showDeletedObjects"}
+                              value={"deleted_on"}
+                              label={"Show deleted objects"}
+                              onChange={setDeletedAction}
+                              checked={showDeleted}
+                              overrideLabelClasses={classes.labelStyle}
+                              noTopMargin
+                            />
+                          </div>
+                        )
+                      }
+                      hidePathButton={false}
+                    />
+                  </Grid>
+                  <TableWrapper
+                    itemActions={tableActions}
+                    columns={
+                      rewindEnabled ? rewindModeColumns : listModeColumns
                    }
+                    isLoading={rewindEnabled ? loadingRewind : loading}
+                    loadingMessage={loadingMessage}
+                    entityName="Objects"
+                    idField="name"
+                    records={payload}
+                    customPaperHeight={`${classes.browsePaper} ${
+                      detailsOpen ? "actionsPanelOpen" : ""
+                    }`}
+                    selectedItems={selectedObjects}
+                    onSelect={selectListObjects}
+                    customEmptyMessage={`This location is empty${
+                      !rewindEnabled ? ", please try uploading a new file" : ""
+                    }`}
+                    sortConfig={{
+                      currentSort: currentSortField,
+                      currentDirection: sortDirection,
+                      triggerSort: sortChange,
+                    }}
+                    onSelectAll={selectAllItems}
+                    rowStyle={({ index }) => {
+                      if (payload[index]?.delete_flag) {
+                        return "deleted";
+                      }

-                    return "";
-                  }}
-                />
+                      return "";
+                    }}
+                  />
+                </Grid>
              </SecureComponent>
            )}
            <SecureComponent
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
@@ -42,7 +42,11 @@ import {
  setErrorSnackMessage,
  setSnackBarMessage,
 } from "../../../../../../actions";
-import { encodeFileName, niceBytesInt } from "../../../../../../common/utils";
+import {
+  decodeFileName,
+  encodeFileName,
+  niceBytesInt,
+} from "../../../../../../common/utils";
 import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
 import RestoreFileVersion from "./RestoreFileVersion";
 import {
@@ -62,11 +66,11 @@ import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/Selec
 import PreviewFileModal from "../Preview/PreviewFileModal";
 import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 import DeleteNonCurrent from "../ListObjects/DeleteNonCurrent";
+import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";

 const styles = (theme: Theme) =>
  createStyles({
    versionsContainer: {
-      border: "#EAEDEE 1px solid",
      padding: 10,
    },
    noBottomBorder: {
@@ -86,7 +90,7 @@ const styles = (theme: Theme) =>
        width: "2px",
        backgroundColor: "#F8F8F8",
        left: "24px",
-        height: "52px",
+        height: "40px",
        bottom: 0,
      },
    },
@@ -407,6 +411,14 @@ const VersionsNavigator = ({

        {actualInfo && (
          <Fragment>
+            <Grid item xs={12}>
+              <BrowserBreadcrumbs
+                bucketName={bucketName}
+                internalPaths={decodeFileName(internalPaths)}
+                existingFiles={[]}
+                hidePathButton={true}
+              />
+            </Grid>
            <Grid item xs={12} className={classes.screenTitleContainer}>
              <ScreenTitle
                icon={
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -360,17 +360,20 @@ export const objectBrowserCommon = {
    height: 40,
    lineHeight: "40px",
  },
+  breadcrumbsMain: {
+    display: "flex",
+
+  },
  breadcrumbs: {
    fontSize: 12,
    color: "#969FA8",
    fontWeight: "bold",
-    marginTop: 2,
    border: "#EAEDEE 1px solid",
-    borderBottom: 0,
    height: 38,
    display: "flex",
    alignItems: "center",
    backgroundColor: "#FCFCFD",
+    marginRight: 10,
    "& a": {
      textDecoration: "none",
      color: "#969FA8",
@@ -385,6 +388,8 @@ export const objectBrowserCommon = {
  },
  additionalOptions: {
    paddingRight: "10px",
+    display: "flex",
+    alignItems: "center",
  },
  smallLabel: {
    color: "#9C9C9C",
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
@@ -26,7 +26,7 @@ import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrar
 import { Link } from "react-router-dom";
 import { encodeFileName } from "../../../common/utils";
 import { BackCaretIcon, NewPathIcon } from "../../../icons";
-import { IconButton, Tooltip } from "@mui/material";
+import { Button, IconButton, Tooltip } from "@mui/material";
 import history from "../../../history";
 import { hasPermission } from "../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../common/SecureComponent/permissions";
@@ -51,6 +51,7 @@ interface IObjectBrowser {
  rewindEnabled?: boolean;
  versionsMode: boolean;
  versionedFile: string;
+  hidePathButton?: boolean;
  existingFiles: BucketObject[];
  additionalOptions?: React.ReactNode;
  setVersionsModeEnabled: typeof setVersionsModeEnabled;
@@ -69,6 +70,7 @@ const BrowserBreadcrumbs = ({
  existingFiles,
  versionsMode,
  versionedFile,
+  hidePathButton,
  setVersionsModeEnabled,
  additionalOptions,
 }: IObjectBrowser) => {
@@ -139,7 +141,7 @@ const BrowserBreadcrumbs = ({
  };

  return (
-    <React.Fragment>
+    <div className={classes.breadcrumbsMain}>
      {createFolderOpen && (
        <CreateFolderModal
          modalOpen={createFolderOpen}
@@ -157,15 +159,21 @@ const BrowserBreadcrumbs = ({
            backgroundColor: "#fff",
            borderLeft: 0,
            borderRadius: 0,
-            width: 39,
-            height: 39,
+            width: 38,
+            height: 38,
            marginRight: "10px",
          }}
        >
          <BackCaretIcon />
        </IconButton>
+        <div className={classes.breadcrumbsList} dir="rtl">
+          {listBreadcrumbs}
+        </div>
+        <div className={classes.additionalOptions}>{additionalOptions}</div>
+      </Grid>
+      {!hidePathButton && (
        <Tooltip title={"Choose or create a new path"}>
-          <IconButton
+          <Button
            id={"new-path"}
            onClick={() => {
              setCreateFolderOpen(true);
@@ -174,25 +182,23 @@ const BrowserBreadcrumbs = ({
              rewindEnabled ||
              !hasPermission(bucketName, [IAM_SCOPES.S3_PUT_OBJECT])
            }
+            endIcon={<NewPathIcon />}
            disableTouchRipple
            disableRipple
            focusRipple={false}
            sx={{
-              padding: 0,
-              paddingLeft: "6px",
+              color: "#969FA8",
+              border: "#969FA8 1px solid",
+              whiteSpace: "nowrap",
+              minWidth: "160px",
            }}
+            variant={"outlined"}
          >
-            <NewPathIcon />
-          </IconButton>
+            Create new path
+          </Button>
        </Tooltip>
-        <div className={classes.breadcrumbsList} dir="rtl">
-          {listBreadcrumbs}
-        </div>
-        {additionalOptions && (
-          <div className={classes.additionalOptions}>{additionalOptions}</div>
-        )}
-      </Grid>
-    </React.Fragment>
+      )}
+    </div>
  );
 };