Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

16 files changed, 117 insertions, 116 deletions

diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 2850a8e86fd..0f34926f689 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -1,13 +1,15 @@
 <script>
-import { GlIcon, GlLink } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlIcon, GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
-    TimeagoTooltip,
+    GlButton,
+    GlButtonGroup,
     GlIcon,
     GlLink,
+    TimeagoTooltip,
   },
   mixins: [timeagoMixin],
   props: {
@@ -36,7 +38,7 @@ export default {
 </script>
 <template>
   <div class="block">
-    <div class="title font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
+    <div class="title gl-font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
     <p
       v-if="isExpired || willExpire"
       class="build-detail-row"
@@ -61,32 +63,29 @@ export default {
         )
       }}</span>
     </p>
-    <div class="btn-group d-flex gl-mt-3" role="group">
-      <gl-link
+    <gl-button-group class="gl-display-flex gl-mt-3">
+      <gl-button
         v-if="artifact.keep_path"
         :href="artifact.keep_path"
-        class="btn btn-sm btn-default"
         data-method="post"
         data-testid="keep-artifacts"
-        >{{ s__('Job|Keep') }}</gl-link
+        >{{ s__('Job|Keep') }}</gl-button
       >
-      <gl-link
+      <gl-button
         v-if="artifact.download_path"
         :href="artifact.download_path"
-        class="btn btn-sm btn-default"
-        download
         rel="nofollow"
         data-testid="download-artifacts"
-        >{{ s__('Job|Download') }}</gl-link
+        download
+        >{{ s__('Job|Download') }}</gl-button
       >
-      <gl-link
+      <gl-button
         v-if="artifact.browse_path"
         :href="artifact.browse_path"
-        class="btn btn-sm btn-default"
         data-testid="browse-artifacts"
         data-qa-selector="browse_artifacts_button"
-        >{{ s__('Job|Browse') }}</gl-link
+        >{{ s__('Job|Browse') }}</gl-button
       >
