Logout on Unauthorized. Fix all UI warnings. (#35)

Author: dvaldivia

portal-ui/bindata_assetfs.go

@@ -24,7 +24,14 @@ export class API {
       .set("Authorization", `Bearer ${token}`)
       .send(data)
       .then(res => res.body)
-      .catch(err => this.onError(err));
+      .catch(err => {
+        // if we get unauthorized, kick out the user
+        if (err.status === 401) {
+          storage.removeItem("token");
+          window.location.href = "/";
+        }
+        this.onError(err);
+      });
   }
 
   onError(err: any) {
@@ -38,5 +45,6 @@ export class API {
     }
   }
 }
+
 const api = new API();
 export default api;

portal-ui/src/common/api/index.ts

@@ -35,9 +35,8 @@ import { AppState } from "../../../store";
 import { setMenuOpen } from "../../../actions";
 import { ThemedComponentProps } from "@material-ui/core/styles/withTheme";
 import NotFoundPage from "../../NotFoundPage";
-import BucketList from "./ListBuckets/ListBuckets";
-import ViewBucket from "./ViewBucket/ViewBucket";
 import ListBuckets from "./ListBuckets/ListBuckets";
+import ViewBucket from "./ViewBucket/ViewBucket";
 
 const styles = (theme: Theme) =>
   createStyles({

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

@@ -38,7 +38,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableBody from "@material-ui/core/TableBody";
 import Checkbox from "@material-ui/core/Checkbox";
 import Table from "@material-ui/core/Table";
-import { ArnList, BucketEventList } from "../types";
+import { ArnList } from "../types";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -156,26 +156,6 @@ class AddEvent extends React.Component<IAddEventProps, IAddEventState> {
       { label: "DELETE - Object Deleted", value: "delete" }
     ];
 
-    const selectionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const targetD = e.target;
-      const value = targetD.value;
-      const checked = targetD.checked;
-
-      let elements: string[] = [...selectedEvents]; // We clone the selectedGroups array
-
-      if (checked) {
-        // If the user has checked this field we need to push this to selectedGroupsList
-        elements.push(value);
-      } else {
-        // User has unchecked this field, we need to remove it from the list
-        elements = elements.filter(element => element !== value);
-      }
-
-      this.setState({ selectedEvents: selectedEvents });
-
-      return elements;
-    };
-
     const handleClick = (
       event: React.MouseEvent<unknown> | ChangeEvent<unknown>,
       name: string

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

@@ -97,7 +97,7 @@ class DeleteEvent extends React.Component<
   }
 
   render() {
-    const { classes, deleteOpen, selectedBucket } = this.props;
+    const { classes, deleteOpen } = this.props;
     const { deleteLoading, deleteError } = this.state;
 
     return (

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

@@ -26,8 +26,7 @@ import {
   InputLabel,
   LinearProgress,
   MenuItem,
-  Select,
-  TextField
+  Select
 } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../../common/api";

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

@@ -35,7 +35,6 @@ import {
 import Typography from "@material-ui/core/Typography";
 import DeleteIcon from "@material-ui/icons/Delete";
 import SetAccessPolicy from "./SetAccessPolicy";
-import DeleteBucket from "../ListBuckets/DeleteBucket";
 import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions";
 import { CreateIcon } from "../../../../icons";
 import AddEvent from "./AddEvent";
@@ -130,7 +129,7 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
 
   fetchEvents() {
     this.setState({ loading: true }, () => {
-      const { page, rowsPerPage } = this.state;
+      const { page } = this.state;
       const { match } = this.props;
       const bucketName = match.params["bucketName"];
       api
@@ -205,7 +204,6 @@ class ViewBucket extends React.Component<IViewBucketProps, IViewBucketState> {
       rowsPerPage,
       deleteOpen,
       addScreenOpen,
-      selectedBucket,
       selectedEvent
     } = this.state;
 

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

@@ -170,7 +170,6 @@ class Console extends React.Component<
   ConsoleProps & RouteComponentProps & StyledProps & ThemedComponentProps
 > {
   componentDidMount(): void {
-    //TODO: verify the session is still valid
     api
       .invoke("GET", `/api/v1/session`)
       .then(res => {

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

@@ -137,7 +137,7 @@ const Dashboard = ({ classes }: IDashboardProps) => {
       });
   };
   const prettyUsage = (usage: string | undefined) => {
-    if (usage == undefined) {
+    if (usage === undefined) {
       return "0";
     }
     return niceBytes(usage);
@@ -156,7 +156,7 @@ const Dashboard = ({ classes }: IDashboardProps) => {
     return n.toFixed(n < 10 && l > 0 ? 1 : 0) + " " + units[l];
   };
   const prettyNumber = (usage: number | undefined) => {
-    if (usage == undefined) {
+    if (usage === undefined) {
       return 0;
     }
 
@@ -165,11 +165,12 @@ const Dashboard = ({ classes }: IDashboardProps) => {
 
   return (
     <React.Fragment>
-      <Grid container xs={12}>
-        <Grid container xs={12} spacing={3} className={classes.container}>
-          <Grid container xs={12}>
+      <Grid container>
+        <Grid container spacing={3} className={classes.container}>
+          <Grid container>
             <Typography variant="h2">MinIO Console</Typography>
           </Grid>
+          {error !== "" && <Grid container>{error}</Grid>}
           <Grid item xs={12} md={4} lg={4}>
             <Paper className={fixedHeightPaper}>
               <Grid container direction="row" alignItems="center">

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

@@ -14,7 +14,7 @@
 // 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, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
   Button,
@@ -31,8 +31,6 @@ import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import api from "../../../common/api";
 import UsersSelectors from "./UsersSelectors";
-import { GroupsList } from "./types";
-import { groupsSort } from "../../../utils/sortFunctions";
 import Title from "../../../common/Title";
 
 interface IGroupProps {
@@ -87,15 +85,69 @@ const AddGroup = ({
 
   useEffect(() => {
     if (saving) {
+      const saveRecord = () => {
+        if (selectedGroup !== null) {
+          api
+            .invoke("PUT", `/api/v1/groups/${groupName}`, {
+              group: groupName,
+              members: selectedUsers,
+              status: groupEnabled
+            })
+            .then(res => {
+              isSaving(false);
+              setError("");
+              closeModalAndRefresh();
+            })
+            .catch(err => {
+              isSaving(false);
+              setError(err);
+            });
+        } else {
+          api
+            .invoke("POST", "/api/v1/groups", {
+              group: groupName,
+              members: selectedUsers
+            })
+            .then(res => {
+              isSaving(false);
+              setError("");
+              closeModalAndRefresh();
+            })
+            .catch(err => {
+              isSaving(false);
+              setError(err);
+            });
+        }
+      };
       saveRecord();
     }
-  }, [saving]);
+  }, [
+    saving,
+    groupName,
+    selectedUsers,
+    groupEnabled,
+    selectedGroup,
+    closeModalAndRefresh
+  ]);
 
   useEffect(() => {
     if (selectedGroup && loadingGroup) {
+      const fetchGroupInfo = () => {
+        api
+          .invoke("GET", `/api/v1/groups/${selectedGroup}`)
+          .then((res: MainGroupProps) => {
+            setGroupEnabled(res.status);
+            setGroupName(res.name);
+            setSelectedUsers(res.members);
+          })
+          .catch(err => {
+            setError(err);
+            isLoadingGroup(false);
+          });
+      };
       fetchGroupInfo();
     }
-  }, [loadingGroup]);
+  }, [loadingGroup, selectedGroup]);
 
   //Fetch Actions
   const setSaving = (event: React.FormEvent) => {
@@ -104,55 +156,6 @@ const AddGroup = ({
     isSaving(true);
   };
 
-  const saveRecord = () => {
-    if (selectedGroup !== null) {
-      api
-        .invoke("PUT", `/api/v1/groups/${groupName}`, {
-          group: groupName,
-          members: selectedUsers,
-          status: groupEnabled
-        })
-        .then(res => {
-          isSaving(false);
-          setError("");
-          closeModalAndRefresh();
-        })
-        .catch(err => {
-          isSaving(false);
-          setError(err);
-        });
-    } else {
-      api
-        .invoke("POST", "/api/v1/groups", {
-          group: groupName,
-          members: selectedUsers
-        })
-        .then(res => {
-          isSaving(false);
-          setError("");
-          closeModalAndRefresh();
-        })
-        .catch(err => {
-          isSaving(false);
-          setError(err);
-        });
-    }
-  };
-
-  const fetchGroupInfo = () => {
-    api
-      .invoke("GET", `/api/v1/groups/${selectedGroup}`)
-      .then((res: MainGroupProps) => {
-        setGroupEnabled(res.status);
-        setGroupName(res.name);
-        setSelectedUsers(res.members);
-      })
-      .catch(err => {
-        setError(err);
-        isLoadingGroup(false);
-      });
-  };
-
   return (
     <Dialog
       open={open}