1 files changed, 9 insertions, 7 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..12def6e7eef 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,9 @@ export default {
 
       return true;
     },
+    scopedVariablesAvailable() {
+      return !this.isGroup || this.glFeatures.groupScopedCiVariables;
+    },
     variableValidationFeedback() {
       return `${this.tokenValidationFeedback} ${this.maskedFeedback}`;
     },
@@ -222,28 +227,25 @@ export default {
       </gl-form-group>
 
       <div class="d-flex">
-        <gl-form-group
-          :label="__('Type')"
-          label-for="ci-variable-type"
-          class="w-50 gl-mr-5"
-          :class="{ 'w-100': isGroup }"
-        >
+        <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5">
           <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
         </gl-form-group>
 
         <gl-form-group
-          v-if="!isGroup"
           :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>