Merge branch '54571-runner-tags' into 'master'52888-status-emoji-should-not-be-added-to-awards-section-on-issue-page

Adds margin between tags when job is stuck

Closes #54571

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

6 files changed, 23 insertions, 22 deletions

diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index 2d09cf5760f..f7fbb9503a0 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -128,7 +128,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default js-environment-container">
+  <div class="prepend-top-default append-bottom-default js-environment-container">
     <div class="environment-information">
       <ci-icon :status="iconStatus" />
       <p class="inline append-bottom-0" v-html="environment"></p>
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index 7b077d5e621..ec52d272168 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -28,20 +28,22 @@ export default {
   <div class="bs-callout bs-callout-warning">
     <p v-if="tags.length" class="js-stuck-with-tags append-bottom-0">
       {{
-        s__(`This job is stuck, because you don't have
+        s__(`This job is stuck because you don't have
   any active runners online with any of these tags assigned to them:`)
       }}
-      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary"> {{ tag }} </span>
+      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4">
+        {{ tag }}
+      </span>
     </p>
     <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners append-bottom-0">
       {{
-        s__(`Job|This job is stuck, because the project
+        s__(`Job|This job is stuck because the project
   doesn't have any runners online assigned to it.`)
       }}
     </p>
     <p v-else class="js-stuck-no-active-runner append-bottom-0">
       {{
-        s__(`This job is stuck, because you don't
+        s__(`This job is stuck because you don't
   have any active runners that can run this job.`)
       }}
     </p>
diff --git a/changelogs/unreleased/54571-runner-tags.yml b/changelogs/unreleased/54571-runner-tags.yml
new file mode 100644
index 00000000000..1bb19d22e9c
--- /dev/null
+++ b/changelogs/unreleased/54571-runner-tags.yml
@@ -0,0 +1,5 @@
+---
+title: Adds margins between tags when a job is stuck
+merge_request:
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a1413381b75..5ad0b21b2e4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3646,7 +3646,7 @@ msgstr ""
 msgid "Job|The artifacts will be removed in"
 msgstr ""
 
-msgid "Job|This job is stuck, because the project doesn't have any runners online assigned to it."
+msgid "Job|This job is stuck because the project doesn't have any runners online assigned to it."
 msgstr ""
 
 msgid "Jul"
@@ -6521,10 +6521,10 @@ msgstr ""
 msgid "This job is in pending state and is waiting to be picked by a runner"
 msgstr ""
 
-msgid "This job is stuck, because you don't have any active runners online with any of these tags assigned to them:"
+msgid "This job is stuck because you don't have any active runners online with any of these tags assigned to them:"
 msgstr ""
 
-msgid "This job is stuck, because you don't have any active runners that can run this job."
+msgid "This job is stuck because you don't have any active runners that can run this job."
 msgstr ""
 
 msgid "This job is the most recent deployment to %{link}."
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 24352be592a..d7c4abffddd 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -754,7 +754,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
 
@@ -764,7 +764,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         it 'renders message about job being stuck because of no runners with the specified tags' do
           expect(page).to have_css('.js-stuck-with-tags')
-          expect(page).to have_content("This job is stuck, because you don't have any active runners online with any of these tags assigned to them:")
+          expect(page).to have_content("This job is stuck because you don't have any active runners online with any of these tags assigned to them:")
         end
       end
 
@@ -774,7 +774,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         it 'renders message about job being stuck because of no runners with the specified tags' do
           expect(page).to have_css('.js-stuck-with-tags')
-          expect(page).to have_content("This job is stuck, because you don't have any active runners online with any of these tags assigned to them:")
+          expect(page).to have_content("This job is stuck because you don't have any active runners online with any of these tags assigned to them:")
         end
       end
 
@@ -783,7 +783,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         it 'renders message about job being stuck because not runners are available' 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
 
@@ -793,7 +793,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         it 'renders message about job being stuck because runners are offline' do
           expect(page).to have_css('.js-stuck-no-runners')
-          expect(page).to have_content("This job is stuck, because the project doesn't have any runners online assigned to it.")
+          expect(page).to have_content("This job is stuck because the project doesn't have any runners online assigned to it.")
         end
       end
     end
diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index fcf3780f0ea..ba5d672f189 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -160,9 +160,7 @@ describe('Job App ', () => {
 
           setTimeout(() => {
             expect(vm.$el.querySelector('.js-job-stuck')).not.toBeNull();
-            expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(
-              "This job is stuck, because you don't have any active runners that can run this job.",
-            );
+            expect(vm.$el.querySelector('.js-job-stuck .js-stuck-no-active-runner')).not.toBeNull();
             done();
           }, 0);
         });
@@ -195,9 +193,7 @@ describe('Job App ', () => {
 
           setTimeout(() => {
             expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(job.tags[0]);
-            expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(
-              "This job is stuck, because you don't have any active runners online with any of these tags assigned to them:",
-            );
+            expect(vm.$el.querySelector('.js-job-stuck .js-stuck-with-tags')).not.toBeNull();
             done();
           }, 0);
         });
@@ -230,9 +226,7 @@ describe('Job App ', () => {
 
           setTimeout(() => {
             expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(job.tags[0]);
-            expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(
-              "This job is stuck, because you don't have any active runners online with any of these tags assigned to them:",
-            );
+            expect(vm.$el.querySelector('.js-job-stuck .js-stuck-with-tags')).not.toBeNull();
             done();
           }, 0);
         });