Updated console to use React 17

Author: Benjamin Perez

portal-ui/bindata_assetfs.go

@@ -12,7 +12,7 @@
     "@types/jest": "24.0.23",
     "@types/lodash": "^4.14.149",
     "@types/node": "12.12.8",
-    "@types/react": "16.9.11",
+    "@types/react": "17.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "16.9.4",
     "@types/react-redux": "^7.1.5",
@@ -30,14 +30,14 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.19",
     "moment": "^2.24.0",
-    "react": "^16.13.1",
+    "react": "17.0.0",
     "react-app-rewire-hot-loader": "^2.0.1",
     "react-app-rewired": "^2.1.6",
     "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-dom": "17.0.0",
     "react-hot-loader": "^4.13.0",
     "react-moment": "^0.9.7",
     "react-redux": "^7.1.3",
@@ -50,7 +50,6 @@
     "redux-thunk": "^2.3.0",
     "superagent": "^5.1.0",
     "typeface-roboto": "^0.0.75",
-    "typescript": "3.6.4",
     "use-debounce": "^5.0.1",
     "websocket": "^1.0.31"
   },
@@ -77,6 +76,7 @@
   },
   "proxy": "http://localhost:9090/",
   "devDependencies": {
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "typescript": "^4.1.2"
   }
 }

portal-ui/package-lock.json

@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react";
 import Typography from "@material-ui/core/Typography";
 import Link from "@material-ui/core/Link";
 
 export default function Copyright() {
-    return (
-        <Typography variant="body2" color="textSecondary" align="center">
-        {'Copyright © '}
-        <Link color="inherit" href="https://material-ui.com/">
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" href="https://material-ui.com/">
         MinIO
-        </Link>{' '}
-    {new Date().getFullYear()}
-    {'.'}
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
     </Typography>
-);
+  );
 }

portal-ui/package.json

@@ -19,7 +19,7 @@ import {
   createStyles,
   makeStyles,
   Theme,
-  useTheme
+  useTheme,
 } from "@material-ui/core/styles";
 import React from "react";
 import { IconButton } from "@material-ui/core";
@@ -31,8 +31,8 @@ const useStyles1 = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       flexShrink: 0,
-      marginLeft: theme.spacing(2.5)
-    }
+      marginLeft: theme.spacing(2.5),
+    },
   })
 );
 

portal-ui/src/common/Copyright.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
 
 export default function Title(props: React.Props<any>) {
   return (

portal-ui/src/common/MinTablePaginationActions.tsx

@@ -15,20 +15,25 @@
 // 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 PermissionIcon extends React.Component {
-    render() {
-        return (<SvgIcon>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16">
-                <title>ic_permissions</title>
-                <g id="Layer_2" data-name="Layer 2">
-                    <g id="Layer_1-2" data-name="Layer 1">
-                        <polygon className="cls-1" points="14 16 7.035 12.13 0 16 0 0 14 0 14 16"/>
-                    </g>
-                </g>
-            </svg>
-        </SvgIcon>)
-    }
+  render() {
+    return (
+      <SvgIcon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16">
+          <title>ic_permissions</title>
+          <g id="Layer_2" data-name="Layer 2">
+            <g id="Layer_1-2" data-name="Layer 1">
+              <polygon
+                className="cls-1"
+                points="14 16 7.035 12.13 0 16 0 0 14 0 14 16"
+              />
+            </g>
+          </g>
+        </svg>
+      </SvgIcon>
+    );
+  }
 }
 
 export default PermissionIcon;

portal-ui/src/common/Title.tsx

@@ -15,113 +15,33 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import {
-  createStyles,
-  StyledProps,
-  Theme,
-  withStyles,
-} from "@material-ui/core/styles";
+import { createStyles, Theme } from "@material-ui/core/styles";
 
 import history from "../../../history";
-import {
-  Route,
-  RouteComponentProps,
-  Router,
-  Switch,
-  withRouter,
-} from "react-router-dom";
+import { Route, Router, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 import { AppState } from "../../../store";
 import { setMenuOpen } from "../../../actions";
-import { ThemedComponentProps } from "@material-ui/core/styles/withTheme";
 import NotFoundPage from "../../NotFoundPage";
 import ListBuckets from "./ListBuckets/ListBuckets";
 import ViewBucket from "./ViewBucket/ViewBucket";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      display: "flex",
-    },
-    toolbar: {
-      background: theme.palette.background.default,
-      color: "black",
-      paddingRight: 24, // keep right padding when drawer closed
-    },
-    toolbarIcon: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: "0 8px",
-      ...theme.mixins.toolbar,
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-
-    menuButton: {
-      marginRight: 36,
-    },
-    menuButtonHidden: {
-      display: "none",
-    },
-    title: {
-      flexGrow: 1,
-    },
-    appBarSpacer: {
-      height: "5px",
-    },
-    content: {
-      flexGrow: 1,
-      height: "100vh",
-      overflow: "auto",
-    },
-    container: {
-      paddingTop: theme.spacing(4),
-      paddingBottom: theme.spacing(4),
-    },
-    paper: {
-      padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    fixedHeight: {
-      minHeight: 240,
-    },
-  });
-
 const mapState = (state: AppState) => ({
   open: state.system.sidebarOpen,
 });
 
 const connector = connect(mapState, { setMenuOpen });
 
