addworkspaceModal and selctList updated

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

@@ -32,7 +32,8 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
 
   //const [editUserData, setEditUserData] = useState(userData)
   const [searchValue, setSearchValue] = useState("");
-  const [workspaces, setWorkspaces] = useState([])
+  const [workspaces, setWorkspaces] = useState([]);
+  const [checkedWorkspaceKeys, setCheckedWorkspaceKeys] = useState([]);
   //const { control, handleSubmit,register } = useForm<UserData>();
   const [disable, setDisable] = useState(true);
   const [editMode, setEditMode] = useState(isEditMode);
@@ -59,7 +60,7 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
                   "id": "c7ad9158-d840-46c0-b5ce-2487c013723f",
                   "name": "test"
               }
-          ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}})
+          ].map((obj) => {return {key:obj.id, value:obj.name}})
           //await api.getWorkspaces() 
           setWorkspaces(workspacesList)    
                           
@@ -224,8 +225,8 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
             <input className={classes.textField + " search-workspace"} placeholder="Search" value={searchValue}
                     onChange={(event) => setSearchValue(event.target.value)}/>
         </div>
-        <SelectList valuesListInput={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
+        <SelectList items={workspaces} tableName={''} multiSelect={false} searchValue={searchValue}
-        setValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
+        setCheckedValues={workspaceChange} tabelClassName={''} checkedValues={[]} >
         </SelectList>
       </div>
 

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

@@ -1,11 +1,14 @@
 import { FC, useEffect, useMemo, useState } from 'react';
+import { workerData } from 'worker_threads';
 import Api from '../../../helpers/api';
 import { useCommonStyles } from '../../../helpers/commonStyle';
 import ConfirmationModal from '../../UI/Modals/ConfirmationModal';
 import SelectList from '../../UI/SelectList';
 import './AddWorkspaceModal.sass'
+import { toast } from "react-toastify";
 
 export type WorkspaceData = {
+    id:string;
     name:string;
     namespaces: string[];
   }
@@ -13,42 +16,35 @@ export type WorkspaceData = {
 interface AddWorkspaceModalProp {
   isOpen : boolean,
   onCloseModal: () => void,
-  workspaceDataInput: WorkspaceData,
+  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, workspaceDataInput ={}, onEdit}) => {
+const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, workspaceId, onEdit}) => {
 
-  const [workspaceDataModal, setWorkspaceData] = useState({} as WorkspaceData);
   const [searchValue, setSearchValue] = useState("");
-  const [namespaces, setNamespaces] = useState([]);
-  const [namespacesNames, setNamespaceNames] = useState([]);
-  const [workspaceName, setWorkspaceName] = useState("");
-  const [disable, setDisable] = useState(true);
 
-  console.log(workspaceDataInput);
+  const [workspaceName, setWorkspaceName] = useState("");
-  console.log(workspaceDataModal);
+  const [checkedNamespacesKeys, setCheckedNamespacesKeys] = useState([]);
+  const [namespaces, setNamespaces] = useState([]);
 
   const classes = useCommonStyles();
 
   const title = onEdit ? "Edit Workspace" : "Add Workspace";
 
-  useEffect(() => {
-    setWorkspaceData(workspaceDataInput as WorkspaceData);
-  },[workspaceDataInput])
-
   useEffect(() => {
     if(!isOpen) return;
     (async () => {
         try {
+          if(onEdit){
+            const workspace = workspacesDemo.find(obj => obj.id = workspaceId);
+            setWorkspaceName(workspace.name);
+            setCheckedNamespacesKeys(workspace.namespaces);   
+          }
             setSearchValue("");     
-            const namespaces = [{key:"1", value:"namespace1",isChecked:false},{key:"2", value:"namespace2",isChecked:false}];
+            const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}];
-            const list = namespaces.map(obj => {
-            const isValueChecked = workspaceDataModal.namespaces.some(checkedValueKey => obj.key === checkedValueKey)
-            return {...obj, isChecked: isValueChecked}
-          })
             setNamespaces(namespaces);
     } catch (e) {
             console.error(e);
@@ -58,49 +54,39 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
 }, [isOpen])
 
   const onWorkspaceNameChange = (event) => {
-    // const data = {...workspaceData, name: event.target.value};
-    //setWorkspaceData(data);
     setWorkspaceName(event.target.value);
-    setGenarateDisabledState();
   }
 
-
+  // const isFormValid = () : boolean => {
-  const onNamespaceChange = (newVal) => {
+  //   return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null)
-    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};
+    try{
-    setWorkspaceData(data);
+      const workspaceData = {
+        name: workspaceName,
+        namespaces: checkedNamespacesKeys
+      }
+      console.log(workspaceData);
+      onCloseModal();
+      toast.success("Workspace Succesesfully Created ");
+    } catch{
+      toast.error("Couldn't Creat The Worksapce");
+    }
   }
 
   const onClose = () => {
     onCloseModal();
-    setWorkspaceData({} as WorkspaceData);
+    setWorkspaceName("");
+    setCheckedNamespacesKeys([]);
+    setNamespaces([]);
   }
 
   return (<>
     <ConfirmationModal isOpen={isOpen} onClose={onClose} onConfirm={onConfirm} title={title}>
     <h3 className='headline'>DETAILS</h3>
       <div>
-        <input type="text" value={workspaceDataModal?.name ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
+        <input type="text" value={workspaceName ?? ""} className={classes.textField + " workspace__name"} placeholder={"Workspace Name"} 
                onChange={onWorkspaceNameChange}></input>
         </div>
         <h3 className='headline'>TAP SETTINGS</h3>     
@@ -109,12 +95,12 @@ 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}
+        <SelectList items={namespaces}
                     tableName={"Namespaces"}
                     multiSelect={true} 
-                    checkedValues={workspaceDataModal.namespaces} 
+                    checkedValues={checkedNamespacesKeys} 
                     searchValue={searchValue} 
-                    setValues={onNamespaceChange} 
+                    setCheckedValues={setCheckedNamespacesKeys} 
                     tabelClassName={undefined}>
                     </SelectList>
             </div>

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'} checkedValues={[]}/>
+                                <SelectList items={namespaces} tableName={'Namespace'} multiSelect={true} searchValue={searchValue} setCheckedValues={setNamespaces} tabelClassName={'namespacesTable'} checkedValues={[]}/>
                         </div>
                     </>}
                 </div>

ui/src/components/UI/SelectList.tsx

@@ -1,72 +1,54 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import Checkbox from "./Checkbox"
 import Radio from "./Radio";
 import './style/SelectList.sass';
 
+export type ValuesListInput = {
+    key: string;
+    value: string;
+}[]
 export interface Props {
-    valuesListInput;
+    items;
     tableName:string;
     checkedValues?:string[];
     multiSelect:boolean;
     searchValue?:string;
-    setValues: (newValues)=> void;
+    setCheckedValues: (newValues)=> void;
     tabelClassName
 }
 
-export type ValuesListInput = {
+const SelectList: React.FC<Props> = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => {
-    key: string;
-    value: string;
-    isChecked: boolean;
-}[]
-
-const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => {
-    const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput);
 
     const filteredValues = useMemo(() => {
-        return valuesList.filter((listValue) => listValue?.value?.includes(searchValue));
+        return items.filter((listValue) => listValue?.value?.includes(searchValue));
-    },[valuesList, searchValue])
+    },[items, searchValue,checkedValues])
 
