1 files changed, 41 insertions, 2 deletions
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
index 345a8def49d..5e367ff33b2 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
@@ -4,6 +4,7 @@ import {
   GlButton,
   GlLoadingIcon,
   GlModalDirective,
+  GlKeysetPagination,
   GlTable,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -56,6 +57,7 @@ export default {
   components: {
     GlAlert,
     GlButton,
+    GlKeysetPagination,
     GlLoadingIcon,
     GlTable,
   },
@@ -78,6 +80,10 @@ export default {
       type: Number,
       required: true,
     },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
     variables: {
       type: Array,
       required: true,
@@ -165,6 +171,28 @@ export default {
     >
       {{ exceedsVariableLimitText }}
     </gl-alert>
+    <div
+      v-if="glFeatures.ciVariablesPages"
+      class="ci-variable-actions gl-display-flex gl-justify-content-end gl-my-3"
+    >
+      <gl-button
+        v-if="!isTableEmpty"
+        data-qa-selector="reveal_ci_variable_value_button"
+        @click="toggleHiddenState"
+        >{{ valuesButtonText }}</gl-button
+      >
+      <gl-button
+        v-gl-modal-directive="$options.modalId"
+        class="gl-mx-3"
+        data-qa-selector="add_ci_variable_button"
+        variant="confirm"
+        category="primary"
+        :aria-label="__('Add')"
+        :disabled="exceedsVariableLimit"
+        @click="setSelectedVariable()"
+        >{{ __('Add variable') }}</gl-button
+      >
+    </div>
     <gl-table
       v-if="!isLoading"
       :fields="fields"
@@ -174,11 +202,13 @@ export default {
       sort-by="key"
       sort-direction="asc"
       stacked="lg"
-      table-class="text-secondary"
+      table-class="gl-border-t"
       fixed
       show-empty
       sort-icon-left
       no-sort-reset
+      no-local-sorting
+      @sort-changed="(val) => $emit('sort-changed', val)"
     >
       <template #table-colgroup="scope">
         <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
@@ -275,7 +305,7 @@ export default {
     >
       {{ exceedsVariableLimitText }}
     </gl-alert>
-    <div class="ci-variable-actions gl-display-flex gl-mt-5">
+    <div v-if="!glFeatures.ciVariablesPages" class="ci-variable-actions gl-display-flex gl-mt-5">
       <gl-button
         v-gl-modal-directive="$options.modalId"
         class="gl-mr-3"
@@ -294,5 +324,14 @@ export default {
         >{{ valuesButtonText }}</gl-button
       >
     </div>
+    <div v-else class="gl-display-flex gl-justify-content-center gl-mt-6">
+      <gl-keyset-pagination
+        v-bind="pageInfo"
+        :prev-text="__('Previous')"
+        :next-text="__('Next')"
+        @prev="$emit('handle-prev-page')"
+        @next="$emit('handle-next-page')"
+      />
+    </div>
   </div>
 </template>