Add latest changes from gitlab-org/gitlab@master

26 files changed, 132 insertions, 68 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 1ae06773ea8..d735981ebaf 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -277,6 +277,7 @@ export default {
         v-model="variable.key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
+        data-testid="pipeline-form-ci-variable-key"
         data-qa-selector="ci_variable_key_field"
       />
 
@@ -293,6 +294,7 @@ export default {
           :state="variableValidationState"
           rows="3"
           max-rows="6"
+          data-testid="pipeline-form-ci-variable-value"
           data-qa-selector="ci_variable_value_field"
           class="gl-font-monospace!"
         />
diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
index cebb7eb85ac..1fbe52388c9 100644
--- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue
@@ -255,6 +255,7 @@ export default {
         v-model="key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
+        data-testid="pipeline-form-ci-variable-key"
         data-qa-selector="ci_variable_key_field"
       />
 
@@ -271,6 +272,7 @@ export default {
           :state="variableValidationState"
           rows="3"
           max-rows="6"
+          data-testid="pipeline-form-ci-variable-value"
           data-qa-selector="ci_variable_value_field"
           class="gl-font-monospace!"
         />
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index 645c2456c6e..93510870915 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -163,7 +163,6 @@ export default {
           v-gl-modal="'configure-feature-flags'"
           variant="confirm"
           category="secondary"
-          data-qa-selector="configure_feature_flags_button"
           data-testid="ff-configure-button"
           class="gl-mb-3"
         >
diff --git a/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js b/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
index 4e7086e62c5..b1ac612b22c 100644
--- a/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
@@ -142,9 +142,16 @@ export const dayInQuarter = (date, quarter) => {
 
 export const millisecondsPerDay = 1000 * 60 * 60 * 24;
 
-export const getDayDifference = (a, b) => {
-  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
-  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+/**
+ * Calculates the number of days between 2 specified dates, excluding the current date
+ *
+ * @param {Date} startDate the earlier date that we will substract from the end date
+ * @param {Date} endDate the last date in the range
+ * @return {Number} number of days in between
+ */
+export const getDayDifference = (startDate, endDate) => {
+  const date1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+  const date2 = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
 
   return Math.floor((date2 - date1) / millisecondsPerDay);
 };
diff --git a/app/assets/javascripts/members/components/modals/remove_member_modal.vue b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
index b82fb0030ff..1bb1f90302c 100644
--- a/app/assets/javascripts/members/components/modals/remove_member_modal.vue
+++ b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
@@ -88,7 +88,8 @@ export default {
     :action-primary="actionPrimary"
     :title="actionText"
     :visible="removeMemberModalVisible"
-    data-qa-selector="remove_member_modal_content"
+    data-qa-selector="remove_member_modal"
+    data-testid="remove-member-modal-content"
     @primary="submitForm"
     @hide="hideRemoveMemberModal"
   >
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 250d4b3c55f..e3fcdf716d4 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -391,7 +391,11 @@ export default {
 };
 </script>
 <template>
-  <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
+  <div
+    class="prometheus-graphs"
+    data-qa-selector="prometheus_graphs_content"
+    data-testid="prometheus-graphs"
+  >
     <div>
       <gl-alert
         v-if="!isDeprecationNoticeDismissed"
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index 8956fe166e8..90d2498ac19 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -189,6 +189,7 @@ export default {
         ref="monitorEnvironmentsDropdown"
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
+        data-testid="environments-dropdown"
         toggle-class="dropdown-menu-toggle"
         menu-class="monitor-environment-dropdown-menu"
         :text="environmentDropdownText"
diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index 6f0745d4fb0..dcbf4a0e5d3 100644
--- a/app/assets/javascripts/notes/components/discussion_actions.vue
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -59,6 +59,7 @@ export default {
         <resolve-discussion-button
           v-if="discussion.resolvable"
           data-qa-selector="resolve_discussion_button"
+          data-testid="resolve-discussion-button"
           :is-resolving="isResolving"
           :button-title="resolveButtonTitle"
           @onClick="$emit('resolve')"
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
index a465fea0b74..dab4a051d0c 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue
@@ -98,7 +98,7 @@ export default {
     </div>
 
     <template v-else>
-      <div data-qa-selector="packages-table">
+      <div data-testid="packages-table">
         <packages-list-row
           v-for="packageEntity in list"
           :key="packageEntity.id"
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue
index 3c6b8344c34..cc52235eaf3 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/shared/package_list_row.vue
@@ -78,7 +78,7 @@ export default {
 </script>
 
 <template>
-  <list-item data-qa-selector="package_row" :disabled="disabledRow">
+  <list-item data-testid="package-row" :disabled="disabledRow">
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <gl-link
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index 04faff1a75b..7a000aca0f2 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-  <list-item data-qa-selector="package_row">
+  <list-item data-testid="package-row">
     <template #left-primary>
       <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <router-link
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
index a6ac2eb1b2b..e84f181e9b2 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue
@@ -151,7 +151,7 @@ export default {
         @primaryAction="showConfirmationModal"
         >{{ $options.i18n.errorMessageBodyAlert }}</gl-alert
       >
-      <div data-qa-selector="packages-table">
+      <div data-testid="packages-table">
         <packages-list-row
           v-for="packageEntity in list"
           :key="packageEntity.id"
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue
index e92f386a29e..10b95fd6f3c 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_content.vue
@@ -87,7 +87,7 @@ export default {
     v-else-if="!loadingContentFailed && !isLoadingContent"
     ref="content"
     data-qa-selector="wiki_page_content"
-    data-testid="wiki_page_content"
+    data-testid="wiki-page-content"
     class="js-wiki-page-content md"
     v-html="content /* eslint-disable-line vue/no-v-html */"
   ></div>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 99b7395d6e7..49a18f40db9 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -244,7 +244,7 @@ export default {
         /><span class="position-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1" data-qa-selector="label-lfs"
+      <gl-badge v-if="lfsOid" variant="muted" size="sm" class="ml-1" data-testid="label-lfs"
         >LFS</gl-badge
       >
       <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
index a48db9f8ac8..eb98d4ae2fb 100644
--- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
@@ -32,17 +32,14 @@ export default {
   <div>
     <runner-status-badge
       :runner="runner"
-      size="sm"
       class="gl-display-inline-block gl-max-w-full gl-text-truncate"
     />
     <runner-upgrade-status-badge
       :runner="runner"
-      size="sm"
       class="gl-display-inline-block gl-max-w-full gl-text-truncate"
     />
     <runner-paused-badge
       v-if="paused"
-      size="sm"
       class="gl-display-inline-block gl-max-w-full gl-text-truncate"
     />
   </div>
diff --git a/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue b/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue
index a81bcbf1af9..7eb7fe2fadb 100644
--- a/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue
@@ -57,7 +57,7 @@ export default {
       :title="$options.i18n.I18N_LOCKED_RUNNER_DESCRIPTION"
       name="lock"
     />
-    <runner-type-badge class="gl-ml-2" :type="runnerType" size="sm" />
+    <runner-type-badge class="gl-ml-2 gl-vertical-align-middle" :type="runnerType" size="sm" />
 
     <tooltip-on-truncate class="gl-display-block gl-text-truncate" :title="description">
       {{ description }}
diff --git a/app/assets/javascripts/runner/components/runner_header.vue b/app/assets/javascripts/runner/components/runner_header.vue
index abc07cec1ad..874c234ca4c 100644
--- a/app/assets/javascripts/runner/components/runner_header.vue
+++ b/app/assets/javascripts/runner/components/runner_header.vue
@@ -38,31 +38,33 @@ export default {
 </script>
 <template>
   <div
-    class="gl-display-flex gl-align-items-center gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-gap-3 gl-flex-wrap gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
   >
-    <div>
+    <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-flex-wrap">
       <runner-status-badge :runner="runner" />
       <runner-type-badge v-if="runner" :type="runner.runnerType" />
-      <template v-if="runner.createdAt">
-        <gl-sprintf :message="__('%{runner} created %{timeago}')">
-          <template #runner>
-            <strong>{{ heading }}</strong>
-            <gl-icon
-              v-if="runner.locked"
-              v-gl-tooltip="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
-              name="lock"
-              :aria-label="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
-            />
-          </template>
-          <template #timeago>
-            <time-ago :time="runner.createdAt" />
-          </template>
-        </gl-sprintf>
-      </template>
-      <template v-else>
-        <strong>{{ heading }}</strong>
-      </template>
+      <span>
+        <template v-if="runner.createdAt">
+          <gl-sprintf :message="__('%{runner} created %{timeago}')">
+            <template #runner>
+              <strong>{{ heading }}</strong>
+              <gl-icon
+                v-if="runner.locked"
+                v-gl-tooltip="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
+                name="lock"
+                :aria-label="$options.I18N_LOCKED_RUNNER_DESCRIPTION"
+              />
+            </template>
+            <template #timeago>
+              <time-ago :time="runner.createdAt" />
+            </template>
+          </gl-sprintf>
+        </template>
+        <template v-else>
+          <strong>{{ heading }}</strong>
+        </template>
+      </span>
     </div>
-    <div class="gl-ml-auto gl-flex-shrink-0"><slot name="actions"></slot></div>
+    <div class="gl-display-flex gl-gap-3 gl-flex-wrap"><slot name="actions"></slot></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_name.vue b/app/assets/javascripts/runner/components/runner_name.vue
index b1cd3b53abe..d4ecfd2d776 100644
--- a/app/assets/javascripts/runner/components/runner_name.vue
+++ b/app/assets/javascripts/runner/components/runner_name.vue
@@ -14,7 +14,7 @@ export default {
 };
 </script>
 <template>
-  <span class="gl-font-weight-bold"
+  <span class="gl-font-weight-bold gl-vertical-align-middle"
     >#{{ getIdFromGraphQLId(runner.id) }} ({{ runner.shortSha }})</span
   >
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_paused_badge.vue b/app/assets/javascripts/runner/components/runner_paused_badge.vue
index 27618290ce6..00fd84a48d8 100644
--- a/app/assets/javascripts/runner/components/runner_paused_badge.vue
+++ b/app/assets/javascripts/runner/components/runner_paused_badge.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { I18N_PAUSED_DESCRIPTION } from '../constants';
+import { I18N_PAUSED, I18N_PAUSED_DESCRIPTION } from '../constants';
 
 export default {
   components: {
@@ -9,11 +9,17 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  I18N_PAUSED,
   I18N_PAUSED_DESCRIPTION,
 };
 </script>
 <template>
-  <gl-badge v-gl-tooltip="$options.I18N_PAUSED_DESCRIPTION" variant="danger" v-bind="$attrs">
-    {{ s__('Runners|paused') }}
+  <gl-badge
+    v-gl-tooltip="$options.I18N_PAUSED_DESCRIPTION"
+    variant="warning"
+    icon="status-paused"
+    v-bind="$attrs"
+  >
+    {{ $options.I18N_PAUSED }}
   </gl-badge>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_status_badge.vue b/app/assets/javascripts/runner/components/runner_status_badge.vue
index 073d0a49f59..d084408781e 100644
--- a/app/assets/javascripts/runner/components/runner_status_badge.vue
+++ b/app/assets/javascripts/runner/components/runner_status_badge.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import {
+  I18N_STATUS_ONLINE,
+  I18N_STATUS_NEVER_CONTACTED,
+  I18N_STATUS_OFFLINE,
+  I18N_STATUS_STALE,
   I18N_ONLINE_TIMEAGO_TOOLTIP,
   I18N_NEVER_CONTACTED_TOOLTIP,
   I18N_OFFLINE_TIMEAGO_TOOLTIP,
@@ -39,26 +43,30 @@ export default {
       switch (this.runner?.status) {
         case STATUS_ONLINE:
           return {
+            icon: 'status-active',
             variant: 'success',
-            label: s__('Runners|online'),
+            label: I18N_STATUS_ONLINE,
             tooltip: this.timeAgoTooltip(I18N_ONLINE_TIMEAGO_TOOLTIP),
           };
         case STATUS_NEVER_CONTACTED:
           return {
+            icon: 'time-out',
             variant: 'muted',
-            label: s__('Runners|never contacted'),
+            label: I18N_STATUS_NEVER_CONTACTED,
             tooltip: I18N_NEVER_CONTACTED_TOOLTIP,
           };
         case STATUS_OFFLINE:
           return {
+            icon: 'time-out',
             variant: 'muted',
-            label: s__('Runners|offline'),
+            label: I18N_STATUS_OFFLINE,
             tooltip: this.timeAgoTooltip(I18N_OFFLINE_TIMEAGO_TOOLTIP),
           };
         case STATUS_STALE:
           return {
+            icon: 'time-out',
             variant: 'warning',
-            label: s__('Runners|stale'),
+            label: I18N_STATUS_STALE,
             // runner may have contacted (or not) and be stale: consider both cases.
             tooltip: this.runner.contactedAt
               ? this.timeAgoTooltip(I18N_STALE_TIMEAGO_TOOLTIP)
@@ -77,7 +85,13 @@ export default {
 };
 </script>
 <template>
-  <gl-badge v-if="badge" v-gl-tooltip="badge.tooltip" :variant="badge.variant" v-bind="$attrs">
+  <gl-badge
+    v-if="badge"
+    v-gl-tooltip="badge.tooltip"
+    :variant="badge.variant"
+    :icon="badge.icon"
+    v-bind="$attrs"
+  >
     {{ badge.label }}
   </gl-badge>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_type_badge.vue b/app/assets/javascripts/runner/components/runner_type_badge.vue
index b885dcefdcb..f568f914004 100644
--- a/app/assets/javascripts/runner/components/runner_type_badge.vue
+++ b/app/assets/javascripts/runner/components/runner_type_badge.vue
@@ -1,26 +1,31 @@
 <script>
 import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import {
   INSTANCE_TYPE,
   GROUP_TYPE,
   PROJECT_TYPE,
+  I18N_INSTANCE_TYPE,
   I18N_INSTANCE_RUNNER_DESCRIPTION,
+  I18N_GROUP_TYPE,
   I18N_GROUP_RUNNER_DESCRIPTION,
+  I18N_PROJECT_TYPE,
   I18N_PROJECT_RUNNER_DESCRIPTION,
 } from '../constants';
 
 const BADGE_DATA = {
   [INSTANCE_TYPE]: {
-    text: s__('Runners|shared'),
+    icon: 'users',
+    text: I18N_INSTANCE_TYPE,
     tooltip: I18N_INSTANCE_RUNNER_DESCRIPTION,
   },
   [GROUP_TYPE]: {
-    text: s__('Runners|group'),
+    icon: 'group',
+    text: I18N_GROUP_TYPE,
     tooltip: I18N_GROUP_RUNNER_DESCRIPTION,
   },
   [PROJECT_TYPE]: {
-    text: s__('Runners|specific'),
+    icon: 'project',
+    text: I18N_PROJECT_TYPE,
     tooltip: I18N_PROJECT_RUNNER_DESCRIPTION,
   },
 };
@@ -50,7 +55,13 @@ export default {
 };
 </script>
 <template>
-  <gl-badge v-if="badge" v-gl-tooltip="badge.tooltip" variant="info" v-bind="$attrs">
+  <gl-badge
+    v-if="badge"
+    v-gl-tooltip="badge.tooltip"
+    variant="muted"
+    :icon="badge.icon"
+    v-bind="$attrs"
+  >
     {{ badge.text }}
   </gl-badge>
 </template>
diff --git a/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js b/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js
index c1ad5da3ab9..97ee8ec3eef 100644
--- a/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js
+++ b/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js
@@ -1,7 +1,7 @@
-import { __, s__ } from '~/locale';
+import { __ } from '~/locale';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
-import { PARAM_KEY_PAUSED } from '../../constants';
+import { PARAM_KEY_PAUSED, I18N_PAUSED } from '../../constants';
 
 const options = [
   { value: 'true', title: __('Yes') },
@@ -10,7 +10,7 @@ const options = [
 
 export const pausedTokenConfig = {
   icon: 'pause',
-  title: s__('Runners|Paused'),
+  title: I18N_PAUSED,
   type: PARAM_KEY_PAUSED,
   token: BaseToken,
   unique: true,
diff --git a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
index 9e6f63d3f7c..f5c42d120fb 100644
--- a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
+++ b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
@@ -1,7 +1,11 @@
-import { __, s__ } from '~/locale';
+import { __ } from '~/locale';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 import {
+  I18N_STATUS_ONLINE,
+  I18N_STATUS_NEVER_CONTACTED,
+  I18N_STATUS_OFFLINE,
+  I18N_STATUS_STALE,
   STATUS_ONLINE,
   STATUS_OFFLINE,
   STATUS_NEVER_CONTACTED,
@@ -10,10 +14,10 @@ import {
 } from '../../constants';
 
 const options = [
-  { value: STATUS_ONLINE, title: s__('Runners|Online') },
-  { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
-  { value: STATUS_NEVER_CONTACTED, title: s__('Runners|Never contacted') },
-  { value: STATUS_STALE, title: s__('Runners|Stale') },
+  { value: STATUS_ONLINE, title: I18N_STATUS_ONLINE },
+  { value: STATUS_OFFLINE, title: I18N_STATUS_OFFLINE },
+  { value: STATUS_NEVER_CONTACTED, title: I18N_STATUS_NEVER_CONTACTED },
+  { value: STATUS_STALE, title: I18N_STATUS_STALE },
 ];
 
 export const statusTokenConfig = {
diff --git a/app/assets/javascripts/runner/components/stat/runner_stats.vue b/app/assets/javascripts/runner/components/stat/runner_stats.vue
index 74d477b5dab..4df59f5a0c9 100644
--- a/app/assets/javascripts/runner/components/stat/runner_stats.vue
+++ b/app/assets/javascripts/runner/components/stat/runner_stats.vue
@@ -1,7 +1,13 @@
 <script>
-import { s__ } from '~/locale';
 import RunnerSingleStat from '~/runner/components/stat/runner_single_stat.vue';
-import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants';
+import {
+  I18N_STATUS_ONLINE,
+  I18N_STATUS_OFFLINE,
+  I18N_STATUS_STALE,
+  STATUS_ONLINE,
+  STATUS_OFFLINE,
+  STATUS_STALE,
+} from '../../constants';
 
 export default {
   components: {
@@ -29,7 +35,7 @@ export default {
             skip: this.statusCountSkip(STATUS_ONLINE),
             variables: { ...this.variables, status: STATUS_ONLINE },
             variant: 'success',
-            title: s__('Runners|Online'),
+            title: I18N_STATUS_ONLINE,
             metaIcon: 'status-active',
           },
         },
@@ -39,7 +45,7 @@ export default {
             skip: this.statusCountSkip(STATUS_OFFLINE),
             variables: { ...this.variables, status: STATUS_OFFLINE },
             variant: 'muted',
-            title: s__('Runners|Offline'),
+            title: I18N_STATUS_OFFLINE,
             metaIcon: 'status-waiting',
           },
         },
@@ -49,7 +55,7 @@ export default {
             skip: this.statusCountSkip(STATUS_STALE),
             variables: { ...this.variables, status: STATUS_STALE },
             variant: 'warning',
-            title: s__('Runners|Stale'),
+            title: I18N_STATUS_STALE,
             metaIcon: 'time-out',
           },
         },
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index 5485ea35e81..957ca489ffa 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -23,6 +23,12 @@ export const I18N_GROUP_RUNNER_DESCRIPTION = s__(
 );
 export const I18N_PROJECT_RUNNER_DESCRIPTION = s__('Runners|Associated with one or more projects');
 
+// Status
+export const I18N_STATUS_ONLINE = s__('Runners|Online');
+export const I18N_STATUS_NEVER_CONTACTED = s__('Runners|Never contacted');
+export const I18N_STATUS_OFFLINE = s__('Runners|Offline');
+export const I18N_STATUS_STALE = s__('Runners|Stale');
+
 // Status help popover
 export const I18N_STATUS_POPOVER_TITLE = s__('Runners|Runner statuses');
 
@@ -62,6 +68,7 @@ export const I18N_STALE_NEVER_CONTACTED_TOOLTIP = s__(
 export const I18N_EDIT = __('Edit');
 
 export const I18N_PAUSE = __('Pause');
+export const I18N_PAUSED = s__('Runners|Paused');
 export const I18N_PAUSE_TOOLTIP = s__('Runners|Pause from accepting jobs');
 export const I18N_PAUSED_DESCRIPTION = s__('Runners|Not accepting jobs');
 
@@ -94,7 +101,7 @@ export const I18N_NO_JOBS_FOUND = s__('Runners|This runner has not run any jobs.
 
 // Styles
 
-export const RUNNER_TAG_BADGE_VARIANT = 'neutral';
+export const RUNNER_TAG_BADGE_VARIANT = 'info';
 export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100';
 
 // Filtered search parameter names
diff --git a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue
index 8528ad56ddb..fd652583f76 100644
--- a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue
+++ b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue
@@ -16,7 +16,7 @@ export default {
 
 <template>
   <copyable-field
-    data-qa-selector="copy-forward-email"
+    data-testid="copy-forward-email"
     :name="s__('RightSidebar|Issue email')"
     :clipboard-tooltip-text="s__('RightSidebar|Copy email address')"
     :value="issueEmailAddress"