Add realtime pipeline status component for files

3 files changed, 43 insertions, 0 deletions

diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 26cbb279d4a..85c6862d629 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/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,
+          },
+        });
+      },
+    });
+  }
 });
diff --git a/changelogs/unreleased/jivl-realtime-update-adding-file.yml b/changelogs/unreleased/jivl-realtime-update-adding-file.yml
new file mode 100644
index 00000000000..df1bdb1648d
--- /dev/null
+++ b/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
diff --git a/spec/features/projects/blobs/blob_show_spec.rb b/spec/features/projects/blobs/blob_show_spec.rb
index 88813d9b5ff..0fd21a2019c 100644
--- a/spec/features/projects/blobs/blob_show_spec.rb
+++ b/spec/features/projects/blobs/blob_show_spec.rb
@@ -509,4 +509,20 @@ feature 'File blob', :js do
       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