From 1d2f35ca4732c789f09fe8a5c8d6ccfd77708a92 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Fri, 26 Jan 2024 00:59:51 +0100 Subject: [PATCH 1/7] small formatting fixes --- pkgs/ui/src/app/client/client.tsx | 2 +- pkgs/ui/src/components/consume_action/index.tsx | 5 +++++ pkgs/ui/src/components/entity_actions/index.tsx | 3 +-- pkgs/ui/src/config/client_1/index.tsx | 5 +---- 4 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 pkgs/ui/src/components/consume_action/index.tsx diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 7994702..155ed18 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { ClientTableConfig, ServiceTableConfig } from "@/config/client_1"; import CustomTable from "@/components/table"; import { diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx new file mode 100644 index 0000000..0ae9bc8 --- /dev/null +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -0,0 +1,5 @@ +const ConsumeAction = () => { + return <>; +}; + +export default ConsumeAction; diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 7a3ba8d..27d2b3d 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -26,7 +26,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => { severity: AlertColor; }>(SNACKBAR_DEFAULT); - console.error("Error registering/deregistering:", error); + if (error) console.error("Error registering/deregistering:", error); const onDeleteEntity = async () => { if (rowData) @@ -34,7 +34,6 @@ const EntityActions = ({ endpointData, rowData }: Props) => { const response = await deleteEntity({ entity_did: rowData?.entity_did, }); - console.log("On Delete:", response.data.message); setSnackbar({ open: true, message: response.data.message, diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 64a9e2d..d8190f2 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -1,7 +1,4 @@ -import { Button, IconButton, Tooltip } from "@mui/material"; -import AddCircleIcon from "@mui/icons-material/AddCircle"; -import RemoveCircleIcon from "@mui/icons-material/RemoveCircle"; -import DeleteIcon from "@mui/icons-material/Delete"; +import { Button } from "@mui/material"; import EntityActions from "@/components/entity_actions"; export const ClientTableConfig = [ -- 2.51.0 From 57d3e273b0c2caf565348b3bdf01333b473a43a6 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Sun, 28 Jan 2024 17:46:15 +0100 Subject: [PATCH 2/7] minimum progress --- .../src/components/consume_action/index.tsx | 25 +++++++++++++++++-- pkgs/ui/src/config/client_1/index.tsx | 7 +++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx index 0ae9bc8..dbf4e7b 100644 --- a/pkgs/ui/src/components/consume_action/index.tsx +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -1,5 +1,26 @@ -const ConsumeAction = () => { - return <>; +import { Button } from "@mui/material"; +import useAxios from "../hooks/useAxios"; +import { useState } from "react"; + +const ConsumeAction = ({ endpoint }: { endpoint: string }) => { + + const [currentEndpoint, setCurrentEndpoint] = useState(""); + const [shouldFetch, setShouldFetch] = useState(false); + const { data, error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch); + + if (error) console.error("Error consuming:", error); + + if (data) console.log('what the response', data) + + const onConsume = () => { + setCurrentEndpoint(endpoint); + setShouldFetch(true); + } + + + return }; export default ConsumeAction; diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index d8190f2..7037545 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -1,5 +1,6 @@ import { Button } from "@mui/material"; import EntityActions from "@/components/entity_actions"; +import ConsumeAction from "@/components/consume_action"; export const ClientTableConfig = [ { @@ -13,11 +14,9 @@ export const ClientTableConfig = [ { key: "endpoint_url", label: "End Point", - render: () => { + render: (value: any) => { return ( - + ); }, }, -- 2.51.0 From 654d2cfc3e57408944771520fddb2fbba1da97da Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Sun, 28 Jan 2024 17:59:19 +0100 Subject: [PATCH 3/7] added consume and register deregister as simple fetch --- .../src/components/consume_action/index.tsx | 40 +++++++++----- .../src/components/entity_actions/index.tsx | 54 +++++++++++++++---- pkgs/ui/src/config/client_1/index.tsx | 5 +- 3 files changed, 71 insertions(+), 28 deletions(-) diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx index dbf4e7b..84f43a0 100644 --- a/pkgs/ui/src/components/consume_action/index.tsx +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -1,26 +1,38 @@ import { Button } from "@mui/material"; -import useAxios from "../hooks/useAxios"; import { useState } from "react"; +import axios from "axios"; const ConsumeAction = ({ endpoint }: { endpoint: string }) => { + const [data, setData] = useState(null); + const [error, setError] = useState(null); - const [currentEndpoint, setCurrentEndpoint] = useState(""); - const [shouldFetch, setShouldFetch] = useState(false); - const { data, error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch); - - if (error) console.error("Error consuming:", error); - - if (data) console.log('what the response', data) + if (data) console.log("Data in state", data); + if (error) console.log("Error in state", error); const onConsume = () => { - setCurrentEndpoint(endpoint); - setShouldFetch(true); - } + const axiosConfig = { + url: endpoint, + method: "GET", + data: null, + }; + axios(axiosConfig) + .then((response) => { + setData(response.data); + console.log("I got the data from consume: ", response.data); + }) + .catch((error) => { + console.error("Error happened during consume: ", error); + setError(error); + }) + .finally(() => {}); + }; - return + return ( + + ); }; export default ConsumeAction; diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 27d2b3d..538f03c 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -1,8 +1,8 @@ import { IEntityActions } from "@/types"; import { Button, Snackbar, Alert, AlertColor } from "@mui/material"; import { useState } from "react"; -import useAxios from "../hooks/useAxios"; import { deleteEntity } from "@/api/entities/entities"; +import axios from "axios"; interface Props { endpointData: IEntityActions[]; @@ -16,17 +16,23 @@ const SNACKBAR_DEFAULT = { }; const EntityActions = ({ endpointData, rowData }: Props) => { - const [currentEndpoint, setCurrentEndpoint] = useState(""); - const [shouldFetch, setShouldFetch] = useState(false); - const { error } = useAxios(currentEndpoint, "GET", null, true, shouldFetch); - const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: AlertColor; }>(SNACKBAR_DEFAULT); - if (error) console.error("Error registering/deregistering:", error); + const [registerData, setRegisterData] = useState(null); + const [registerError, setRegisterError] = useState(null); + + const [DeregisterData, setDeRegisterData] = useState(null); + const [DeregisterError, setDeRegisterError] = useState(null); + + if (registerData) console.log("Register Data in state", registerData); + if (registerError) console.log("Register Error in state", registerError); + + if (DeregisterData) console.log("Register Data in state", DeregisterData); + if (DeregisterError) console.log("Register Error in state", DeregisterError); const onDeleteEntity = async () => { if (rowData) @@ -50,13 +56,41 @@ const EntityActions = ({ endpointData, rowData }: Props) => { }; const onRegisterEntity = (endpoint: string) => { - setCurrentEndpoint(endpoint); - setShouldFetch(true); + const axiosConfig = { + url: endpoint, + method: "GET", + data: null, + }; + + axios(axiosConfig) + .then((response) => { + setRegisterData(response.data); + console.log("I got the data from register: ", response.data); + }) + .catch((error) => { + console.error("Error happened during register: ", error); + setRegisterError(error); + }) + .finally(() => {}); }; const onDeregisterEntity = (endpoint: string) => { - setCurrentEndpoint(endpoint); - setShouldFetch(true); + const axiosConfig = { + url: endpoint, + method: "GET", + data: null, + }; + + axios(axiosConfig) + .then((response) => { + setDeRegisterData(response.data); + console.log("I got the data from deregister: ", response.data); + }) + .catch((error) => { + console.error("Error happened during deregister: ", error); + setDeRegisterError(error); + }) + .finally(() => {}); }; const handleCloseSnackbar = () => { diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index 7037545..aaa15af 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -1,4 +1,3 @@ -import { Button } from "@mui/material"; import EntityActions from "@/components/entity_actions"; import ConsumeAction from "@/components/consume_action"; @@ -15,9 +14,7 @@ export const ClientTableConfig = [ key: "endpoint_url", label: "End Point", render: (value: any) => { - return ( - - ); + return ; }, }, // { -- 2.51.0 From d5f4dab0eb22bc53941effde13f17f6e8a0685b4 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Sun, 28 Jan 2024 18:07:39 +0100 Subject: [PATCH 4/7] added headers for axios requests --- pkgs/ui/src/components/consume_action/index.tsx | 5 +++++ pkgs/ui/src/components/entity_actions/index.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx index 84f43a0..88b2c82 100644 --- a/pkgs/ui/src/components/consume_action/index.tsx +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -14,6 +14,11 @@ const ConsumeAction = ({ endpoint }: { endpoint: string }) => { url: endpoint, method: "GET", data: null, + withCredentials: true, + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, }; axios(axiosConfig) diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 538f03c..5c31ce8 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -60,6 +60,11 @@ const EntityActions = ({ endpointData, rowData }: Props) => { url: endpoint, method: "GET", data: null, + withCredentials: true, + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, }; axios(axiosConfig) -- 2.51.0 From cc9c5de680a4dcc4ffca09f27f11d55f0e603906 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Mon, 29 Jan 2024 18:19:21 +0100 Subject: [PATCH 5/7] added consume view and loaders on the buttons when clicked --- pkgs/ui/src/app/client/client.tsx | 59 ++++++++++++++----- .../src/components/consume_action/index.tsx | 54 +++++++++++++---- .../src/components/consume_content/index.tsx | 9 +++ .../src/components/entity_actions/index.tsx | 47 ++++++++++++--- pkgs/ui/src/components/table/index.tsx | 16 ++++- pkgs/ui/src/config/client_1/index.tsx | 10 +++- pkgs/ui/src/types/index.ts | 3 +- 7 files changed, 158 insertions(+), 40 deletions(-) create mode 100644 pkgs/ui/src/components/consume_content/index.tsx diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 155ed18..57e9a97 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -24,6 +24,7 @@ import CloseIcon from "@mui/icons-material/Close"; import { useSearchParams } from "next/navigation"; import SummaryDetails from "@/components/summary_card"; import { projectConfig } from "@/config/config"; +import ConsumeDisplayComponent from "@/components/consume_content"; interface SnackMessage { message: string; @@ -105,8 +106,12 @@ const AttachButton = ({ export default function Client() { const searchParams = useSearchParams(); - console.log("params: ", searchParams); const name = searchParams.get("name") ?? ""; + const [consumeContent, setConsumeContent] = useState(null); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState< + SnackMessage | undefined + >(undefined); const { entity: entity } = useGetEntityByNameOrDid(name); const { @@ -139,16 +144,16 @@ export default function Client() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const [snackbarOpen, setSnackbarOpen] = useState(false); - const [snackbarMessage, setSnackbarMessage] = useState< - SnackMessage | undefined - >(undefined); - const closeSnackBar = () => { setSnackbarMessage(undefined); setSnackbarOpen(false); }; + // Consume + const handleConsumeContent = (content: any) => { + setConsumeContent(content); + }; + if (services_loading) return ; if (!services) return Client not found; @@ -185,17 +190,26 @@ export default function Client() { ], }} /> -
-

Client View

- +
+
+

Service Consumer View

+ +
+ {consumeContent && ( +
+

Service Output

+ +
+ )}
-

Service View

+

Service Producer View

); } + +const ClientTable = () => { + return ( +
+ {/*

Client View

+ */} +
+ ); +}; diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx index 88b2c82..096ddaf 100644 --- a/pkgs/ui/src/components/consume_action/index.tsx +++ b/pkgs/ui/src/components/consume_action/index.tsx @@ -1,15 +1,25 @@ -import { Button } from "@mui/material"; +import { Button, CircularProgress, Snackbar } from "@mui/material"; import { useState } from "react"; import axios from "axios"; -const ConsumeAction = ({ endpoint }: { endpoint: string }) => { - const [data, setData] = useState(null); +const ConsumeAction = ({ + endpoint, + onConsume, +}: { + endpoint: string; + rowData?: any; + onConsume?: any; +}) => { const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); - if (data) console.log("Data in state", data); - if (error) console.log("Error in state", error); + if (error) console.error("Error in state", error); + + const handleConsume = () => { + if (loading) return; + + setLoading(true); - const onConsume = () => { const axiosConfig = { url: endpoint, method: "GET", @@ -23,20 +33,40 @@ const ConsumeAction = ({ endpoint }: { endpoint: string }) => { axios(axiosConfig) .then((response) => { - setData(response.data); - console.log("I got the data from consume: ", response.data); + if (onConsume) { + onConsume(response.data); + console.log("I got the data from consume: ", response.data); + } }) .catch((error) => { + if (onConsume) onConsume(null); console.error("Error happened during consume: ", error); setError(error); }) - .finally(() => {}); + .finally(() => { + setLoading(false); + }); + }; + + const handleCloseSnackbar = () => { + setError(null); }; return ( - + <> + + {error && ( + + )} + ); }; diff --git a/pkgs/ui/src/components/consume_content/index.tsx b/pkgs/ui/src/components/consume_content/index.tsx new file mode 100644 index 0000000..8ce7a74 --- /dev/null +++ b/pkgs/ui/src/components/consume_content/index.tsx @@ -0,0 +1,9 @@ +const ConsumeDisplayComponent = ({ htmlContent }: { htmlContent: any }) => { + return ( +
+
+
+ ); +}; + +export default ConsumeDisplayComponent; diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 5c31ce8..719da6f 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -1,5 +1,11 @@ import { IEntityActions } from "@/types"; -import { Button, Snackbar, Alert, AlertColor } from "@mui/material"; +import { + Button, + Snackbar, + Alert, + AlertColor, + CircularProgress, +} from "@mui/material"; import { useState } from "react"; import { deleteEntity } from "@/api/entities/entities"; import axios from "axios"; @@ -24,17 +30,23 @@ const EntityActions = ({ endpointData, rowData }: Props) => { const [registerData, setRegisterData] = useState(null); const [registerError, setRegisterError] = useState(null); + const [loadingRegister, setLoadingRegister] = useState(false); const [DeregisterData, setDeRegisterData] = useState(null); const [DeregisterError, setDeRegisterError] = useState(null); + const [loadingDeRegister, setLoadingDeRegister] = useState(false); + + const [loadingDelete, setLoadingDelete] = useState(false); if (registerData) console.log("Register Data in state", registerData); - if (registerError) console.log("Register Error in state", registerError); + if (registerError) console.error("Register Error in state", registerError); if (DeregisterData) console.log("Register Data in state", DeregisterData); - if (DeregisterError) console.log("Register Error in state", DeregisterError); + if (DeregisterError) + console.error("Register Error in state", DeregisterError); const onDeleteEntity = async () => { + setLoadingDelete(true); if (rowData) try { const response = await deleteEntity({ @@ -52,10 +64,16 @@ const EntityActions = ({ endpointData, rowData }: Props) => { message: "Failed to delete entity.", severity: "error", }); + } finally { + setLoadingDelete(false); } }; const onRegisterEntity = (endpoint: string) => { + if (loadingRegister) return; + + setLoadingRegister(true); + const axiosConfig = { url: endpoint, method: "GET", @@ -76,10 +94,16 @@ const EntityActions = ({ endpointData, rowData }: Props) => { console.error("Error happened during register: ", error); setRegisterError(error); }) - .finally(() => {}); + .finally(() => { + setLoadingRegister(false); + }); }; const onDeregisterEntity = (endpoint: string) => { + if (loadingDeRegister) return; + + setLoadingDeRegister(true); + const axiosConfig = { url: endpoint, method: "GET", @@ -95,7 +119,9 @@ const EntityActions = ({ endpointData, rowData }: Props) => { console.error("Error happened during deregister: ", error); setDeRegisterError(error); }) - .finally(() => {}); + .finally(() => { + setLoadingDeRegister(false); + }); }; const handleCloseSnackbar = () => { @@ -108,8 +134,10 @@ const EntityActions = ({ endpointData, rowData }: Props) => { {endpointData.map( ({ name, endpoint }: IEntityActions, index: number) => { const isRegister = name && name.toLocaleLowerCase() === "register"; + // const isDeRegister = name && name.toLocaleLowerCase() === "deregister"; return (
{ +const CustomTable = ({ + configuration, + data, + loading, + tkey, + onConsumeAction, +}: ICustomTable) => { if (loading) return ; @@ -23,7 +29,11 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { const renderTableCell = ( value: any, cellKey: string, - render?: (param: any, data?: any) => void | undefined, + render?: ( + param: any, + data?: any, + onFunc?: (param: any) => void, + ) => void | undefined, rowData?: any, ) => { let renderedValue = value; @@ -36,7 +46,7 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => { renderedValue = ; // cover use case if we want to render a component - if (render) renderedValue = render(value, rowData); + if (render) renderedValue = render(value, rowData, onConsumeAction); // catch use case where the value is an object but the render function is not provided in the table config if ( diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx index aaa15af..8d26e61 100644 --- a/pkgs/ui/src/config/client_1/index.tsx +++ b/pkgs/ui/src/config/client_1/index.tsx @@ -13,8 +13,14 @@ export const ClientTableConfig = [ { key: "endpoint_url", label: "End Point", - render: (value: any) => { - return ; + render: (value: any, rowData: any, onConsume: any) => { + return ( + + ); }, }, // { diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts index 28fe7f0..477338e 100644 --- a/pkgs/ui/src/types/index.ts +++ b/pkgs/ui/src/types/index.ts @@ -1,7 +1,7 @@ export interface CustomTableConfiguration { key: string; label: string; - render?: (param: any) => void; + render?: (param: any, rowData?: any, onConsume?: any) => void; } export interface ICustomTable { @@ -9,6 +9,7 @@ export interface ICustomTable { data: any; loading?: boolean; tkey: string; + onConsumeAction?: (param: any) => void; } export interface EntityDetails { -- 2.51.0 From 7742228eca1ce3e0bd157c4bacfe9e7b785b436c Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Mon, 29 Jan 2024 19:28:40 +0100 Subject: [PATCH 6/7] added a bit of time delay for register/deregister and also a confirm button for delete --- pkgs/clan-cli/clan_cli/emulate_fastapi.py | 4 ++ pkgs/ui/src/app/client/client.tsx | 17 +----- .../src/components/entity_actions/index.tsx | 53 ++++++++++++++++++- 3 files changed, 56 insertions(+), 18 deletions(-) diff --git a/pkgs/clan-cli/clan_cli/emulate_fastapi.py b/pkgs/clan-cli/clan_cli/emulate_fastapi.py index ae50081..ba3da48 100644 --- a/pkgs/clan-cli/clan_cli/emulate_fastapi.py +++ b/pkgs/clan-cli/clan_cli/emulate_fastapi.py @@ -106,11 +106,13 @@ async def consume_service_from_other_entity_c1() -> HTMLResponse: @app_c1.get("/v1/print_daemon1/register", response_class=JSONResponse) async def register_c1() -> JSONResponse: + time.sleep(2) return JSONResponse(content={"status": "registered"}, status_code=200) @app_c1.get("/v1/print_daemon1/deregister", response_class=JSONResponse) async def deregister_c1() -> JSONResponse: + time.sleep(2) return JSONResponse(content={"status": "deregistered"}, status_code=200) @@ -130,11 +132,13 @@ async def consume_service_from_other_entity_c2() -> HTMLResponse: @app_c2.get("/v1/print_daemon2/register", response_class=JSONResponse) async def register_c2() -> JSONResponse: + time.sleep(2) return JSONResponse(content={"status": "registered"}, status_code=200) @app_c2.get("/v1/print_daemon2/deregister", response_class=JSONResponse) async def deregister_c2() -> JSONResponse: + time.sleep(2) return JSONResponse(content={"status": "deregistered"}, status_code=200) diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index 57e9a97..a3f2d9c 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -190,7 +190,7 @@ export default function Client() { ], }} /> -
+

Service Consumer View

); } - -const ClientTable = () => { - return ( -
- {/*

Client View

- */} -
- ); -}; diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx index 719da6f..c7bfeb7 100644 --- a/pkgs/ui/src/components/entity_actions/index.tsx +++ b/pkgs/ui/src/components/entity_actions/index.tsx @@ -5,6 +5,11 @@ import { Alert, AlertColor, CircularProgress, + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, } from "@mui/material"; import { useState } from "react"; import { deleteEntity } from "@/api/entities/entities"; @@ -37,6 +42,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => { const [loadingDeRegister, setLoadingDeRegister] = useState(false); const [loadingDelete, setLoadingDelete] = useState(false); + const [confirmDelete, setConfirmDelete] = useState(false); if (registerData) console.log("Register Data in state", registerData); if (registerError) console.error("Register Error in state", registerError); @@ -66,6 +72,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => { }); } finally { setLoadingDelete(false); + closeDeleteConfirmation(); } }; @@ -89,10 +96,20 @@ const EntityActions = ({ endpointData, rowData }: Props) => { .then((response) => { setRegisterData(response.data); console.log("I got the data from register: ", response.data); + setSnackbar({ + open: true, + message: "Registered successfully!", + severity: "success", + }); }) .catch((error) => { console.error("Error happened during register: ", error); setRegisterError(error); + setSnackbar({ + open: true, + message: error, + severity: "error", + }); }) .finally(() => { setLoadingRegister(false); @@ -114,10 +131,20 @@ const EntityActions = ({ endpointData, rowData }: Props) => { .then((response) => { setDeRegisterData(response.data); console.log("I got the data from deregister: ", response.data); + setSnackbar({ + open: true, + message: "De-Registered successfully!", + severity: "success", + }); }) .catch((error) => { console.error("Error happened during deregister: ", error); setDeRegisterError(error); + setSnackbar({ + open: true, + message: error, + severity: "error", + }); }) .finally(() => { setLoadingDeRegister(false); @@ -128,6 +155,14 @@ const EntityActions = ({ endpointData, rowData }: Props) => { setSnackbar(SNACKBAR_DEFAULT); }; + const openDeleteConfirmation = () => { + setConfirmDelete(true); + }; + + const closeDeleteConfirmation = () => { + setConfirmDelete(false); + }; + return ( <>
@@ -154,13 +189,27 @@ const EntityActions = ({ endpointData, rowData }: Props) => { )}
+ + Delete Entity Confirmation + + + Are you sure you want to delete this entity? + + + + + + + Date: Mon, 29 Jan 2024 19:34:07 +0100 Subject: [PATCH 7/7] fixed invalid tailwind classes --- pkgs/ui/src/app/client/client.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx index a3f2d9c..c873422 100644 --- a/pkgs/ui/src/app/client/client.tsx +++ b/pkgs/ui/src/app/client/client.tsx @@ -190,7 +190,14 @@ export default function Client() { ], }} /> -
+

Service Consumer View