Add latest changes from gitlab-org/gitlab@master

8 files changed, 35 insertions, 22 deletions

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index dcdc939a947..ce2c511ddd4 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -33,6 +33,7 @@ import {
   INSTANCE_TYPE,
   I18N_FETCH_ERROR,
   FILTER_CSS_CLASSES,
+  JOBS_ROUTE_PATH,
 } from '../constants';
 import { captureException } from '../sentry_utils';
 
@@ -150,7 +151,7 @@ export default {
   methods: {
     jobsUrl(runner) {
       const url = new URL(runner.adminUrl);
-      url.hash = '#/jobs';
+      url.hash = `#${JOBS_ROUTE_PATH}`;
 
       return url.href;
     },
@@ -228,17 +229,17 @@ export default {
         :checkable="true"
         @deleted="onDeleted"
       >
-        <template #runner-name="{ runner }">
-          <gl-link :href="runner.adminUrl">
-            <runner-name :runner="runner" />
-          </gl-link>
-        </template>
         <template #runner-job-status-badge="{ runner }">
           <runner-job-status-badge
             :href="jobsUrl(runner)"
             :job-status="runner.jobExecutionStatus"
           />
         </template>
+        <template #runner-name="{ runner }">
+          <gl-link :href="runner.adminUrl">
+            <runner-name :runner="runner" />
+          </gl-link>
+        </template>
         <template #runner-actions-cell="{ runner }">
           <runner-actions-cell
             :runner="runner"
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
index cfbe37f5ba2..4d04b5d4b14 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
@@ -36,5 +36,6 @@ export default {
       v-if="paused"
       class="gl-display-inline-block gl-max-w-full gl-text-truncate"
     />
+    <slot :runner="runner" name="runner-job-status-badge"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
index 4a72023b6a0..97dfbe1a051 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_summary_cell.vue
@@ -6,7 +6,6 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import RunnerName from '../runner_name.vue';
 import RunnerTags from '../runner_tags.vue';
 import RunnerTypeBadge from '../runner_type_badge.vue';
-import RunnerJobStatusBadge from '../runner_job_status_badge.vue';
 
 import { formatJobCount } from '../../utils';
 import {
@@ -27,7 +26,6 @@ export default {
     RunnerName,
     RunnerTags,
     RunnerTypeBadge,
-    RunnerJobStatusBadge,
     RunnerUpgradeStatusIcon: () =>
       import('ee_component/ci/runner/components/runner_upgrade_status_icon.vue'),
     TooltipOnTruncate,
@@ -90,10 +88,6 @@ export default {
     </div>
 
     <div>
-      <slot :runner="runner" name="runner-job-status-badge">
-        <runner-job-status-badge :job-status="runner.jobExecutionStatus" />
-      </slot>
-
       <runner-summary-field icon="clock">
         <gl-sprintf :message="$options.i18n.I18N_LAST_CONTACT_LABEL">
           <template #timeAgo>
diff --git a/app/assets/javascripts/ci/runner/components/runner_details_tabs.vue b/app/assets/javascripts/ci/runner/components/runner_details_tabs.vue
index 23076915001..e4190a4dffd 100644
--- a/app/assets/javascripts/ci/runner/components/runner_details_tabs.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_details_tabs.vue
@@ -2,7 +2,7 @@
 import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
 import VueRouter from 'vue-router';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
-import { I18N_DETAILS, I18N_JOBS } from '../constants';
+import { JOBS_ROUTE_PATH, I18N_DETAILS, I18N_JOBS } from '../constants';
 import { formatJobCount } from '../utils';
 import RunnerDetails from './runner_details.vue';
 import RunnerJobs from './runner_jobs.vue';
@@ -17,7 +17,7 @@ const routes = [
     component: RunnerDetails,
   },
   {
-    path: '/jobs',
+    path: JOBS_ROUTE_PATH,
     name: ROUTE_JOBS,
     component: RunnerJobs,
   },
diff --git a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
index 1e52acecfb8..bed592e3f30 100644
--- a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
@@ -45,8 +45,7 @@ export default {
   <gl-badge
     v-if="badge"
     v-bind="$attrs"
-    size="sm"
-    class="gl-mr-3 gl-bg-transparent!"
+    class="gl-display-inline-block gl-max-w-full gl-text-truncate gl-bg-transparent!"
     variant="muted"
     :class="badge.classes"
   >
diff --git a/app/assets/javascripts/ci/runner/components/runner_list.vue b/app/assets/javascripts/ci/runner/components/runner_list.vue
index b2aad0aac4f..ec04701db2c 100644
--- a/app/assets/javascripts/ci/runner/components/runner_list.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_list.vue
@@ -150,16 +150,17 @@ export default {
       </template>
 
       <template #cell(status)="{ item }">
-        <runner-status-cell :runner="item" />
+        <runner-status-cell :runner="item">
+          <template #runner-job-status-badge="{ runner }">
+            <slot name="runner-job-status-badge" :runner="runner"></slot>
+          </template>
+        </runner-status-cell>
       </template>
 
-      <template #cell(summary)="{ item, index }">
+      <template #cell(summary)="{ item }">
         <runner-summary-cell :runner="item">
           <template #runner-name="{ runner }">
-            <slot name="runner-name" :runner="runner" :index="index"></slot>
-          </template>
-          <template #runner-job-status-badge="{ runner }">
-            <slot name="runner-job-status-badge" :runner="runner" :index="index"></slot>
+            <slot name="runner-name" :runner="runner"></slot>
           </template>
         </runner-summary-cell>
       </template>
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 31900a1fe89..dc4a62852ed 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -98,6 +98,8 @@ export const I18N_ADMIN = s__('Runners|Administrator');
 
 // Runner details
 
+export const JOBS_ROUTE_PATH = '/jobs'; // vue-router route path
+
 export const I18N_DETAILS = s__('Runners|Details');
 export const I18N_JOBS = s__('Runners|Jobs');
 export const I18N_ASSIGNED_PROJECTS = s__('Runners|Assigned Projects (%{projectCount})');
diff --git a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
index f61c19b151e..e66a1c7b1aa 100644
--- a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
@@ -24,6 +24,7 @@ import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeTabs from '../components/runner_type_tabs.vue';
 import RunnerActionsCell from '../components/cells/runner_actions_cell.vue';
 import RunnerMembershipToggle from '../components/runner_membership_toggle.vue';
+import RunnerJobStatusBadge from '../components/runner_job_status_badge.vue';
 
 import { pausedTokenConfig } from '../components/search_tokens/paused_token_config';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
@@ -34,6 +35,7 @@ import {
   PROJECT_TYPE,
   I18N_FETCH_ERROR,
   FILTER_CSS_CLASSES,
+  JOBS_ROUTE_PATH,
 } from '../constants';
 import { captureException } from '../sentry_utils';
 
@@ -51,6 +53,7 @@ export default {
     RunnerPagination,
     RunnerTypeTabs,
     RunnerActionsCell,
+    RunnerJobStatusBadge,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath'],
@@ -171,6 +174,12 @@ export default {
     editUrl(runner) {
       return this.runners.urlsById[runner.id]?.edit;
     },
+    jobsUrl(runner) {
+      const url = new URL(this.webUrl(runner));
+      url.hash = `#${JOBS_ROUTE_PATH}`;
+
+      return url.href;
+    },
     refetchCounts() {
       this.$apollo.getClient().refetchQueries({ include: [groupRunnersCountQuery] });
     },
@@ -251,6 +260,12 @@ export default {
         :loading="runnersLoading"
         @deleted="onDeleted"
       >
+        <template #runner-job-status-badge="{ runner }">
+          <runner-job-status-badge
+            :href="jobsUrl(runner)"
+            :job-status="runner.jobExecutionStatus"
+          />
+        </template>
         <template #runner-name="{ runner }">
           <gl-link :href="webUrl(runner)">
             <runner-name :runner="runner" />