-    </div>
+    </gl-button-group>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index 0ee8cd6c5ad..35b16d73cc7 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -85,7 +85,7 @@ export default {
           <gl-link
             :href="action.path"
             :data-method="action.method"
-            class="btn btn-primary"
+            class="btn gl-button btn-confirm gl-text-decoration-none!"
             data-testid="job-empty-state-action"
             >{{ action.button_title }}</gl-link
           >
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index ec7868d9235..9d451f94e8a 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -1,6 +1,6 @@
 <script>
-import { isEmpty } from 'lodash';
 import { GlSprintf, GlLink } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { __ } from '../../locale';
 
@@ -201,9 +201,7 @@ export default {
             />
             <template v-else>{{ clusterNameOrLink.name }}</template>
           </template>
-          <template #kubernetesNamespace>
-            <template>{{ kubernetesNamespace }}</template>
-          </template>
+          <template #kubernetesNamespace>{{ kubernetesNamespace }}</template>
           <template #deploymentLink>
             <gl-link
               :href="deploymentLink.path"
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index a6d1b41c275..a815689659e 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -1,12 +1,14 @@
 <script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import { GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    TimeagoTooltip,
+    GlAlert,
     GlLink,
+    GlSprintf,
+    TimeagoTooltip,
   },
   props: {
     user: {
@@ -27,17 +29,21 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mt-3 js-build-erased">
-    <div class="erased alert alert-warning">
+  <div class="gl-mt-3">
+    <gl-alert variant="warning" :dismissible="false">
       <template v-if="isErasedByUser">
-        {{ s__('Job|Job has been erased by') }}
-        <gl-link :href="user.web_url"> {{ user.username }} </gl-link>
+        <gl-sprintf :message="s__('Job|Job has been erased by %{userLink}')">
+          <template #userLink>
+            <gl-link :href="user.web_url" target="_blank">{{ user.username }}</gl-link>
+          </template>
+        </gl-sprintf>
       </template>
+
       <template v-else>
         {{ s__('Job|Job has been erased') }}
       </template>
 
       <timeago-tooltip :time="erasedAt" />
-    </div>
+    </gl-alert>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index b0ba6ce52d1..91ab68d5f39 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,21 +1,20 @@
 <script>
-import { throttle, isEmpty } from 'lodash';
-import { mapGetters, mapState, mapActions } from 'vuex';
 import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml, GlAlert } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+import { throttle, isEmpty } from 'lodash';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import { polyfillSticky } from '~/lib/utils/sticky';
+import { sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
+import delayedJobMixin from '../mixins/delayed_job_mixin';
 import EmptyState from './empty_state.vue';
 import EnvironmentsBlock from './environments_block.vue';
 import ErasedBlock from './erased_block.vue';
 import LogTopBar from './job_log_controllers.vue';
+import Log from './log/log.vue';
+import Sidebar from './sidebar.vue';
 import StuckBlock from './stuck_block.vue';
 import UnmetPrerequisitesBlock from './unmet_prerequisites_block.vue';
-import Sidebar from './sidebar.vue';
-import { sprintf } from '~/locale';
-import delayedJobMixin from '../mixins/delayed_job_mixin';
-import Log from './log/log.vue';
 
 export default {
   name: 'JobPageApp',
@@ -54,11 +53,6 @@ export default {
       required: false,
       default: null,
     },
-    runnerHelpUrl: {
-      type: String,
-      required: false,
-      default: null,
-    },
     deploymentHelpUrl: {
       type: String,
       required: false,
@@ -140,14 +134,6 @@ export default {
           this.fetchJobsForStage(defaultStage);
         }
       }
-
-      if (newVal.archived) {
-        this.$nextTick(() => {
-          if (this.$refs.sticky) {
-            polyfillSticky(this.$refs.sticky);
-          }
-        });
-      }
     },
   },
   created() {
@@ -250,7 +236,6 @@ export default {
           v-if="shouldRenderSharedRunnerLimitWarning"
           :quota-used="job.runners.quota.used"
           :quota-limit="job.runners.quota.limit"
-          :runners-path="runnerHelpUrl"
           :project-path="projectPath"
           :subscriptions-more-minutes-url="subscriptionsMoreMinutesUrl"
         />
@@ -271,7 +256,6 @@ export default {
 
         <div
           v-if="job.archived"
-          ref="sticky"
           class="gl-mt-3 archived-job"
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
           data-testid="archived-job"
@@ -330,7 +314,6 @@ export default {
         'right-sidebar-collapsed': !isSidebarOpen,
       }"
       :artifact-help-url="artifactHelpUrl"
-      :runner-help-url="runnerHelpUrl"
       data-testid="job-sidebar"
     />
   </div>
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 6b61dc5902b..e68368919ab 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { sprintf } from '~/locale';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
@@ -51,7 +51,7 @@ export default {
       v-gl-tooltip
       :href="job.status.details_path"
       :title="tooltipText"
-      class="js-job-link d-flex"
+      class="js-job-link gl-display-flex gl-align-items-center"
     >
       <gl-icon
         v-if="isActive"
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 7e7d9a0549b..fbdbfddff56 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,7 +1,6 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
-import { polyfillSticky } from '~/lib/utils/sticky';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
 import scrollDown from '../svg/scroll_down.svg';
@@ -54,9 +53,6 @@ export default {
       });
     },
   },
-  mounted() {
-    polyfillSticky(this.$el);
-  },
   methods: {
     handleScrollToTop() {
       this.$emit('scrollJobLogTop');
diff --git a/app/assets/javascripts/jobs/components/log/duration_badge.vue b/app/assets/javascripts/jobs/components/log/duration_badge.vue
index 8e5dcdcc902..54b76fd9edd 100644
--- a/app/assets/javascripts/jobs/components/log/duration_badge.vue
+++ b/app/assets/javascripts/jobs/components/log/duration_badge.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlBadge } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlBadge,
+  },
   props: {
     duration: {
       type: String,
@@ -9,7 +14,7 @@ export default {
 };
 </script>
 <template>
-  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0 ws-normal">
+  <gl-badge>
     {{ duration }}
-  </div>
+  </gl-badge>
 </template>
diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
index 4c1c00cb2a7..3bb1f58573c 100644
--- a/app/assets/javascripts/jobs/components/log/line_header.vue
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
-import LineNumber from './line_number.vue';
 import DurationBadge from './duration_badge.vue';
+import LineNumber from './line_number.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
index 24276cbe60a..a1f4f7abb77 100644
--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -1,8 +1,8 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 0789bb54f0f..f63fe72a71a 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,17 +1,17 @@
 <script>
+import { GlButton, GlIcon, GlLink } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton, GlIcon, GlLink } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import { JOB_SIDEBAR } from '../constants';
 import ArtifactsBlock from './artifacts_block.vue';
-import JobSidebarRetryButton from './job_sidebar_retry_button.vue';
-import JobRetryForwardDeploymentModal from './job_retry_forward_deployment_modal.vue';
-import TriggerBlock from './trigger_block.vue';
 import CommitBlock from './commit_block.vue';
-import StagesDropdown from './stages_dropdown.vue';
+import JobRetryForwardDeploymentModal from './job_retry_forward_deployment_modal.vue';
+import JobSidebarRetryButton from './job_sidebar_retry_button.vue';
 import JobsContainer from './jobs_container.vue';
 import JobSidebarDetailsContainer from './sidebar_job_details_container.vue';
-import { JOB_SIDEBAR } from '../constants';
+import StagesDropdown from './stages_dropdown.vue';
+import TriggerBlock from './trigger_block.vue';
 
 export const forwardDeploymentFailureModalId = 'forward-deployment-failure';
 
@@ -41,19 +41,14 @@ export default {
       required: false,
       default: '',
     },
-    runnerHelpUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     ...mapGetters(['hasForwardDeploymentFailure']),
     ...mapState(['job', 'stages', 'jobs', 'selectedStage']),
     retryButtonClass() {
-      let className = 'btn btn-retry';
+      let className = 'btn gl-button gl-text-decoration-none!';
       className +=
-        this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
+        this.job.status && this.job.recoverable ? ' btn-confirm' : ' btn-confirm-secondary';
       return className;
     },
     hasArtifact() {
@@ -99,7 +94,7 @@ export default {
             <gl-link
               v-if="job.cancel_path"
               :href="job.cancel_path"
-              class="btn btn-default"
+              class="btn gl-button btn-default gl-text-decoration-none!"
               data-method="post"
               data-testid="cancel-button"
               rel="nofollow"
@@ -110,7 +105,7 @@ export default {
           <gl-button
             :aria-label="$options.i18n.toggleSidebar"
             category="tertiary"
-            class="gl-display-md-none gl-ml-2 js-sidebar-build-toggle"
+            class="gl-md-display-none gl-ml-2 js-sidebar-build-toggle"
             icon="chevron-double-lg-right"
             @click="toggleSidebar"
           />
@@ -120,7 +115,7 @@ export default {
           <gl-link
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
-            class="btn btn-success btn-inverted float-left mr-2"
+            class="btn gl-button btn-success-secondary float-left mr-2 gl-text-decoration-none!"
             data-testid="job-new-issue"
             >{{ $options.i18n.newIssue }}
           </gl-link>
@@ -135,7 +130,7 @@ export default {
             <gl-icon :size="14" name="external-link" />
           </gl-link>
         </div>
-        <job-sidebar-details-container :runner-help-url="runnerHelpUrl" />
+        <job-sidebar-details-container />
         <artifacts-block v-if="hasArtifact" :artifact="job.artifact" :help-url="artifactHelpUrl" />
         <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
         <commit-block
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index 7d541f93bad..05567328660 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -34,12 +34,12 @@ export default {
 };
 </script>
 <template>
-  <p class="build-detail-row">
-    <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
-    <span v-if="hasHelpURL" class="help-button float-right">
-      <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
-        <gl-icon name="question-o" />
-      </gl-link>
-    </span>
+  <p class="gl-display-flex gl-justify-content-space-between gl-mb-2">
+    <span v-if="hasTitle"
+      ><b>{{ title }}:</b> {{ value }}</span
+    >
+    <gl-link v-if="hasHelpURL" :href="helpUrl" target="_blank">
+      <gl-icon name="question-o" />
+    </gl-link>
   </p>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
index 8ad1008278e..62cd30fb320 100644
--- a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
@@ -1,9 +1,10 @@
 <script>
 import { mapState } from 'vuex';
-import DetailRow from './sidebar_detail_row.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
+import DetailRow from './sidebar_detail_row.vue';
 
 export default {
   name: 'JobSidebarDetailsContainer',
@@ -11,13 +12,6 @@ export default {
     DetailRow,
   },
   mixins: [timeagoMixin],
-  props: {
-    runnerHelpUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
   computed: {
     ...mapState(['job']),
     coverage() {
@@ -51,6 +45,11 @@ export default {
     queued() {
       return timeIntervalInWords(this.job.queued);
     },
+    runnerHelpUrl() {
+      return helpPagePath('ci/runners/README.html', {
+        anchor: 'set-maximum-job-timeout-for-a-runner',
+      });
+    },
     runnerId() {
       return `${this.job.runner.description} (#${this.job.runner.id})`;
     },
@@ -96,7 +95,12 @@ export default {
 
     <p v-if="hasTags" class="build-detail-row" data-testid="job-tags">
       <span class="font-weight-bold">{{ __('Tags:') }}</span>
-      <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary mr-1">{{ tag }}</span>
+      <span
+        v-for="(tag, i) in job.tags"
+        :key="i"
+        class="badge badge-pill badge-primary gl-badge sm"
+        >{{ tag }}</span
+      >
     </p>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 7d4fe0a0680..64c4031b002 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,6 +1,6 @@
 <script>
-import { isEmpty } from 'lodash';
 import { GlLink, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index 8e8202246a2..abd0c13702a 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert, GlBadge, GlLink } from '@gitlab/ui';
-import { s__ } from '../../locale';
+import { s__ } from '~/locale';
 /**
  * Renders Stuck Runners block for job's view.
  */
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 1d46dd8cea4..f6b98777011 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,12 +1,31 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTable } from '@gitlab/ui';
 import { __ } from '~/locale';
 
-const HIDDEN_VALUE = '••••••';
+const DEFAULT_TD_CLASSES = 'gl-w-half gl-font-sm! gl-border-gray-200!';
+const DEFAULT_TH_CLASSES =
+  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1!';
 
 export default {
+  fields: [
+    {
+      key: 'key',
+      label: __('Key'),
+      tdAttr: { 'data-testid': 'trigger-build-key' },
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
+    },
+    {
+      key: 'value',
+      label: __('Value'),
+      tdAttr: { 'data-testid': 'trigger-build-value' },
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
+    },
+  ],
   components: {
     GlButton,
+    GlTable,
   },
   props: {
     trigger: {
@@ -21,7 +40,7 @@ export default {
   },
   computed: {
     hasVariables() {
-      return this.trigger.variables && this.trigger.variables.length > 0;
+      return this.trigger.variables.length > 0;
     },
     getToggleButtonText() {
       return this.showVariableValues ? __('Hide values') : __('Reveal values');
@@ -35,45 +54,41 @@ export default {
       this.showVariableValues = !this.showVariableValues;
     },
     getDisplayValue(value) {
-      return this.showVariableValues ? value : HIDDEN_VALUE;
+      return this.showVariableValues ? value : '••••••';
     },
   },
 };
 </script>
 
 <template>
-  <div class="build-widget block">
+  <div class="block">
     <p
       v-if="trigger.short_token"
-      class="js-short-token"
       :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
+      data-testid="trigger-short-token"
     >
-      <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
+      <span class="gl-font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
     </p>
 
     <template v-if="hasVariables">
-      <p class="trigger-variables-btn-container d-flex">
-        <span class="font-weight-bold">{{ __('Trigger variables:') }}</span>
+      <p class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+        <span class="gl-font-weight-bold">{{ __('Trigger variables:') }}</span>
 
         <gl-button
           v-if="hasValues"
-          class="group js-reveal-variables trigger-variables-btn"
+          class="gl-mt-2"
           size="small"
+          data-testid="trigger-reveal-values-button"
           @click="toggleValues"
           >{{ getToggleButtonText }}</gl-button
         >
       </p>
 
-      <table class="js-build-variables trigger-build-variables">
-        <tr v-for="(variable, index) in trigger.variables" :key="`${variable.key}-${index}`">
-          <td class="js-build-variable trigger-build-variable trigger-variables-table-cell">
-            {{ variable.key }}
-          </td>
-          <td class="js-build-value trigger-build-value trigger-variables-table-cell">
-            {{ getDisplayValue(variable.value) }}
-          </td>
-        </tr>
-      </table>
+      <gl-table :items="trigger.variables" :fields="$options.fields" small bordered>
+        <template #cell(value)="data">
+          {{ getDisplayValue(data.value) }}
+        </template>
+      </gl-table>
     </template>
   </div>
 </template>