Merge branch 'master' into changes-for-new-plugin-website

Author: MilosPaunovic

src/components/misc/Collapsible.vue

@@ -49,6 +49,7 @@
     const getHash = computed(() => `#${props.href}-body`);
     const handleToggle = (event: Event) => {
         event.preventDefault();
+        event.stopPropagation();
         collapsed.value = !collapsed.value;
         open.value = !collapsed.value;
         if(!collapsed.value) {
@@ -57,7 +58,12 @@
         if(props.noUrlChange) {
             return;
         }
-        window.location.hash = collapsed.value ? "" : getHash.value
+        
+        if (collapsed.value) {
+            history.replaceState(null, "", window.location.pathname + window.location.search);
+        } else {
+            window.location.hash = getHash.value;
+        }
     };
 
     const open = ref(false);

src/components/misc/Status.vue

@@ -1,6 +1,5 @@
 <template>
     <button
-        data-test-id="status"
         type="button"
         :class="classes"
     >

src/components/nodes/EdgeNode.vue

@@ -17,7 +17,7 @@
             :style="{
                 pointerEvents: 'all',
                 position: 'absolute',
-                transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+                transform: `translate(-50%, -50%) translate(${path[1] + labelXOffset}px,${path[2] + labelYOffset}px)`,
             }"
         >
             <tooltip :title>
@@ -103,6 +103,22 @@
 
 
     const path = computed(() => getSmoothStepPath(props as any));
+    const isVertical = computed(() => {
+        const dx = (props.targetX ?? 0) - (props.sourceX ?? 0);
+        const dy = (props.targetY ?? 0) - (props.sourceY ?? 0);
+        return Math.abs(dy) >= Math.abs(dx);
+    });
+
+    const OFFSET = 14; 
+    const labelYOffset = computed(() => {
+        if (!isVertical.value) return 0;
+        const boundary = props.data?.edgeBoundary;
+        if (boundary === "top") return -OFFSET;
+        if (boundary === "bottom") return OFFSET;
+        return 0;
+    });
+
+    const labelXOffset = computed(() => 0);
 
     defineOptions({
         inheritAttrs: false,

src/components/plugins/SchemaToHtml.vue

@@ -160,9 +160,13 @@
             return;
         }
 
-        const definitionKey = hash.includes("#") ? hash.split("#").pop()?.split(".").pop() : hash;
+        const cleanHash = hash.replace(/-body$/, "");
+        
+        const definitionKey = Object.keys(props.schema.definitions).find(defKey => 
+            cleanHash === defKey || cleanHash.startsWith(defKey + "_")
+        );
 
-        if (definitionKey && definitionKey in props.schema.definitions) {
+        if (definitionKey) {
             definitionsExpanded.value = true;
             forceExpandKey.value += 1;
             expandedDefinitions.value.clear();
@@ -174,7 +178,7 @@
             const maxAttempts = 30;
 
             const attemptScroll = () => {
-                const element = document.getElementById(definitionKey);
+                const element = document.getElementById(cleanHash);
                 if (element) {
                     element.scrollIntoView({behavior: "smooth", block: "start"});
                 } else if (attempts < maxAttempts) {

src/utils/VueFlowUtils.ts

@@ -176,7 +176,7 @@ export function generateDagreGraph(
             continue;
         }
         if (!edgeReplacer[cluster.cluster.uid]) {
-            dagreGraph.setNode(cluster.cluster.uid, {clusterLabelPos: "top"});
+           dagreGraph.setNode(cluster.cluster.uid, {clusterLabelPos: "top"});
 
             for (const node of cluster.nodes || []) {
                 if (!hiddenNodes.includes(node)) {
@@ -643,6 +643,14 @@ export function generateGraph(
         );
         if (newEdge) {
             const edgeColor = getEdgeColor(edge, nodeByUid, clusterByNodeUid);
+            const targetNodeType = nodeByUid[newEdge.target]?.type ?? "";
+            const sourceNodeType = nodeByUid[newEdge.source]?.type ?? "";
+            let edgeBoundary: "top" | "bottom" | undefined = undefined;
+            if (typeof targetNodeType === "string" && targetNodeType.endsWith("GraphClusterRoot")) {
+                edgeBoundary = "top";
+            } else if (typeof sourceNodeType === "string" && sourceNodeType.endsWith("GraphClusterEnd")) {
+                edgeBoundary = "bottom";
+            }
             elements.push({
                 id: newEdge.source + "|" + newEdge.target,
                 source: newEdge.source,
@@ -665,6 +673,7 @@ export function generateGraph(
                             clusterRootTaskNodeUids,
                             readOnlyUidPrefixes
                         ),
+                    edgeBoundary: edgeBoundary,
                     haveDashArray:
                         nodeByUid[edge.source].type.endsWith("GraphTrigger") ||
                         nodeByUid[edge.target].type.endsWith("GraphTrigger") ||
@@ -682,7 +691,6 @@ export function generateGraph(
 
     return elements;
 }
-
 export function isClusterRootOrEnd(node: MinimalNode) {
     return ["GraphClusterRoot", "GraphClusterFinally", "GraphClusterAfterExecution", "GraphClusterEnd"].some((s) =>
         node.type.endsWith(s)

src/utils/constants.ts

@@ -23,18 +23,6 @@ export const EVENTS = {
 
 export const CLUSTER_PREFIX = "cluster_";
 
-export const stateGlobalChartTypes = {
-  EXECUTIONS: "executions",
-  TASKRUNS: "taskruns",
-} as const;
-
-export const logDisplayTypes = {
-  ALL: "all",
-  ERROR: "error",
-  HIDDEN: "hidden",
-  DEFAULT: "all",
-} as const;
-
 export const NODE_SIZES = {
   TASK_WIDTH: 184,
   TASK_HEIGHT: 44,
@@ -47,36 +35,3 @@ export const NODE_SIZES = {
   TRIGGER_CLUSTER_WIDTH: 350,
   TRIGGER_CLUSTER_HEIGHT: 180,
 } as const;
-
-export const editorViewTypes = {
-  STORAGE_KEY: "view-type",
-  SOURCE: "source",
-  SOURCE_TOPOLOGY: "source-topology",
-  SOURCE_DOC: "source-doc",
-  TOPOLOGY: "topology",
-  SOURCE_BLUEPRINTS: "source-blueprints",
-} as const;
-
-export const storageKeys = {
-  DISPLAY_EXECUTIONS_COLUMNS: "displayExecutionsColumns",
-  DISPLAY_FLOW_EXECUTIONS_COLUMNS: "displayFlowExecutionsColumns",
-  SELECTED_TENANT: "selectedTenant",
-  EXECUTE_FLOW_BEHAVIOUR: "executeFlowBehaviour",
-  SHOW_CHART: "showChart",
-  SHOW_FLOWS_CHART: "showFlowsChart",
-  SHOW_LOGS_CHART: "showLogsChart",
-  DEFAULT_NAMESPACE: "defaultNamespace",
-  LATEST_NAMESPACE: "latestNamespace",
-  PAGINATION_SIZE: "paginationSize",
-  IMPERSONATE: "impersonate",
-  EDITOR_VIEW_TYPE: "editorViewType",
-} as const;
-
-export const executeFlowBehaviours = {
-  SAME_TAB: "same tab",
-  NEW_TAB: "new tab",
-} as const;
-
-export const stateDisplayValues = {
-  INPROGRESS: "IN-PROGRESS",
-} as const;