Added navigation support to object versions (#1626)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Feb 28, 2022 · 3395d1c · 3395d1c
1 parent e52fb7d
commit 3395d1c
Show file tree

Hide file tree

Showing 19 changed files with 1,429 additions and 400 deletions.
diff --git a/portal-ui/src/icons/NewPathIcon.tsx b/portal-ui/src/icons/NewPathIcon.tsx
@@ -0,0 +1,53 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 * as React from "react";
+import { SVGProps } from "react";
+
+const NewPathIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g>
+      <path
+        d="M23.4,121.5c-11.5,0-21.4,9.8-21.4,21.2c0.2,11.8,9.7,21.2,21.4,21.4
+				c11.4,0,21.2-9.9,21.2-21.4C44.3,131.1,35,121.7,23.4,121.5"
+      />
+      <path
+        d="M23.4,175.4c-11.5,0-21.4,9.8-21.4,21.2c0.2,11.8,9.7,21.2,21.4,21.4
+				c11.4,0,21.2-9.9,21.2-21.4C44.3,184.9,35,175.6,23.4,175.4"
+      />
+      <path
+        d="M158.6,40.2h-12.2c-4.3,0-8.3,2.5-10.2,6.4l-76.6,157c-2.7,5.6-0.4,12.4,5.2,15.2
+				c1.6,0.8,3.3,1.2,5,1.2H82c4.3,0,8.3-2.5,10.2-6.4l76.6-157c2.7-5.6,0.4-12.4-5.2-15.2C162,40.6,160.3,40.2,158.6,40.2"
+      />
+      <path
+        d="M205,121.1c-1.2,0-2.4,0.1-3.6,0.1L233,56.5c2.7-5.6,0.4-12.4-5.2-15.2
+				c-1.6-0.8-3.3-1.2-5-1.2h-12.2c-4.3,0-8.3,2.5-10.2,6.4l-76.6,157c-2.7,5.6-0.4,12.4,5.2,15.2c1.6,0.8,3.3,1.2,5,1.2h12.2
+				c4.3,0,8.3-2.5,10.2-6.4L165,196c14.8,22.1,44.7,28.1,66.8,13.3s28.1-44.7,13.3-66.8C236.2,129.1,221.1,121.1,205,121.1
+				 M205.3,207.3c-21,0-38.1-17-38.1-38.1c0-21,17-38.1,38.1-38.1c21,0,38.1,17,38.1,38.1c0,0,0,0,0,0
+				C243.4,190.3,226.3,207.3,205.3,207.3"
+      />
+      <path d="M211.3,151.3h-11.9v11.9h-11.9v11.9h11.9v11.9h11.9v-11.9h11.9v-11.9h-11.9V151.3z" />
+    </g>
+  </svg>
+);
+
+export default NewPathIcon;
diff --git a/portal-ui/src/icons/VersionsIcon.tsx b/portal-ui/src/icons/VersionsIcon.tsx
@@ -0,0 +1,39 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 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 * as React from "react";
+import { SVGProps } from "react";
+
+const VersionsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      id="Path_7269"
+      d="M147.85,227.97c-2.7,0-4.89-2.19-4.89-4.89l0,0V32.93c0-2.7,2.19-4.89,4.89-4.89c0,0,0,0,0,0
+	h98.98c2.7,0,4.89,2.19,4.89,4.89c0,0,0,0,0,0v190.14c0,2.7-2.19,4.89-4.89,4.89l0,0H147.85z M71.37,205.43
+	c-2.7,0-4.89-2.19-4.89-4.89l0,0V55.48c-0.01-2.7,2.17-4.9,4.87-4.91c0.01,0,0.01,0,0.02,0h56.4c2.7,0,4.89,2.19,4.89,4.89l0,0
+	v145.05c0,2.7-2.19,4.89-4.89,4.89c0,0,0,0,0,0L71.37,205.43z M9.17,182.88c-2.7,0-4.88-2.18-4.89-4.87V78.02
+	c0-2.7,2.19-4.89,4.89-4.89h42.15c2.7,0,4.89,2.19,4.89,4.89V178c0,2.7-2.19,4.89-4.89,4.89l0,0L9.17,182.88z"
+    />
+  </svg>
+);
+
+export default VersionsIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
@@ -167,3 +167,5 @@ export { default as FileVideoIcon } from "./FileVideoIcon";
 export { default as ChangePasswordIcon } from "./ChangePasswordIcon";
 export { default as LockIcon } from "./LockIcon";
 export { default as BackCaretIcon } from "./BackCaretIcon";
+export { default as VersionsIcon } from "./VersionsIcon";
+export { default as NewPathIcon } from "./NewPathIcon";
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -19,16 +19,15 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Link } from "react-router-dom";
 import { Grid, IconButton, Tooltip } from "@mui/material";
 import get from "lodash/get";
 import { AppState } from "../../../../store";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 import {
-  setFileModeEnabled,
   setSearchObjects,
+  setVersionsModeEnabled,
+  setSearchVersions,
 } from "../../ObjectBrowser/actions";
-import ObjectDetails from "../ListBuckets/Objects/ObjectDetails/ObjectDetails";
 import ListObjects from "../ListBuckets/Objects/ListObjects/ListObjects";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import SettingsIcon from "../../../../icons/SettingsIcon";
