fix copilot complaints

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Author: handreyrc

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css

@@ -22,7 +22,7 @@
      React Flow renders .react-flow__edgelabel-renderer before NodeRenderer
      in the DOM, so without an explicit z-index it is painted behind nodes. */
   .dec-root .react-flow__edgelabel-renderer {
-    z-index: 1000;
+    z-index: var(--dec-zindex-edge-label-regular);
   }
 
   .dec-root .diagram-background {

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

@@ -25,6 +25,7 @@ import { useDiagramEditorContext } from "../../store/DiagramEditorContext";
 import { buildDiagramElements } from "./diagramBuilder";
 import { applyAutoLayout } from "./autoLayout";
 import { SidePanelTrigger } from "@/side-panel/SidePanelTrigger";
+import { ZINDEX } from "../zIndexConstants";
 
 const FIT_VIEW_OPTIONS: RF.FitViewOptions = {
   maxZoom: 1,
@@ -72,11 +73,11 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
       setEdges((edgesSnapshot) => {
         const updatedEdges = RF.applyEdgeChanges(changes, edgesSnapshot);
 
-        // Elevate selected edges above regular edges (z-index: 100)
-        // but keep them below edge labels (z-index: 1000+)
+        // Elevate selected edges above regular edges
+        // but keep them below edge labels
         return updatedEdges.map((edge) => ({
           ...edge,
-          zIndex: edge.selected ? 100 : 0,
+          zIndex: edge.selected ? ZINDEX.EDGE_SELECTED : ZINDEX.EDGE_REGULAR,
         }));
       });
     },
@@ -106,11 +107,11 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => {
           // Only update if this effect is still active (not cancelled by cleanup)
           if (isActive && !abortController?.signal.aborted) {
             setNodes(nodes);
-            // Apply z-index to edges: selected edges (100) above regular edges (0)
-            // but below edge labels (1000+)
+            // Apply z-index to edges: selected edges above regular edges
+            // but below edge labels
             const edgesWithZIndex = edges.map((edge) => ({
               ...edge,
-              zIndex: edge.selected ? 100 : 0,
+              zIndex: edge.selected ? ZINDEX.EDGE_SELECTED : ZINDEX.EDGE_REGULAR,
             }));
             setEdges(edgesWithZIndex);
 

packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx

@@ -16,6 +16,7 @@
 
 import * as RF from "@xyflow/react";
 import type { Point, WayPoints } from "../diagram/autoLayout";
+import { ZINDEX } from "../zIndexConstants";
 
 export enum EdgeTypes {
   Default = "default",
@@ -138,7 +139,7 @@ export function EdgeLabel(props: EdgeLabelProps) {
           <div
             style={{
               transform: `translate(-50%, -50%) translate(${x}px,${y}px)`,
-              zIndex: selected ? 1001 : 1000,
+              zIndex: selected ? ZINDEX.EDGE_LABEL_SELECTED : ZINDEX.EDGE_LABEL_REGULAR,
             }}
             className={type ? `edge-label ${type}` : "edge-label"}
           >

packages/serverless-workflow-diagram-editor/src/react-flow/zIndexConstants.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Z-index layering constants for diagram edges and labels.
+ *
+ * Layering hierarchy (bottom to top):
+ * 1. Regular edges (0)
+ * 2. Selected edges (100)
+ * 3. Edge labels - regular (1000)
+ * 4. Edge labels - selected (1001)
+ *
+ * This ensures:
+ * - Selected edges appear above regular edges
+ * - All labels appear above all edges (preventing overlap)
+ * - Selected edge labels appear above regular labels
+ */
+export const ZINDEX = {
+  /** Regular (unselected) edges */
+  EDGE_REGULAR: 0,
+
+  /** Selected edges - appear above regular edges but below all labels */
+  EDGE_SELECTED: 100,
+
+  /** Regular (unselected) edge labels - appear above all edges */
+  EDGE_LABEL_REGULAR: 1000,
+
+  /** Selected edge labels - appear above everything */
+  EDGE_LABEL_SELECTED: 1001,
+} as const;

packages/serverless-workflow-diagram-editor/src/styles.css

@@ -45,6 +45,12 @@
   .dec-root {
     @apply dec:h-full;
 
+    /* Z-index layering for edges and labels */
+    --dec-zindex-edge-regular: 0;
+    --dec-zindex-edge-selected: 100;
+    --dec-zindex-edge-label-regular: 1000;
+    --dec-zindex-edge-label-selected: 1001;
+
     --dec-error-accent: #ef4444;
     --dec-error-glow: rgba(239, 68, 68, 0.35);
     --dec-edge-selected: #aea6a6;

packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx

@@ -24,6 +24,7 @@ import { en } from "../../../src/i18n/locales/en";
 import { ReactFlowProvider, ReactFlow } from "@xyflow/react";
 import * as RF from "@xyflow/react";
 import * as autoLayoutModule from "../../../src/react-flow/diagram/autoLayout";
+import { ZINDEX } from "../../../src/react-flow/zIndexConstants";
 
 // Mock ReactFlow to capture props
 vi.mock("@xyflow/react", async () => {
@@ -256,13 +257,13 @@ describe("Diagram Component", () => {
       await waitFor(() => {
         const edges = vi.mocked(ReactFlow).mock.calls.at(-1)![0].edges!;
 
-        // Selected edge should have zIndex: 100 (above regular edges, below labels at 1000+)
-        expect(edges.find((e: RF.Edge) => e.id === "edge1")?.zIndex).toBe(100);
-        expect(edges.find((e: RF.Edge) => e.id === "edge2")?.zIndex).toBe(100);
+        // Selected edges should have elevated z-index (above regular edges, below labels)
+        expect(edges.find((e: RF.Edge) => e.id === "edge1")?.zIndex).toBe(ZINDEX.EDGE_SELECTED);
+        expect(edges.find((e: RF.Edge) => e.id === "edge2")?.zIndex).toBe(ZINDEX.EDGE_SELECTED);
       });
     });
 
-    it("should maintain z-index hierarchy: regular edges (0) < selected edges (100) < labels (1000+)", async () => {
+    it("should maintain z-index hierarchy: regular < selected edges < labels", async () => {
       applyAutoLayoutSpy.mockResolvedValueOnce({
         nodes: [],
         edges: [
@@ -282,13 +283,13 @@ describe("Diagram Component", () => {
         const selectedEdge = edges.find((e: RF.Edge) => e.id === "edge1");
         const regularEdge = edges.find((e: RF.Edge) => e.id === "edge2");
 
-        expect(selectedEdge?.zIndex).toBe(100);
-        expect(regularEdge?.zIndex).toBe(0);
+        expect(selectedEdge?.zIndex).toBe(ZINDEX.EDGE_SELECTED);
+        expect(regularEdge?.zIndex).toBe(ZINDEX.EDGE_REGULAR);
 
-        // Hierarchy in the test
-        // Regular edges: 0
-        // Selected edges: 100
-        // Edge labels: 1000+ (tested in Edges.test.tsx)
+        // Hierarchy uses centralized constants
+        // Regular edges: ZINDEX.EDGE_REGULAR
+        // Selected edges: ZINDEX.EDGE_SELECTED
+        // Edge labels: ZINDEX.EDGE_LABEL_REGULAR/SELECTED (tested in Edges.test.tsx)
       });
     });
   });

packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx

@@ -27,6 +27,7 @@ import {
   createPathFromWayPoints,
   getWayPointsMidpoint,
 } from "../../../src/react-flow/edges/Edges";
+import { ZINDEX } from "../../../src/react-flow/zIndexConstants";
 import * as RF from "@xyflow/react";
 
 describe("React Flow custom edge types", () => {
@@ -503,18 +504,18 @@ describe("EdgeLabel z-index behavior", () => {
   it.each([
     {
       selected: false,
-      expectedZIndex: 1000,
-      description: "applies z-index 1000 when selected=false",
+      expectedZIndex: ZINDEX.EDGE_LABEL_REGULAR,
+      description: "applies regular label z-index when selected=false",
     },
     {
       selected: true,
-      expectedZIndex: 1001,
-      description: "applies z-index 1001 when selected=true",
+      expectedZIndex: ZINDEX.EDGE_LABEL_SELECTED,
+      description: "applies selected label z-index when selected=true",
     },
     {
       selected: undefined,
-      expectedZIndex: 1000,
-      description: "applies default z-index 1000 when selected=undefined",
+      expectedZIndex: ZINDEX.EDGE_LABEL_REGULAR,
+      description: "applies default regular label z-index when selected=undefined",
     },
   ])("$description", ({ selected, expectedZIndex }) => {
     const result = EdgeLabel({
@@ -530,7 +531,7 @@ describe("EdgeLabel z-index behavior", () => {
     expect(resultString).toContain(`"zIndex":${expectedZIndex}`);
   });
 
-  it("applies default z-index 1000 when selected prop is not provided", () => {
+  it("applies default regular label z-index when selected prop is not provided", () => {
     const result = EdgeLabel({
       sourceX: 0,
       sourceY: 0,
@@ -540,7 +541,7 @@ describe("EdgeLabel z-index behavior", () => {
     });
 
     const resultString = JSON.stringify(result);
-    expect(resultString).toContain('"zIndex":1000');
+    expect(resultString).toContain(`"zIndex":${ZINDEX.EDGE_LABEL_REGULAR}`);
   });
 
   describe("integration with edge components", () => {
@@ -552,7 +553,7 @@ describe("EdgeLabel z-index behavior", () => {
       { component: ErrorEdge, edgeType: "error", edgeClass: "error", selected: false },
       { component: ConditionEdge, edgeType: "condition", edgeClass: "condition", selected: false },
     ])(
-      "$edgeType edge passes selected=$selected to EdgeLabel",
+      "$edgeType edge applies selected class when selected=$selected",
       ({ component: Component, edgeClass, selected }) => {
         const { container } = render(
           <RF.ReactFlowProvider>