Show variable expansion info when adding CI variable

Changelog: fixed

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/297519

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

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}.',
+);

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,
   });

app/views/ci/variables/_index.html.haml

@@ -16,6 +16,7 @@
   aws_tip_deploy_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'deploy-your-application-to-the-aws-elastic-container-service-ecs'),
   aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'run-aws-commands-from-gitlab-cicd'),
   aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'aws'),
+  contains_variable_reference_link: help_page_path('ci/variables/index', anchor: 'troubleshooting-variables-containing-references'),
   protected_environment_variables_link: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable'),
   masked_environment_variables_link: help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'),
 } }

doc/ci/variables/index.md

@@ -368,6 +368,26 @@ WARNING:
 When you store credentials, there are [security implications](#cicd-variable-security).
 If you use AWS keys for example, follow the [Best practices for managing AWS access keys](https://docs.aws.amazon.com/general/latest/gr/aws-access-keys-best-practices.html).
 
+### Troubleshooting variables containing references
+
+When a variable value contains a reference indicated by `$`, it may be expanded
+which can lead to unexpected values. Use `$$` to ignore a variable name inside
+another variable:
+
+```plaintext
+SOME$$VALUE
+```
+
+Another workaround is to add a new variable set to the one that contains a
+reference:
+
+```yaml
+variables:
+  NEWVAR: $MYVAR
+script:
+  - echo $NEWVAR  # outputs SOME$VALUE
+```
+
 ## Use CI/CD variables in job scripts
 
 All CI/CD variables are set as environment variables in the job's environment.

locale/gitlab.pot

@@ -36355,6 +36355,9 @@ msgstr ""
 msgid "Value Stream Analytics gives an overview of how much time it takes to go from idea to production in your project."
 msgstr ""
 
+msgid "Value may contain a variable reference"
+msgstr ""
+
 msgid "Value stream"
 msgstr ""
 
@@ -36415,6 +36418,9 @@ msgstr ""
 msgid "Variable"
 msgstr ""
 
+msgid "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}."
+msgstr ""
+
 msgid "Variable will be masked in job logs."
 msgstr ""
 

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

@@ -123,6 +123,29 @@ describe('Ci variable modal', () => {
     });
   });
 
+  describe.each`
+    value           | secret            | rendered
+    ${'value'}      | ${'secret_value'} | ${false}
+    ${'dollar$ign'} | ${'dollar$ign'}   | ${true}
+  `('Adding a new variable', ({ value, secret, rendered }) => {
+    beforeEach(() => {
+      const [variable] = mockData.mockVariables;
+      const invalidKeyVariable = {
+        ...variable,
+        key: 'key',
+        value,
+        secret_value: secret,
+      };
+      createComponent(mount);
+      store.state.variable = invalidKeyVariable;
+    });
+
+    it(`${rendered ? 'renders' : 'does not render'} the variable reference warning`, () => {
+      const warning = wrapper.find(`[data-testid='contains-variable-reference']`);
+      expect(warning.exists()).toBe(rendered);
+    });
+  });
+
   describe('Editing a variable', () => {
     beforeEach(() => {
       const [variable] = mockData.mockVariables;