select list bug fixed

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

@@ -42,7 +42,7 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
             setCheckedNamespacesKeys(workspace.namespaces);   
           }
             setSearchValue("");     
-            const namespaces = ["cert-manager", "default", "google-demo"]
+            const namespaces = await api.getNamespaces();
             const namespacesMapped = namespaces.map(namespace => {
               return {key: namespace, value: namespace}
             })
@@ -62,15 +62,22 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
     return (workspaceName.length > 0) && (checkedNamespacesKeys.length > 0);
   }
 
-  const onConfirm = () => {
+  const onConfirm = async () => {
     try{
       const workspaceData = {
         name: workspaceName,
         namespaces: checkedNamespacesKeys
       }
-      console.log(workspaceData);
-      onCloseModal();
+      if(onEdit){
+        await api.editWorkspace(workspaceId, workspaceData);
+        toast.success("Workspace Succesesfully Updated");
+      }
+      else{
+        await api.createWorkspace(workspaceData);
         toast.success("Workspace Succesesfully Created ");
+      }
+      resetForm();
+      onCloseModal();   
     } catch{
       toast.error("Couldn't Creat The Worksapce");
     }
@@ -78,6 +85,10 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
 
   const onClose = () => {
     onCloseModal();
+    resetForm();
+  }
+
+  const resetForm = () => {
     setWorkspaceName("");
     setCheckedNamespacesKeys([]);
     setNamespaces([]);

ui/src/components/SettingsModal/SettingModal.tsx

@@ -19,7 +19,8 @@ const api = Api.getInstance();
 export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, isFirstLogin}) => {
 
     const classes = useCommonStyles();
-    const [namespaces, setNamespaces] = useState({});
+    const [namespaces, setNamespaces] = useState([]);
+    const [checkedNamespacesKeys, setCheckedNamespacesKeys] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [searchValue, setSearchValue] = useState("");
 
@@ -29,16 +30,21 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
             try {
                 setSearchValue("");
                 setIsLoading(true);
-                const tapConfig = await api.getTapConfig()
-                if(isFirstLogin) {
-                    const namespacesObj = {...tapConfig?.tappedNamespaces}
-                    Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
-                        namespacesObj[namespace] = true;
+                // const tapConfig = await api.getTapConfig()
+                const namespaces = await api.getNamespaces();
+                const namespacesMapped = namespaces.map(namespace => {
+                    return {key: namespace, value: namespace}
                   })
-                    setNamespaces(namespacesObj);
-                } else {
-                    setNamespaces(tapConfig?.tappedNamespaces);
-                }
+                setNamespaces(namespacesMapped);
+                // if(isFirstLogin) {
+                //     const namespacesObj = {...tapConfig?.tappedNamespaces}
+                //     Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => {
+                //         namespacesObj[namespace] = true;
+                //     })
+                //     setNamespaces(namespacesObj);
+                // } else {
+                //     setNamespaces(tapConfig?.tappedNamespaces);
+                // }
             } catch (e) {
                 console.error(e);
             } finally {
@@ -51,10 +57,9 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
         try {
             const defaultWorkspace = {
                 name: "default",
-                namespaces: Object.keys(namespaces)
+                namespaces: checkedNamespacesKeys
             }
             await api.createWorkspace(defaultWorkspace);
-            // await api.setTapConfig(namespaces);
             onClose();
             toast.success("Saved successfully");
         } catch (e) {
@@ -92,7 +97,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 items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
+                                <SelectList items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setCheckedNamespacesKeys} tabelClassName={'namespacesTable'} checkedValues={checkedNamespacesKeys}/>
                         </div>
                     </>}
                 </div>

ui/src/components/UI/SelectList.tsx

@@ -27,24 +27,27 @@ const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSel
         if (!multiSelect){
             unToggleAll();
         }
-        let index = checkedValues.indexOf(checkedKey);
-        if(index > -1) checkedValues.splice(index,1);
-        else checkedValues.push(checkedKey);   
-        setCheckedValues(checkedValues);
+        const newCheckedValues = [...checkedValues];
+        let index = newCheckedValues.indexOf(checkedKey);
+        if(index > -1) newCheckedValues.splice(index,1);
+        else newCheckedValues.push(checkedKey);   
+        setCheckedValues(newCheckedValues);
     }
 
     const unToggleAll = () => {
-        checkedValues = [];
         setCheckedValues([]);
     }
 
     const toggleAll = () => {
-        if(checkedValues.length === items.length) checkedValues = [];
-        else items.forEach((obj) => {
-            if(!checkedValues.includes(obj.key))
-            checkedValues.push(obj.key);
+        const newCheckedValues = [...checkedValues];
+        if(newCheckedValues.length === items.length) setCheckedValues([]);
+        else {
+            items.forEach((obj) => {
+            if(!newCheckedValues.includes(obj.key))
+                newCheckedValues.push(obj.key);
             })
-        setCheckedValues(checkedValues);
+            setCheckedValues(newCheckedValues);
+        }
     }
 
     const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>

ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx

@@ -31,7 +31,7 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
                 console.error(e);
             }
         })();
-    },[])
+    },[isOpenModal])
 
     const filterFuncFactory = (searchQuery: string) => {
         return (row) => {
@@ -41,24 +41,19 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
 
     const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory};
     
-    const findWorkspace = (workspaceId) => {
-        const findFunc = filterFuncFactory(workspaceId);
-        return workspacesRows.find(findFunc);
-    }
-    
-    const onRowDelete = (workspace) => {
+    const onRowDelete = async (workspace) => {
         setIsOpenDeleteModal(true); 
-        const workspaceForDel = findWorkspace(workspace.id);
-        SetWorkspaceData(workspaceForDel);
+        SetWorkspaceData(workspace);  
     }
     
     const onDeleteConfirmation = () => {
         (async() => {
             try{
-                const findFunc = filterFuncFactory(workspaceData.id);
-                const workspaceLeft = workspacesRows.filter(ws => !findFunc(ws));
+                const workspaceLeft = workspacesRows.filter(ws => ws.id != workspaceData.id);
                 setWorkspacesRows(workspaceLeft);
+                await api.deleteWorkspace(workspaceData.id);
                 setIsOpenDeleteModal(false);
+                SetWorkspaceData({} as WorkspaceData);
                 toast.success("Workspace Succesesfully Deleted ");
             } catch {
                 toast.error("Workspace hasn't deleted");

ui/src/helpers/api.js

@@ -94,7 +94,17 @@ export default class Api {
     }    
 
     editWorkspace = async(workspaceId, workspaceData) =>{
-        const response = await this.client.post(`/workspace${workspaceId}`,workspaceData);
+        const response = await this.client.put(`/workspace/${workspaceId}`,workspaceData);
+        return response.data;
+    }   
+
+    deleteWorkspace = async(workspaceId) => {
+        const response = await this.client.delete(`/workspace/${workspaceId}`);
+        return response.data;
+    }
+
+    getNamespaces = async() =>{
+        const response = await this.client.get(`/config/namespaces`);
         return response.data;
     }