-interface BucketsProps {
-  open: boolean;
-  title: string;
-  classes: any;
-  setMenuOpen: typeof setMenuOpen;
-}
-
-class Buckets extends React.Component<
-  BucketsProps & RouteComponentProps & StyledProps & ThemedComponentProps
-> {
-  render() {
-    return (
-      <Router history={history}>
-        <Switch>
-          <Route path="/buckets/:bucketName" component={ViewBucket} />
-          <Route path="/" component={ListBuckets} />
-          <Route component={NotFoundPage} />
-        </Switch>
-      </Router>
-    );
-  }
-}
-
-export default withRouter(connector(withStyles(styles)(Buckets)));
+const Buckets = () => {
+  return (
+    <Router history={history}>
+      <Switch>
+        <Route path="/buckets/:bucketName" component={ViewBucket} />
+        <Route path="/" component={ListBuckets} />
+        <Route component={NotFoundPage} />
+      </Switch>
+    </Router>
+  );
+};
+
+export default withRouter(connector(Buckets));

portal-ui/src/icons/PermissionIcon.tsx

@@ -19,7 +19,7 @@ interface IDeleteTagModal {
   currentTags: any;
   bucketName: string;
   versionId: string;
-  selectedTag: [string, string];
+  selectedTag: string[];
   onCloseAndUpdate: (refresh: boolean) => void;
   selectedObject: string;
   classes: any;

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

@@ -160,7 +160,7 @@ const ObjectDetails = ({
   const [retentionModalOpen, setRetentionModalOpen] = useState<boolean>(false);
   const [tagModalOpen, setTagModalOpen] = useState<boolean>(false);
   const [deleteTagModalOpen, setDeleteTagModalOpen] = useState<boolean>(false);
-  const [selectedTag, setSelectedTag] = useState<[string, string]>(["", ""]);
+  const [selectedTag, setSelectedTag] = useState<string[]>(["", ""]);
   const [legalholdOpen, setLegalholdOpen] = useState<boolean>(false);
   const [actualInfo, setActualInfo] = useState<IFileInfo>(emptyFile);
   const [versions, setVersions] = useState<IFileInfo[]>([]);
@@ -431,25 +431,26 @@ const ObjectDetails = ({
           </Grid>
           <Grid item xs={12} className={classes.tagsContainer}>
             <div className={classes.tagText}>Tags:</div>
-            {tagKeys.map((tagKey, index) => {
-              const tag = get(actualInfo, `tags.${tagKey}`, "");
-              if (tag !== "") {
-                return (
-                  <Chip
-                    key={`chip-${index}`}
-                    className={classes.tag}
-                    size="small"
-                    label={`${tagKey} : ${tag}`}
-                    color="primary"
-                    deleteIcon={<CloseIcon />}
-                    onDelete={() => {
-                      deleteTag(tagKey, tag);
-                    }}
-                  />
-                );
-              }
-              return null;
-            })}
+            {tagKeys &&
+              tagKeys.map((tagKey, index) => {
+                const tag = get(actualInfo, `tags.${tagKey}`, "");
+                if (tag !== "") {
+                  return (
+                    <Chip
+                      key={`chip-${index}`}
+                      className={classes.tag}
+                      size="small"
+                      label={`${tagKey} : ${tag}`}
+                      color="primary"
+                      deleteIcon={<CloseIcon />}
+                      onDelete={() => {
+                        deleteTag(tagKey, tag);
+                      }}
+                    />
+                  );
+                }
+                return null;
+              })}
             <Chip
               className={classes.tag}
               icon={<AddIcon />}