Add realtime pipeline status component for files

Author: Jose Ivan Vargas

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

@@ -1,7 +1,29 @@
+import Vue from 'vue';
+import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import BlobViewer from '~/blob/viewer/index';
 import initBlob from '~/pages/projects/init_blob';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
   initBlob();
+
+  const CommitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
+  const statusLink = document.querySelector('.commit-actions .ci-status-link');
+  if (statusLink) {
+    statusLink.remove();
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: CommitPipelineStatusEl,
+      components: {
+        commitPipelineStatus,
+      },
+      render(createElement) {
+        return createElement('commit-pipeline-status', {
+          props: {
+            endpoint: CommitPipelineStatusEl.dataset.endpoint,
+          },
+        });
+      },
+    });
+  }
 });

changelogs/unreleased/jivl-realtime-update-adding-file.yml

@@ -0,0 +1,5 @@
+---
+title: Add realtime pipeline status for adding/viewing files
+merge_request: 17705
+author:
+type: other

spec/features/projects/blobs/blob_show_spec.rb

@@ -509,4 +509,20 @@ def visit_blob(path, anchor: nil, ref: 'master')
       end
     end
   end
+
+  context 'realtime pipelines' do
+    let(:user) { create(:user) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'feature', sha: project.commit.id, user: user, status: :success) }
+
+    before do
+      project.add_master(user)
+      sign_in(user)
+      visit_blob('files/ruby/popen.rb', ref: 'feature')
+    end
+    
+    it 'should show the realtime pipeline status' do
+      wait_for_requests
+      expect(find('.js-commit-pipeline-status')).not_to be nil
+    end
+  end
 end