Merge branch 'jivl-realtime-update-adding-file' into 'master'

Add realtime pipeline status component for files

Closes #42927

See merge request gitlab-org/gitlab-ce!17705

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,29 @@ feature 'File blob', :js do
       end
     end
   end
+
+  context 'realtime pipelines' do
+    before do
+      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
+      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