-    useEffect(() => {   
+    const toggleValue = (checkedKey) => {
-            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);
+            unToggleAll();
-        }
-        else {
-            const newValues: ValuesListInput = [...valuesList];
-            newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked);
-            setValuesList(newValues);
-            setValues(newValues);
         }
+        let index = checkedValues.indexOf(checkedKey);
+        if(index > -1) checkedValues.splice(index,1);
+        else checkedValues.push(checkedKey);   
+        setCheckedValues(checkedValues);
+        console.log(checkedValues);
     }
 
-    const unToggleAll = (checkedKey) => {
+    const unToggleAll = () => {
-        const list = valuesList.map((obj) => {
+        checkedValues = [];
-            return {...obj, isChecked:checkedKey === obj.key}
+        setCheckedValues([]);
-        })
-        setValuesList(list);
-        setValues(list);
     }
 
-
     const toggleAll = () => {
-        const isChecked = valuesList.every(valueTap => valueTap.isChecked === true);
+        if(checkedValues.length > 0) checkedValues = [];
-        const list = valuesList.map((obj) => {
+        else filteredValues.forEach((obj) => {
-            return {...obj, isChecked: !isChecked}
+            checkedValues.push(obj.key);
         })
-        setValuesList(list);
+        setCheckedValues(checkedValues);
-        setValues(list);
     }
 
-
     const tableHead = multiSelect ? <tr style={{borderBottomWidth: "2px"}}>
-            <th style={{width: 50}}><Checkbox checked={valuesList.every(valueTap => valueTap.isChecked === true)}
+            <th style={{width: 50}}><Checkbox checked={items.length === checkedValues.length}
                 onToggle={toggleAll}/></th>
             <th>{tableName}</th>
         </tr> : 
@@ -74,8 +56,6 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[
             <th>{tableName}</th>    
         </tr>
 
-
-
         return <div className={tabelClassName + " select-list-table"}>
                 <table cellPadding={5} style={{borderCollapse: "collapse"}}>
                     <thead>
@@ -85,8 +65,8 @@ const SelectList: React.FC<Props> = ({valuesListInput ,tableName,checkedValues=[
                     {filteredValues?.map(listValue => {
                             return <tr key={listValue.key}>
                                 <td style={{width: 50}}>
-                                    {multiSelect && <Checkbox checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
+                                    {multiSelect && <Checkbox checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)}/>}
-                                    {!multiSelect && <Radio checked={valuesList.find(item => item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>}
+                                    {!multiSelect && <Radio checked={checkedValues.includes(listValue.key)} onToggle={() => toggleValue(listValue.key)}/>}
                                 </td>
                                 <td>{listValue.value}</td>
                             </tr>   

ui/src/components/UserSettings/UserSettings.tsx

@@ -4,15 +4,6 @@ import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
 import { useEffect, useState } from "react";
 import { UserData,AddUserModal } from "../Modals/AddUserModal/AddUserModal";
 import Api from '../../helpers/api';
-
-import {Snackbar} from "@material-ui/core";
-import MuiAlert from "@material-ui/lab/Alert";
-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";
-import { apiDefineProperty } from "mobx/dist/internal";
 import { toast } from "react-toastify";
 import ConfirmationModal from "../UI/Modals/ConfirmationModal";
 

ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx

@@ -13,13 +13,13 @@ interface Props {}
 export const WorkspaceSettings : React.FC<Props> = ({}) => {
 
     const [workspacesRows, setWorkspacesRows] = useState([]);
+    const cols : ColsType[] = [{field : "id",header:"Id"},{field : "name",header:"Name"}];
+
     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"}];
-
     const buttonConfig = {onClick: () => {setIsOpen(true); setIsEditMode(false);SetWorkspaceData({} as WorkspaceData)}, text:"Add Workspace"}
 
     useEffect(() => {
@@ -34,28 +34,39 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
     },[])
 
     const filterFuncFactory = (searchQuery: string) => {
-            return (row) => row.name.toLowerCase().includes(searchQuery.toLowerCase())
+        return (row) => {
+            return row.name.toLowerCase().includes(searchQuery.toLowerCase());
         }
-
-    const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory}
-    
-    const onRowDelete = (row) => {
-        setIsOpenDeleteModal(true);
-        const findFunc = filterFuncFactory(row.id)
-        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 searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory};
+
+    const findWorkspace = (workspaceId) => {
+        const findFunc = filterFuncFactory(workspaceId);
+        return workspacesRows.find(findFunc);
+    }
+    
+    const onRowDelete = (workspace) => {
+        setIsOpenDeleteModal(true);
+        const workspaceForDel = findWorkspace(workspace.id);
+        SetWorkspaceData(workspaceForDel);
+    }
+    
+    const onDeleteConfirmation = () => {
+        (async() => {
+            try{
+                const findFunc = filterFuncFactory(workspaceData.id);
+                const workspaceLeft = workspacesRows.filter(ws => !findFunc(ws));
+                setWorkspacesRows(workspaceLeft);
+                setIsOpenDeleteModal(false);
+                toast.success("Workspace Succesesfully Deleted ");
+            } catch {
+                toast.error("Workspace hasn't deleted");
+            }
+        })();
+    }
+
+
     const onRowEdit = (row) => {
        setIsOpen(true);
        setIsEditMode(true);
@@ -67,13 +78,13 @@ export const WorkspaceSettings : React.FC<Props> = ({}) => {
         <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} 
                                buttonConfig={buttonConfig} rows={workspacesRows} cols={cols}>
         </FilterableTableAction>
-        <AddWorkspaceModal isOpen={isOpenModal} workspaceDataInput={workspaceData} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >            
+        <AddWorkspaceModal isOpen={isOpenModal} workspaceId={workspaceData.id} onEdit={isEditMode} onCloseModal={() => { setIsOpen(false);} } >            
         </AddWorkspaceModal>
-        <ConfirmationModal isOpen={isOpenDeleteModal} onClose={function (): void {
+        <ConfirmationModal isOpen={isOpenDeleteModal} onClose={() => setIsOpenDeleteModal(false)} 
-            throw new Error("Function not implemented.");
+                           onConfirm={onDeleteConfirmation} confirmButtonText="Delete Workspace" title="Delete Workspace"
-        } } onConfirm={function (): void {
+                           confirmButtonColor="#DB2156">
-            throw new Error("Function not implemented.");
+            <p>Are you sure you want to delete this workspace?</p>
-        } }></ConfirmationModal>
+        </ConfirmationModal>
     </>);
 }