From 2f9bd203d3a8cc470f3f672f6248d1b32e5fc11f Mon Sep 17 00:00:00 2001
From: Leon <>
Date: Tue, 1 Feb 2022 14:41:23 +0200
Subject: [PATCH] changes

---
 .../Modals/AddUserModal/AddUserModal.sass     | 14 +++-
 .../Modals/AddUserModal/AddUserModal.tsx      | 67 +++++++++++--------
 .../Pages/SettingsPage/SettingsPage.sass      |  6 +-
 .../Pages/TrafficPage/TrafficPage.tsx         |  5 +-
 ui/src/components/UI/Table.tsx                |  6 +-
 ui/src/components/UI/style/Table.sass         |  8 ++-
 .../components/UserSettings/UserSettings.tsx  |  2 +-
 ui/src/helpers/api.js                         |  2 +-
 8 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass
index 39b0ff0a4..1ef2939f4 100644
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass
@@ -57,14 +57,22 @@
 .search-workspace
     width: 186px
 
+@mixin label-size
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+
 .u-input-padding
     & .MuiInputLabel-outlined.MuiInputLabel-marginDense 
-        transform: translate(14px, 8px) scale(1);
+        transform: translate(14px, 8px) scale(1)
+        @include label-size
     & .MuiInputLabel-outlined.MuiInputLabel-shrink
         transform: translate(14px, -6px) scale(0.75);
-        font-size: 12px;
+        @include label-size
 
     &.MuiOutlinedInput-input, &.MuiSelect-outlined, 
         padding-top: 5.5px
         padding-bottom: 5.5px
-        font-size: 12px;
\ No newline at end of file
+        @include label-size
+
diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
index a0f78a8fd..502ad5a8c 100644
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
@@ -1,4 +1,4 @@
-import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput, Select } from '@material-ui/core';
+import { Button, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, OutlinedInput,Select } from '@material-ui/core';
 
 import { FC, useEffect, useState } from 'react';
 import Api from '../../../helpers/api';
@@ -8,12 +8,11 @@ import {toast} from "react-toastify";
 import SelectList from '../../UI/SelectList';
 import './AddUserModal.sass';
 import spinner from "../../assets/spinner.svg";
-import { values } from 'mobx';
 
 export type UserData = {
   role:string;
   username : string;
-  workspace : string;
+  workspaceId : string;
   userId: string;
 }
 
@@ -37,7 +36,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
   const [disable, setDisable] = useState(true);
   const [editMode, setEditMode] = useState(isEditMode);
   const [invite, setInvite] = useState({sent:false,isSuceeded:false,link : null});
-  const roles = [{key:"1",value:"Admin"},{key:"2",value:"User"}]
+  const roles = [{key:"1",value:"admin"},{key:"2",value:"user"}]
   const classes = useCommonStyles()
 
   const [userDataModel, setUserData] = useState(userData as UserData)
