Add latest changes from gitlab-org/gitlab@master

3 files changed, 19 insertions, 6 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 eb2b1fc501c..3af89dc4a2c 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
@@ -26,6 +26,7 @@ import {
   AWS_TIP_DISMISSED_COOKIE_NAME,
   AWS_TIP_MESSAGE,
   CONTAINS_VARIABLE_REFERENCE_MESSAGE,
+  ENVIRONMENT_SCOPE_LINK_TITLE,
   EVENT_LABEL,
   EVENT_ACTION,
 } from '../constants';
@@ -40,6 +41,7 @@ export default {
   tokenList: awsTokenList,
   awsTipMessage: AWS_TIP_MESSAGE,
   containsVariableReferenceMessage: CONTAINS_VARIABLE_REFERENCE_MESSAGE,
+  environmentScopeLinkTitle: ENVIRONMENT_SCOPE_LINK_TITLE,
   components: {
     CiEnvironmentsDropdown,
     GlAlert,
@@ -81,6 +83,7 @@ export default {
       'containsVariableReferenceLink',
       'protectedEnvironmentVariablesLink',
       'maskedEnvironmentVariablesLink',
+      'environmentScopeLink',
     ]),
     ...mapComputed(
       [
@@ -278,12 +281,18 @@ export default {
           <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
         </gl-form-group>
 
-        <gl-form-group
-          :label="__('Environment scope')"
-          label-for="ci-variable-env"
-          class="w-50"
-          data-testid="environment-scope"
-        >
+        <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope">
+          <template #label>
+            {{ __('Environment scope') }}
+            <gl-link
+              :title="$options.environmentScopeLinkTitle"
+              :href="environmentScopeLink"
+              target="_blank"
+              data-testid="environment-scope-link"
+            >
+              <gl-icon name="question" :size="12" />
+            </gl-link>
+          </template>
           <ci-environments-dropdown
             v-if="scopedVariablesAvailable"
             class="w-100"
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index 663a912883b..fa55b4d9e77 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -31,3 +31,5 @@ export const AWS_TOKEN_CONSTANTS = [AWS_ACCESS_KEY_ID, AWS_DEFAULT_REGION, AWS_S
 export const CONTAINS_VARIABLE_REFERENCE_MESSAGE = __(
   'Values that contain the %{codeStart}$%{codeEnd} character can be considered a variable reference and expanded. %{docsLinkStart}Learn more.%{docsLinkEnd}',
 );
+
+export const ENVIRONMENT_SCOPE_LINK_TITLE = __('Learn more');
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index 7c40f8134d4..f771751194c 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -17,6 +17,7 @@ const mountCiVariableListApp = (containerEl) => {
     containsVariableReferenceLink,
     protectedEnvironmentVariablesLink,
     maskedEnvironmentVariablesLink,
+    environmentScopeLink,
   } = containerEl.dataset;
   const isGroup = parseBoolean(group);
   const isProtectedByDefault = parseBoolean(protectedByDefault);
@@ -34,6 +35,7 @@ const mountCiVariableListApp = (containerEl) => {
     containsVariableReferenceLink,
     protectedEnvironmentVariablesLink,
     maskedEnvironmentVariablesLink,
+    environmentScopeLink,
   });
 
   return new Vue({