Add latest changes from gitlab-org/gitlab@13-1-stable-ee

5 files changed, 116 insertions, 20 deletions

diff --git a/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue b/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue
index f5c2cc57f3f..c15d638d92b 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_key_field.vue
@@ -154,7 +154,7 @@ export default {
               v-for="(result, i) in results"
               :key="i"
               role="option"
-              :class="{ 'gl-bg-gray-100': i === arrowCounter }"
+              :class="{ 'gl-bg-gray-50': i === arrowCounter }"
               :aria-selected="i === arrowCounter"
             >
               <gl-button tabindex="-1" class="btn-transparent pl-2" @click="selectToken(result)">{{
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 f6ade0867cd..6531b945212 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
@@ -1,19 +1,29 @@
 <script>
 import {
+  GlAlert,
+  GlButton,
+  GlCollapse,
   GlDeprecatedButton,
-  GlModal,
-  GlFormSelect,
+  GlFormCheckbox,
   GlFormGroup,
   GlFormInput,
+  GlFormSelect,
   GlFormTextarea,
-  GlFormCheckbox,
-  GlLink,
   GlIcon,
+  GlLink,
+  GlModal,
+  GlSprintf,
 } from '@gitlab/ui';
+import Cookies from 'js-cookie';
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
+import {
+  AWS_TOKEN_CONSTANTS,
+  ADD_CI_VARIABLE_MODAL_ID,
+  AWS_TIP_DISMISSED_COOKIE_NAME,
+  AWS_TIP_MESSAGE,
+} from '../constants';
 import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens';
 import CiKeyField from './ci_key_field.vue';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
@@ -23,19 +33,29 @@ export default {
   components: {
     CiEnvironmentsDropdown,
     CiKeyField,
+    GlAlert,
+    GlButton,
+    GlCollapse,
     GlDeprecatedButton,
-    GlModal,
-    GlFormSelect,
+    GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
+    GlFormSelect,
     GlFormTextarea,
-    GlFormCheckbox,
-    GlLink,
     GlIcon,
+    GlLink,
+    GlModal,
+    GlSprintf,
   },
   mixins: [glFeatureFlagsMixin()],
   tokens: awsTokens,
   tokenList: awsTokenList,
+  awsTipMessage: AWS_TIP_MESSAGE,
+  data() {
+    return {
+      isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true',
+    };
+  },
   computed: {
     ...mapState([
       'projectId',
@@ -47,7 +67,16 @@ export default {
       'maskableRegex',
       'selectedEnvironment',
       'isProtectedByDefault',
+      'awsLogoSvgPath',
+      'awsTipDeployLink',
+      'awsTipCommandsLink',
+      'awsTipLearnLink',
+      'protectedEnvironmentVariablesLink',
+      'maskedEnvironmentVariablesLink',
     ]),
+    isTipVisible() {
+      return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variableData.key);
+    },
     canSubmit() {
       return (
         this.variableValidationState &&
@@ -126,6 +155,10 @@ export default {
       'setSelectedEnvironment',
       'setVariableProtected',
     ]),
+    dismissTip() {
+      Cookies.set(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 });
+      this.isTipDismissed = true;
+    },
     deleteVarAndClose() {
       this.deleteVariable(this.variableBeingEdited);
       this.hideModal();
@@ -232,10 +265,10 @@ export default {
       <gl-form-group :label="__('Flags')" label-for="ci-variable-flags">
         <gl-form-checkbox v-model="variableData.protected" class="mb-0">
           {{ __('Protect variable') }}
-          <gl-link href="/help/ci/variables/README#protected-environment-variables">
+          <gl-link target="_blank" :href="protectedEnvironmentVariablesLink">
             <gl-icon name="question" :size="12" />
           </gl-link>
-          <p class="prepend-top-4 text-secondary">
+          <p class="gl-mt-2 text-secondary">
             {{ __('Export variable to pipelines running on protected branches and tags only.') }}
           </p>
         </gl-form-checkbox>
@@ -246,10 +279,10 @@ export default {
           data-qa-selector="ci_variable_masked_checkbox"
         >
           {{ __('Mask variable') }}
-          <gl-link href="/help/ci/variables/README#masked-variables">
+          <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">
             <gl-icon name="question" :size="12" />
           </gl-link>
-          <p class="prepend-top-4 append-bottom-0 text-secondary">
+          <p class="gl-mt-2 gl-mb-0 text-secondary">
             {{ __('Variable will be masked in job logs.') }}
             <span
               :class="{
@@ -258,13 +291,52 @@ export default {
             >
               {{ __('Requires values to meet regular expression requirements.') }}</span
             >
-            <gl-link href="/help/ci/variables/README#masked-variables">{{
+            <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">{{
               __('More information')
             }}</gl-link>
           </p>
         </gl-form-checkbox>
       </gl-form-group>
     </form>
+    <gl-collapse :visible="isTipVisible">
+      <gl-alert
+        :title="__('Deploying to AWS is easy with GitLab')"
+        variant="tip"
+        data-testid="aws-guidance-tip"
+        @dismiss="dismissTip"
+      >
+        <div class="gl-display-flex gl-flex-direction-row">
+          <div>
+            <p>
+              <gl-sprintf :message="$options.awsTipMessage">
+                <template #deployLink="{ content }">
+                  <gl-link :href="awsTipDeployLink" target="_blank">{{ content }}</gl-link>
+                </template>
+                <template #commandsLink="{ content }">
+                  <gl-link :href="awsTipCommandsLink" target="_blank">{{ content }}</gl-link>
+                </template>
+              </gl-sprintf>
+            </p>
+            <p>
+              <gl-button
+                :href="awsTipLearnLink"
+                target="_blank"
+                category="secondary"
+                variant="info"
+                class="gl-overflow-wrap-break"
+                >{{ __('Learn more about deploying to AWS') }}</gl-button
+              >
+            </p>
+          </div>
+          <img
+            class="gl-mt-3"
+            :alt="__('Amazon Web Services Logo')"
+            :src="awsLogoSvgPath"
+            height="32"
+          />
+        </div>
+      </gl-alert>
+    </gl-collapse>
     <template #modal-footer>
       <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
       <gl-deprecated-button
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 7eb791f97e4..7b703c5ede1 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
@@ -170,7 +170,7 @@ export default {
         v-if="tableIsNotEmpty"
         ref="secret-value-reveal-button"
         data-qa-selector="reveal_ci_variable_value_button"
-        class="append-right-8"
+        class="gl-mr-3"
         @click="toggleValues(!valuesHidden)"
         >{{ valuesButtonText }}</gl-deprecated-button
       >
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index a4db6481720..ef304c7ccee 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -15,7 +15,13 @@ export const types = {
   allEnvironmentsType: '*',
 };
 
+export const AWS_TIP_DISMISSED_COOKIE_NAME = 'ci_variable_list_constants_aws_tip_dismissed';
+export const AWS_TIP_MESSAGE = __(
+  '%{deployLinkStart}Use a template to deploy to ECS%{deployLinkEnd}, or use a docker image to %{commandsLinkStart}run AWS commands in GitLab CI/CD%{commandsLinkEnd}.',
+);
+
 // AWS TOKEN CONSTANTS
 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];
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index 2b4a56a4e6d..a28b52d6b57 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -3,9 +3,21 @@ import CiVariableSettings from './components/ci_variable_settings.vue';
 import createStore from './store';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
-export default () => {
-  const el = document.getElementById('js-ci-project-variables');
-  const { endpoint, projectId, group, maskableRegex, protectedByDefault } = el.dataset;
+export default (containerId = 'js-ci-project-variables') => {
+  const containerEl = document.getElementById(containerId);
+  const {
+    endpoint,
+    projectId,
+    group,
+    maskableRegex,
+    protectedByDefault,
+    awsLogoSvgPath,
+    awsTipDeployLink,
+    awsTipCommandsLink,
+    awsTipLearnLink,
+    protectedEnvironmentVariablesLink,
+    maskedEnvironmentVariablesLink,
+  } = containerEl.dataset;
   const isGroup = parseBoolean(group);
   const isProtectedByDefault = parseBoolean(protectedByDefault);
 
@@ -15,10 +27,16 @@ export default () => {
     isGroup,
     maskableRegex,
     isProtectedByDefault,
+    awsLogoSvgPath,
+    awsTipDeployLink,
+    awsTipCommandsLink,
+    awsTipLearnLink,
+    protectedEnvironmentVariablesLink,
+    maskedEnvironmentVariablesLink,
   });
 
   return new Vue({
-    el,
+    el: containerEl,
     store,
     render(createElement) {
       return createElement(CiVariableSettings);