diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-20 16:37:47 +0300 |
commit | aee0a117a889461ce8ced6fcf73207fe017f1d99 (patch) | |
tree | 891d9ef189227a8445d83f35c1b0fc99573f4380 /app/assets/javascripts/ci_variable_list | |
parent | 8d46af3258650d305f53b819eabf7ab18d22f59e (diff) |
Add latest changes from gitlab-org/gitlab@14-6-stable-eev14.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/ci_variable_list')
3 files changed, 74 insertions, 19 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 8e527e2bff6..e630ce71bd3 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 @@ -17,6 +17,7 @@ import { import Cookies from 'js-cookie'; import { mapActions, mapState } from 'vuex'; import { __ } from '~/locale'; +import Tracking from '~/tracking'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { mapComputed } from '~/vuex_shared/bindings'; import { @@ -25,10 +26,14 @@ import { AWS_TIP_DISMISSED_COOKIE_NAME, AWS_TIP_MESSAGE, CONTAINS_VARIABLE_REFERENCE_MESSAGE, + EVENT_LABEL, + EVENT_ACTION, } from '../constants'; import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens'; +const trackingMixin = Tracking.mixin({ label: EVENT_LABEL }); + export default { modalId: ADD_CI_VARIABLE_MODAL_ID, tokens: awsTokens, @@ -51,10 +56,11 @@ export default { GlModal, GlSprintf, }, - mixins: [glFeatureFlagsMixin()], + mixins: [glFeatureFlagsMixin(), trackingMixin], data() { return { isTipDismissed: Cookies.get(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true', + validationErrorEventProperty: '', }; }, computed: { @@ -147,6 +153,14 @@ export default { return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState); }, }, + watch: { + variable: { + handler() { + this.trackVariableValidationErrors(); + }, + deep: true, + }, + }, methods: { ...mapActions([ 'addVariable', @@ -179,6 +193,7 @@ export default { this.clearModal(); this.resetSelectedEnvironment(); + this.resetValidationErrorEvents(); }, updateOrAddVariable() { if (this.variableBeingEdited) { @@ -193,6 +208,31 @@ export default { this.setVariableProtected(); } }, + trackVariableValidationErrors() { + const property = this.getTrackingErrorProperty(); + if (!this.validationErrorEventProperty && property) { + this.track(EVENT_ACTION, { property }); + this.validationErrorEventProperty = property; + } + }, + getTrackingErrorProperty() { + let property; + if (this.variable.secret_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, ''); + } + if (this.containsVariableReference) { + property = '$'; + } + } + + return property; + }, + resetValidationErrorEvents() { + this.validationErrorEventProperty = ''; + }, }, }; </script> 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 b959d97daea..9c0ffab7f6b 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 @@ -1,5 +1,5 @@ <script> -import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; +import { GlTable, GlButton, GlModalDirective, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import { s__, __ } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -59,6 +59,7 @@ export default { }, directives: { GlModalDirective, + GlTooltip: GlTooltipDirective, }, mixins: [glFeatureFlagsMixin()], computed: { @@ -102,27 +103,38 @@ export default { <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" /> </template> <template #cell(key)="{ item }"> - <div class="d-flex truncated-container"> - <span :id="`ci-variable-key-${item.id}`" class="d-inline-block mw-100 text-truncate">{{ - item.key - }}</span> - <ci-variable-popover - :target="`ci-variable-key-${item.id}`" - :value="item.key" - :tooltip-text="__('Copy key')" + <div class="gl-display-flex truncated-container gl-align-items-center"> + <span + :id="`ci-variable-key-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.key }}</span + > + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy key')" + :data-clipboard-text="item.key" + :aria-label="__('Copy to clipboard')" /> </div> </template> <template #cell(value)="{ item }"> - <span v-if="valuesHidden">*********************</span> - <div v-else class="d-flex truncated-container"> - <span :id="`ci-variable-value-${item.id}`" class="d-inline-block mw-100 text-truncate">{{ - item.value - }}</span> - <ci-variable-popover - :target="`ci-variable-value-${item.id}`" - :value="item.value" - :tooltip-text="__('Copy value')" + <div class="gl-display-flex gl-align-items-center truncated-container"> + <span v-if="valuesHidden">*********************</span> + <span + v-else + :id="`ci-variable-value-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.value }}</span + > + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy value')" + :data-clipboard-text="item.value" + :aria-label="__('Copy to clipboard')" /> </div> </template> diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js index 4ebbf05814b..663a912883b 100644 --- a/app/assets/javascripts/ci_variable_list/constants.js +++ b/app/assets/javascripts/ci_variable_list/constants.js @@ -19,6 +19,9 @@ 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}.', ); +export const EVENT_LABEL = 'ci_variable_modal'; +export const EVENT_ACTION = 'validation_error'; + // AWS TOKEN CONSTANTS export const AWS_ACCESS_KEY_ID = 'AWS_ACCESS_KEY_ID'; export const AWS_DEFAULT_REGION = 'AWS_DEFAULT_REGION'; |