From 52c79bc8b30f391e205a66f109a94f2ace5c6b6a Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Mon, 12 Mar 2018 14:00:29 -0600
Subject: [PATCH 1/2] Add realtime pipeline status component for files

---
 .../pages/projects/blob/show/index.js         | 22 +++++++++++++++++++
 .../jivl-realtime-update-adding-file.yml      |  5 +++++
 .../features/projects/blobs/blob_show_spec.rb | 16 ++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 changelogs/unreleased/jivl-realtime-update-adding-file.yml

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

From e2e0a4d1570ad4adc640b4c49fc58ed544272e93 Mon Sep 17 00:00:00 2001
From: Mayra Cabrera <mcabrera@gitlab.com>
Date: Wed, 14 Mar 2018 12:41:32 -0600
Subject: [PATCH 2/2] Include feature spec for realtime pipeline

---
 .../features/projects/blobs/blob_show_spec.rb | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/spec/features/projects/blobs/blob_show_spec.rb b/spec/features/projects/blobs/blob_show_spec.rb
index 0fd21a2019c..ac82f869f0f 100644
--- a/spec/features/projects/blobs/blob_show_spec.rb
+++ b/spec/features/projects/blobs/blob_show_spec.rb
@@ -511,18 +511,27 @@ feature 'File blob', :js do
   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')
+      Files::CreateService.new(
+        project,
+        project.creator,
+        start_branch: 'feature',
+        branch_name: 'feature',
+        commit_message: "Add ruby file",
+        file_path: 'files/ruby/test.rb',
+        file_content: "# Awesome content"
+      ).execute
+
+      create(:ci_pipeline, status: 'running', project: project, ref: 'feature', sha: project.commit('feature').sha)
+      visit_blob('files/ruby/test.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
+      page.within('.commit-actions') do
+        expect(page).to have_css('.ci-status-icon')
+        expect(page).to have_css('.ci-status-icon-running')
+        expect(page).to have_css('.js-ci-status-icon-running')
+      end
     end
   end
 end