1 files changed, 23 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