merging dev to test

DSL/Ruuter/services/POST/services/edit.yml

@@ -36,6 +36,10 @@ declaration:
       - field: id
         type: string
         description: "Parameter 'id'"
+    headers:
+      - field: cookie
+        type: string
+        description: "Cookie field"    
 
 extract_request_data:
   assign:
@@ -169,6 +173,7 @@ assign_values:
     old_name: ${old_service_result.response.body[0].name}
     old_structure: ${old_service_result.response.body[0].structure}
     old_state: ${old_service_result.response.body[0].state}
+    service_type: ${old_service_result.response.body[0].type}
 
 check_new_structure:
   switch:
@@ -209,6 +214,25 @@ service_edit:
       state: ${state ?? 'draft'}
   result: editedService
 
+check for_state:
+  switch:
+    - condition: ${state === 'draft'}
+      next: change_state_to_draft
+  next: return_ok
+
+change_state_to_draft:
+  call: http.post
+  args:
+    url: "[#SERVICE_RUUTER]/services/status"
+    headers:
+      cookie: ${incoming.headers.cookie}
+    body:
+      id: ${id}
+      state: "draft"
+      type: ${service_type ?? 'POST'}
+  result: changeStateResult
+  next: return_ok
+
 return_ok:
   reloadDsl: true
   status: 200

GUI/package.json

@@ -33,6 +33,7 @@
     "howler": "^2.2.4",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
+    "jsoneditor": "^10.3.0",
     "moment": "^2.29.4",
     "msw": "^0.49.2",
     "node-html-markdown": "^1.3.0",
@@ -83,6 +84,7 @@
     "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-timer": "^3.0.2",
     "@types/howler": "^2.2.11",
+    "@types/jsoneditor": "^9.9.6",
     "@types/react": "^18.2.0",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^18.2.0",

GUI/src/components/ApiEndpointCard/Endpoints/Custom/index.tsx

