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; }