Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

3 files changed, 29 insertions, 0 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 12def6e7eef..03fd600e493 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
@@ -24,6 +24,7 @@ import {
   ADD_CI_VARIABLE_MODAL_ID,
   AWS_TIP_DISMISSED_COOKIE_NAME,
   AWS_TIP_MESSAGE,
+  CONTAINS_VARIABLE_REFERENCE_MESSAGE,
 } from '../constants';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
@@ -33,6 +34,7 @@ export default {
   tokens: awsTokens,
   tokenList: awsTokenList,
   awsTipMessage: AWS_TIP_MESSAGE,
+  containsVariableReferenceMessage: CONTAINS_VARIABLE_REFERENCE_MESSAGE,
   components: {
     CiEnvironmentsDropdown,
     GlAlert,
@@ -70,6 +72,7 @@ export default {
       'awsTipDeployLink',
       'awsTipCommandsLink',
       'awsTipLearnLink',
+      'containsVariableReferenceLink',
       'protectedEnvironmentVariablesLink',
       'maskedEnvironmentVariablesLink',
     ]),
@@ -99,6 +102,10 @@ export default {
       const regex = RegExp(this.maskableRegex);
       return regex.test(this.variable.secret_value);
     },
+    containsVariableReference() {
+      const regex = RegExp(/\$/);
+      return regex.test(this.variable.secret_value);
+    },
     displayMaskedError() {
       return !this.canMask && this.variable.masked;
     },
@@ -328,6 +335,22 @@ export default {
         </div>
       </gl-alert>
     </gl-collapse>
+    <gl-alert
+      v-if="containsVariableReference"
+      :title="__('Value may contain a variable reference')"
+      :dismissible="false"
+      variant="warning"
+      data-testid="contains-variable-reference"
+    >
+      <gl-sprintf :message="$options.containsVariableReferenceMessage">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+        <template #docsLink="{ content }">
+          <gl-link :href="containsVariableReferenceLink" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <template #modal-footer>
       <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
       <gl-button
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index 564e1d01242..f4002537f79 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -24,3 +24,7 @@ export const AWS_ACCESS_KEY_ID = 'AWS_ACCESS_KEY_ID';
 export const AWS_DEFAULT_REGION = 'AWS_DEFAULT_REGION';
 export const AWS_SECRET_ACCESS_KEY = 'AWS_SECRET_ACCESS_KEY';
 export const AWS_TOKEN_CONSTANTS = [AWS_ACCESS_KEY_ID, AWS_DEFAULT_REGION, AWS_SECRET_ACCESS_KEY];
+
+export const CONTAINS_VARIABLE_REFERENCE_MESSAGE = __(
+  'Variable references indicated by %{codeStart}$%{codeEnd} may be expanded. If this is not what you want, consider %{docsLinkStart}using a workaround to prevent expansion%{docsLinkEnd}.',
+);
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index 50856ca9533..7c40f8134d4 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -14,6 +14,7 @@ const mountCiVariableListApp = (containerEl) => {
     awsTipDeployLink,
     awsTipCommandsLink,
     awsTipLearnLink,
+    containsVariableReferenceLink,
     protectedEnvironmentVariablesLink,
     maskedEnvironmentVariablesLink,
   } = containerEl.dataset;
@@ -30,6 +31,7 @@ const mountCiVariableListApp = (containerEl) => {
     awsTipDeployLink,
     awsTipCommandsLink,
     awsTipLearnLink,
+    containsVariableReferenceLink,
     protectedEnvironmentVariablesLink,
     maskedEnvironmentVariablesLink,
   });