@@ -72,7 +72,7 @@ const EndpointCustom: React.FC<EndpointCustomProps> = ({
               <FormSelect
                 name={"request-type"}
                 label={""}
-                style={{ borderRadius: "4px 0 0 4px", borderRight: 0 }}
+                style={{ borderRadius: "4px 0 0 4px", borderRight: 0, fontSize: "15px" }}
                 options={[
                   { label: "GET", value: "GET" },
                   { label: "POST", value: "POST" },

GUI/src/components/ApiEndpointCard/index.tsx

@@ -74,6 +74,7 @@ const ApiEndpointCard: FC<EndpointCardProps> = ({
                   placeholder={t("newService.endpoint.type").toString()}
                   options={options}
                   disabled={selectedTab === EndpointEnv.Test}
+                  style={{ fontSize: "15px" }}
                   onSelectionChange={(selection) => {
                     setOption(selection);
                     endpoint.type = selection?.value as EndpointType;

GUI/src/components/FlowElementsPopup/AssignBuilder/AssignElement.module.scss

@@ -0,0 +1,5 @@
+@import "src/styles/tools/color";
+
+.assignElement {
+  padding: 8px 16px 8px 16px;
+}

GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.module.scss

@@ -0,0 +1,14 @@
+@import "src/styles/tools/color";
+
+.dragHoverHighlight {
+  background-color: get-color(sea-green-1) !important;
+  border: 1px solid get-color(sea-green-10) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 0 8px get-color(sea-green-3) !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.editor {
+  height: 200px;
+  padding-top: 8px;
+}

GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import JSONEditor from "jsoneditor";
+import "jsoneditor/dist/jsoneditor.css";
+import { getDragData } from "utils/component-util";
+import { isObject, updateValueAtPath } from "utils/object-util";
+import styles from "./ObjectEditor.module.scss";
+import { stringToTemplate } from "utils/string-util";
+
+// Helper function to find the path to a node in the JSON structure
+const findNodePath = (node: Element, data: Record<string, unknown>): string | null => {
+  // Try to find by text content (for values)
+  const textContent = node.textContent?.trim();
+  if (textContent) {
+    const path = searchInCollection(data, textContent);
+    return path;
+  }
+
+  return null;
+};
+
+// Helper function to check if values match (handling different types)
+const isValueMatch = (objValue: unknown, value: string): boolean => {
+  // Handle boolean conversion
+  let booleanValue: boolean | null = null;
+  if (value.toLowerCase() === "true") {
+    booleanValue = true;
+  } else if (value.toLowerCase() === "false") {
+    booleanValue = false;
+  }
+
+  return (
+    objValue === value ||
+    (typeof objValue === "number" && !isNaN(Number(value)) && objValue === Number(value)) ||
+    (typeof objValue === "boolean" && objValue === booleanValue) ||
+    (objValue === null && value.toLowerCase() === "null")
+  );
+};
+
+// Helper function to search for value in an array
+const searchInArray = (array: unknown[], value: string, currentPath = ""): string | null => {
+  for (let index = 0; index < array.length; index++) {
+    const objValue = array[index];
+    const newPath = currentPath ? `${currentPath}[${index}]` : `[${index}]`;
+
+    if (isValueMatch(objValue, value)) return newPath;
+
+    if (isObject(objValue)) {
+      const result = searchInCollection(objValue, value, newPath);
+      if (result) return result;
+    }
+  }
+
+  return null;
+};
+
+// Helper function to search for value in an object
+const searchInObject = (obj: Record<string, unknown>, value: string, currentPath = ""): string | null => {
+  for (const [key, objValue] of Object.entries(obj)) {
+    const newPath = currentPath ? `${currentPath}.${key}` : String(key);
+
+    if (isValueMatch(objValue, value)) return newPath;
+
+    if (isObject(objValue)) {
+      const result = searchInCollection(objValue, value, newPath);
+      if (result) return result;
+    }
+  }
+
+  return null;
+};
+
+// Helper function to search for value in a collection
+const searchInCollection = (collection: object, value: string, currentPath = ""): string | null => {
+  if (Array.isArray(collection)) {
+    return searchInArray(collection, value, currentPath);
+  }
+
+  return searchInObject(collection as Record<string, unknown>, value, currentPath);
+};
+
+interface ObjectEditorProps {
+  onChange: (value: string) => void;
+  data: Record<string, unknown> | unknown[];
+}
+
+const ObjectEditor: React.FC<ObjectEditorProps> = ({ onChange, data }) => {
+  const { t, i18n } = useTranslation();
+  const jsonEditor = t("objectEditor", { returnObjects: true });
+  const editorRef = useRef<HTMLDivElement>(null);
+  const jsonEditorRef = useRef<JSONEditor | null>(null);
+  const [hoveredElement, setHoveredElement] = useState<Element | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current && !jsonEditorRef.current) {
+      const editor = new JSONEditor(editorRef.current, {
+        language: i18n.language,
+        languages: {
+          [i18n.language]: jsonEditor,
+        },
+        onChange: () => {
+          onChange(stringToTemplate(JSON.stringify(jsonEditorRef.current?.get())));
+        },
+      });
+
+      editor.set(data);
+      jsonEditorRef.current = editor;
+    }
+
+    return () => {
+      if (jsonEditorRef.current) {
+        jsonEditorRef.current.destroy();
+        jsonEditorRef.current = null;
+      }
+    };
+  }, []);
+
+  // Cleanup effect to remove highlight when component unmounts
+  useEffect(() => {
+    return () => {
+      if (hoveredElement) {
+        hoveredElement.classList.remove(styles.dragHoverHighlight);
+      }
+    };
+  }, [hoveredElement]);
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    // Get the element under the cursor
+    const element = document.elementFromPoint(e.clientX, e.clientY);
+    if (element) {
+      const jsonNode = element.closest(".jsoneditor-value");
+
+      // Remove highlight from previously hovered element
+      if (hoveredElement && hoveredElement !== jsonNode) {
+        hoveredElement.classList.remove(styles.dragHoverHighlight);
+      }
+
+      // Add highlight to currently hovered element
+      if (jsonNode && jsonNode !== hoveredElement) {
+        jsonNode.classList.add(styles.dragHoverHighlight);
+        setHoveredElement(jsonNode);
+      }
+    }
+  };
+
+  const handleDragLeave = () => {
+    // Remove highlight when leaving the drop zone
+    if (hoveredElement) {
+      hoveredElement.classList.remove(styles.dragHoverHighlight);
+      setHoveredElement(null);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    // Clean up highlight
+    if (hoveredElement) {
+      hoveredElement.classList.remove(styles.dragHoverHighlight);
+      setHoveredElement(null);
+    }
+
+    try {
+      const dragData = getDragData(e);
+      if (dragData && jsonEditorRef.current) {
+        // Extract just the value from the drag data
+        const valueToReplace = dragData.value;
+
+        // Get the element under the cursor
+        const element = document.elementFromPoint(e.clientX, e.clientY);
+        if (element) {
+          const jsonNode = element.closest(".jsoneditor-value");
+
+          if (jsonNode) {
+            // Get the current JSON data
+            const currentData = jsonEditorRef.current.get();
+
+            // Try to find the path to the dropped node
+            const path = findNodePath(jsonNode, currentData);
+
+            if (path) {
+              // Update the value at the specific path
+              const newData = updateValueAtPath(currentData, path, valueToReplace);
+
+              jsonEditorRef.current.update(newData);
+
+              onChange(stringToTemplate(JSON.stringify(newData)));
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error processing drop:", error);
+    }
+  };
+
+  return (
+    <div
+      ref={editorRef}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={styles.editor}
+      role="application"
+      aria-label={t("objectEditor.editor")!}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        // Handle keyboard interactions for accessibility
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          // Focus the editor for keyboard navigation
+          editorRef.current?.focus();
+        }
+      }}
+    />
+  );
+};
+
+export default ObjectEditor;