diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/markdown')
7 files changed, 64 insertions, 26 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue index a570abae9d3..05ce007e615 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue @@ -1,9 +1,9 @@ <script> -import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui'; +import { GlDisclosureDropdown, GlForm, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui'; import { __, n__ } from '~/locale'; export default { - components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton, GlAlert }, + components: { GlDisclosureDropdown, GlForm, GlFormTextarea, GlButton, GlAlert }, props: { disabled: { type: Boolean, @@ -39,43 +39,58 @@ export default { return n__('Apply %d suggestion', 'Apply %d suggestions', this.batchSuggestionsCount); }, + helperText() { + if (this.batchSuggestionsCount <= 1) { + return __('This also resolves this thread'); + } + + return __('This also resolves all related threads'); + }, }, methods: { onApply() { this.$emit('apply', this.message); }, + focusCommitMessageInput() { + this.$refs.commitMessage.$el.focus(); + }, }, }; </script> <template> - <gl-dropdown - :text="dropdownText" - :disabled="disabled" - size="small" - boundary="window" - right - lazy - menu-class="gl-w-full!" + <gl-disclosure-dropdown data-qa-selector="apply_suggestion_dropdown" - @shown="$refs.commitMessage.$el.focus()" + fluid-width + placement="right" + size="small" + :disabled="disabled" + :toggle-text="dropdownText" + @shown="focusCommitMessageInput" > - <gl-dropdown-form class="gl-px-4! gl-m-0!"> + <gl-form class="gl-display-flex gl-flex-direction-column gl-px-4! gl-mx-0! gl-my-2!"> <label for="commit-message">{{ __('Commit message') }}</label> <gl-alert v-if="errorMessage" variant="danger" :dismissible="false" class="gl-mb-4"> {{ errorMessage }} </gl-alert> + <gl-form-textarea id="commit-message" ref="commitMessage" v-model="message" + class="apply-suggestions-input-min-width" :placeholder="defaultCommitMessage" submit-on-enter data-qa-selector="commit_message_field" @submit="onApply" /> + + <span class="gl-mt-2 gl-text-secondary"> + {{ helperText }} + </span> + <gl-button - class="gl-w-auto! gl-mt-3 gl-text-center! gl-transition-medium! float-right" + class="gl-w-auto! gl-mt-3 gl-align-self-end" category="primary" variant="confirm" data-qa-selector="commit_with_custom_message_button" @@ -83,6 +98,6 @@ export default { > {{ __('Apply') }} </gl-button> - </gl-dropdown-form> - </gl-dropdown> + </gl-form> + </gl-disclosure-dropdown> </template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue index b1c6f5e6056..f7f5ccdbf31 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue @@ -4,7 +4,11 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus'; import { getDerivedMergeRequestInformation } from '~/diffs/utils/merge_request'; import { InternalEvents } from '~/tracking'; import savedRepliesQuery from './saved_replies.query.graphql'; -import { TRACKING_SAVED_REPLIES_USE, TRACKING_SAVED_REPLIES_USE_IN_MR } from './constants'; +import { + TRACKING_SAVED_REPLIES_USE, + TRACKING_SAVED_REPLIES_USE_IN_MR, + TRACKING_SAVED_REPLIES_USE_IN_OTHER, +} from './constants'; export default { apollo: { @@ -61,9 +65,9 @@ export default { if (savedReply) { this.$emit('select', savedReply.content); this.track_event(TRACKING_SAVED_REPLIES_USE); - if (isInMr) { - this.track_event(TRACKING_SAVED_REPLIES_USE_IN_MR); - } + this.track_event( + isInMr ? TRACKING_SAVED_REPLIES_USE_IN_MR : TRACKING_SAVED_REPLIES_USE_IN_OTHER, + ); } }, }, diff --git a/app/assets/javascripts/vue_shared/components/markdown/constants.js b/app/assets/javascripts/vue_shared/components/markdown/constants.js index 47ef7cccbc2..7b31c4a59e3 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/constants.js +++ b/app/assets/javascripts/vue_shared/components/markdown/constants.js @@ -1,2 +1,3 @@ export const TRACKING_SAVED_REPLIES_USE = 'i_code_review_saved_replies_use'; export const TRACKING_SAVED_REPLIES_USE_IN_MR = 'i_code_review_saved_replies_use_in_mr'; +export const TRACKING_SAVED_REPLIES_USE_IN_OTHER = 'i_code_review_saved_replies_use_in_other'; diff --git a/app/assets/javascripts/vue_shared/components/markdown/field_view.vue b/app/assets/javascripts/vue_shared/components/markdown/field_view.vue index 84d40db07bb..c70197c6715 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field_view.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field_view.vue @@ -2,8 +2,26 @@ import { renderGFM } from '~/behaviors/markdown/render_gfm'; export default { + props: { + isLoading: { + type: Boolean, + required: false, + default: false, + }, + }, + watch: { + isLoading() { + this.handleGFM(); + }, + }, mounted() { - renderGFM(this.$el); + this.handleGFM(); + }, + methods: { + handleGFM() { + if (this.isLoading) return; + renderGFM(this.$el); + }, }, }; </script> diff --git a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue index 493b329f1b1..fc7e0a7c732 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue @@ -119,9 +119,11 @@ export default { }, }, data() { + const editingMode = + localStorage.getItem(this.$options.EDITING_MODE_KEY) || EDITING_MODE_MARKDOWN_FIELD; return { markdown: this.value || (this.autosaveKey ? getDraft(this.autosaveKey) : '') || '', - editingMode: EDITING_MODE_MARKDOWN_FIELD, + editingMode, autofocused: false, }; }, diff --git a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js index 0b0867ae84c..6c2f084591e 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js +++ b/app/assets/javascripts/vue_shared/components/markdown/mount_markdown_editor.js @@ -72,7 +72,7 @@ export function mountMarkdownEditor(options = {}) { quickActionsDocsPath, formFieldPlaceholder, formFieldClasses, - qaSelector, + testid, newIssuePath, } = el.dataset; @@ -115,7 +115,7 @@ export function mountMarkdownEditor(options = {}) { id: formFieldId, name: formFieldName, class: formFieldClasses, - 'data-qa-selector': qaSelector, + 'data-testid': testid, }, autosaveKey, enableAutocomplete, 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 855c7a449c4..8a0ca8ebac1 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 @@ -77,9 +77,7 @@ export default { return this.inapplicableReason; } - return this.batchSuggestionsCount > 1 - ? __('This also resolves all related threads') - : __('This also resolves this thread'); + return false; }, isDisableButton() { return this.isApplying || !this.canApply; |