Fix Pipeline Editor visualisation not displaying needs relationships

Issue: Pipeline Editor Visualizer not displaying needs... (#576257) • Sahil Sharma • 18.6

What does this MR do and why?

This MR fixes a bug in the Pipeline Editor where the visualisation was not displaying needs relationships between jobs. The issue was introduced when the CI lint implementation was changed from a GraphQL query to a mutation.

Root Cause:

• The GraphQL mutation returns job dependencies in the format: needs: [{ name: 'job_name' }]
• The visualization utilities expect: needs: ['job_name']
• The data transformation that was previously done by unwrapStagesWithNeeds() was removed during the query-to-mutation refactor

Solution:

1. Modified unwrapNodesWithName() to handle both formats (inside .nodes wrapper or direct array)
2. Added unwrapStagesFromMutation() helper function to transform mutation response data
3. Applied transformation in pipeline_editor_app.vue before storing the mutation response

This ensures that the dependency arrows/connections are displayed between jobs and jobs without needs dependencies are greyed out on hover.

Screenshots or screen recordings

Before

After

How to set up and validate locally

1. Navigate to Build > Pipeline Editor in any project on your local GitLab instance
2. Replace the existing CI configuration with the following test pipeline:

   stages:
     - build
     - test
     - deploy
   
   build:frontend:
     stage: build
     script:
       - echo "Building frontend"
   
   build:backend:
     stage: build
     script:
       - echo "Building backend"
   
   build:assets:
     stage: build
     script:
       - echo "Building assets"
   
   test:unit:
     stage: test
     script:
       - echo "Running unit tests"
   
   test:integration:
     stage: test
     script:
       - echo "Running integration tests"
   
   test:e2e:
     stage: test
     needs:
       - build:frontend
       - build:backend
       - build:assets
     script:
       - echo "Running E2E tests"
   
   deploy:staging:
     stage: deploy
     script:
       - echo "Deploying to staging"
   
   deploy:production:
     stage: deploy
     script:
       - echo "Deploying to production"
   
   deploy:canary:
     stage: deploy
     script:
       - echo "Deploying canary"

3. Switch to the Visualize tab
4. Verify the following behaviors are working correctly:
   • Dependency arrows are drawn from build:frontend, build:backend, and build:assets to test:e2e
   • Hover on test:e2e: All three build jobs (build:frontend, build:backend, build:assets) and test:e2e itself are highlighted
   • Hover on test:e2e: Jobs without dependencies (test:unit, test:integration, and all deploy jobs) are greyed out
   • Hover on jobs without needs (e.g., deploy:staging): No special highlighting occurs

MR acceptance checklist

This MR has been evaluated against the MR acceptance checklist.