WIP: Add external pipeline support to MR widget

See https://gitlab.com/gitlab-org/gitlab-ce/issues/30714
Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33287

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js

@@ -21,10 +21,38 @@ export default {
       return statusIconEntityMap.icon_status_failed;
     },
     stageText() {
-      return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
+      let stageText = 'stage';
+      if (
+        this.mr.pipeline &&
+        this.mr.pipeline.details &&
+        this.mr.pipeline.details.stages &&
+        this.mr.pipeline.details.stages.length > 1
+      ) {
+        stageText = 'stages';
+      }
+
+      return stageText;
+    },
+    stages() {
+      let stages = [];
+      if (this.mr.pipeline.details && this.mr.pipeline.details.stages) {
+        stages = this.mr.pipeline.details.stages;
+      }
+
+      return stages;
     },
     status() {
-      return this.mr.pipeline.details.status || {};
+      console.log('mr', this.mr);
+      console.log('mr pipeline', this.mr.pipeline);
+      let status = {
+        group: this.mr.ciStatus,
+      };
+      if (this.mr.pipeline && this.mr.pipeline.details) {
+        status = this.mr.pipeline.details.status;
+      }
+
+      console.log('mr status', status);
+      return status;
     },
   },
   template: `
@@ -44,33 +72,42 @@ export default {
           <div class="ci-status-icon append-right-10">
             <a
               class="icon-link"
-              :href="this.status.details_path">
+              :href="status.details_path">
               <ci-icon :status="status" />
             </a>
           </div>
           <div class="media-body">
-            <span>
+            <span v-if="mr.pipeline.id">
               Pipeline
               <a
                 :href="mr.pipeline.path"
                 class="pipeline-id">#{{mr.pipeline.id}}</a>
             </span>
-            <span class="mr-widget-pipeline-graph">
+            <span v-else>
+              External pipeline
+            </span>
+            <span
+              v-if="stages.length > 0"
+              class="mr-widget-pipeline-graph">
               <span class="stage-cell">
                 <div
-                  v-if="mr.pipeline.details.stages.length > 0"
-                  v-for="stage in mr.pipeline.details.stages"
+                  v-for="stage in stages"
                   class="stage-container dropdown js-mini-pipeline-graph">
                   <pipeline-stage :stage="stage" />
                 </div>
               </span>
             </span>
+            <span v-else>
+              <pipeline-stage :stage="status" disable-dropdown="true" />
+            </span>
             <span>
-              {{mr.pipeline.details.status.label}} for
-              <a
-                :href="mr.pipeline.commit.commit_path"
-                class="commit-sha js-commit-link">
-                {{mr.pipeline.commit.short_id}}</a>.
+              {{status.label}}
+              <template v-if="mr.pipeline.commit">for
+                <a
+                  :href="mr.pipeline.commit.commit_path"
+                  class="commit-sha js-commit-link">
+                  {{mr.pipeline.commit.short_id}}</a>.
+              </template>
             </span>
             <span
               v-if="mr.pipeline.coverage"

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -85,6 +85,7 @@ export default {
         .then(res => res.json())
         .then((res) => {
           this.handleNotification(res);
+          console.log('checkStatus request', res);
           this.mr.setData(res);
           this.setFavicon();
@@ -177,6 +178,7 @@ export default {
       });
       eventHub.$on('UpdateWidgetData', (data) => {
+        console.log('UpdateWidgetData', data);
         this.mr.setData(data);
       });

app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -11,6 +11,7 @@ export default class MergeRequestStore {
   }
   setData(data) {
+    console.log('setData', data);
     const currentUser = data.current_user;
     const pipelineStatus = data.pipeline ? data.pipeline.details.status : null;

app/assets/javascripts/vue_shared/components/ci_icon.vue

@@ -32,7 +32,7 @@
     computed: {
       statusIconSvg() {
-        return statusIconEntityMap[this.status.icon];
+        return statusIconEntityMap[this.status.icon || `icon_status_${this.status.group}`];
       },
       cssClass() {

app/helpers/ci_status_helper.rb

@@ -61,34 +61,37 @@ module CiStatusHelper
     status.humanize
   end
+  def ci_icon_name_for_status(status)
+    case status
+    when 'success'
+      'icon_status_success'
+    when 'success_with_warnings'
+      'icon_status_warning'
+    when 'failed'
+      'icon_status_failed'
+    when 'pending'
+      'icon_status_pending'
+    when 'running'
+      'icon_status_running'
+    when 'play'
+      'icon_play'
+    when 'created'
+      'icon_status_created'
+    when 'skipped'
+      'icon_status_skipped'
+    when 'manual'
+      'icon_status_manual'
+    else
+      'icon_status_canceled'
+    end
+  end
+
   def ci_icon_for_status(status)
     if detailed_status?(status)
       return custom_icon(status.icon)
     end
-    icon_name =
-      case status
-      when 'success'
-        'icon_status_success'
-      when 'success_with_warnings'
-        'icon_status_warning'
-      when 'failed'
-        'icon_status_failed'
-      when 'pending'
-        'icon_status_pending'
-      when 'running'
-        'icon_status_running'
-      when 'play'
-        'icon_play'
-      when 'created'
-        'icon_status_created'
-      when 'skipped'
-        'icon_status_skipped'
-      when 'manual'
-        'icon_status_manual'
-      else
-        'icon_status_canceled'
-      end
+    icon_name = ci_icon_name_for_status(status)
     custom_icon(icon_name)
   end

app/serializers/merge_request_entity.rb

 class MergeRequestEntity < IssuableEntity
   include RequestAwareEntity
+  include MergeRequestsHelper
+  include CiStatusHelper
   expose :in_progress_merge_commit_sha
   expose :merge_commit_sha
@@ -28,7 +30,6 @@ class MergeRequestEntity < IssuableEntity
   expose :merge_commit_sha
   expose :merge_commit_message
-  expose :head_pipeline, with: PipelineDetailsEntity, as: :pipeline
   # Booleans
   expose :merge_ongoing?, as: :merge_ongoing
@@ -54,6 +55,39 @@ class MergeRequestEntity < IssuableEntity
   expose :ci_status do |merge_request|
     presenter(merge_request).ci_status
   end
+  #expose :head_pipeline, with: PipelineDetailsEntity, as: :pipeline
+  expose :pipeline do |merge_request|
+    ci_service = merge_request.source_project.try(:ci_service)
+    if ci_service
+      group_status = presenter(merge_request).ci_status
+      details_path = ci_build_details_path(merge_request)
+
+      status_map = {
+        icon: ci_icon_name_for_status(group_status),
+        text: ci_text_for_status(group_status),
+        label: ci_label_for_status(group_status),
+        group: group_status,
+        has_details: !details_path.nil?,
+        details_path: details_path
+      }
+
+      {
+        details: {
+          status: status_map,
+          stages: [{
+            name: 'Build',
+            title: "Build: #{ci_label_for_status(group_status)}",
+            status: status_map
+          }]
+        }
+      }
+    else
+      # Currently doesn't work, `undefined method expose for #<MergeRequestEntity:xxx>`
+      # https://github.com/ruby-grape/grape-entity#merge-fields
+      # https://github.com/ruby-grape/grape-entity/issues/191
+      expose :head_pipeline, merge: true, with: PipelineDetailsEntity
+    end
+  end
   expose :issues_links do
     expose :assign_to_closing do |merge_request|