Fixes empty block in MR widget60462-empty-pipeline-section

This commit prevents the pipeline block to be rendered
when no pipeline information is provided

4 files changed, 40 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index f5a1ff2f6fd..f5fa68308bc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -94,8 +94,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="hasPipeline || hasCIError" class="ci-widget media js-ci-widget">
-    <template v-if="hasCIError">
+  <div class="ci-widget media js-ci-widget">
+    <template v-if="!hasPipeline || hasCIError">
       <div
         class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"
       >
diff --git a/changelogs/unreleased/60462-empty-pipeline-section.yml b/changelogs/unreleased/60462-empty-pipeline-section.yml
new file mode 100644
index 00000000000..7d90215e20c
--- /dev/null
+++ b/changelogs/unreleased/60462-empty-pipeline-section.yml
@@ -0,0 +1,5 @@
+---
+title: Fix empty block in MR widget when user doesn't have permission
+merge_request: 27462
+author:
+type: fixed
diff --git a/spec/features/merge_request/user_sees_merge_widget_spec.rb b/spec/features/merge_request/user_sees_merge_widget_spec.rb
index 40ba676ff92..2636a443f5d 100644
--- a/spec/features/merge_request/user_sees_merge_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_widget_spec.rb
@@ -670,4 +670,24 @@ describe 'Merge request > User sees merge widget', :js do
       end
     end
   end
+
+  context 'when MR has pipeline but user does not have permission' do
+    let(:sha) { project.commit(merge_request.source_branch).sha }
+    let!(:pipeline) { create(:ci_pipeline_without_jobs, status: 'success', sha: sha, project: project, ref: merge_request.source_branch) }
+
+    before do
+      project.update_attribute(:visibility_level, Gitlab::VisibilityLevel::PUBLIC)
+      project.update(public_builds: false)
+      merge_request.update!(head_pipeline: pipeline)
+      sign_out(:user)
+
+      visit project_merge_request_path(project, merge_request)
+    end
+
+    it 'renders a CI pipeline error' do
+      within '.ci-widget' do
+        expect(page).to have_content('Could not retrieve the pipeline status.')
+      end
+    end
+  end
 end
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index de213210cfc..8ac6e6a7b44 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -78,6 +78,19 @@ describe('MRWidgetPipeline', () => {
       );
     });
 
+    it('should render CI error when no pipeline is provided', () => {
+      vm = mountComponent(Component, {
+        pipeline: {},
+        hasCi: true,
+        ciStatus: 'success',
+        troubleshootingDocsPath: 'help',
+      });
+
+      expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain(
+        'Could not retrieve the pipeline status. For troubleshooting steps, read the documentation.',
+      );
+    });
+
     describe('with a pipeline', () => {
       beforeEach(() => {
         vm = mountComponent(Component, {