endpoints added

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

@@ -1,5 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react';
-import { workerData } from 'worker_threads';
+import { FC, useEffect, useState } from 'react';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
@@ -19,7 +18,6 @@ interface AddWorkspaceModalProp {
   workspaceId: string,
   onEdit: boolean
 }
-export const workspacesDemo = [{id:"1", name:"Worksapce1" , namespaces: [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"}]}]; 
 const api = Api.getInstance();
 
 const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceId, onEdit}) => {
@@ -39,13 +37,16 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
     (async () => {
         try {
           if(onEdit){
-            const workspace = workspacesDemo.find(obj => obj.id = workspaceId);
+            const workspace = await api.getSpecificWorkspace(workspaceId);
             setWorkspaceName(workspace.name);
             setCheckedNamespacesKeys(workspace.namespaces);   
           }
             setSearchValue("");     
-            const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}];
-            setNamespaces(namespaces);
+            const namespaces = await api.getTapConfig();
+            const namespacesMapped = namespaces.map(namespace => {
+              return {key: namespace, value: namespace}
+            })
+            setNamespaces(namespacesMapped);
     } catch (e) {
             console.error(e);
         } finally {
@@ -57,9 +58,9 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
     setWorkspaceName(event.target.value);
   }
 
-  // const isFormValid = () : boolean => {
-  //   return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null)
-  // }
+  const isFormValid = () : boolean => {
+    return (workspaceName.length > 0) && (checkedNamespacesKeys.length > 0);
+  }
 
   const onConfirm = () => {
     try{
@@ -84,26 +85,28 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
 
   return (<>
     <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
-    <h3 className='headline'>DETAILS</h3>
-      <div>
-        <input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
-               onChange={onWorkspaceNameChange}></input>
-        </div>
-        <h3 className='headline'>TAP SETTINGS</h3>     
-      <div className="namespacesSettingsContainer">
-        <div>
-            <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
-                    onChange={(event) => setSearchValue(event.target.value)}/>
-        </div>
-        <SelectList items={namespaces}
-                    tableName={"Namespaces"}
-                    multiSelect={true} 
-                    checkedValues={checkedNamespacesKeys} 
-                    searchValue={searchValue} 
-                    setCheckedValues={setCheckedNamespacesKeys} 
-                    tabelClassName={undefined}>
-                    </SelectList>
+      <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
+        <div className='comfirmation-modal__sub-section'>
+          <div>
+            <input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
+                  onChange={onWorkspaceNameChange}></input>
             </div>
+            </div>
+            <h3 className='comfirmation-modal__sub-section-header'>TAP SETTINGS</h3>     
+          <div className="namespacesSettingsContainer">
+            <div>
+                <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
+                        onChange={(event) => setSearchValue(event.target.value)}/>
+            </div>
+            <SelectList items={namespaces}
+                        tableName={"Namespaces"}
+                        multiSelect={true} 
+                        checkedValues={checkedNamespacesKeys} 
+                        searchValue={searchValue} 
+                        setCheckedValues={setCheckedNamespacesKeys} 
+                        tabelClassName={undefined}>
+                        </SelectList>
+          </div>
     </ConfirmationModal>
     </>); 
 };

ui/src/components/Modals/OasModal/OasModal.tsx

@@ -21,6 +21,7 @@ const OasModal = ({ openModal, handleCloseModal }) => {
         const services = await api.getOasServices();
         setOasServices(services);
       } catch (e) {
+        console.log(e);
         toast.error("Error occurred while fetching services list");
         console.error(e);
       }

ui/src/components/UI/SelectList.tsx

@@ -21,7 +21,7 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
     
     const filteredValues = useMemo(() => {
         return items.filter((listValue) => listValue?.value?.includes(searchValue));
-    },[items, searchValue,checkedValues])
+    },[items, searchValue])
 
     const toggleValue = (checkedKey) => {
         if (!multiSelect){
@@ -31,7 +31,6 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
         if(index > -1) checkedValues.splice(index,1);
         else checkedValues.push(checkedKey);   
         setCheckedValues(checkedValues);
-        console.log(checkedValues);
     }
 
     const unToggleAll = () => {
@@ -40,8 +39,9 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
     }
 
     const toggleAll = () => {
-        if(checkedValues.length > 0) checkedValues = [];
-        else filteredValues.forEach((obj) => {
+        if(checkedValues.length === items.length) checkedValues = [];
+        else items.forEach((obj) => {
+            if(!checkedValues.includes(obj.key))
             checkedValues.push(obj.key);
         })
         setCheckedValues(checkedValues);

ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx

@@ -1,6 +1,6 @@
 import "../UserSettings/UserSettings.sass"
 import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
-// import Api from "../../helpers/api"
+import Api from "../../helpers/api"
 import { useEffect, useState } from "react";
 import AddWorkspaceModal, { WorkspaceData } from "../Modals/AddWorkspaceModal/AddWorkspaceModal";
 import { toast } from "react-toastify";
@@ -8,12 +8,12 @@ import ConfirmationModal from "../UI/Modals/ConfirmationModal";
 
 interface Props {}
 
-// const api = Api.getInstance();
+const api = Api.getInstance();
 
 export const WorkspaceSettings : React.FC<Props> = ({}) => {
 
     const [workspacesRows, setWorkspacesRows] = useState([]);
-    const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
+    const cols : ColsType[] = [{field : "name",header:"Name"}];
 
     const [workspaceData,SetWorkspaceData] = useState({} as WorkspaceData);
     const [isOpenModal,setIsOpen] = useState(false);
@@ -25,8 +25,8 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
     useEffect(() => {
         (async () => {
             try {
-                const workspacesDemo = [{id:"1", name:"Worksapce1"}] 
-                setWorkspacesRows(workspacesDemo)                  
+                const workspaces = await api.getWorkspaces();
+                setWorkspacesRows(workspaces)                 
             } catch (e) {
                 console.error(e);
             }
@@ -66,14 +66,12 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
         })();
     }
 
-
     const onRowEdit = (row) => {
        setIsOpen(true);
        setIsEditMode(true);
        SetWorkspaceData(row);
     }
    
-    
     return (<>
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>

ui/src/helpers/api.js

@@ -74,7 +74,22 @@ export default class Api {
     }
 
     getWorkspaces = async() =>{
-        const response = await this.client.get(``);
+        const response = await this.client.get(`/workspace`);
+        return response.data;
+    }
+
+    getSpecificWorkspace = async(workspaceId) =>{
+        const response = await this.client.get(`/workspace/${workspaceId}`);
+        return response.data;
+    }
+
+    createWorkspace = async(workspaceData) =>{
+        const response = await this.client.post(`/workspace`,workspaceData);
+        return response.data;
+    }    
+
+    editWorkspace = async(workspaceId, workspaceData) =>{
+        const response = await this.client.post(`/workspace${workspaceId}`,workspaceData);
         return response.data;
     }   
 
@@ -140,7 +155,7 @@ export default class Api {
     }
 
     getTapConfig = async () => {
-        const response = await this.client.get("/config/tapConfig");
+        const response = await this.client.get("/config/tap");
         return response.data;
     }