Fix CI viz to work with new nodes structure

There were some small issues with the ci viz
that needed to be updated.

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -102,11 +102,11 @@ export default {
         };
       },
       update(data) {
-        const { ciConfigData } = data || {};
-        const stageNodes = ciConfigData?.stages?.nodes || [];
+        const { ciConfig } = data || {};
+        const stageNodes = ciConfig?.stages?.nodes || [];
         const stages = unwrapStagesWithNeeds(stageNodes);
 
-        return { ...ciConfigData, stages };
+        return { ...ciConfig, stages };
       },
       error() {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -47,8 +47,11 @@ export default {
     };
   },
   computed: {
+    pipelineStages() {
+      return this.pipelineData?.stages || [];
+    },
     isPipelineDataEmpty() {
-      return !this.isInvalidCiConfig && isEmpty(this.pipelineData?.stages);
+      return !this.isInvalidCiConfig && isEmpty(this.pipelineStages);
     },
     isInvalidCiConfig() {
       return this.pipelineData?.status === CI_CONFIG_STATUS_INVALID;
@@ -133,7 +136,7 @@ export default {
   methods: {
     prepareLinkData() {
       try {
-        const arrayOfJobs = unwrapArrayOfJobs(this.pipelineData);
+        const arrayOfJobs = unwrapArrayOfJobs(this.pipelineStages);
         const parsedData = parseData(arrayOfJobs);
         this.links = generateLinksData(parsedData, this.$options.CONTAINER_ID);
       } catch {
@@ -141,7 +144,7 @@ export default {
       }
     },
     getStageBackgroundClasses(index) {
-      const { length } = this.pipelineData.stages;
+      const { length } = this.pipelineStages;
       // It's possible for a graph to have only one stage, in which
       // case we concatenate both the left and right rounding classes
       if (length === 1) {
@@ -162,7 +165,7 @@ export default {
       // The first time we hover, we create the object where
       // we store all the data to properly highlight the needs.
       if (!this.needsObject) {
-        const jobs = createJobsHash(this.pipelineData);
+        const jobs = createJobsHash(this.pipelineStages);
         this.needsObject = generateJobNeedsDict(jobs) ?? {};
       }
 
@@ -227,7 +230,7 @@ export default {
         </template>
       </svg>
       <div
-        v-for="(stage, index) in pipelineData.stages"
+        v-for="(stage, index) in pipelineStages"
         :key="`${stage.name}-${index}`"
         class="gl-flex-direction-column"
       >

spec/frontend/pipelines/pipeline_graph/mock_data.js

@@ -78,18 +78,12 @@ export const pipelineData = {
       groups: [
         {
           name: 'deploy_1',
-          jobs: [{ script: 'yarn magick', stage: 'deploy' }],
+          jobs: [{ script: 'yarn magick', stage: 'deploy', needs: ['test_1'] }],
           id: jobId4,
         },
       ],
     },
   ],
-  jobs: {
-    [jobId1]: {},
-    [jobId2]: {},
-    [jobId3]: {},
-    [jobId4]: {},
-  },
 };
 
 export const singleStageData = {

spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlAlert } from '@gitlab/ui';
 import { pipelineData, singleStageData } from './mock_data';
-import { CI_CONFIG_STATUS_INVALID } from '~/pipeline_editor/constants';
+import { CI_CONFIG_STATUS_INVALID, CI_CONFIG_STATUS_VALID } from '~/pipeline_editor/constants';
 import { DRAW_FAILURE, EMPTY_PIPELINE_DATA, INVALID_CI_CONFIG } from '~/pipelines/constants';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import StagePill from '~/pipelines/components/pipeline_graph/stage_pill.vue';
@@ -56,18 +56,20 @@ describe('pipeline graph component', () => {
     });
   });
 
-  describe('without `INVALID` status', () => {
+  describe('with `VALID` status', () => {
     beforeEach(() => {
-      wrapper = createComponent();
+      wrapper = createComponent({
+        pipelineData: { status: CI_CONFIG_STATUS_VALID, stages: [{ name: 'hello', groups: [] }] },
+      });
     });
 
     it('renders the graph with no status error', () => {
-      expect(findAlert().text()).not.toBe(wrapper.vm.$options.warningTexts[INVALID_CI_CONFIG]);
+      expect(findAlert().exists()).toBe(false);
       expect(findPipelineGraph().exists()).toBe(true);
     });
   });
 
-  describe('with error while rendering the links', () => {
+  describe('with error while rendering the links with needs', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });