Fixes empty block in MR widget

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

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"
       >

changelogs/unreleased/60462-empty-pipeline-section.yml

+---
+title: Fix empty block in MR widget when user doesn't have permission
+merge_request: 27462
+author:
+type: fixed

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -670,4 +670,26 @@ 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(
+        visibility_level: Gitlab::VisibilityLevel::PUBLIC,
+        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

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, {