changes

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

@@ -1,11 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-
-const LazyAddUserModal = lazy(() => import('./AddUserModal'));
-
-const AddUserModal = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode;isOpen:boolean }) => (
-  <Suspense fallback={null}>
-    <LazyAddUserModal {...props} />
-  </Suspense>
-);
-
-export default AddUserModal;

ui/src/components/Modals/AddUserModal/AddUserModal.less

@@ -1 +0,0 @@
-.AddUserModal {}

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

@@ -0,0 +1,5 @@
+.user__email
+    width : 301px
+
+.user__role
+    width : 186px

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

@@ -1,26 +1,98 @@
+import { FormControl, MenuItem, Select } from '@material-ui/core';
 import React, { FC, useEffect, useState } from 'react';
+import Api from '../../../helpers/api';
+import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
-import './AddUserModal.less';
+import SelectList from '../../UI/SelectList';
+import './AddUserModal.sass';
 
-interface AddUserModalProps {
-  isOpen : boolean
+type UserData = {
+  role:string;
+  email : string;
+  workspace : string;
 }
 
-const AddUserModal: FC<AddUserModalProps> = ({isOpen}) => {
+interface AddUserModalProps {
+  isOpen : boolean,
+  onCloseModal : () => void
+  userData : UserData;
+}
+
+const api = Api.getInstance();
+
+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 roles = [{key:"1",value:"Admin"}]
+  const classes = useCommonStyles()
+
+  const [userDataModel, setUserData] = useState(userData as UserData)
+
+  // useEffect(() => {
+  //   setIsOpen(isOpen)
+  // },[isOpen])
 
   useEffect(() => {
-    setIsOpen(isOpen)
-  },[isOpen])
+    (async () => {
+        try {
+            const workspacesList = [{"default":true}] //await api.getWorkspaces() 
+            setWorkspaces(workspacesList)    
                           
-  const onClose = () => {}
+        } catch (e) {
+            console.error(e);
+        }
+    })();
+},[])
+
+  useEffect(()=> {
+    setUserData(userData as UserData)
+  },[userData])
+
+  // const onClose = () => {
+  //   setIsOpen(false)
+  // }
 
   const onConfirm = () => {}
 
-  return (<>
-    <ConfirmationModal isOpen={isOpenModal} onClose={onClose} onConfirm={onConfirm} title=''>
+  const workspaceChange = (newVal) => {
+    setWorkspaces(newVal);
+    const  data = {...userDataModel, workspace : newVal}
+    setUserData(data)
+  }
 
+  const userRoleChange = (e) => {
+    const  data = {...userDataModel, role : e.currentTarget.value}
+    setUserData(data)
+  }
+
+  return (<>
+    <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User'>
+      <h3>DETAILS</h3>
+      <div>
+        <input type="text" value={userDataModel?.email ?? ""} className={classes.textField + " user__email"} placeholder={"User Email"} 
+               onChange={(e) => {}}></input>
+        <FormControl>
+          <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}>
+                  {role.value}
+                </MenuItem>
+              ))}
+          </Select>
+        </FormControl>
+      </div>
+      <h3>WORKSPACE ACCESS </h3>     
+      <div className="namespacesSettingsContainer">
+        <div style={{margin: "10px 0"}}>
+            <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>
+      </div>
     </ConfirmationModal>
     </>); 
 };

ui/src/components/Pages/SettingsPage/SettingsPage.tsx

@@ -10,7 +10,7 @@ const AdminSettings: React.FC<any> = ({color}) => {
     
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
     return (
-        <div style={{padding:" 0 1rem"}}>
+        <div style={{padding:" 0 24px"}}>
         <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
         {currentTab === TABS[0].tab && <React.Fragment>
                 <UserSettings/>

ui/src/components/SettingsModal/SettingsModal.sass

@@ -24,31 +24,3 @@
   justify-content: flex-end
   padding: 20px
   border-top: 2px $data-background-color solid
-
-.namespacesTable
-  table
-    width: 100%
-    margin-top: 20px
-
-    tbody
-      max-height: calc(70vh - 355px)
-      overflow-y: auto
-      display: block
-
-    th
-      color: $blue-gray
-      text-align: left
-      padding: 10px
-
-    tr
-      border-bottom-width: 1px
-      border-bottom-color: $data-background-color
-      border-bottom-style: solid
-      display: table
-      table-layout: fixed
-      width: 100%
-
-    td
-      color: $light-gray
-      padding: 10px
-      font-size: 16px

ui/src/components/UI/SelectList.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import Checkbox from "./Checkbox"
+import '../style/SelectList.sass';
 
 export interface Props {
     valuesListInput;
@@ -64,7 +65,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}>
+        return <div className={tabelClassName + " namespacesTable"}>
                 <table cellPadding={5} style={{borderCollapse: "collapse"}}>
                     <thead>
                     {tableHead}

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

@@ -1,7 +1,7 @@
 @import '../../../variables.module'
 
 .filterable-table
-    padding: 0 5%;
+
 
 .actions-header
     

ui/src/components/UserSettings/UserSettings.tsx

@@ -4,6 +4,11 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
 import AddUserModal from "../Modals/AddUserModal/AddUserModal";
+import { Select } from "../UI/Select";
+import { MenuItem } from "@material-ui/core";
+import { settings } from "cluster";
+import { SettingsModal } from "../SettingsModal/SettingModal";
+import OasModal from "../Modals/OasModal/OasModal";
 
 interface Props {
 
@@ -21,11 +26,13 @@ export const UserSettings : React.FC<Props> = ({}) => {
                                }}]
     const [isOpenModal,setIsOpen] = useState(false)
     
+
     useEffect(() => {
         (async () => {
             try {
                 const users = [{userName:"asd",role:"Admin",status:"Active"}]//await api.getUsers() 
                 setUserRows(users)    
+                              
             } catch (e) {
                 console.error(e);
             }
@@ -50,13 +57,17 @@ export const UserSettings : React.FC<Props> = ({}) => {
         // open Edit user Modal
     }
 
+
+
     const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"}
+
     return (<>
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={usersRows} cols={cols}>
         </FilterableTableAction>
-        <AddUserModal isOpen={isOpenModal}>
-
-        </AddUserModal>
+        <AddUserModal isOpen={false} onCloseModal={()=> {setIsOpen(false)}}></AddUserModal>
+        {/* <SettingsModal isOpen={false} onClose={function (): void {
+            throw new Error("Function not implemented.");
+        } } isFirstLogin={false}></SettingsModal> */}
     </>);
 }

ui/src/components/style/SelectList.sass

@@ -0,0 +1,29 @@
+@import "../../variables.module"
+
+.namespacesTable
+  table
+    width: 100%
+    margin-top: 20px
+
+    tbody
+      max-height: calc(70vh - 355px)
+      overflow-y: auto
+      display: block
+
+    th
+      color: $blue-gray
+      text-align: left
+      padding: 10px
+
+    tr
+      border-bottom-width: 1px
+      border-bottom-color: $data-background-color
+      border-bottom-style: solid
+      display: table
+      table-layout: fixed
+      width: 100%
+
+    td
+      color: $light-gray
+      padding: 10px
+      font-size: 16px

ui/src/helpers/api.js

@@ -53,6 +53,11 @@ export default class Api {
         return response.data;
     }
 
+    // getRoles = async(filter = "") =>{
+    //     const response = await this.client.get(`/user/listUsers?usernameFilter=${filter}`);
+    //     return response.data;
+    // }
+
     getWorkspaces = async() =>{
         const response = await this.client.get(``);
         return response.data;