Select User & Groups Policy modal updates (#2284)

Select User Policy modal updates

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

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

@@ -44,6 +44,7 @@ import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { setSelectedPolicies } from "../Users/AddUsersSlice";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -350,6 +351,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           closeModalAndRefresh={() => {
             setPolicyOpen(false);
             fetchGroupInfo();
+            dispatch(setSelectedPolicies([]));
           }}
         />
       ) : null}

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

@@ -39,6 +39,7 @@ import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 
 import { useSelector } from "react-redux";
+import { setSelectedPolicies } from "../Users/AddUsersSlice";
 
 interface ISetPolicyProps {
   classes: any;
@@ -114,6 +115,7 @@ const SetPolicy = ({
           const groupPolicy: String = get(res, "policy", "");
           setActualPolicy(groupPolicy.split(","));
           setSelectedPolicy(groupPolicy.split(","));
+          dispatch(setSelectedPolicies(groupPolicy.split(",")));
         })
         .catch((err: ErrorResponseHandler) => {
           dispatch(setModalErrorSnackMessage(err));
@@ -124,6 +126,7 @@ const SetPolicy = ({
 
   const resetSelection = () => {
     setSelectedPolicy(actualPolicy);
+    dispatch(setSelectedPolicies(actualPolicy));
   };
 
   useEffect(() => {
@@ -136,6 +139,7 @@ const SetPolicy = ({
       const userPolicy: string[] = get(selectedUser, "policy", []);
       setActualPolicy(userPolicy);
       setSelectedPolicy(userPolicy);
+      dispatch(setSelectedPolicies(userPolicy));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, selectedGroups?.length, selectedUser]);

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

@@ -30,6 +30,7 @@ import PolicySelectors from "../Policies/PolicySelectors";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
+import { setSelectedPolicies } from "./AddUsersSlice";
 
 interface ISetUserPoliciesProps {
   classes: any;
@@ -59,7 +60,6 @@ const SetUserPolicies = ({
   //Local States
   const [loading, setLoading] = useState<boolean>(false);
   const [actualPolicy, setActualPolicy] = useState<string[]>([]);
-  const [selectedPolicy, setSelectedPolicy] = useState<string[]>([]);
 
   const statePolicies = useSelector(
     (state: AppState) => state.createUser.selectedPolicies
@@ -79,6 +79,7 @@ const SetUserPolicies = ({
       })
       .then(() => {
         setLoading(false);
+        dispatch(setSelectedPolicies([]));
         closeModalAndRefresh();
       })
       .catch((err: ErrorResponseHandler) => {
@@ -88,17 +89,16 @@ const SetUserPolicies = ({
   };
 
   const resetSelection = () => {
-    setSelectedPolicy(actualPolicy);
+    dispatch(setSelectedPolicies(actualPolicy));
   };
 
   useEffect(() => {
     if (open) {
-      const userPolicy: string[] = [];
-      for (let pol of currentPolicies) {
-        userPolicy.push(pol.policy);
-      }
+      const userPolicy: string[] = currentPolicies.map((pol) => {
+        return pol.policy;
+      });
       setActualPolicy(userPolicy);
-      setSelectedPolicy(userPolicy);
+      dispatch(setSelectedPolicies(userPolicy));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, selectedUser]);
@@ -113,7 +113,7 @@ const SetUserPolicies = ({
     >
       <Grid container>
         <Grid item xs={12}>
-          <PolicySelectors selectedPolicy={selectedPolicy} />
+          <PolicySelectors selectedPolicy={statePolicies} />
         </Grid>
       </Grid>
       <Grid item xs={12} className={classes.buttonContainer}>

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

@@ -61,6 +61,7 @@ import {
 } from "../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../common/SecureComponent";
 import { useAppDispatch } from "../../../store";
+import { policyDetailsSort } from "../../../utils/sortFunctions";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -134,19 +135,24 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
         setAddLoading(false);
         const memberOf = res.memberOf || [];
         setSelectedGroups(memberOf);
-        let currentGroups: IGroupItem[] = [];
-        for (let group of memberOf) {
-          currentGroups.push({
+
+        const currentGroups: IGroupItem[] = memberOf.map((group: string) => {
+          return {
             group: group,
-          });
-        }
+          };
+        });
+
         setCurrentGroups(currentGroups);
-        let currentPolicies: IPolicyItem[] = [];
-        for (let policy of res.policy) {
-          currentPolicies.push({
-            policy: policy,
-          });
-        }
+        const currentPolicies: IPolicyItem[] = res.policy.map(
+          (policy: string) => {
+            return {
+              policy: policy,
+            };
+          }
+        );
+
+        currentPolicies.sort(policyDetailsSort);
+
         setCurrentPolicies(currentPolicies);
         setEnabled(res.status === "enabled");
         setHasPolicy(res.hasPolicy);

portal-ui/src/utils/sortFunctions.ts

@@ -22,6 +22,10 @@ interface policyInterface {
   name: string;
 }
 
+interface policyDetailsInterface {
+  policy: string;
+}
+
 export const usersSort = (a: userInterface, b: userInterface) => {
   if (a.accessKey > b.accessKey) {
     return 1;
@@ -54,3 +58,17 @@ export const stringSort = (a: string, b: string) => {
   // a must be equal to b
   return 0;
 };
+
+export const policyDetailsSort = (
+  a: policyDetailsInterface,
+  b: policyDetailsInterface
+) => {
+  if (a.policy > b.policy) {
+    return 1;
+  }
+  if (a.policy < b.policy) {
+    return -1;
+  }
+  // a must be equal to b
+  return 0;
+};