fix typing issue

frontend/src/components/CanvasEndpoints.tsx

@@ -41,6 +41,7 @@ export default function CanvasEndpoints() {
     const [chatLoading, setChatLoading] = useState(false);
     const [chatError, setChatError] = useState<string | null>(null);
     const toast = useRef(null);
+    const [editEndpointId, setEditEndpointId] = useState<number | null>(null);
 
     useEffect(() => {
         initFilters();
@@ -203,6 +204,40 @@ export default function CanvasEndpoints() {
         }
     };
 
+    const openEditModal = (endpoint: any) => {
+        setEditEndpointId(endpoint.id);
+        setNewEndpoint({
+            name: endpoint.name,
+            method: endpoint.method,
+            path: endpoint.path,
+            description: endpoint.description || '',
+        });
+        setShowCreateModal(true);
+    };
+
+    const handleSaveEndpoint = async () => {
+        try {
+            const sanitizedEndpoint = { ...newEndpoint, path: sanitizeCanvasPath(newEndpoint.path) };
+            if (editEndpointId) {
+                await api('put', `/api/v1/canvas-api/endpoints/${editEndpointId}`, sanitizedEndpoint);
+            } else {
+                await api('post', '/api/v1/canvas-api/endpoints', sanitizedEndpoint);
+            }
+            setShowCreateModal(false);
+            setNewEndpoint({ name: '', method: '', path: '', description: '' });
+            setEditEndpointId(null);
+            fetchEndpoints();
+        } catch (error) {
+            console.error('Failed to save endpoint:', error);
+        }
+    };
+
+    const handleModalHide = () => {
+        setShowCreateModal(false);
+        setNewEndpoint({ name: '', method: '', path: '', description: '' });
+        setEditEndpointId(null);
+    };
+
     const renderHeader = () => (
         <TableGroupHeader
             size={size}
@@ -233,6 +268,7 @@ export default function CanvasEndpoints() {
     const renderCallButton = (rowData: any) => (
         <div className="flex gap-2">
             <Button label="Call" icon="pi pi-play" onClick={() => handleCallEndpoint(rowData)} />
+            <Button label="Edit" icon="pi pi-pencil" className="p-button-warning" onClick={() => openEditModal(rowData)} />
             <Button label="Delete" icon="pi pi-trash" className="p-button-danger" onClick={() => handleDeleteEndpoint(rowData)} />
         </div>
     );
@@ -274,12 +310,12 @@ export default function CanvasEndpoints() {
 
             <Dialog
                 visible={showCreateModal}
-                onHide={() => setShowCreateModal(false)}
-                header="Create New Endpoint"
+                onHide={handleModalHide}
+                header={editEndpointId ? "Edit Endpoint" : "Create New Endpoint"}
                 footer={
                     <div>
-                        <Button label="Cancel" icon="pi pi-times" onClick={() => setShowCreateModal(false)} className="p-button-text" />
-                        <Button label="Create" icon="pi pi-check" onClick={handleCreateEndpoint} autoFocus disabled={!(newEndpoint.name && newEndpoint.method && newEndpoint.path)} />
+                        <Button label="Cancel" icon="pi pi-times" onClick={handleModalHide} className="p-button-text" />
+                        <Button label={editEndpointId ? "Save" : "Create"} icon="pi pi-check" onClick={handleSaveEndpoint} autoFocus disabled={!(newEndpoint.name && newEndpoint.method && newEndpoint.path)} />
                     </div>
                 }
             >

src/apps/canvas-api/http/controllers/CanvasApiEndpointController.ts

@@ -22,12 +22,26 @@ export class CanvasApiEndpointController {
         return reply.send(endpoint);
     }
 
-    async delete(request: FastifyRequest, reply: FastifyReply) {
-        const id = Number(request.params['id']);
+    async delete(request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) {
+        const id = Number(request.params.id);
         if (!id) return reply.status(400).send({ error: 'Missing id' });
         const endpoint = await request.em.findOne(CanvasApiEndpoint, { id });
         if (!endpoint) return reply.status(404).send({ error: 'Not found' });
         await request.em.removeAndFlush(endpoint);
         return reply.send({ success: true });
     }
+
+    async update(request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) {
+        const id = Number(request.params.id);
+        if (!id) return reply.status(400).send({ error: 'Missing id' });
+        const endpoint = await request.em.findOne(CanvasApiEndpoint, { id });
+        if (!endpoint) return reply.status(404).send({ error: 'Not found' });
+        const { name, method, path, description } = request.body as any;
+        if (name) endpoint.name = name;
+        if (method) endpoint.method = method;
+        if (path) endpoint.path = (path as string).replace(/^\/api\/v1/, '');
+        if (description !== undefined) endpoint.description = description;
+        await request.em.persistAndFlush(endpoint);
+        return reply.send(endpoint);
+    }
 } 

src/apps/canvas-api/routes/EndpointsRoutes.ts

@@ -26,6 +26,10 @@ const endpointsRoutes: FastifyPluginAsync = async (app) => {
         return controller.delete(request, reply);
     });
 
+    app.put('/endpoints/:id', async (request: FastifyRequest, reply: FastifyReply) => {
+        return controller.update(request, reply);
+    });
+
     // Dynamic proxy route for external Canvas REST API
     app.post('/proxy-external', async (request: FastifyRequest, reply: FastifyReply) => {
         try {