Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

4 files changed, 20 insertions, 14 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>
 
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
index 6e6527df63f..605da5d9352 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
@@ -37,7 +37,7 @@ export default {
 
 <template>
   <div id="popover-container">
-    <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
+    <gl-popover :target="target" placement="top" container="popover-container">
       <div
         class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-word-break-all"
       >
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..e5923124653 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,8 +60,9 @@ export default {
   directives: {
     GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
-    ...mapState(['variables', 'valuesHidden', 'isGroup', 'isLoading', 'isDeleting']),
+    ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']),
     valuesButtonText() {
       return this.valuesHidden ? __('Reveal values') : __('Hide values');
     },
@@ -68,9 +70,6 @@ export default {
       return this.variables && this.variables.length > 0;
     },
     fields() {
-      if (this.isGroup) {
-        return this.$options.fields.filter((field) => field.key !== 'environment_scope');
-      }
       return this.$options.fields;
     },
   },
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index 37b5f7e6df7..50856ca9533 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -3,8 +3,7 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import CiVariableSettings from './components/ci_variable_settings.vue';
 import createStore from './store';
 
-export default (containerId = 'js-ci-project-variables') => {
-  const containerEl = document.getElementById(containerId);
+const mountCiVariableListApp = (containerEl) => {
   const {
     endpoint,
     projectId,
@@ -43,3 +42,9 @@ export default (containerId = 'js-ci-project-variables') => {
     },
   });
 };
+
+export default (containerId = 'js-ci-project-variables') => {
+  const el = document.getElementById(containerId);
+
+  return !el ? {} : mountCiVariableListApp(el);
+};