Merge branch '276949-pipeline-query-startup' into 'master'

Pipeline Graph Structural Update: Get Performant

See merge request gitlab-org/gitlab!51899

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

 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
 import { DEFAULT, LOAD_FAILURE } from '../../constants';
-import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
 import PipelineGraph from './graph_component.vue';
 import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 

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

 <script>
-import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
 import { UPSTREAM } from './constants';

app/assets/javascripts/pipelines/graphql/fragments/linked_pipelines.fragment.graphql

-fragment LinkedPipelineData on Pipeline {
-  id
-  iid
-  path
-  status: detailedStatus {
-    group
-    label
-    icon
-  }
-  sourceJob {
-    name
-  }
-  project {
-    name
-    fullPath
-  }
-}

app/assets/javascripts/pipelines/graphql/queries/get_pipeline_details.query.graphql → app/graphql/queries/pipelines/get_pipeline_details.query.graphql

-#import "../fragments/linked_pipelines.fragment.graphql"
+fragment LinkedPipelineData on Pipeline {
+  __typename
+  id
+  iid
+  path
+  status: detailedStatus {
+    __typename
+    group
+    label
+    icon
+  }
+  sourceJob {
+    __typename
+    name
+  }
+  project {
+    __typename
+    name
+    fullPath
+  }
+}
 
 query getPipelineDetails($projectPath: ID!, $iid: ID!) {
   project(fullPath: $projectPath) {
+    __typename
     pipeline(iid: $iid) {
+      __typename
       id
       iid
       downstream {
+        __typename
         nodes {
           ...LinkedPipelineData
         }
@@ -14,18 +37,25 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) {
         ...LinkedPipelineData
       }
       stages {
+        __typename
         nodes {
+          __typename
           name
           status: detailedStatus {
+            __typename
             action {
+              __typename
               icon
               path
               title
             }
           }
           groups {
+            __typename
             nodes {
+              __typename
               status: detailedStatus {
+                __typename
                 label
                 group
                 icon
@@ -33,21 +63,27 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) {
               name
               size
               jobs {
+                __typename
                 nodes {
+                  __typename
                   name
                   scheduledAt
                   needs {
+                    __typename
                     nodes {
+                      __typename
                       name
                     }
                   }
                   status: detailedStatus {
+                    __typename
                     icon
                     tooltip
                     hasDetails
                     detailsPath
                     group
                     action {
+                      __typename
                       buttonTitle
                       icon
                       path

app/views/projects/pipelines/show.html.haml

@@ -6,6 +6,9 @@
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
 
+- if Feature.enabled?(:graphql_pipeline_details, @project)
+  - add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
+
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
   - if @pipeline.commit.present?

spec/frontend/pipelines/graph/graph_component_wrapper_spec.js

@@ -3,9 +3,9 @@ import VueApollo from 'vue-apollo';
 import { shallowMount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
-import getPipelineDetails from '~/pipelines/graphql/queries/get_pipeline_details.query.graphql';
 import { mockPipelineResponse } from './mock_data';
 
 const defaultProvide = {

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

 import VueApollo from 'vue-apollo';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
 import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue';
-import getPipelineDetails from '~/pipelines/graphql/queries/get_pipeline_details.query.graphql';
 import { DOWNSTREAM, GRAPHQL } from '~/pipelines/components/graph/constants';
 import { LOAD_FAILURE } from '~/pipelines/constants';
 import {