Migrate Bootstrap button to GlButton in MR discussion

app/assets/javascripts/notes/components/discussion_actions.vue

@@ -55,7 +55,7 @@ export default {
   <div class="discussion-with-resolve-btn clearfix">
     <reply-placeholder
       data-qa-selector="discussion_reply_tab"
-      :button-text="s__('MergeRequests|Reply...')"
+      :button-text="s__('MergeRequests|Reply')"
       @onClick="$emit('showReplyForm')"
     />
 

app/assets/javascripts/notes/components/discussion_reply_placeholder.vue

 <script>
+import { GlButton } from '@gitlab/ui';
+
 export default {
   name: 'ReplyPlaceholder',
+  components: {
+    GlButton,
+  },
   props: {
     buttonText: {
       type: String,
@@ -11,13 +16,13 @@ export default {
 </script>
 
 <template>
-  <button
-    ref="button"
-    type="button"
-    class="js-vue-discussion-reply btn btn-text-field"
+  <gl-button
+    category="primary"
+    variant="success"
+    class="js-vue-discussion-reply"
     :title="s__('MergeRequests|Add a reply')"
     @click="$emit('onClick')"
   >
     {{ buttonText }}
-  </button>
+  </gl-button>
 </template>

app/assets/stylesheets/framework/buttons.scss

@@ -244,20 +244,15 @@
   }
 
   &.btn-text-field {
+    color: $gray-500;
+    justify-content: start;
     width: 100%;
     text-align: left;
-    padding: 6px 16px;
-    border-color: $border-color;
-    color: $gray-darkest;
-    background-color: $white;
 
     &:hover,
     &:active,
     &:focus {
       cursor: text;
-      box-shadow: none;
-      border-color: lighten($blue-300, 20%);
-      color: $gray-darkest;
     }
   }
 

changelogs/unreleased/241058-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Replacing deprecated Bootstrap button with GlButton and updating btn-text-field
+  class to align with styles
+merge_request: 41430
+author:
+type: other

locale/gitlab.pot

@@ -15936,7 +15936,7 @@ msgstr ""
 msgid "MergeRequests|Jump to next unresolved thread"
 msgstr ""
 
-msgid "MergeRequests|Reply..."
+msgid "MergeRequests|Reply"
 msgstr ""
 
 msgid "MergeRequests|Resolve this thread in a new issue"

spec/features/issues/gfm_autocomplete_spec.rb

@@ -834,7 +834,7 @@ RSpec.describe 'GFM autocomplete', :js do
       end
 
       def start_and_cancel_discussion
-        click_button('Reply...')
+        click_button('Reply')
 
         fill_in('note_note', with: 'Whoops!')
 

spec/features/merge_request/batch_comments_spec.rb

@@ -238,7 +238,7 @@ end
 
 def write_reply_to_discussion(button_text: 'Start a review', text: 'Line is wrong', resolve: false, unresolve: false)
   page.within(first('.diff-files-holder .discussion-reply-holder')) do
-    click_button('Reply...')
+    click_button('Reply')
 
     fill_in('note_note', with: text)
 

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -186,7 +186,7 @@ RSpec.describe 'Merge request > User posts diff notes', :js do
       it 'adds as discussion' do
         should_allow_commenting(find('[id="6eb14e00385d2fb284765eb1cd8d420d33d63fc9_22_22"]'), asset_form_reset: false)
         expect(page).to have_css('.notes_holder .note.note-discussion', count: 1)
-        expect(page).to have_button('Reply...')
+        expect(page).to have_button('Reply')
       end
     end
   end

spec/features/merge_request/user_resolves_diff_notes_and_discussions_resolve_spec.rb

@@ -146,7 +146,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
           it 'allows user to comment' do
             page.within '.diff-content' do
-              click_button 'Reply...'
+              click_button 'Reply'
 
               find(".js-unresolve-checkbox").set false
               find('.js-note-text').set 'testing'
@@ -176,7 +176,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
           it 'allows user to comment & unresolve thread' do
             page.within '.diff-content' do
-              click_button 'Reply...'
+              click_button 'Reply'
 
               find('.js-note-text').set 'testing'
 
@@ -205,7 +205,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
       it 'allows user to comment & resolve thread' do
         page.within '.diff-content' do
-          click_button 'Reply...'
+          click_button 'Reply'
 
           find('.js-note-text').set 'testing'
 
@@ -438,7 +438,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
       it 'allows user to comment & resolve thread' do
         page.within '.diff-content' do
-          click_button 'Reply...'
+          click_button 'Reply'
 
           find('.js-note-text').set 'testing'
 
@@ -457,7 +457,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
         page.within '.diff-content' do
           click_button 'Resolve thread'
 
-          click_button 'Reply...'
+          click_button 'Reply'
 
           find('.js-note-text').set 'testing'
 

spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb

@@ -37,7 +37,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
     end
 
     it 'does not render avatars after commenting on discussion tab' do
-      click_button 'Reply...'
+      click_button 'Reply'
 
       page.within('.js-discussion-note-form') do
         find('.note-textarea').native.send_keys('Test comment')
@@ -132,7 +132,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
       end
 
       it 'adds avatar when commenting' do
-        click_button 'Reply...'
+        click_button 'Reply'
 
         page.within '.js-discussion-note-form' do
           find('.js-note-text').native.send_keys('Test')
@@ -151,7 +151,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
 
       it 'adds multiple comments' do
         3.times do
-          click_button 'Reply...'
+          click_button 'Reply'
 
           page.within '.js-discussion-note-form' do
             find('.js-note-text').native.send_keys('Test')

spec/features/merge_request/user_sees_discussions_spec.rb

@@ -60,7 +60,7 @@ RSpec.describe 'Merge request > User sees threads', :js do
 
       it 'can be replied to' do
         within(".discussion[data-discussion-id='#{discussion_id}']") do
-          click_button 'Reply...'
+          click_button 'Reply'
           fill_in 'note[note]', with: 'Test!'
           click_button 'Comment'
 

spec/features/merge_request/user_sees_notes_from_forked_project_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Merge request > User sees notes from forked project', :js do
     expect(page).to have_content('A commit comment')
 
     page.within('.discussion-notes') do
-      find('.btn-text-field').click
+      find('.js-vue-discussion-reply').click
       scroll_to(page.find('#note_note', visible: false))
       find('#note_note').send_keys('A reply comment')
       find('.js-comment-button').click

spec/frontend/notes/components/discussion_reply_placeholder_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 
 const buttonText = 'Test Button Text';
@@ -6,7 +7,7 @@ const buttonText = 'Test Button Text';
 describe('ReplyPlaceholder', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find({ ref: 'button' });
+  const findButton = () => wrapper.find(GlButton);
 
   beforeEach(() => {
     wrapper = shallowMount(ReplyPlaceholder, {
@@ -20,8 +21,8 @@ describe('ReplyPlaceholder', () => {
     wrapper.destroy();
   });
 
-  it('emits onClick event on button click', () => {
-    findButton().trigger('click');
+  it('should emit a onClick event on button click', () => {
+    findButton().vm.$emit('click');
 
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted()).toEqual({