Add latest changes from gitlab-org/gitlab@master

6 files changed, 47 insertions, 44 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 e6813211fe9..0ec94dc865f 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
@@ -178,6 +178,22 @@ export default {
 </script>
 <template>
   <div>
+    <header class="gl-my-5 gl-display-flex gl-justify-content-space-between">
+      <h2 class="gl-my-0 header-title">
+        {{ s__('Runners|Runners') }}
+      </h2>
+      <div class="gl-display-flex gl-gap-3">
+        <runner-dashboard-link />
+        <gl-button :href="newRunnerPath" variant="confirm">
+          {{ s__('Runners|New instance runner') }}
+        </gl-button>
+        <registration-dropdown
+          :registration-token="registrationToken"
+          :type="$options.INSTANCE_TYPE"
+          placement="right"
+        />
+      </div>
+    </header>
     <div
       class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
     >
@@ -189,18 +205,6 @@ export default {
         content-class="gl-display-none"
         nav-class="gl-border-none!"
       />
-
-      <div class="gl-w-full gl-md-w-auto gl-display-flex gl-gap-3">
-        <runner-dashboard-link />
-        <gl-button :href="newRunnerPath" variant="confirm">
-          {{ s__('Runners|New instance runner') }}
-        </gl-button>
-        <registration-dropdown
-          :registration-token="registrationToken"
-          :type="$options.INSTANCE_TYPE"
-          placement="right"
-        />
-      </div>
     </div>
 
     <runner-filtered-search-bar
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_owner_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_owner_cell.vue
index cb43760b2d6..8f1c7234b84 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_owner_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_owner_cell.vue
@@ -50,12 +50,7 @@ export default {
 
 <template>
   <div>
-    <gl-link
-      v-if="cell.href"
-      v-gl-tooltip="cell.tooltip"
-      :href="cell.href"
-      class="gl-text-body gl-text-decoration-underline"
-    >
+    <gl-link v-if="cell.href" v-gl-tooltip="cell.tooltip" :href="cell.href" class="gl-text-body">
       {{ cell.text }}
     </gl-link>
     <span v-else>{{ cell.text }}</span>
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 cc31afea88c..a80d6207be8 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
@@ -12,7 +12,6 @@ import RunnerManagersBadge from '../runner_managers_badge.vue';
 
 import { formatJobCount } from '../../utils';
 import {
-  I18N_NO_DESCRIPTION,
   I18N_LOCKED_RUNNER_DESCRIPTION,
   I18N_VERSION_LABEL,
   I18N_LAST_CONTACT_LABEL,
@@ -73,7 +72,6 @@ export default {
     formatNumber,
   },
   i18n: {
-    I18N_NO_DESCRIPTION,
     I18N_LOCKED_RUNNER_DESCRIPTION,
     I18N_VERSION_LABEL,
     I18N_LAST_CONTACT_LABEL,
@@ -100,7 +98,10 @@ export default {
       <runner-type-badge :type="runner.runnerType" size="sm" class="gl-vertical-align-middle" />
     </div>
 
-    <div class="gl-mb-3 gl-ml-auto gl-display-inline-flex gl-max-w-full">
+    <div
+      v-if="runner.version || runner.description"
+      class="gl-mb-3 gl-ml-auto gl-display-inline-flex gl-max-w-full gl-font-sm gl-align-items-center"
+    >
       <template v-if="runner.version">
         <div class="gl-flex-shrink-0">
           <runner-upgrade-status-icon :upgrade-status="runner.upgradeStatus" />
@@ -108,19 +109,20 @@ export default {
             <template #version>{{ runner.version }}</template>
           </gl-sprintf>
         </div>
-        <div class="gl-text-secondary gl-mx-2" aria-hidden="true">·</div>
+        <div v-if="runner.description" class="gl-text-secondary gl-mx-2" aria-hidden="true">·</div>
       </template>
       <tooltip-on-truncate
+        v-if="runner.description"
         class="gl-text-truncate gl-display-block"
         :class="{ 'gl-text-secondary': !runner.description }"
         :title="runner.description"
       >
-        {{ runner.description || $options.i18n.I18N_NO_DESCRIPTION }}
+        {{ runner.description }}
       </tooltip-on-truncate>
     </div>
 
-    <div>
-      <runner-summary-field icon="clock">
+    <div class="gl-font-sm">
+      <runner-summary-field icon="clock" icon-size="sm">
         <gl-sprintf :message="$options.i18n.I18N_LAST_CONTACT_LABEL">
           <template #timeAgo>
             <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_summary_field.vue b/app/assets/javascripts/ci/runner/components/cells/runner_summary_field.vue
index 742259ee491..b1b61e03eec 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_summary_field.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_summary_field.vue
@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div v-gl-tooltip="tooltip" class="gl-display-inline-block gl-text-secondary gl-mb-3 gl-mr-4">
-    <gl-icon v-if="icon" :name="icon" />
+    <gl-icon v-if="icon" :name="icon" :size="12" />
     <!-- display tooltip as a label for screen readers -->
     <span class="gl-sr-only">{{ tooltip }}</span>
     <slot></slot>
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 203f97876de..3293c68ddb8 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -15,7 +15,7 @@ export const I18N_CREATE_ERROR = s__(
 );
 
 export const FILTER_CSS_CLASSES =
-  'gl-bg-gray-10 gl-p-5 gl-border-solid gl-border-gray-100 gl-border-0 gl-border-t-1 gl-border-b-1';
+  'gl-bg-gray-10 gl-p-5 gl-border-solid gl-border-gray-100 gl-border-0 gl-border-t-1';
 
 // Type
 
@@ -96,7 +96,6 @@ export const I18N_DELETE_RUNNER = s__('Runners|Delete runner');
 export const I18N_DELETED_TOAST = s__('Runners|Runner %{name} was deleted');
 
 // List
-export const I18N_NO_DESCRIPTION = s__('Runners|No description');
 export const I18N_LOCKED_RUNNER_DESCRIPTION = s__(
   'Runners|Runner is locked and available for currently assigned projects only. Only administrators can change the assigned projects.',
 );
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 ad441e4ad86..dcaf8635f5c 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
@@ -212,21 +212,11 @@ export default {
 
 <template>
   <div>
-    <div
-      class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
-    >
-      <runner-type-tabs
-        ref="runner-type-tabs"
-        v-model="search"
-        :count-scope="$options.GROUP_TYPE"
-        :count-variables="countVariables"
-        :runner-types="$options.TABS_RUNNER_TYPES"
-        class="gl-w-full"
-        content-class="gl-display-none"
-        nav-class="gl-border-none!"
-      />
-
-      <div class="gl-w-full gl-md-w-auto gl-display-flex">
+    <header class="gl-my-5 gl-display-flex gl-justify-content-space-between">
+      <h2 class="gl-my-0 header-title">
+        {{ s__('Runners|Runners') }}
+      </h2>
+      <div class="gl-display-flex gl-gap-3">
         <gl-button
           v-if="newRunnerPath"
           :href="newRunnerPath"
@@ -237,12 +227,25 @@ export default {
         </gl-button>
         <registration-dropdown
           v-if="registrationToken"
-          class="gl-ml-3"
           :registration-token="registrationToken"
           :type="$options.GROUP_TYPE"
           placement="right"
         />
       </div>
+    </header>
+    <div
+      class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
+    >
+      <runner-type-tabs
+        ref="runner-type-tabs"
+        v-model="search"
+        :count-scope="$options.GROUP_TYPE"
+        :count-variables="countVariables"
+        :runner-types="$options.TABS_RUNNER_TYPES"
+        class="gl-w-full"
+        content-class="gl-display-none"
+        nav-class="gl-border-none!"
+      />
     </div>
     <div
       class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-gap-3"