diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /app/assets/javascripts/ci_variable_list | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'app/assets/javascripts/ci_variable_list')
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); |