commit to enable merge

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

@@ -207,7 +207,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                     onChange={(event) => setSearchValue(event.target.value)}/>
         </div>
         <SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
-                    setValues= {workspaceChange} tabelClassName={''} >
+        setValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
         </SelectList>
       </div>
 

ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
@@ -13,34 +13,43 @@ export type WorkspaceData = {
 interface AddWorkspaceModalProp {
   isOpen : boolean,
   onCloseModal: () => void,
-  workspaceData: WorkspaceData,
+  workspaceDataInput: WorkspaceData,
   onEdit: boolean
 }
 
 const api = Api.getInstance();
 
-const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceData ={}, onEdit}) => {
+const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceDataInput ={}, onEdit}) => {
 
-  const [workspaceDataModel, setUserData] = useState(workspaceData as WorkspaceData);
+  const [workspaceDataModal, setWorkspaceData] = useState({} as WorkspaceData);
   const [searchValue, setSearchValue] = useState("");
-  const classes = useCommonStyles()
+  const [namespaces, setNamespaces] = useState([]);
-  const [namespaces, setNamespaces] = useState({});
+  const [namespacesNames, setNamespaceNames] = useState([]);
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [disable, setDisable] = useState(true);
+
+  console.log(workspaceDataInput);
+  console.log(workspaceDataModal);
+
+  const classes = useCommonStyles();
 
   const title = onEdit ? "Edit Workspace" : "Add Workspace";
 
+  useEffect(() => {
+    setWorkspaceData(workspaceDataInput as WorkspaceData);
+  },[workspaceDataInput])
 
   useEffect(() => {
     if(!isOpen) return;
     (async () => {
         try {
             setSearchValue("");     
-            const tapConfig = await api.getTapConfig();
+            const namespaces = [{key:"1", value:"namespace1",isChecked:false},{key:"2", value:"namespace2",isChecked:false}];
-            const namespacesObj = {...tapConfig?.tappedNamespaces}
+            const list = namespaces.map(obj => {
-            Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
+            const isValueChecked = workspaceDataModal.namespaces.some(checkedValueKey => obj.key === checkedValueKey)
-                namespacesObj[namespace] = true;
+            return {...obj, isChecked: isValueChecked}
           })
-            setNamespaces(namespacesObj);
+            setNamespaces(namespaces);
-            setNamespaces(tapConfig?.tappedNamespaces);
     } catch (e) {
             console.error(e);
         } finally {
@@ -48,14 +57,51 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
     })()
 }, [isOpen])
 
-  const onConfirm = () => {}
+  const onWorkspaceNameChange = (event) => {
+    // const data = {...workspaceData, name: event.target.value};
+    //setWorkspaceData(data);
+    setWorkspaceName(event.target.value);
+    setGenarateDisabledState();
+  }
+
+
+  const onNamespaceChange = (newVal) => {
+    var filteredValues = newVal.filter(obj => obj.isChecked);
+    var namespaceNames = filteredValues.map(obj => obj.value);
+    setNamespaceNames(namespaceNames);
+
+    // var filteredValues = newVal.filter(obj => obj.isChecked);
+    // var namespaceNames = filteredValues.map(obj => obj.value);
+    // const data = {...workspaceData, namespaces: namespaceNames};
+    // setWorkspaceData(data);
+    setGenarateDisabledState();
+  }
+
+  const isFormValid = () : boolean => {
+    return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null)
+  }
+
+  const setGenarateDisabledState = () => {
+    const isValid = isFormValid()
+    setDisable(!isValid)
+  }
+
+  const onConfirm = () => {
+    const data = {name: workspaceName, namespaces: namespacesNames};
+    setWorkspaceData(data);
+  }
+
+  const onClose = () => {
+    onCloseModal();
+    setWorkspaceData({} as WorkspaceData);
+  }
 
   return (<>
-    <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title={title}>
+    <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
     <h3 className='headline'>DETAILS</h3>
       <div>
-        <input type="text" value={workspaceData?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
+        <input type="text" value={workspaceDataModal?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
-               onChange={(e) => {}}></input>
+               onChange={onWorkspaceNameChange}></input>
         </div>
         <h3 className='headline'>TAP SETTINGS</h3>     
       <div className="namespacesSettingsContainer">
@@ -63,7 +109,14 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
             <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                     onChange={(event) => setSearchValue(event.target.value)}/>
         </div>
-        <SelectList valuesListInput={namespaces} tableName={"Namespaces"} multiSelect={true} searchValue={searchValue} setValues={setUserData} tabelClassName={undefined}></SelectList>
+        <SelectList valuesListInput={namespaces}
+                    tableName={"Namespaces"}
+                    multiSelect={true} 
+                    checkedValues={workspaceDataModal.namespaces} 
+                    searchValue={searchValue} 
+                    setValues={onNamespaceChange} 
+                    tabelClassName={undefined}>
+                    </SelectList>
             </div>
     </ConfirmationModal>
     </>); 

ui/src/components/Pages/AuthPage/InstallPage.tsx

@@ -38,7 +38,7 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
         try {
             setIsLoading(true);
-            await api.register(adminUsername, password);
+            await api.setupAdminUser(adminUsername, password);
             if (!await api.isAuthenticationNeeded()) {
                 setEntPage(Page.Traffic);
                 onFirstLogin();

ui/src/components/SettingsModal/SettingModal.tsx

@@ -87,7 +87,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                             <div style={{margin: "10px 0"}}>
                                 <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                                        onChange={(event) => setSearchValue(event.target.value)}/></div>
-                                <SelectList valuesListInput={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setValues={setNamespaces} tabelClassName={'namespacesTable'}/>
+                                <SelectList valuesListInput={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
                         </div>
                     </>}
                 </div>

ui/src/components/UI/SelectList.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Checkbox from "./Checkbox"
 import Radio from "./Radio";
 import './style/SelectList.sass';
@@ -6,6 +6,7 @@ import './style/SelectList.sass';
 export interface Props {
     valuesListInput;
     tableName:string;
+    checkedValues?:string[];
     multiSelect:boolean;
     searchValue?:string;
     setValues: (newValues)=> void;
@@ -18,9 +19,17 @@ export type ValuesListInput = {
     isChecked: boolean;
 }[]
 
-const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => {
+const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
     const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
 
+    useEffect(() => {   
+            const list = valuesList.map(obj => {
+                const isValueChecked = checkedValues.some(checkedValueKey => obj.key === checkedValueKey)
+                return {...obj, isChecked: isValueChecked}
+            })
+        setValuesList(list);
+    },[valuesListInput,checkedValues]);
+
     const toggleValues = (checkedKey) => {
         if (!multiSelect){
             unToggleAll(checkedKey);
@@ -43,8 +52,9 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
 
 
     const toggleAll = () => {
+        const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
         const list = valuesList.map((obj) => {
-            return {...obj, isChecked: true}
+            return {...obj, isChecked: !isChecked}
         })
         setValuesList(list);
         setValues(list);
@@ -52,7 +62,7 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,multiSelect=tru
 
 
     const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
-            <th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === false)}
+            <th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === true)}
                 onToggle={toggleAll}/></th>
             <th>{tableName}</th>
         </tr> : 

ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx

@@ -3,6 +3,8 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 // import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
 import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
+import { toast } from "react-toastify";
+import ConfirmationModal from "../UI/Modals/ConfirmationModal";
 
 interface Props {}
 
@@ -14,6 +16,7 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
     const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
     const [isOpenModal,setIsOpen] = useState(false);
     const [isEditMode,setIsEditMode] = useState(false);
+    const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
 
     const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
 
@@ -37,9 +40,20 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
     const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}
     
     const onRowDelete = (row) => {
-        const filterFunc = filterFuncFactory(row.name)
+        setIsOpenDeleteModal(true);
-        const newWorkspaceList = workspacesRows.filter(filterFunc)
+        const findFunc = filterFuncFactory(row.id)
-        setWorkspacesRows(newWorkspaceList)
+        const newWorkspaceList = workspacesRows.find(findFunc)
+        setWorkspacesRows(newWorkspaceList);
+        (async() => {
+            try {
+                //await api.deleteUser(user)
+                const usersLeft = workspacesRows.filter(e => !findFunc(e))
+                setWorkspacesRows(usersLeft)
+                toast.success("Workspace Succesesfully Deleted")
+            } catch (error) {
+                toast.error("Unable To Delete")
+            }
+        })()
     }
 
     const onRowEdit = (row) => {
@@ -53,10 +67,13 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
         </FilterableTableAction>
-        <AddWorkspaceModal isOpen={isOpenModal} workspaceData={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >
+        <AddWorkspaceModal isOpen={isOpenModal} workspaceDataInput={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >            
-
-            
         </AddWorkspaceModal>
+        <ConfirmationModal isOpen={isOpenDeleteModal} onClose={function (): void {
+            throw new Error("Function not implemented.");
+        } } onConfirm={function (): void {
+            throw new Error("Function not implemented.");
+        } }></ConfirmationModal>
     </>);
 }
 

ui/src/helpers/api.js

@@ -166,13 +166,34 @@ export default class Api {
         }
     }
 
-    register = async (username, password) => {
+    // register = async (username, password) => {
+    //     const form = new FormData();
+    //     form.append('username', username);
+    //     form.append('password', password);
+
+    //     try {
+    //         const response = await this.client.post(`/user/register`, form);
+    //         this.persistToken(response.data.token);
+    //         return response;
+    //     } catch (e) {
+    //         if (e.response.status === 400) {
+    //             const error = {
+    //                 'type': FormValidationErrorType,
+    //                 'messages': e.response.data
+    //             };
+    //             throw error;
+    //         } else {
+    //             throw e;
+    //         }
+    //     }
+    // }
+
+    setupAdminUser = async (password) => {
         const form = new FormData();
-        form.append('username', username);
         form.append('password', password);
 
         try {
-            const response = await this.client.post(`/user/register`, form);
+            const response = await this.client.post(`/install/admin`, form);
             this.persistToken(response.data.token);
             return response;
         } catch (e) {