diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue | 119 |
1 files changed, 103 insertions, 16 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index af438ce5619..e26ff51e01e 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -1,11 +1,19 @@ <script> import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; +import { __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { Icon, GlDeprecatedButton, GlLoadingIcon }, directives: { 'gl-tooltip': GlTooltipDirective }, + mixins: [glFeatureFlagsMixin()], props: { + batchSuggestionsCount: { + type: Number, + required: false, + default: 0, + }, canApply: { type: Boolean, required: false, @@ -16,6 +24,16 @@ export default { required: true, default: false, }, + isBatched: { + type: Boolean, + required: false, + default: false, + }, + isApplyingBatch: { + type: Boolean, + required: false, + default: false, + }, helpPagePath: { type: String, required: true, @@ -23,17 +41,54 @@ export default { }, data() { return { - isApplying: false, + isApplyingSingle: false, }; }, + computed: { + canBeBatched() { + return Boolean(this.glFeatures.batchSuggestions); + }, + isApplying() { + return this.isApplyingSingle || this.isApplyingBatch; + }, + tooltipMessage() { + return this.canApply + ? __('This also resolves the discussion') + : __("Can't apply as this line has changed or the suggestion already matches its content."); + }, + tooltipMessageBatch() { + return !this.canBeBatched + ? __("Suggestions that change line count can't be added to batches, yet.") + : this.tooltipMessage; + }, + isDisableButton() { + return this.isApplying || !this.canApply; + }, + applyingSuggestionsMessage() { + if (this.isApplyingSingle || this.batchSuggestionsCount < 2) { + return __('Applying suggestion...'); + } + return __('Applying suggestions...'); + }, + }, methods: { applySuggestion() { if (!this.canApply) return; - this.isApplying = true; + this.isApplyingSingle = true; this.$emit('apply', this.applySuggestionCallback); }, applySuggestionCallback() { - this.isApplying = false; + this.isApplyingSingle = false; + }, + applySuggestionBatch() { + if (!this.canApply) return; + this.$emit('applyBatch'); + }, + addSuggestionToBatch() { + this.$emit('addToBatch'); + }, + removeSuggestionFromBatch() { + this.$emit('removeFromBatch'); }, }, }; @@ -47,20 +102,52 @@ export default { <icon name="question-o" css-classes="link-highlight" /> </a> </div> - <span v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</span> - <div v-if="isApplying" class="d-flex align-items-center text-secondary"> + <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div> + <div v-else-if="isApplying" class="d-flex align-items-center text-secondary"> <gl-loading-icon class="d-flex-center mr-2" /> - <span>{{ __('Applying suggestion') }}</span> + <span>{{ applyingSuggestionsMessage }}</span> + </div> + <div v-else-if="canApply && canBeBatched && isBatched" class="d-flex align-items-center"> + <gl-deprecated-button + class="btn-inverted js-remove-from-batch-btn btn-grouped" + :disabled="isApplying" + @click="removeSuggestionFromBatch" + > + {{ __('Remove from batch') }} + </gl-deprecated-button> + <gl-deprecated-button + v-gl-tooltip.viewport="__('This also resolves all related threads')" + class="btn-inverted js-apply-batch-btn btn-grouped" + :disabled="isApplying" + variant="success" + @click="applySuggestionBatch" + > + {{ __('Apply suggestions') }} + <span class="badge badge-pill badge-pill-success"> + {{ batchSuggestionsCount }} + </span> + </gl-deprecated-button> + </div> + <div v-else class="d-flex align-items-center"> + <span v-if="canBeBatched" v-gl-tooltip.viewport="tooltipMessageBatch" tabindex="0"> + <gl-deprecated-button + class="btn-inverted js-add-to-batch-btn btn-grouped" + :disabled="isDisableButton" + @click="addSuggestionToBatch" + > + {{ __('Add suggestion to batch') }} + </gl-deprecated-button> + </span> + <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0"> + <gl-deprecated-button + class="btn-inverted js-apply-btn btn-grouped" + :disabled="isDisableButton" + variant="success" + @click="applySuggestion" + > + {{ __('Apply suggestion') }} + </gl-deprecated-button> + </span> </div> - <gl-deprecated-button - v-else-if="canApply" - v-gl-tooltip.viewport="__('This also resolves the discussion')" - class="btn-inverted js-apply-btn" - :disabled="isApplying" - variant="success" - @click="applySuggestion" - > - {{ __('Apply suggestion') }} - </gl-deprecated-button> </div> </template> |