Adds a logout view which enables minio to logout when using OIDC (#2281)

* added logout view
* Fixed issues that arose after merging with master
* removed unused navigate and merged with master
* changes based on review feedback
Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/MainRouter.tsx

@@ -22,6 +22,7 @@ import AppConsole from "./screens/Console/ConsoleKBar";
 import { baseUrl } from "./history";
 
 const Login = React.lazy(() => import("./screens/LoginPage/LoginPage"));
+const Logout = React.lazy(() => import("./screens/LogoutPage/LogoutPage"));
 const LoginCallback = React.lazy(
   () => import("./screens/LoginPage/LoginCallback")
 );
@@ -38,6 +39,7 @@ const MainRouter = () => {
             </Suspense>
           }
         />
+        <Route path="/logout" element={<Logout />} />
         <Route
           path="/login"
           element={

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

@@ -34,12 +34,10 @@ import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 
 const ConsoleMenuList = ({
   menuItems,
-  onLogoutClick,
   isOpen,
 }: {
   menuItems: any[];
   isOpen: boolean;
-  onLogoutClick: () => void;
 }) => {
   const stateClsName = isOpen ? "wide" : "mini";
   const { pathname = "" } = useLocation();
@@ -136,7 +134,8 @@ const ConsoleMenuList = ({
       >
         <ListItem
           button
-          onClick={onLogoutClick}
+          component="a"
+          href="/logout"
           disableRipple
           sx={{
             ...menuItemContainerStyles,

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

@@ -16,7 +16,6 @@
 
 import React from "react";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
 import { Drawer } from "@mui/material";
 import withStyles from "@mui/styles/withStyles";
 import { Theme } from "@mui/material/styles";
@@ -24,20 +23,11 @@ import createStyles from "@mui/styles/createStyles";
 import clsx from "clsx";
 import { AppState, useAppDispatch } from "../../../store";
 
-import { ErrorResponseHandler } from "../../../common/types";
-import { clearSession } from "../../../common/utils";
-import api from "../../../common/api";
-
 import MenuToggle from "./MenuToggle";
 import ConsoleMenuList from "./ConsoleMenuList";
 import { validRoutes } from "../valid-routes";
-import {
-  menuOpen,
-  selDirectPVMode,
-  selOpMode,
-  userLogged,
-} from "../../../systemSlice";
-import { resetSession, selFeatures } from "../consoleSlice";
+import { menuOpen, selDirectPVMode, selOpMode } from "../../../systemSlice";
+import { selFeatures } from "../consoleSlice";
 
 const drawerWidth = 250;
 
@@ -94,8 +84,6 @@ interface IMenuProps {
 
 const Menu = ({ classes }: IMenuProps) => {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-
   const features = useSelector(selFeatures);
 
   const sidebarOpen = useSelector(
@@ -104,25 +92,6 @@ const Menu = ({ classes }: IMenuProps) => {
   const operatorMode = useSelector(selOpMode);
   const directPVMode = useSelector(selDirectPVMode);
 
-  const logout = () => {
-    const deleteSession = () => {
-      clearSession();
-      dispatch(userLogged(false));
-      localStorage.setItem("userLoggedIn", "");
-      localStorage.setItem("redirect-path", "");
-      dispatch(resetSession());
-      navigate(`login`);
-    };
-    api
-      .invoke("POST", `/api/v1/logout`)
-      .then(() => {
-        deleteSession();
-      })
-      .catch((err: ErrorResponseHandler) => {
-        console.log(err);
-        deleteSession();
-      });
-  };
   const allowedMenuItems = validRoutes(features, operatorMode, directPVMode);
 
   return (
@@ -147,11 +116,7 @@ const Menu = ({ classes }: IMenuProps) => {
         isOpen={sidebarOpen}
       />
 
-      <ConsoleMenuList
-        menuItems={allowedMenuItems}
-        isOpen={sidebarOpen}
-        onLogoutClick={logout}
-      />
+      <ConsoleMenuList menuItems={allowedMenuItems} isOpen={sidebarOpen} />
     </Drawer>
   );
 };

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

@@ -0,0 +1,52 @@
+// 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 React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppDispatch } from "../../store";
+import { ErrorResponseHandler } from "../../common/types";
+import { clearSession } from "../../common/utils";
+import api from "../../common/api";
+import { userLogged } from "../../systemSlice";
+import { resetSession } from "../Console/consoleSlice";
+
+const LogoutPage = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const logout = () => {
+    const deleteSession = () => {
+      clearSession();
+      dispatch(userLogged(false));
+      localStorage.setItem("userLoggedIn", "");
+      localStorage.setItem("redirect-path", "");
+      dispatch(resetSession());
+      navigate(`login`);
+    };
+    api
+      .invoke("POST", `/api/v1/logout`)
+      .then(() => {
+        deleteSession();
+      })
+      .catch((err: ErrorResponseHandler) => {
+        console.log(err);
+        deleteSession();
+      });
+  };
+  logout();
+  return <></>;
+};
+
+export default LogoutPage;