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 <[email protected]>

Author: bexsoft

portal-ui/package-lock.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",

portal-ui/package.json

@@ -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;

portal-ui/src/icons/CopyIcon.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;

portal-ui/src/icons/DeleteIcon.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;

portal-ui/src/icons/DownloadIcon.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;

portal-ui/src/icons/ShareIcon.tsx

@@ -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";

portal-ui/src/icons/index.ts

@@ -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 && (

portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.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 => {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.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));