@@ -50,20 +49,20 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
   useEffect(() => {
     (async () => {
         try {
-            const workspacesList = [
-              {
-                  "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
-                  "name": "sock-shop"
-              },
-              {
-                  "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
-                  "name": "test"
-              }
-          ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
+          //   const workspacesList = [
+          //     {
+          //         "id": "f54b18ec-aa15-4b2c-a4d5-8eda17e44c93",
+          //         "name": "sock-shop"
+          //     },
+          //     {
+          //         "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
+          //         "name": "test"
+          //     }
+          // ]
           
-          //await api.getWorkspaces() 
-          setWorkspaces(workspacesList)    
-                          
+          const list = await api.getWorkspaces() 
+          const workspacesList = list.map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
+          setWorkspaces(workspacesList)                         
         } catch (e) {
             toast.error("Error finding workspaces")
         }
@@ -105,7 +104,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
   const workspaceChange = (workspaces) => {
     //setWorkspaces(newVal);
     const selectedWorksapce = workspaces.find(x=> x.isChecked)
-    const  data = {...userDataModel, workspace : selectedWorksapce.key}
+    const  data = {...userDataModel, workspaceId : selectedWorksapce.key}
     setUserData(data)
     setGenarateDisabledState()
   }
@@ -214,21 +213,35 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
       <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
       <div className='comfirmation-modal__sub-section'>
       <div className='user__details'>
-        <input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"} 
+        {/* <input type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"} 
                 placeholder={"User Email"} onChange={userNameChange} disabled={editMode}>
-        </input>
+        </input> */}
+      {/* <div className="">
+          <label htmlFor="input-user-name">User email</label>
+          <input id="input-user-name" type="text" value={userDataModel?.username ?? ""} className={classes.textField + " user__email"} 
+          placeholder={"User Email"} onChange={userNameChange} disabled={editMode}/>
+      </div> */}
+      <FormControl variant="outlined" size={"small"} className={"user__email"}> 
+          <InputLabel htmlFor="">User Name</InputLabel>
+          <OutlinedInput type={'text'} onChange={userNameChange} disabled={editMode} value={userDataModel?.username ?? ""}  classes={{input: "u-input-padding"}}
+            label="User Name"/>
+        </FormControl>
         
               {/* <Controller name="role" control={control} rules={{ required: true }}
         render={({ field }) =>    }
       /> */}
 
-      <FormControl size='small' variant="outlined" className='user__role u-input-padding'>
-        <InputLabel>User Role</InputLabel>
-        <Select value={userDataModel.role ?? ""} onChange={userRoleChange} classes={{ select : 'u-input-padding' }} >
-          <MenuItem value="0">
-            <em>None</em>
-          </MenuItem>
-          {roles.map((role) => (
+
+  {/* className='user__role u-input-padding' */}
+  {/* classes={{ select : 'u-input-padding' }}  */}
+      <FormControl variant="outlined" className='user__role'>
+        <InputLabel id="user-role-outlined-label">User role</InputLabel>
+        <Select
+          labelId="user-role-outlined-label"
+          id="demo-simple-select-outlined"
+          value={userDataModel.role ?? ""} onChange={userRoleChange}
+          label="User role">
+           {roles.map((role) => (
                 <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.sass b/ui/src/components/Pages/SettingsPage/SettingsPage.sass
index 846289ff7..2a697e7a5 100644
--- a/ui/src/components/Pages/SettingsPage/SettingsPage.sass
+++ b/ui/src/components/Pages/SettingsPage/SettingsPage.sass
@@ -1,7 +1,7 @@
 @import "../../../variables.module"
 
 @mixin tab-container
-        max-width: 513px
+        width: clamp(50%,513px,80%);
         margin: 0 auto
 
 .settings-page
@@ -19,7 +19,7 @@
 
 
 .header-section
-    
+    background-color: $header-background-color
 
     &__container
         @include tab-container
@@ -34,6 +34,8 @@
 
 .tab-content
     padding-top: 30px;
+    background-color: $data-background-color
+    height: 100vh;
     &__container
         @include tab-container
     
\ No newline at end of file
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index b350bcae9..9bfbdb1c5 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -294,10 +294,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
           </Button>}
         </div>
       </div>
-      {window["isOasEnabled"] && <OasModal
-        openModal={openOasModal}
-        handleCloseModal={handleCloseModal}
-      />}
+
       {<div className="TrafficPage-Container">
         <div className="TrafficPage-ListContainer">
           <Filters
diff --git a/ui/src/components/UI/Table.tsx b/ui/src/components/UI/Table.tsx
index 02498a824..53cae6679 100644
--- a/ui/src/components/UI/Table.tsx
+++ b/ui/src/components/UI/Table.tsx
@@ -7,7 +7,7 @@ export interface ColsType {
     field:string,
     cellClassName?: string,
     header:string,
-    width?:number,
+    width?:string,
     getCellClassName?:(field:string,value : any) => string
 };
 
@@ -43,7 +43,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
     <thead className="mui-table__thead">
     <tr style={{borderBottomWidth: "2px"}} className="mui-table__tr">
         {cols?.map((col)=> {
-            return <th key={col.header} className="mui-table__th">{col.header}</th>
+            return <th key={col.header} className="mui-table__th" style={{width: col.width}}>{col.header}</th>
         })}
         <th></th>
     </tr>
@@ -61,7 +61,7 @@ export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit,
             tableRows?.map((rowData,index) => {
                 return <tr key={rowData?.id ?? index} className="mui-table__tr">
                     {cols.map((col,index) => {                        
-                        return <td key={`${rowData?.id} + ${index}`} className="mui-table__td">
+                        return <td key={`${rowData?.id} + ${index}`} className="mui-table__td" style={{width: col.width}}>
                                  <span key={Math.random().toString()} className={`${col.getCellClassName ? col.getCellClassName(col.field, rowData[col.field]) : ""}${col?.cellClassName ?? ""}`}>
                                      {rowData[col.field]}
                                 </span>
diff --git a/ui/src/components/UI/style/Table.sass b/ui/src/components/UI/style/Table.sass
index 3fe00b952..011e2cb42 100644
--- a/ui/src/components/UI/style/Table.sass
+++ b/ui/src/components/UI/style/Table.sass
@@ -9,6 +9,9 @@
       overflow-y: auto
       display: block
 
+    &__tbody &__tr:hover
+      background: $header-background-color
+
     &__th
       color: $blue-gray
       text-align: left
@@ -41,9 +44,7 @@
             line-height: 15px;
             color: $light-gray;
 
-    &__tr:hover
-        background: #F7F9FC
-
+    &__tr:hover        
         & .mui-table__row-actions
             &--delete
                 cursor: pointer;
@@ -67,4 +68,5 @@
 @mixin row-actions
         display: flex
         justify-content: flex-end
+
  
\ No newline at end of file
diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx
index 1aeb90a9a..b14aba6bb 100644
--- a/ui/src/components/UserSettings/UserSettings.tsx
+++ b/ui/src/components/UserSettings/UserSettings.tsx
@@ -31,7 +31,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
 
     const [usersRows, setUserRows] = useState([]);
     const [userData,userUserData] = useState({} as UserData)
-    const cols : ColsType[] = [{field : "username",header:"User"},
+    const cols : ColsType[] = [{field : "username",header:"User", width: '35%'},
                                {field : "role",header:"Role"},
                                {field : "status",header:"Status",getCellClassName : (field, val) =>{
                                    return val === InviteStatus.active ? "status--active" : "status--pending"
diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js
index a9adc2155..b0b6c3762 100644
--- a/ui/src/helpers/api.js
+++ b/ui/src/helpers/api.js
@@ -79,7 +79,7 @@ export default class Api {
     }
 
     getWorkspaces = async() =>{
-        const response = await this.client.get(`/workspace`);
+        const response = await this.client.get(`/workspace/`);
         return response.data;
     }