Pipeline GraphQL Conversion Part I

app/assets/javascripts/pages/projects/pipelines/show/index.js

 import initPipelineDetails from '~/pipelines/pipeline_details_bundle';
 import initPipelines from '../init_pipelines';
 
-document.addEventListener('DOMContentLoaded', () => {
-  initPipelines();
-  initPipelineDetails();
-});
+initPipelines();
+initPipelineDetails();

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -6,12 +6,10 @@ import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility';
 import pipelineGraph from './components/graph/graph_component.vue';
 import createDagApp from './pipeline_details_dag';
 import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
-import PipelinesMediator from './pipeline_details_mediator';
 import legacyPipelineHeader from './components/legacy_header_component.vue';
 import eventHub from './event_hub';
 import TestReports from './components/test_reports/test_reports.vue';
 import createTestReportsStore from './stores/test_reports';
-import { createPipelineHeaderApp } from './pipeline_details_header';
 
 Vue.use(Translate);
 
@@ -22,7 +20,7 @@ const SELECTORS = {
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
-const createPipelinesDetailApp = mediator => {
+const createLegacyPipelinesDetailApp = mediator => {
   if (!document.querySelector(SELECTORS.PIPELINE_GRAPH)) {
     return;
   }
@@ -127,18 +125,48 @@ const createTestDetails = () => {
   });
 };
 
-export default () => {
+export default async function() {
+  createTestDetails();
+  createDagApp();
+
   const { dataset } = document.querySelector(SELECTORS.PIPELINE_DETAILS);
-  const mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
-  mediator.fetchPipeline();
+  let mediator;
+
+  if (!gon.features.graphqlPipelineHeader || !gon.features.graphqlPipelineDetails) {
+    try {
+      const { default: PipelinesMediator } = await import(
+        /* webpackChunkName: 'PipelinesMediator' */ './pipeline_details_mediator'
+      );
+      mediator = new PipelinesMediator({ endpoint: dataset.endpoint });
+      mediator.fetchPipeline();
+    } catch {
+      Flash(__('An error occurred while loading the pipeline.'));
+    }
+  }
 
-  createPipelinesDetailApp(mediator);
+  if (gon.features.graphqlPipelineDetails) {
+    try {
+      const { createPipelinesDetailApp } = await import(
+        /* webpackChunkName: 'createPipelinesDetailApp' */ './pipeline_details_graph'
+      );
+      createPipelinesDetailApp();
+    } catch {
+      Flash(__('An error occurred while loading the pipeline.'));
+    }
+  } else {
+    createLegacyPipelinesDetailApp(mediator);
+  }
 
   if (gon.features.graphqlPipelineHeader) {
-    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER);
+    try {
+      const { createPipelineHeaderApp } = await import(
+        /* webpackChunkName: 'createPipelineHeaderApp' */ './pipeline_details_header'
+      );
+      createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER);
+    } catch {
+      Flash(__('An error occurred while loading a section of this page.'));
+    }
   } else {
     createLegacyPipelineHeaderApp(mediator);
   }
-  createTestDetails();
-  createDagApp();
-};
+}

app/assets/javascripts/pipelines/pipeline_details_dag.js

@@ -10,11 +10,12 @@ const apolloProvider = new VueApollo({
 });
 
 const createDagApp = () => {
-  if (!window.gon?.features?.dagPipelineTab) {
+  const el = document.querySelector('#js-pipeline-dag-vue');
+
+  if (!window.gon?.features?.dagPipelineTab || !el) {
     return;
   }
 
-  const el = document.querySelector('#js-pipeline-dag-vue');
   const { pipelineProjectPath, pipelineIid, emptySvgPath, dagDocPath } = el?.dataset;
 
   // eslint-disable-next-line no-new

app/assets/javascripts/pipelines/pipeline_details_graph.js

+const createPipelinesDetailApp = () => {
+  // Placeholder. See: https://gitlab.com/gitlab-org/gitlab/-/issues/223262
+  // eslint-disable-next-line no-useless-return
+  return;
+};
+
+export { createPipelinesDetailApp };

app/controllers/projects/pipelines_controller.rb

@@ -16,6 +16,7 @@ class Projects::PipelinesController < Projects::ApplicationController
     push_frontend_feature_flag(:pipelines_security_report_summary, project)
     push_frontend_feature_flag(:new_pipeline_form, project)
     push_frontend_feature_flag(:graphql_pipeline_header, project, type: :development, default_enabled: false)
+    push_frontend_feature_flag(:graphql_pipeline_details, project, type: :development, default_enabled: false)
     push_frontend_feature_flag(:new_pipeline_form_prefilled_vars, project, type: :development)
   end
   before_action :ensure_pipeline, only: [:show]

config/feature_flags/development/graphql_pipeline_details.yml

+---
+name: graphql_pipeline_details
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46380
+rollout_issue_url:
+type: development
+group: group::pipeline authoring
+default_enabled: false

ee/spec/features/projects/pipelines/pipeline_spec.rb

@@ -7,6 +7,7 @@ RSpec.describe 'Pipeline', :js do
   let_it_be(:project) { create(:project, :repository) }
 
   before do
+    stub_feature_flags(graphql_pipeline_details: false)
     sign_in(user)
 
     project.add_developer(user)

locale/gitlab.pot

@@ -3085,6 +3085,9 @@ msgstr ""
 msgid "An error occurred while initializing path locks"
 msgstr ""
 
+msgid "An error occurred while loading a section of this page."
+msgstr ""
+
 msgid "An error occurred while loading all the files."
 msgstr ""
 
@@ -3139,6 +3142,9 @@ msgstr ""
 msgid "An error occurred while loading the merge request."
 msgstr ""
 
+msgid "An error occurred while loading the pipeline."
+msgstr ""
+
 msgid "An error occurred while loading the pipelines jobs."
 msgstr ""
 

spec/features/projects/pipelines/pipeline_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe 'Pipeline', :js do
   before do
     sign_in(user)
     project.add_role(user, role)
+    stub_feature_flags(graphql_pipeline_details: false)
   end
 
   shared_context 'pipeline builds' do

spec/features/projects/pipelines/pipelines_spec.rb

@@ -12,6 +12,7 @@ RSpec.describe 'Pipelines', :js do
 
     before do
       sign_in(user)
+      stub_feature_flags(graphql_pipeline_details: false)
       project.add_developer(user)
       project.update!(auto_devops_attributes: { enabled: false })
     end