1 files changed, 66 insertions, 5 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index 3cdcb68e919..345a8def49d 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -1,8 +1,21 @@
 <script>
-import { GlButton, GlLoadingIcon, GlModalDirective, GlTable, GlTooltipDirective } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import {
+  GlAlert,
+  GlButton,
+  GlLoadingIcon,
+  GlModalDirective,
+  GlTable,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { ADD_CI_VARIABLE_MODAL_ID, variableText } from '../constants';
+import {
+  ADD_CI_VARIABLE_MODAL_ID,
+  DEFAULT_EXCEEDS_VARIABLE_LIMIT_TEXT,
+  EXCEEDS_VARIABLE_LIMIT_TEXT,
+  MAXIMUM_VARIABLE_LIMIT_REACHED,
+  variableText,
+} from '../constants';
 import { convertEnvironmentScope } from '../utils';
 
 export default {
@@ -41,6 +54,7 @@ export default {
     },
   ],
   components: {
+    GlAlert,
     GlButton,
     GlLoadingIcon,
     GlTable,
@@ -51,10 +65,19 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    entity: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isLoading: {
       type: Boolean,
       required: true,
     },
+    maxVariableLimit: {
+      type: Number,
+      required: true,
+    },
     variables: {
       type: Array,
       required: true,
@@ -66,6 +89,23 @@ export default {
     };
   },
   computed: {
+    exceedsVariableLimit() {
+      return this.maxVariableLimit > 0 && this.variables.length >= this.maxVariableLimit;
+    },
+    exceedsVariableLimitText() {
+      if (this.exceedsVariableLimit && this.entity) {
+        return sprintf(EXCEEDS_VARIABLE_LIMIT_TEXT, {
+          entity: this.entity,
+          currentVariableCount: this.variables.length,
+          maxVariableLimit: this.maxVariableLimit,
+        });
+      }
+
+      return DEFAULT_EXCEEDS_VARIABLE_LIMIT_TEXT;
+    },
+    showAlert() {
+      return !this.isLoading && this.exceedsVariableLimit;
+    },
     valuesButtonText() {
       return this.areValuesHidden ? __('Reveal values') : __('Hide values');
     },
@@ -104,17 +144,29 @@ export default {
       if (item.masked) {
         options.push(s__('CiVariables|Masked'));
       }
+      if (!item.raw) {
+        options.push(s__('CiVariables|Expanded'));
+      }
       return options.join(', ');
     },
   },
+  maximumVariableLimitReached: MAXIMUM_VARIABLE_LIMIT_REACHED,
 };
 </script>
 
 <template>
   <div class="ci-variable-table" data-testid="ci-variable-table">
     <gl-loading-icon v-if="isLoading" />
+    <gl-alert
+      v-if="showAlert"
+      :dismissible="false"
+      :title="$options.maximumVariableLimitReached"
+      variant="info"
+    >
+      {{ exceedsVariableLimitText }}
+    </gl-alert>
     <gl-table
-      v-else
+      v-if="!isLoading"
       :fields="fields"
       :items="variablesWithOptions"
       tbody-tr-class="js-ci-variable-row"
@@ -178,7 +230,7 @@ export default {
         </div>
       </template>
       <template #cell(options)="{ item }">
-        <span>{{ item.options }}</span>
+        <span data-testid="ci-variable-table-row-options">{{ item.options }}</span>
       </template>
       <template #cell(environmentScope)="{ item }">
         <div
@@ -215,6 +267,14 @@ export default {
         </p>
       </template>
     </gl-table>
+    <gl-alert
+      v-if="showAlert"
+      :dismissible="false"
+      :title="$options.maximumVariableLimitReached"
+      variant="info"
+    >
+      {{ exceedsVariableLimitText }}
+    </gl-alert>
     <div class="ci-variable-actions gl-display-flex gl-mt-5">
       <gl-button
         v-gl-modal-directive="$options.modalId"
@@ -223,6 +283,7 @@ export default {
         variant="confirm"
         category="primary"
         :aria-label="__('Add')"
+        :disabled="exceedsVariableLimit"
         @click="setSelectedVariable()"
         >{{ __('Add variable') }}</gl-button
       >