diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index f3848b48d781caa862c840d9ed37edbe39b21d8d..ccf585a77e1a417cadb078311b21f8759e76947c 100644
--- a/app/assets/javascripts/notes/components/discussion_actions.vue
+++ b/app/assets/javascripts/notes/components/discussion_actions.vue
@@ -48,10 +48,7 @@ export default {
<template>
<div class="discussion-with-resolve-btn clearfix">
- <discussion-reply-placeholder
- data-testid="discussion-reply-tab"
- @focus="$emit('showReplyForm')"
- />
+ <discussion-reply-placeholder @focus="$emit('showReplyForm')" />
<div v-if="userCanResolveDiscussion" class="btn-group discussion-actions" role="group">
<div class="btn-group">
diff --git a/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
index 1165a869d2b21cf1ec51fe507bda0ba2418a1ba4..2ba06d2a559d2fa383bf6b73efb9e242632278cd 100644
--- a/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
+++ b/app/assets/javascripts/notes/components/discussion_reply_placeholder.vue
@@ -1,8 +1,12 @@
<script>
+import { GlFormInput } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
name: 'ReplyPlaceholder',
+ components: {
+ GlFormInput,
+ },
props: {
placeholderText: {
type: String,
@@ -19,12 +23,11 @@ export default {
</script>
<template>
- <textarea
- ref="textarea"
- rows="1"
- class="reply-placeholder-text-field js-vue-discussion-reply"
+ <gl-form-input
+ class="reply-placeholder-input-field"
+ data-testid="discussion-reply-tab"
:placeholder="placeholderText"
:aria-label="labelText"
@focus="$emit('focus')"
- ></textarea>
+ />
</template>
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 9e3c30f48e7dd4a00771004f59e3d54ab890b5a8..68893dda880728e1b13a76d4724422de3abc6429 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -352,6 +352,12 @@ table {
border: 1px solid $gray-500;
}
}
+
+ .reply-placeholder-input-field {
+ @include media-breakpoint-down(xs) {
+ margin-bottom: $gl-padding-8;
+ }
+ }
}
.comment-toolbar {
diff --git a/qa/qa/page/component/note.rb b/qa/qa/page/component/note.rb
index da87691e7a6823fabb121404c7195875fd13cb4c..89409c41802c79f2a20915de0e70bc93a4d80d14 100644
--- a/qa/qa/page/component/note.rb
+++ b/qa/qa/page/component/note.rb
@@ -23,7 +23,6 @@ def self.included(base)
end
base.view 'app/assets/javascripts/notes/components/discussion_actions.vue' do
- element 'discussion-reply-tab'
element 'resolve-discussion-button'
end
@@ -36,6 +35,10 @@ def self.included(base)
element 'discussion-filter-container'
end
+ base.view 'app/assets/javascripts/notes/components/discussion_reply_placeholder.vue' do
+ element 'discussion-reply-tab'
+ end
+
base.view 'app/assets/javascripts/notes/components/noteable_discussion.vue' do
element 'discussion-content'
end
diff --git a/spec/features/merge_request/user_comments_on_diff_spec.rb b/spec/features/merge_request/user_comments_on_diff_spec.rb
index eb14bd3925386dceb05769a505d31c2a5b3661b7..3f4cb4438d80a846f2e598efc475336b99b33453 100644
--- a/spec/features/merge_request/user_comments_on_diff_spec.rb
+++ b/spec/features/merge_request/user_comments_on_diff_spec.rb
@@ -141,7 +141,7 @@
visit(merge_request_path(merge_request))
page.within('.notes .discussion') do
- find('.js-vue-discussion-reply').click
+ find_by_testid('discussion-reply-tab').click
click_button "Switch to rich text editing"
click_button "Insert suggestion"
end
diff --git a/spec/features/projects/issues/design_management/user_views_design_spec.rb b/spec/features/projects/issues/design_management/user_views_design_spec.rb
index 0a7a83afe045a0e54d525001d79db4ed6f64b2d0..f22fc4cf0ebbf45471cc7233a1f30e351383e1b9 100644
--- a/spec/features/projects/issues/design_management/user_views_design_spec.rb
+++ b/spec/features/projects/issues/design_management/user_views_design_spec.rb
@@ -95,7 +95,7 @@ def remove_diff_note_emoji(diff_note, emoji_name)
click_link design.filename
page.within(find('.image-notes')) do
- find('.js-vue-discussion-reply').click
+ find_by_testid('discussion-reply-tab').click
find('.note-textarea').send_keys('Reply to comment')
find_by_testid('save-comment-button').click
diff --git a/spec/frontend/notes/components/discussion_actions_spec.js b/spec/frontend/notes/components/discussion_actions_spec.js
index 3ad30329f7e18f5c7c57ebf14342500bc28203f1..652b6643084d6a4b71a0560d7e8de0ba2c070899 100644
--- a/spec/frontend/notes/components/discussion_actions_spec.js
+++ b/spec/frontend/notes/components/discussion_actions_spec.js
@@ -91,7 +91,7 @@ describe('DiscussionActions', () => {
it('emits showReplyForm event when clicking on reply placeholder', () => {
createComponent({}, { attachTo: document.body });
- wrapper.findComponent(DiscussionReplyPlaceholder).find('textarea').trigger('focus');
+ wrapper.findComponent(DiscussionReplyPlaceholder).find('input').trigger('focus');
expect(wrapper.emitted().showReplyForm).toHaveLength(1);
});
diff --git a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
index 3094e61aa0636caa29d44ceb92c2c5005c2654e9..14e1877b0bfc88baf35ab95d073a91787f99b4f1 100644
--- a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
+++ b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
@@ -1,4 +1,5 @@
import { shallowMount } from '@vue/test-utils';
+import { GlFormInput } from '@gitlab/ui';
import DiscussionReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
const placeholderText = 'Test Button Text';
@@ -15,21 +16,21 @@ describe('ReplyPlaceholder', () => {
});
};
- const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
+ const findInput = () => wrapper.findComponent(GlFormInput);
it('emits focus event on button click', async () => {
createComponent({ options: { attachTo: document.body } });
- await findTextarea().trigger('focus');
+ await findInput().vm.$emit('focus');
expect(wrapper.emitted()).toEqual({
focus: [[]],
});
});
- it('should render reply button', () => {
+ it('should render reply input', () => {
createComponent();
- expect(findTextarea().attributes('placeholder')).toEqual(placeholderText);
+ expect(findInput().attributes('placeholder')).toEqual(placeholderText);
});
});
diff --git a/spec/support/shared_examples/features/discussion_comments_shared_example.rb b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
index 867981297ab09418833b8b04fec9600598ccfd8c..3e8b86cd8abbe5ca198306d7b244a7b7b67f0d43 100644
--- a/spec/support/shared_examples/features/discussion_comments_shared_example.rb
+++ b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
@@ -84,7 +84,7 @@
end
def submit_reply(text)
- find("#{comments_selector} .js-vue-discussion-reply").click
+ find("#{comments_selector} [data-testid=\"discussion-reply-tab\"]").click
find("#{comments_selector} .note-textarea").send_keys(text)
find("#{comments_selector} .js-comment-button").click
@@ -240,7 +240,7 @@ def submit_reply(text)
end
def submit_reply(text)
- find("#{comments_selector} .js-vue-discussion-reply").click
+ find("#{comments_selector} [data-testid=\"discussion-reply-tab\"]").click
find("#{comments_selector} .note-textarea").send_keys(text)
# .js-comment-button here refers to the reply button in note_form.vue