@@ -44,15 +43,18 @@ import SearchBox from "../../Common/SearchBox";
 import BackLink from "../../../../common/BackLink";
 
 interface IBrowserHandlerProps {
-  fileMode: boolean;
+  versionsMode: boolean;
   match: any;
   history: any;
   classes: any;
-  setFileModeEnabled: typeof setFileModeEnabled;
+  setVersionsModeEnabled: typeof setVersionsModeEnabled;
   setErrorSnackMessage: typeof setErrorSnackMessage;
   bucketInfo: BucketInfo | null;
   searchObjects: string;
+  versionedFile: string;
+  searchVersions: string;
   setSearchObjects: typeof setSearchObjects;
+  setSearchVersions: typeof setSearchVersions;
 }
 
 const styles = (theme: Theme) =>
@@ -71,20 +73,23 @@ const styles = (theme: Theme) =>
   });
 
 const BrowserHandler = ({
-  fileMode,
+  versionsMode,
   match,
   history,
   classes,
-  setFileModeEnabled,
+  setVersionsModeEnabled,
   searchObjects,
   setSearchObjects,
+  setSearchVersions,
+  versionedFile,
+  searchVersions,
 }: IBrowserHandlerProps) => {
   const bucketName = match.params["bucketName"];
   const internalPaths = get(match.params, "subpaths", "");
 
   useEffect(() => {
-    setFileModeEnabled(false);
-  }, [internalPaths, setFileModeEnabled]);
+    setVersionsModeEnabled(false);
+  }, [internalPaths, setVersionsModeEnabled]);
 
   const openBucketConfiguration = () => {
     history.push(`/buckets/${bucketName}/admin`);
@@ -94,24 +99,11 @@ const BrowserHandler = ({
     <Fragment>
       <PageHeader
         label={
-          <Fragment>
-            {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>
+          <BackLink
+            label={"Back to Buckets"}
+            to={"/buckets"}
+            className={classes.backToBuckets}
+          />
         }
         actions={
           <SecureComponent
@@ -134,40 +126,55 @@ const BrowserHandler = ({
         }
         middleComponent={
           <Fragment>
-            {!fileMode && (
+            {!versionsMode ? (
               <SecureComponent
                 scopes={[IAM_SCOPES.S3_LIST_BUCKET]}
                 resource={bucketName}
                 errorProps={{ disabled: true }}
               >
                 <SearchBox
-                  placeholder={"Start typing to filter objects in bucket"}
+                  placeholder={"Start typing to filter objects in the bucket"}
                   onChange={(value) => {
                     setSearchObjects(value);
                   }}
                   value={searchObjects}
                 />
               </SecureComponent>
+            ) : (
+              <Fragment>
+                <SearchBox
+                  placeholder={`Start typing to filter versions of ${versionedFile}`}
+                  onChange={(value) => {
+                    setSearchVersions(value);
+                  }}
+                  value={searchVersions}
+                />
+              </Fragment>
             )}
           </Fragment>
         }
       />
-      <Grid>{fileMode ? <ObjectDetails /> : <ListObjects />}</Grid>
+      <Grid>
+        <ListObjects />
+      </Grid>
     </Fragment>
   );
 };
 
 const mapStateToProps = ({ objectBrowser, buckets }: AppState) => ({
-  fileMode: get(objectBrowser, "fileMode", false),
+  versionsMode: get(objectBrowser, "versionsMode", false),
   bucketToRewind: get(objectBrowser, "rewind.bucketToRewind", ""),
   bucketInfo: buckets.bucketDetails.bucketInfo,
   searchObjects: objectBrowser.searchObjects,
+  versionedFile: objectBrowser.versionedFile,
+  searchVersions: objectBrowser.searchVersions,
 });
 
 const mapDispatchToProps = {
-  setFileModeEnabled,
+  setVersionsModeEnabled,
   setErrorSnackMessage,
   setSearchObjects,
+  setSearchVersions,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
@@ -26,7 +26,6 @@ import {
   modalStyleUtils,
 } from "../../../../Common/FormComponents/common/styleLibrary";
 import { connect } from "react-redux";
-import { setFileModeEnabled } from "../../../../ObjectBrowser/actions";
 import history from "../../../../../../history";
 import { decodeFileName, encodeFileName } from "../../../../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../../../../actions";
@@ -38,7 +37,6 @@ interface ICreateFolder {
   modalOpen: boolean;
   bucketName: string;
   folderName: string;
-  setFileModeEnabled: typeof setFileModeEnabled;
   setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
   onClose: () => any;
   existingFiles: BucketObject[];
@@ -55,7 +53,6 @@ const CreateFolderModal = ({
   folderName,
   bucketName,
   onClose,
-  setFileModeEnabled,
   setModalErrorSnackMessage,
   classes,
   existingFiles,
@@ -90,7 +87,6 @@ const CreateFolderModal = ({
       `${folderPath}${pathUrl}`
     )}/`;
     history.push(newPath);
-    setFileModeEnabled(false);
     onClose();
   };
 
@@ -162,7 +158,6 @@ const CreateFolderModal = ({
 };
 
 const mapDispatchToProps = {
-  setFileModeEnabled,
   setModalErrorSnackMessage,
 };
 

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx
@@ -46,7 +46,8 @@ const styles = (theme: Theme) =>
       opacity: 0,
       marginLeft: -1,
       "&.open": {
-        width: 400,
+        width: 300,
+        minWidth: 300,
         borderTopWidth: 1,
         borderBottomWidth: 1,
         borderRightWidth: 1,