From 5e1000aa858b86ab1419e457a3f2fdaa90cf74a8 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Tue, 1 Feb 2022 14:03:36 +0200 Subject: [PATCH] select list bug fixed --- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 21 +++++++++--- .../components/SettingsModal/SettingModal.tsx | 33 +++++++++++-------- ui/src/components/UI/SelectList.tsx | 27 ++++++++------- .../WorkspaceSettings/WorkspaceSettings.tsx | 19 ++++------- ui/src/helpers/api.js | 12 ++++++- 5 files changed, 68 insertions(+), 44 deletions(-) diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 53023ae8c..cfcfb5fd9 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx @@ -42,7 +42,7 @@ const AddWorkspaceModal: FC = ({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 = ({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(); - toast.success("Workspace Succesesfully Created "); + 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 = ({isOpen,onCloseModal, work const onClose = () => { onCloseModal(); + resetForm(); + } + + const resetForm = () => { setWorkspaceName(""); setCheckedNamespacesKeys([]); setNamespaces([]); diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index 041fd15cf..0dfbb9ad1 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -19,7 +19,8 @@ const api = Api.getInstance(); export const SettingsModal: React.FC = ({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 = ({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; - }) - setNamespaces(namespacesObj); - } else { - setNamespaces(tapConfig?.tappedNamespaces); - } + // const tapConfig = await api.getTapConfig() + const namespaces = await api.getNamespaces(); + const namespacesMapped = namespaces.map(namespace => { + return {key: namespace, value: namespace} + }) + 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 = ({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 = ({isOpen, onClose, is
setSearchValue(event.target.value)}/>
- + } diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index e1933f93d..c1ac426c4 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -18,7 +18,7 @@ export interface Props { } const SelectList: React.FC = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => { - + const filteredValues = useMemo(() => { return items.filter((listValue) => listValue?.value?.includes(searchValue)); },[items, searchValue]) @@ -27,24 +27,27 @@ const SelectList: React.FC = ({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); - }) - setCheckedValues(checkedValues); + const newCheckedValues = [...checkedValues]; + if(newCheckedValues.length === items.length) setCheckedValues([]); + else { + items.forEach((obj) => { + if(!newCheckedValues.includes(obj.key)) + newCheckedValues.push(obj.key); + }) + setCheckedValues(newCheckedValues); + } } const tableHead = multiSelect ? diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index a2b362c43..937757027 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -31,7 +31,7 @@ export const WorkspaceSettings : React.FC = ({}) => { console.error(e); } })(); - },[]) + },[isOpenModal]) const filterFuncFactory = (searchQuery: string) => { return (row) => { @@ -40,25 +40,20 @@ export const WorkspaceSettings : React.FC = ({}) => { } 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 onRowDelete = async (workspace) => { + setIsOpenDeleteModal(true); + 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"); diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index 3c2b93080..33d46ffa9 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -94,10 +94,20 @@ 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; + } + analyzeStatus = async () => { const response = await this.client.get("/status/analyze"); return response.data;