Enhance style of the shared runners limit

It also prepare for the EE merge request https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14786

6 files changed, 14 insertions, 2 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index ef9fb6d08d1..8da87f424c4 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -73,6 +73,10 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     logState: {
       type: String,
       required: true,
@@ -258,6 +262,7 @@ export default {
           :quota-used="job.runners.quota.used"
           :quota-limit="job.runners.quota.limit"
           :runners-path="runnerHelpUrl"
+          :project-path="projectPath"
         />
 
         <environments-block
diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js
index 06514fcce1d..8c1758b6322 100644
--- a/app/assets/javascripts/jobs/index.js
+++ b/app/assets/javascripts/jobs/index.js
@@ -20,6 +20,7 @@ export default () => {
           pagePath: element.dataset.buildOptionsPagePath,
           logState: element.dataset.buildOptionsLogState,
           buildStatus: element.dataset.buildOptionsBuildStatus,
+          projectPath: element.dataset.projectPath,
         },
       });
     },
diff --git a/app/views/projects/_flash_messages.html.haml b/app/views/projects/_flash_messages.html.haml
index d95045c9cce..f9222387e97 100644
--- a/app/views/projects/_flash_messages.html.haml
+++ b/app/views/projects/_flash_messages.html.haml
@@ -5,7 +5,7 @@
   - if current_user && can?(current_user, :download_code, project)
     = render 'shared/no_ssh'
     = render 'shared/no_password'
-    = render_if_exists 'shared/shared_runners_minutes_limit', project: project
     - unless project.empty_repo?
       = render 'shared/auto_devops_implicitly_enabled_banner', project: project
     = render_if_exists 'projects/above_size_limit_warning', project: project
+    = render_if_exists 'shared/shared_runners_minutes_limit', project: project, classes: [container_class, ("limit-container-width" unless fluid_layout)]
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index c7fab87a593..a743e656402 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -7,7 +7,7 @@
   = stylesheet_link_tag 'page_bundles/xterm'
 
 %div{ class: container_class }
-  #js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json),
+  #js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
     deployment_help_url: help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting-failed-deployment-jobs'),
     runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
     runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),
diff --git a/changelogs/unreleased/update-pipelines-minutes-expiry-banner-to-an-alert-component-type.yml b/changelogs/unreleased/update-pipelines-minutes-expiry-banner-to-an-alert-component-type.yml
new file mode 100644
index 00000000000..8c1a033dd29
--- /dev/null
+++ b/changelogs/unreleased/update-pipelines-minutes-expiry-banner-to-an-alert-component-type.yml
@@ -0,0 +1,5 @@
+---
+title: Enhance style of the shared runners limit
+merge_request: 31386
+author:
+type: other
diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index b53890f8348..d3c1cf831bb 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -24,6 +24,7 @@ describe('Job App ', () => {
     variablesSettingsUrl: 'settings/ci-cd/variables',
     terminalPath: 'jobs/123/terminal',
     pagePath: `${gl.TEST_HOST}jobs/123`,
+    projectPath: 'user-name/project-name',
     logState:
       'eyJvZmZzZXQiOjE3NDUxLCJuX29wZW5fdGFncyI6MCwiZmdfY29sb3IiOm51bGwsImJnX2NvbG9yIjpudWxsLCJzdHlsZV9tYXNrIjowfQ%3D%3D',
   };