Fixes to Multiple IDP support in console (#2392)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

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

@@ -15,21 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect } from "react";
-
 import { useNavigate } from "react-router-dom";
 import {
   Box,
   InputAdornment,
   LinearProgress,
-  Select,
   MenuItem,
+  Select,
 } from "@mui/material";
 import { Button } from "mds";
 import { Theme, useTheme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import makeStyles from "@mui/styles/makeStyles";
 import Grid from "@mui/material/Grid";
-import { loginStrategyType } from "./types";
+import { loginStrategyType, redirectRule } from "./types";
 import LogoutIcon from "../../icons/LogoutIcon";
 import RefreshIcon from "../../icons/RefreshIcon";
 import MainError from "../Console/Common/MainError/MainError";
@@ -58,6 +57,7 @@ import { resetForm, setJwt } from "./loginSlice";
 import StrategyForm from "./StrategyForm";
 import { LoginField } from "./LoginField";
 import DirectPVLogo from "../../icons/DirectPVLogo";
+import { redirectRules } from "../../utils/sortFunctions";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -344,7 +344,19 @@ const Login = () => {
     }
     case loginStrategyType.redirect:
     case loginStrategyType.redirectServiceAccount: {
-      if (loginStrategy.redirect.length > 1) {
+      let redirectItems: redirectRule[] = [];
+
+      if (
+        loginStrategy.redirectRules &&
+        loginStrategy.redirectRules.length > 0
+      ) {
+        redirectItems = [...loginStrategy.redirectRules].sort(redirectRules);
+      }
+
+      if (
+        loginStrategy.redirectRules &&
+        loginStrategy.redirectRules.length > 1
+      ) {
         loginComponent = (
           <React.Fragment>
             <div className={classes.loginSsoText}>Login with SSO:</div>
@@ -361,21 +373,21 @@ const Login = () => {
               className={classes.ssoSelect}
               renderValue={() => "Select Provider"}
             >
-              {loginStrategy.redirect.map((r, idx) => (
+              {redirectItems.map((r, idx) => (
                 <MenuItem
-                  value={r}
+                  value={r.redirect}
                   key={`sso-login-option-${idx}`}
                   className={classes.ssoMenuItem}
                   divider={true}
                 >
                   <LogoutIcon className={classes.ssoLoginIcon} />
-                  {loginStrategy.displayNames[idx]}
+                  {r.displayName}
                 </MenuItem>
               ))}
             </Select>
           </React.Fragment>
         );
-      } else if (loginStrategy.redirect.length === 1) {
+      } else if (redirectItems.length === 1) {
         loginComponent = (
           <div className={clsx(classes.submit, classes.ssoSubmit)}>
             <Button
@@ -383,12 +395,11 @@ const Login = () => {
               variant="callAction"
               id="sso-login"
               label={
-                loginStrategy.displayNames &&
-                loginStrategy.displayNames.length > 0
-                  ? loginStrategy.displayNames[0]
-                  : "Login with SSO"
+                redirectItems[0].displayName === ""
+                  ? "Login with SSO"
+                  : redirectItems[0].displayName
               }
-              onClick={() => (window.location.href = loginStrategy.redirect[0])}
+              onClick={() => (window.location.href = redirectItems[0].redirect)}
               fullWidth
             />
           </div>

portal-ui/src/screens/LoginPage/loginSlice.ts

@@ -50,8 +50,7 @@ const initialState: LoginState = {
   jwt: "",
   loginStrategy: {
     loginStrategy: loginStrategyType.unknown,
-    redirect: [],
-    displayNames: [],
+    redirectRules: [],
   },
   loginSending: false,
   loadingFetchConfiguration: true,

portal-ui/src/screens/LoginPage/types.ts

@@ -16,11 +16,15 @@
 
 export interface ILoginDetails {
   loginStrategy: loginStrategyType;
-  redirect: string[];
-  displayNames: string[];
+  redirectRules: redirectRule[];
   isDirectPV?: boolean;
 }
 
+export interface redirectRule {
+  redirect: string;
+  displayName: string;
+}
+
 export enum loginStrategyType {
   unknown = "unknown",
   form = "form",

portal-ui/src/utils/sortFunctions.ts

@@ -14,6 +14,8 @@
 // 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 { redirectRule } from "../screens/LoginPage/types";
+
 interface userInterface {
   accessKey: string;
 }
@@ -72,3 +74,13 @@ export const policyDetailsSort = (
   // a must be equal to b
   return 0;
 };
+
+export const redirectRules = (a: redirectRule, b: redirectRule) => {
+  if (a.displayName > b.displayName) {
+    return 1;
+  }
+  if (a.displayName < b.displayName) {
+    return -1;
+  }
+  return 0;
+};