diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
commit | b39512ed755239198a9c294b6a45e65c05900235 (patch) | |
tree | d234a3efade1de67c46b9e5a38ce813627726aa7 /app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue | |
parent | d31474cf3b17ece37939d20082b07f6657cc79a9 (diff) |
Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue')
-rw-r--r-- | app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue | 212 |
1 files changed, 120 insertions, 92 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 557a8d6b5ba..5ba63de8c96 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 @@ -14,22 +14,26 @@ import { GlModal, GlSprintf, } from '@gitlab/ui'; -import { mapActions, mapState } from 'vuex'; import { getCookie, setCookie } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; import Tracking from '~/tracking'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { mapComputed } from '~/vuex_shared/bindings'; + import { + allEnvironments, AWS_TOKEN_CONSTANTS, ADD_CI_VARIABLE_MODAL_ID, AWS_TIP_DISMISSED_COOKIE_NAME, AWS_TIP_MESSAGE, CONTAINS_VARIABLE_REFERENCE_MESSAGE, + defaultVariableState, ENVIRONMENT_SCOPE_LINK_TITLE, EVENT_LABEL, EVENT_ACTION, + EDIT_VARIABLE_ACTION, + VARIABLE_ACTIONS, + variableOptions, } from '../constants'; +import { createJoinedEnvironments } from '../utils'; import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens'; @@ -58,66 +62,84 @@ export default { GlModal, GlSprintf, }, - mixins: [glFeatureFlagsMixin(), trackingMixin], + mixins: [trackingMixin], + inject: [ + 'awsLogoSvgPath', + 'awsTipCommandsLink', + 'awsTipDeployLink', + 'awsTipLearnLink', + 'containsVariableReferenceLink', + 'environmentScopeLink', + 'isProtectedByDefault', + 'maskedEnvironmentVariablesLink', + 'maskableRegex', + 'protectedEnvironmentVariablesLink', + ], + props: { + areScopedVariablesAvailable: { + type: Boolean, + required: false, + default: false, + }, + environments: { + type: Array, + required: false, + default: () => [], + }, + mode: { + type: String, + required: true, + validator(val) { + return VARIABLE_ACTIONS.includes(val); + }, + }, + selectedVariable: { + type: Object, + required: false, + default: () => {}, + }, + variables: { + type: Array, + required: false, + default: () => [], + }, + }, data() { return { + newEnvironments: [], isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true', + typeOptions: variableOptions, validationErrorEventProperty: '', + variable: { ...defaultVariableState, ...this.selectedVariable }, }; }, computed: { - ...mapState([ - 'projectId', - 'environments', - 'typeOptions', - 'variable', - 'variableBeingEdited', - 'isGroup', - 'maskableRegex', - 'selectedEnvironment', - 'isProtectedByDefault', - 'awsLogoSvgPath', - 'awsTipDeployLink', - 'awsTipCommandsLink', - 'awsTipLearnLink', - 'containsVariableReferenceLink', - 'protectedEnvironmentVariablesLink', - 'maskedEnvironmentVariablesLink', - 'environmentScopeLink', - ]), - ...mapComputed( - [ - { key: 'key', updateFn: 'updateVariableKey' }, - { key: 'secret_value', updateFn: 'updateVariableValue' }, - { key: 'variable_type', updateFn: 'updateVariableType' }, - { key: 'environment_scope', updateFn: 'setEnvironmentScope' }, - { key: 'protected_variable', updateFn: 'updateVariableProtected' }, - { key: 'masked', updateFn: 'updateVariableMasked' }, - ], - false, - 'variable', - ), - isTipVisible() { - return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key); - }, - canSubmit() { - return ( - this.variableValidationState && - this.variable.key !== '' && - this.variable.secret_value !== '' - ); - }, canMask() { const regex = RegExp(this.maskableRegex); - return regex.test(this.variable.secret_value); + return regex.test(this.variable.value); + }, + canSubmit() { + return this.variableValidationState && this.variable.key !== '' && this.variable.value !== ''; }, containsVariableReference() { const regex = /\$/; - return regex.test(this.variable.secret_value); + return regex.test(this.variable.value); }, displayMaskedError() { return !this.canMask && this.variable.masked; }, + isEditing() { + return this.mode === EDIT_VARIABLE_ACTION; + }, + isTipVisible() { + return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key); + }, + joinedEnvironments() { + return createJoinedEnvironments(this.variables, this.environments, this.newEnvironments); + }, + maskedFeedback() { + return this.displayMaskedError ? __('This variable can not be masked.') : ''; + }, maskedState() { if (this.displayMaskedError) { return false; @@ -125,10 +147,7 @@ export default { return true; }, modalActionText() { - return this.variableBeingEdited ? __('Update variable') : __('Add variable'); - }, - maskedFeedback() { - return this.displayMaskedError ? __('This variable can not be masked.') : ''; + return this.isEditing ? __('Update variable') : __('Add variable'); }, tokenValidationFeedback() { const tokenSpecificFeedback = this.$options.tokens?.[this.variable.key]?.invalidMessage; @@ -141,19 +160,16 @@ export default { const validator = this.$options.tokens?.[this.variable.key]?.validation; if (validator) { - return validator(this.variable.secret_value); + return validator(this.variable.value); } return true; }, - scopedVariablesAvailable() { - return !this.isGroup || this.glFeatures.groupScopedCiVariables; - }, variableValidationFeedback() { return `${this.tokenValidationFeedback} ${this.maskedFeedback}`; }, variableValidationState() { - return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState); + return this.variable.value === '' || (this.tokenValidationState && this.maskedState); }, }, watch: { @@ -165,19 +181,18 @@ export default { }, }, methods: { - ...mapActions([ - 'addVariable', - 'updateVariable', - 'resetEditing', - 'displayInputValue', - 'clearModal', - 'deleteVariable', - 'setEnvironmentScope', - 'addWildCardScope', - 'resetSelectedEnvironment', - 'setSelectedEnvironment', - 'setVariableProtected', - ]), + addVariable() { + this.$emit('add-variable', this.variable); + }, + createEnvironmentScope(env) { + this.newEnvironments.push(env); + }, + deleteVariable() { + this.$emit('delete-variable', this.variable); + }, + updateVariable() { + this.$emit('update-variable', this.variable); + }, dismissTip() { setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 }); this.isTipDismissed = true; @@ -190,16 +205,22 @@ export default { this.$refs.modal.hide(); }, resetModalHandler() { - if (this.variableBeingEdited) { - this.resetEditing(); - } - - this.clearModal(); - this.resetSelectedEnvironment(); + this.resetVariableData(); this.resetValidationErrorEvents(); + + this.$emit('hideModal'); + }, + resetVariableData() { + this.variable = { ...defaultVariableState }; + }, + setEnvironmentScope(scope) { + this.variable = { ...this.variable, environmentScope: scope }; + }, + setVariableProtected() { + this.variable = { ...this.variable, protected: true }; }, updateOrAddVariable() { - if (this.variableBeingEdited) { + if (this.isEditing) { this.updateVariable(); } else { this.addVariable(); @@ -207,7 +228,7 @@ export default { this.hideModal(); }, setVariableProtectedByDefault() { - if (this.isProtectedByDefault && !this.variableBeingEdited) { + if (this.isProtectedByDefault && !this.isEditing) { this.setVariableProtected(); } }, @@ -220,11 +241,11 @@ export default { }, getTrackingErrorProperty() { let property; - if (this.variable.secret_value?.length && !property) { + if (this.variable.value?.length && !property) { if (this.displayMaskedError && this.maskableRegex?.length) { const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, ''); const regex = new RegExp(supportedChars, 'g'); - property = this.variable.secret_value.replace(regex, ''); + property = this.variable.value.replace(regex, ''); } if (this.containsVariableReference) { property = '$'; @@ -237,6 +258,7 @@ export default { this.validationErrorEventProperty = ''; }, }, + defaultScope: allEnvironments.text, }; </script> @@ -252,7 +274,7 @@ export default { > <form> <gl-form-combobox - v-model="key" + v-model="variable.key" :token-list="$options.tokenList" :label-text="__('Key')" data-qa-selector="ci_variable_key_field" @@ -267,7 +289,7 @@ export default { <gl-form-textarea id="ci-variable-value" ref="valueField" - v-model="secret_value" + v-model="variable.value" :state="variableValidationState" rows="3" max-rows="6" @@ -278,7 +300,11 @@ export default { <div class="d-flex"> <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5"> - <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" /> + <gl-form-select + id="ci-variable-type" + v-model="variable.variableType" + :options="typeOptions" + /> </gl-form-group> <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope"> @@ -294,22 +320,24 @@ export default { </gl-link> </template> <ci-environments-dropdown - v-if="scopedVariablesAvailable" - class="w-100" - :value="environment_scope" - @selectEnvironment="setEnvironmentScope" - @createClicked="addWildCardScope" + v-if="areScopedVariablesAvailable" + class="gl-w-full" + :selected-environment-scope="variable.environmentScope" + :environments="joinedEnvironments" + @select-environment="setEnvironmentScope" + @create-environment-scope="createEnvironmentScope" /> - <gl-form-input v-else v-model="environment_scope" class="w-100" readonly /> + <gl-form-input v-else :value="$options.defaultScope" class="gl-w-full" readonly /> </gl-form-group> </div> <gl-form-group :label="__('Flags')" label-for="ci-variable-flags"> <gl-form-checkbox - v-model="protected_variable" - class="mb-0" + v-model="variable.protected" + class="gl-mb-0" data-testid="ci-variable-protected-checkbox" + :data-is-protected-checked="variable.protected" > {{ __('Protect variable') }} <gl-link target="_blank" :href="protectedEnvironmentVariablesLink"> @@ -322,7 +350,7 @@ export default { <gl-form-checkbox ref="masked-ci-variable" - v-model="masked" + v-model="variable.masked" data-testid="ci-variable-masked-checkbox" > {{ __('Mask variable') }} @@ -403,7 +431,7 @@ export default { <template #modal-footer> <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button> <gl-button - v-if="variableBeingEdited" + v-if="isEditing" ref="deleteCiVariable" variant="danger" category="secondary" |