Merge branch 'origin/ui/TRA-4204_user_managment' of github.com:up9inc/mizu into feature/ui/TRA-4192_workspace_management

# Conflicts:
#	ui/src/components/Modals/AddUserModal/AddUserModal.sass

ui/src/components/Modals/AddUserModal/AddUserModal.sass

@@ -1,5 +1,20 @@
-.user__email
-    width : 301px
+@import '../../../variables.module'
 
+<<<<<<< HEAD
 .user__role
     width : 186px
+=======
+.user
+    &__details
+        display: flex;
+        align-content: center;
+        align-items: center;
+        justify-content: space-between;
+
+
+        & .user__email
+            width : 40%
+
+        & .user__role
+            width : 40%
+>>>>>>> 1cfc896c105820df2713ea2c2d4e489f4c5c8731

ui/src/components/Modals/AddUserModal/AddUserModal.tsx

@@ -71,30 +71,35 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
 
   return (<>
     <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User'>
-      <h3>DETAILS</h3>
-      <div>
+      <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
+      <div className='comfirmation-modal__sub-section'>
+      <div className='user__details'>
         <input type="text" value={userDataModel?.email ?? ""} className={classes.textField + " user__email"} placeholder={"User Email"} 
                onChange={(e) => {}}></input>
-        <TextField select size='small' onChange={userRoleChange} value={userDataModel.role}>
+        {/* <TextField select size='small' onChange={userRoleChange} value={userDataModel.role} fullWidth variant="filled">
           {roles.map((role) => (
                 <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
               ))}
-        </TextField>
-        {/* <FormControl fullWidth size="small">
-          <InputLabel>Select Role</InputLabel>
-          <Select className="user__role" label="Select Role" placeholder='Select Role' onChange={userRoleChange} value={userDataModel.role}>
-
-            {roles.map((role) => (
+        </TextField> */}
+        <FormControl size='small' variant="outlined" className='user__role'>
+        <InputLabel>User Role</InputLabel>
+        <Select value={userDataModel.role} onChange={userRoleChange} >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          {roles.map((role) => (
                 <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
               ))}
-          </Select>
-        </FormControl> */}
+        </Select>
+      </FormControl>
       </div>
-      <h3>WORKSPACE ACCESS </h3>     
+      </div>
+
+      <h3 className='comfirmation-modal__sub-section-header'>WORKSPACE ACCESS </h3>     
       <div className="namespacesSettingsContainer">
         <div style={{margin: "10px 0"}}>
             <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}

ui/src/components/UI/Modals/ConfirmationModal.sass

@@ -27,3 +27,29 @@
 .confirmationActions
   padding: 20px
   text-align: right
+
+.comfirmation-modal
+  &__sub-section
+    margin-bottom: 35px;
+  
+  &__sub-section-header
+    position: relative;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 15px;
+    color: $font-color;
+
+  &__sub-section-header:after
+    content: "";
+    border: 1px solid #E9EBF8;
+    transform: rotate(180deg);
+    position: absolute;
+    left: 0px;
+    right: -100%;
+    top: 100%;
+    bottom: 0%;
+    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: fill-available;

ui/src/components/UI/Modals/ConfirmationModal.tsx

@@ -31,7 +31,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
     const classes = useCommonStyles();
     const confirmStyle = {width: 100, marginLeft: 20}                                                                  
     return (
-        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={`${className}`}>
+        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={`${className} comfirmation-modal`}>
             <div className="confirmationHeader">
                 <div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div>
                 <img src={iconClose} onClick={onClose} alt="close"/>

ui/src/components/UI/SelectList.tsx

@@ -66,7 +66,7 @@ const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true
         return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue));
     },[valuesList, searchValue])
 
-        return <div className={tabelClassName + " namespacesTable"}>
+        return <div className={tabelClassName + " select-list-table"}>
                 <table cellPadding={5} style={{borderCollapse: "collapse"}}>
                     <thead>
                     {tableHead}

ui/src/components/UI/style/SelectList.sass

@@ -1,6 +1,6 @@
 @import '../../../variables.module'
 
-.namespacesTable
+.select-list-table
   table
     width: 100%
     margin-top: 20px