Add latest changes from gitlab-org/gitlab@master

2 files changed, 16 insertions, 3 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 be7c0b68b4c..e520b9b8b92 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
@@ -7,6 +7,7 @@ import {
   GlFormCombobox,
   GlFormGroup,
   GlFormSelect,
+  GlFormInput,
   GlFormTextarea,
   GlIcon,
   GlLink,
@@ -41,6 +42,7 @@ export default {
     GlFormCombobox,
     GlFormGroup,
     GlFormSelect,
+    GlFormInput,
     GlFormTextarea,
     GlIcon,
     GlLink,
@@ -128,6 +130,12 @@ export default {
 
       return true;
     },
+    scopedVariablesEnabled() {
+      return !this.isGroup || this.glFeatures.scopedGroupVariables;
+    },
+    scopedVariablesAvailable() {
+      return !this.isGroup || this.glFeatures.groupScopedCiVariables;
+    },
     variableValidationFeedback() {
       return `${this.tokenValidationFeedback} ${this.maskedFeedback}`;
     },
@@ -226,24 +234,27 @@ export default {
           :label="__('Type')"
           label-for="ci-variable-type"
           class="w-50 gl-mr-5"
-          :class="{ 'w-100': isGroup }"
+          :class="{ 'w-100': !scopedVariablesEnabled }"
         >
           <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
         </gl-form-group>
 
         <gl-form-group
-          v-if="!isGroup"
+          v-if="scopedVariablesEnabled"
           :label="__('Environment scope')"
           label-for="ci-variable-env"
           class="w-50"
           data-testid="environment-scope"
         >
           <ci-environments-dropdown
+            v-if="scopedVariablesAvailable"
             class="w-100"
             :value="environment_scope"
             @selectEnvironment="setEnvironmentScope"
             @createClicked="addWildCardScope"
           />
+
+          <gl-form-input v-else v-model="environment_scope" class="w-100" readonly />
         </gl-form-group>
       </div>
 
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 c9943052356..c5f47cf8e84 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
@@ -2,6 +2,7 @@
 import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { s__, __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
 import CiVariablePopover from './ci_variable_popover.vue';
 
@@ -59,6 +60,7 @@ export default {
   directives: {
     GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     ...mapState(['variables', 'valuesHidden', 'isGroup', 'isLoading', 'isDeleting']),
     valuesButtonText() {
@@ -68,7 +70,7 @@ export default {
       return this.variables && this.variables.length > 0;
     },
     fields() {
-      if (this.isGroup) {
+      if (this.isGroup && !this.glFeatures.scopedGroupVariables) {
         return this.$options.fields.filter((field) => field.key !== 'environment_scope');
       }
       return this.$options.fields;