Fix erased block not being rendered when job was erased

app/assets/javascripts/jobs/components/job_app.vue

@@ -87,8 +87,8 @@
       />
 
       <erased-block
-        v-if="job.erased"
-        class="js-job-erased"
+        v-if="job.erased_at"
+        class="js-job-erased-block"
         :user="job.erased_by"
         :erased-at="job.erased_at"
       />

changelogs/unreleased/52570-erased-block.yml

@@ -0,0 +1,5 @@
+---
+title: Fix erased block not being rendered when job was erased
+merge_request: 22294
+author:
+type: fixed

spec/features/projects/jobs_spec.rb

@@ -663,6 +663,19 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         expect(page).to have_content('This job does not have a trace.')
       end
     end
+
+    context 'with erased job', :js do
+      let(:job) { create(:ci_build, :erased, pipeline: pipeline) }
+
+      it'renders erased job warning' do
+        visit project_job_path(project, job)
+        wait_for_requests
+
+        page.within('.js-job-erased-block') do
+          expect(page).to have_content('Job has been erased')
+        end
+      end
+    end
   end
 
   describe "POST /:project/jobs/:id/cancel", :js do

spec/javascripts/jobs/components/job_app_spec.js

@@ -223,7 +223,6 @@ describe('Job App ', () => {
       store.dispatch(
         'receiveJobSuccess',
         Object.assign({}, job, {
-          erased: true,
           erased_by: {
             username: 'root',
             web_url: 'gitlab.com/root',
@@ -237,18 +236,18 @@ describe('Job App ', () => {
         store,
       });
 
-      expect(vm.$el.querySelector('.js-job-erased')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-job-erased-block')).not.toBeNull();
     });
 
     it('does not render erased block when `erased` is false', () => {
-      store.dispatch('receiveJobSuccess', Object.assign({}, job, { erased: false }));
+      store.dispatch('receiveJobSuccess', Object.assign({}, job, { erased_at: null }));
 
       vm = mountComponentWithStore(Component, {
         props,
         store,
       });
 
-      expect(vm.$el.querySelector('.js-job-erased')).toBeNull();
+      expect(vm.$el.querySelector('.js-job-erased-block')).toBeNull();
     });
   });