From f4d651812f34d50d0c930fd1213b1712d2baf416 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Sun, 30 Jan 2022 11:37:53 +0200 Subject: [PATCH 1/5] commit to enable merge --- .../Modals/AddUserModal/AddUserModal.tsx | 4 +- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 91 +++++++++++++++---- .../components/Pages/AuthPage/InstallPage.tsx | 2 +- .../components/SettingsModal/SettingModal.tsx | 2 +- ui/src/components/UI/SelectList.tsx | 18 +++- .../WorkspaceSettings/WorkspaceSettings.tsx | 29 ++++-- ui/src/helpers/api.js | 27 +++++- 7 files changed, 137 insertions(+), 36 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index c8620f1b9..4945541b7 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -206,8 +206,8 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD setSearchValue(event.target.value)}/> - + diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index eaf2d0614..9930f2ecc 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/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 = ({isOpen,onCloseModal, workspaceData ={}, onEdit}) => { +const AddWorkspaceModal: FC = ({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 namespacesObj = {...tapConfig?.tappedNamespaces} - Object.keys(tapConfig?.tappedNamespaces ?? {}).forEach(namespace => { - namespacesObj[namespace] = true; - }) - setNamespaces(namespacesObj); - setNamespaces(tapConfig?.tappedNamespaces); + setSearchValue(""); + const namespaces = [{key:"1", value:"namespace1",isChecked:false},{key:"2", value:"namespace2",isChecked:false}]; + 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); } finally { @@ -48,14 +57,51 @@ const AddWorkspaceModal: FC = ({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 (<> - +

DETAILS

- {}}> +

TAP SETTINGS

@@ -63,7 +109,14 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work setSearchValue(event.target.value)}/>
- + + ); diff --git a/ui/src/components/Pages/AuthPage/InstallPage.tsx b/ui/src/components/Pages/AuthPage/InstallPage.tsx index 5565c2299..f4936e401 100644 --- a/ui/src/components/Pages/AuthPage/InstallPage.tsx +++ b/ui/src/components/Pages/AuthPage/InstallPage.tsx @@ -38,7 +38,7 @@ export const InstallPage: React.FC = ({onFirstLogin}) => { try { setIsLoading(true); - await api.register(adminUsername, password); + await api.setupAdminUser(adminUsername, password); if (!await api.isAuthenticationNeeded()) { setEntPage(Page.Traffic); onFirstLogin(); diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index 9535bb8fb..e795f6946 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -87,7 +87,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 4f18fa3f7..e3b7f1159 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/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 = ({valuesListInput ,tableName,multiSelect=true,searchValue="",setValues,tabelClassName}) => { +const SelectList: React.FC = ({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 = ({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 = ({valuesListInput ,tableName,multiSelect=tru const tableHead = multiSelect ? - valueTap.isChecked === false)} + valueTap.isChecked === true)} onToggle={toggleAll}/> {tableName} : diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index 8c3a0ff9c..a23cadc31 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/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 = ({}) => { 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 = ({}) => { const searchConfig = { searchPlaceholder: "Search Workspace",filterRows: filterFuncFactory} const onRowDelete = (row) => { - const filterFunc = filterFuncFactory(row.name) - const newWorkspaceList = workspacesRows.filter(filterFunc) - setWorkspacesRows(newWorkspaceList) + 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 onRowEdit = (row) => { @@ -53,10 +67,13 @@ export const WorkspaceSettings : React.FC = ({}) => { - { setIsOpen(false);} } > - - + { setIsOpen(false);} } > + ); } diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index 611264854..faf8c928e 100644 --- a/ui/src/helpers/api.js +++ b/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) { From 0824dcb817ab9af408fff8081802aa3e32f83b48 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Sun, 30 Jan 2022 18:56:33 +0200 Subject: [PATCH 2/5] addworkspaceModal and selctList updated --- .../Modals/AddUserModal/AddUserModal.tsx | 9 +- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 86 ++++++++----------- .../components/SettingsModal/SettingModal.tsx | 2 +- ui/src/components/UI/SelectList.tsx | 74 ++++++---------- .../components/UserSettings/UserSettings.tsx | 9 -- .../WorkspaceSettings/WorkspaceSettings.tsx | 67 +++++++++------ 6 files changed, 108 insertions(+), 139 deletions(-) diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index c7793bc0a..f8da350fd 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -32,7 +32,8 @@ export const AddUserModal: FC = ({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(); const [disable, setDisable] = useState(true); const [editMode, setEditMode] = useState(isEditMode); @@ -59,7 +60,7 @@ export const AddUserModal: FC = ({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 = ({isOpen, onCloseModal, userD setSearchValue(event.target.value)}/> - + diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 9930f2ecc..559518656 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/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 = ({isOpen,onCloseModal, workspaceDataInput ={}, onEdit}) => { +const AddWorkspaceModal: FC = ({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); - console.log(workspaceDataModal); + const [workspaceName, setWorkspaceName] = useState(""); + 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 list = namespaces.map(obj => { - const isValueChecked = workspaceDataModal.namespaces.some(checkedValueKey => obj.key === checkedValueKey) - return {...obj, isChecked: isValueChecked} - }) + const namespaces = [{key:"namespace1", value:"namespace1"},{key:"namespace2", value:"namespace2"},{key:"namespace3",value:"namespace3"}]; setNamespaces(namespaces); } catch (e) { console.error(e); @@ -58,49 +54,39 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work }, [isOpen]) 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 isFormValid = () : boolean => { + // return (Object.values(workspaceDataModal).length === 2) && Object.values(workspaceDataModal).every(val => val !== null) + // } const onConfirm = () => { - const data = {name: workspaceName, namespaces: namespacesNames}; - setWorkspaceData(data); + try{ + 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 (<>

DETAILS

-

TAP SETTINGS

@@ -109,12 +95,12 @@ const AddWorkspaceModal: FC = ({isOpen,onCloseModal, work setSearchValue(event.target.value)}/> - diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index e795f6946..5641fb712 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -87,7 +87,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 e24ce3a82..53b992761 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/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 = { - key: string; - value: string; - isChecked: boolean; -}[] - -const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[],multiSelect=true,searchValue="",setValues,tabelClassName}) => { - const [valuesList, setValuesList] = useState(valuesListInput as ValuesListInput); +const SelectList: React.FC = ({items ,tableName,checkedValues=[],multiSelect=true,searchValue="",setCheckedValues,tabelClassName}) => { const filteredValues = useMemo(() => { - return valuesList.filter((listValue) => listValue?.value?.includes(searchValue)); - },[valuesList, searchValue]) + return items.filter((listValue) => listValue?.value?.includes(searchValue)); + },[items, searchValue,checkedValues]) - 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) => { + const toggleValue = (checkedKey) => { if (!multiSelect){ - unToggleAll(checkedKey); - } - else { - const newValues: ValuesListInput = [...valuesList]; - newValues.map(item => item.key === checkedKey ? item.isChecked = !item.isChecked : item.isChecked); - setValuesList(newValues); - setValues(newValues); + unToggleAll(); } + 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 list = valuesList.map((obj) => { - return {...obj, isChecked:checkedKey === obj.key} - }) - setValuesList(list); - setValues(list); + const unToggleAll = () => { + checkedValues = []; + setCheckedValues([]); } - const toggleAll = () => { - const isChecked = valuesList.every(valueTap => valueTap.isChecked === true); - const list = valuesList.map((obj) => { - return {...obj, isChecked: !isChecked} + if(checkedValues.length > 0) checkedValues = []; + else filteredValues.forEach((obj) => { + checkedValues.push(obj.key); }) - setValuesList(list); - setValues(list); + setCheckedValues(checkedValues); } - const tableHead = multiSelect ? - valueTap.isChecked === true)} + {tableName} : @@ -74,8 +56,6 @@ const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[ {tableName} - - return
@@ -85,8 +65,8 @@ const SelectList: React.FC = ({valuesListInput ,tableName,checkedValues=[ {filteredValues?.map(listValue => { return diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index ab591be60..09297c0eb 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/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"; diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index a23cadc31..4bad1e4de 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx @@ -13,12 +13,12 @@ interface Props {} export const WorkspaceSettings : React.FC = ({}) => { 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 [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false); const buttonConfig = {onClick: () => {setIsOpen(true); setIsEditMode(false);SetWorkspaceData({} as WorkspaceData)}, text:"Add Workspace"} @@ -34,28 +34,39 @@ export const WorkspaceSettings : React.FC = ({}) => { },[]) 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 = ({}) => { - { setIsOpen(false);} } > + { setIsOpen(false);} } > - + setIsOpenDeleteModal(false)} + onConfirm={onDeleteConfirmation} confirmButtonText="Delete Workspace" title="Delete Workspace" + confirmButtonColor="#DB2156"> +

Are you sure you want to delete this workspace?

+ ); } From 19f7bea194323246d51c74434c8d7ef5bd19b74b Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Mon, 31 Jan 2022 16:32:41 +0200 Subject: [PATCH 3/5] endpoints added --- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 59 ++++++++++--------- .../components/Modals/OasModal/OasModal.tsx | 1 + ui/src/components/UI/SelectList.tsx | 10 ++-- .../WorkspaceSettings/WorkspaceSettings.tsx | 14 ++--- ui/src/helpers/api.js | 19 +++++- 5 files changed, 60 insertions(+), 43 deletions(-) diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 559518656..3b7047558 100644 --- a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx +++ b/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 = ({isOpen,onCloseModal, workspaceId, onEdit}) => { @@ -39,13 +37,16 @@ const AddWorkspaceModal: FC = ({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 = ({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 = ({isOpen,onCloseModal, work return (<> -

DETAILS

-
- -
-

TAP SETTINGS

-
-
- setSearchValue(event.target.value)}/> -
- - +

DETAILS

+
+
+
+
+

TAP SETTINGS

+
+
+ setSearchValue(event.target.value)}/> +
+ + +
); }; diff --git a/ui/src/components/Modals/OasModal/OasModal.tsx b/ui/src/components/Modals/OasModal/OasModal.tsx index 61250d93e..58aff0d89 100644 --- a/ui/src/components/Modals/OasModal/OasModal.tsx +++ b/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); } diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx index 53b992761..e1933f93d 100644 --- a/ui/src/components/UI/SelectList.tsx +++ b/ui/src/components/UI/SelectList.tsx @@ -18,10 +18,10 @@ 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,checkedValues]) + },[items, searchValue]) const toggleValue = (checkedKey) => { if (!multiSelect){ @@ -31,7 +31,6 @@ const SelectList: React.FC = ({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 = ({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); diff --git a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx b/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx index 4bad1e4de..a2b362c43 100644 --- a/ui/src/components/WorkspaceSettings/WorkspaceSettings.tsx +++ b/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 = ({}) => { 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 = ({}) => { 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 = ({}) => { })(); } - const onRowEdit = (row) => { setIsOpen(true); setIsEditMode(true); SetWorkspaceData(row); } - - + return (<> diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index faf8c928e..fef581485 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -74,10 +74,25 @@ 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; + } + analyzeStatus = async () => { const response = await this.client.get("/status/analyze"); 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; } From 0705f13295aa7e95a4503b0d636c2ce3378cba38 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Mon, 31 Jan 2022 18:09:20 +0200 Subject: [PATCH 4/5] tapping settings modal added to first login --- ui/src/components/Header/EntHeader.tsx | 18 +++++++++++++++++- .../AddWorkspaceModal/AddWorkspaceModal.tsx | 2 +- ui/src/components/Modals/OasModal/OasModal.tsx | 1 - .../components/SettingsModal/SettingModal.tsx | 9 +++++++-- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx index edf0edcd9..6c94ca0ba 100644 --- a/ui/src/components/Header/EntHeader.tsx +++ b/ui/src/components/Header/EntHeader.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import logo from '../assets/MizuEntLogo.svg'; import './Header.sass'; import userImg from '../assets/user-circle.svg'; @@ -12,6 +12,7 @@ import {useSetRecoilState} from "recoil"; import entPageAtom, {Page} from "../../recoil/entPage"; import {useNavigate} from "react-router-dom"; import {RouterRoutes} from "../../helpers/routes"; +import { SettingsModal } from "../SettingsModal/SettingModal"; const api = Api.getInstance(); @@ -23,6 +24,19 @@ interface EntHeaderProps { export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLogin}) => { const navigate = useNavigate(); + const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); + + useEffect(() => { + if(isFirstLogin) { + setIsSettingsModalOpen(true) + } + }, [isFirstLogin]) + + const onSettingsModalClose = () => { + setIsSettingsModalOpen(false); + setIsFirstLogin(false); + } + return
@@ -33,9 +47,11 @@ export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLog settings navigate(RouterRoutes.SETTINGS)}/>
+
; } + const ProfileButton = () => { const setEntPage = useSetRecoilState(entPageAtom); diff --git a/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx b/ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx index 3b7047558..53023ae8c 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 = await api.getTapConfig(); + const namespaces = ["cert-manager", "default", "google-demo"] const namespacesMapped = namespaces.map(namespace => { return {key: namespace, value: namespace} }) diff --git a/ui/src/components/Modals/OasModal/OasModal.tsx b/ui/src/components/Modals/OasModal/OasModal.tsx index 58aff0d89..61250d93e 100644 --- a/ui/src/components/Modals/OasModal/OasModal.tsx +++ b/ui/src/components/Modals/OasModal/OasModal.tsx @@ -21,7 +21,6 @@ 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); } diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index 5641fb712..041fd15cf 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -49,7 +49,12 @@ export const SettingsModal: React.FC = ({isOpen, onClose, is const updateTappingSettings = async () => { try { - await api.setTapConfig(namespaces); + const defaultWorkspace = { + name: "default", + namespaces: Object.keys(namespaces) + } + await api.createWorkspace(defaultWorkspace); + // await api.setTapConfig(namespaces); onClose(); toast.success("Saved successfully"); } catch (e) { @@ -78,7 +83,7 @@ export const SettingsModal: React.FC = ({isOpen, onClose, is
Tapping Settings
- Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed + Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed as default workspace.
{isLoading ?
spinner From 5e1000aa858b86ab1419e457a3f2fdaa90cf74a8 Mon Sep 17 00:00:00 2001 From: Amit Fainholts Date: Tue, 1 Feb 2022 14:03:36 +0200 Subject: [PATCH 5/5] 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;
- {multiSelect && item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>} - {!multiSelect && item.key === listValue.key)?.isChecked} onToggle={() => toggleValues(listValue.key)}/>} + {multiSelect && toggleValue(listValue.key)}/>} + {!multiSelect && toggleValue(listValue.key)}/>} {listValue.value}