From 7efc5c58f00f58ab725e4590237b4bd9efb29d2b Mon Sep 17 00:00:00 2001
From: Taras Tadai <ttaday@softserveinc.com>
Date: Fri, 12 Apr 2024 08:12:42 +0000
Subject: [PATCH] Migrate deprecated native textarea in
discussion_reply_placeholder.vue
---
.../notes/components/discussion_actions.vue | 5 +----
.../components/discussion_reply_placeholder.vue | 13 ++++++++-----
app/assets/stylesheets/pages/note_form.scss | 6 ++++++
qa/qa/page/component/note.rb | 5 ++++-
.../merge_request/user_comments_on_diff_spec.rb | 2 +-
.../design_management/user_views_design_spec.rb | 2 +-
.../notes/components/discussion_actions_spec.js | 2 +-
.../components/discussion_reply_placeholder_spec.js | 9 +++++----
.../features/discussion_comments_shared_example.rb | 4 ++--
9 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/app/assets/javascripts/notes/components/discussion_actions.vue b/app/assets/javascripts/notes/components/discussion_actions.vue
index f3848b48d781c..ccf585a77e1a4 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 1165a869d2b21..2ba06d2a559d2 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 9e3c30f48e7dd..68893dda88072 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 da87691e7a682..89409c41802c7 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 eb14bd3925386..3f4cb4438d80a 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 0a7a83afe045a..f22fc4cf0ebbf 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 3ad30329f7e18..652b6643084d6 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 3094e61aa0636..14e1877b0bfc8 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 867981297ab09..3e8b86cd8abbe 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
--
GitLab