Add check in linked graphs

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -3,7 +3,7 @@ import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.qu
 import { LOAD_FAILURE } from '../../constants';
 import { reportToSentry } from '../../utils';
 import { listByLayers } from '../parsing_utils';
-import { ONE_COL_WIDTH, UPSTREAM, LAYER_VIEW } from './constants';
+import { ONE_COL_WIDTH, UPSTREAM, LAYER_VIEW, STAGE_VIEW } from './constants';
 import LinkedPipeline from './linked_pipeline.vue';
 import {
   getQueryHeaders,
@@ -80,6 +80,9 @@ export default {
     graphPosition() {
       return this.isUpstream ? 'left' : 'right';
     },
+    graphViewType() {
+      return this.currentPipeline?.usesNeeds ? this.viewType : STAGE_VIEW;
+    },
     isUpstream() {
       return this.type === UPSTREAM;
     },
@@ -223,7 +226,7 @@ export default {
               :pipeline-layers="getPipelineLayers(pipeline.id)"
               :show-links="showLinks"
               :is-linked-pipeline="true"
-              :view-type="viewType"
+              :view-type="graphViewType"
             />
           </div>
         </li>

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

@@ -121,6 +121,26 @@ describe('Linked Pipelines Column', () => {
       });
     });
 
+    describe('when graph does not use needs', () => {
+      beforeEach(() => {
+        const nonNeedsResponse = { ...wrappedPipelineReturn };
+        nonNeedsResponse.data.project.pipeline.usesNeeds = false;
+
+        createComponentWithApollo({
+          props: {
+            viewType: LAYER_VIEW,
+          },
+          getPipelineDetailsHandler: jest.fn().mockResolvedValue(nonNeedsResponse),
+          mountFn: mount,
+        });
+      });
+
+      it('shows the stage view, even when the main graph view type is layers', async () => {
+        await clickExpandButtonAndAwaitTimers();
+        expect(findPipelineGraph().props('viewType')).toBe(STAGE_VIEW);
+      });
+    });
+
     describe('downstream', () => {
       describe('when successful', () => {
         beforeEach(() => {