change

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

@@ -1,4 +1,4 @@
-import { FormControl, MenuItem, Select } from '@material-ui/core';
+import { FormControl, InputLabel, MenuItem, Select, TextField } from '@material-ui/core';
 import React, { FC, useEffect, useState } from 'react';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
@@ -6,7 +6,7 @@ import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
 import SelectList from '../../UI/SelectList';
 import './AddUserModal.sass';
 
-type UserData = {
+export type UserData = {
   role:string;
   email : string;
   workspace : string;
@@ -20,13 +20,13 @@ interface AddUserModalProps {
 
 const api = Api.getInstance();
 
-const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}}) => {
+export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {}}) => {
 
   const [isOpenModal,setIsOpen] = useState(isOpen)
   //const [editUserData, setEditUserData] = useState(userData)
   const [searchValue, setSearchValue] = useState("");
   //const [userRole,setUserRole] = useState("")
-  const [workspaces, setWorkspaces] = useState([])
+  const [workspaces, setWorkspaces] = useState({})
   const roles = [{key:"1",value:"Admin"}]
   const classes = useCommonStyles()
 
@@ -39,7 +39,7 @@ const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {
   useEffect(() => {
     (async () => {
         try {
-            const workspacesList = [{"default":true}] //await api.getWorkspaces() 
+            const workspacesList = {"default":true} //await api.getWorkspaces() 
             setWorkspaces(workspacesList)    
                           
         } catch (e) {
@@ -75,15 +75,24 @@ const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {
       <div>
         <input type="text" value={userDataModel?.email ?? ""} className={classes.textField + " user__email"} placeholder={"User Email"} 
                onChange={(e) => {}}></input>
-        <FormControl>
+        <TextField select size='small' onChange={userRoleChange} value={userDataModel.role}>
+          {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) => (
-                <MenuItem key={role.key} value={role.key}>
+                <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
               ))}
           </Select>
-        </FormControl>
+        </FormControl> */}
       </div>
       <h3>WORKSPACE ACCESS </h3>     
       <div className="namespacesSettingsContainer">
@@ -91,7 +100,7 @@ const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userData = {
             <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                     onChange={(event) => setSearchValue(event.target.value)}/>
         </div>
-        <SelectList valuesListInput={workspaces} tableName={'Workspace'} multiSelect={false} setValues={workspaceChange} tabelClassName={''} ></SelectList>
+        <SelectList valuesListInput={workspaces} tableName={'Workspace'} multiSelect={false} searchValue={searchValue} setValues={workspaceChange} tabelClassName={''} ></SelectList>
       </div>
     </ConfirmationModal>
     </>); 

ui/src/components/UI/SelectList.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import Checkbox from "./Checkbox"
-import '../style/SelectList.sass';
+import './style/SelectList.sass';
 
 export interface Props {
     valuesListInput;

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

@@ -1,4 +1,4 @@
-@import "../../variables.module"
+@import '../../../variables.module'
 
 .namespacesTable
   table

ui/src/components/UserSettings/UserSettings.tsx

@@ -3,7 +3,7 @@ import {useCommonStyles} from "../../helpers/commonStyle";
 import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
-import AddUserModal from "../Modals/AddUserModal/AddUserModal";
+import AddUserModal, { UserData } from "../Modals/AddUserModal/AddUserModal";
 import { Select } from "../UI/Select";
 import { MenuItem } from "@material-ui/core";
 import { settings } from "cluster";
@@ -19,6 +19,7 @@ const api = Api.getInstance();
 export const UserSettings : React.FC<Props> = ({}) => {
 
     const [usersRows, setUserRows] = useState([]);
+    const [userData,SetUsetData] = useState({} as UserData)
     const cols : ColsType[] = [{field : "userName",header:"User"},
                                {field : "role",header:"Role"},
                                {field : "status",header:"Status",getCellClassName : (field, val) =>{
@@ -65,7 +66,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={usersRows} cols={cols}>
         </FilterableTableAction>
-        <AddUserModal isOpen={false} onCloseModal={()=> {setIsOpen(false)}}></AddUserModal>
+        <AddUserModal isOpen={isOpenModal} onCloseModal={() => { setIsOpen(false); } } userData={userData}></AddUserModal>
         {/* <SettingsModal isOpen={false} onClose={function (): void {
             throw new Error("Function not implemented.");
         } } isFirstLogin={false}></SettingsModal> */}