Merge branch '285125-reduce-pipelines-lcp-dom' into 'master'

Render pipelines without DOMContentLoaded

See merge request gitlab-org/gitlab!48696

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

-import Vue from 'vue';
-import { GlToast } from '@gitlab/ui';
-import { doesHashExistInUrl } from '~/lib/utils/url_utility';
-import {
-  parseBoolean,
-  historyReplaceState,
-  buildUrlWithCurrentLocation,
-} from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
-import PipelinesStore from '../../../../pipelines/stores/pipelines_store';
-import pipelinesComponent from '../../../../pipelines/components/pipelines_list/pipelines.vue';
-import Translate from '../../../../vue_shared/translate';
+import { initPipelinesIndex } from '~/pipelines/pipelines_index';
 
-Vue.use(Translate);
-Vue.use(GlToast);
-
-document.addEventListener(
-  'DOMContentLoaded',
-  () =>
-    new Vue({
-      el: '#pipelines-list-vue',
-      components: {
-        pipelinesComponent,
-      },
-      data() {
-        return {
-          store: new PipelinesStore(),
-        };
-      },
-      created() {
-        this.dataset = document.querySelector(this.$options.el).dataset;
-
-        if (doesHashExistInUrl('delete_success')) {
-          this.$toast.show(__('The pipeline has been deleted'));
-          historyReplaceState(buildUrlWithCurrentLocation());
-        }
-      },
-      render(createElement) {
-        return createElement('pipelines-component', {
-          props: {
-            store: this.store,
-            endpoint: this.dataset.endpoint,
-            pipelineScheduleUrl: this.dataset.pipelineScheduleUrl,
-            helpPagePath: this.dataset.helpPagePath,
-            emptyStateSvgPath: this.dataset.emptyStateSvgPath,
-            errorStateSvgPath: this.dataset.errorStateSvgPath,
-            noPipelinesSvgPath: this.dataset.noPipelinesSvgPath,
-            autoDevopsPath: this.dataset.helpAutoDevopsPath,
-            newPipelinePath: this.dataset.newPipelinePath,
-            canCreatePipeline: parseBoolean(this.dataset.canCreatePipeline),
-            hasGitlabCi: parseBoolean(this.dataset.hasGitlabCi),
-            ciLintPath: this.dataset.ciLintPath,
-            resetCachePath: this.dataset.resetCachePath,
-            projectId: this.dataset.projectId,
-            params: JSON.parse(this.dataset.params),
-          },
-        });
-      },
-    }),
-);
+initPipelinesIndex();

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

@@ -62,7 +62,7 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsPath: {
+    autoDevopsHelpPath: {
       type: String,
       required: true,
     },
@@ -342,7 +342,7 @@ export default {
           :pipelines="state.pipelines"
           :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
-          :auto-devops-help-path="autoDevopsPath"
+          :auto-devops-help-path="autoDevopsHelpPath"
           :view-type="viewType"
         />
       </div>

app/assets/javascripts/pipelines/pipelines_index.js

+import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { doesHashExistInUrl } from '~/lib/utils/url_utility';
+import {
+  parseBoolean,
+  historyReplaceState,
+  buildUrlWithCurrentLocation,
+} from '~/lib/utils/common_utils';
+import Translate from '~/vue_shared/translate';
+import Pipelines from './components/pipelines_list/pipelines.vue';
+import PipelinesStore from './stores/pipelines_store';
+
+Vue.use(Translate);
+Vue.use(GlToast);
+
+export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
+  const el = document.querySelector(selector);
+  if (!el) {
+    return null;
+  }
+
+  const {
+    endpoint,
+    pipelineScheduleUrl,
+    helpPagePath,
+    emptyStateSvgPath,
+    errorStateSvgPath,
+    noPipelinesSvgPath,
+    autoDevopsHelpPath,
+    newPipelinePath,
+    canCreatePipeline,
+    hasGitlabCi,
+    ciLintPath,
+    resetCachePath,
+    projectId,
+    params,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    data() {
+      return {
+        store: new PipelinesStore(),
+      };
+    },
+    created() {
+      if (doesHashExistInUrl('delete_success')) {
+        this.$toast.show(__('The pipeline has been deleted'));
+        historyReplaceState(buildUrlWithCurrentLocation());
+      }
+    },
+    render(createElement) {
+      return createElement(Pipelines, {
+        props: {
+          store: this.store,
+          endpoint,
+          pipelineScheduleUrl,
+          helpPagePath,
+          emptyStateSvgPath,
+          errorStateSvgPath,
+          noPipelinesSvgPath,
+          autoDevopsHelpPath,
+          newPipelinePath,
+          canCreatePipeline: parseBoolean(canCreatePipeline),
+          hasGitlabCi: parseBoolean(hasGitlabCi),
+          ciLintPath,
+          resetCachePath,
+          projectId,
+          params: JSON.parse(params),
+        },
+      });
+    },
+  });
+};

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

@@ -8,7 +8,7 @@
   project_id: @project.id,
   params: params.to_json,
   "help-page-path" => help_page_path('ci/quick_start/README'),
-  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+  "auto-devops-help-path" => help_page_path('topics/autodevops/index.md'),
   "pipeline-schedule-url" => pipeline_schedules_path(@project),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),

spec/frontend/pipelines/pipelines_spec.js

@@ -31,7 +31,7 @@ describe('Pipelines', () => {
 
   const paths = {
     endpoint: 'twitter/flight/pipelines.json',
-    autoDevopsPath: '/help/topics/autodevops/index.md',
+    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
@@ -43,7 +43,7 @@ describe('Pipelines', () => {
 
   const noPermissions = {
     endpoint: 'twitter/flight/pipelines.json',
-    autoDevopsPath: '/help/topics/autodevops/index.md',
+    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',