Moves available runners check into a computed prop

Adds a changelog entry

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

@@ -86,6 +86,7 @@
         'emptyStateIllustration',
         'isScrollingDown',
         'emptyStateAction',
+        'hasRunnersForProject',
       ]),
 
       shouldRenderContent() {
@@ -201,7 +202,7 @@
         <stuck-block
           v-if="job.stuck"
           class="js-job-stuck"
-          :has-no-runners-for-project="job.runners.available && !job.runners.online"
+          :has-no-runners-for-project="hasRunnersForProject"
           :tags="job.tags"
           :runners-path="runnerSettingsUrl"
         />

app/assets/javascripts/jobs/store/getters.js

@@ -57,5 +57,7 @@ export const shouldRenderSharedRunnerLimitWarning = state =>
 
 export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
 
+export const hasRunnersForProject = state => state.job.runners.available && !state.job.runners.online;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

changelogs/unreleased/52202-consider-moving-isjobstuck-verification-to-backend.yml

+---
+title: Renders stuck block when runners are stuck
+merge_request:
+author:
+type: fixed

spec/features/projects/jobs_spec.rb

@@ -753,7 +753,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         it 'renders message about job being stuck because no runners are active' do
           expect(page).to have_css('.js-stuck-no-active-runner')
-          expect(page).to have_content("This job is stuck, because you don\'t have any active runners that can run this job.")
+          expect(page).to have_content("This job is stuck, because you don't have any active runners that can run this job.")
         end
       end
 

spec/javascripts/jobs/store/getters_spec.js

@@ -229,4 +229,39 @@ describe('Job Store Getters', () => {
       });
     });
   });
+
+  describe('hasRunnersForProject', () => {
+    describe('with available and offline runners', () => {
+      it('returns true', () => {
+        localState.job.runners = {
+          available: true,
+          online: false
+        };
+
+        expect(getters.hasRunnersForProject(localState)).toEqual(true);
+      });
+    });
+
+    describe('with non available runners', () => {
+      it('returns false', () => {
+        localState.job.runners = {
+          available: false,
+          online: false
+        };
+
+        expect(getters.hasRunnersForProject(localState)).toEqual(false);
+      });
+    });
+
+    describe('with online runners', () => {
+      it('returns false', () => {
+        localState.job.runners = {
+          available: false,
+          online: true
+        };
+
+        expect(getters.hasRunnersForProject(localState)).toEqual(false);
+      });
+    });
+  });
 });