Merge branch 'ph/354926/threadToggleText' into 'master'

Updated toggle thread text to have state

See merge request gitlab-org/gitlab!82718

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

@@ -6,6 +6,7 @@ import {
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import { __ } from '~/locale';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserNameWithStatus from '../../sidebar/components/assignees/user_name_with_status.vue';
 
@@ -139,6 +140,10 @@ export default {
       return selectedAuthor?.availability || '';
     },
   },
+  i18n: {
+    showThread: __('Show thread'),
+    hideThread: __('Hide thread'),
+  },
 };
 </script>
 
@@ -148,10 +153,16 @@ export default {
       <button
         class="note-action-button discussion-toggle-button js-vue-toggle-button"
         type="button"
+        data-testid="thread-toggle"
         @click="handleToggle"
       >
         <gl-icon ref="chevronIcon" :name="toggleChevronIconName" />
-        {{ __('Toggle thread') }}
+        <template v-if="expanded">
+          {{ $options.i18n.hideThread }}
+        </template>
+        <template v-else>
+          {{ $options.i18n.showThread }}
+        </template>
       </button>
     </div>
     <template v-if="hasAuthor">

app/views/discussions/_discussion.html.haml

@@ -11,7 +11,8 @@
             %button.note-action-button.discussion-toggle-button.js-toggle-button{ type: "button", class: ("js-toggle-lazy-diff" unless expanded) }
               = sprite_icon('chevron-up', css_class: "js-sidebar-collapse #{'hidden' unless expanded}")
               = sprite_icon('chevron-down', css_class: "js-sidebar-expand #{'hidden' if expanded}")
-              = _('Toggle thread')
+              %span.js-sidebar-collapse{ class: "#{'hidden' unless expanded}" }= _('Hide thread')
+              %span.js-sidebar-expand{ class: "#{'hidden' if expanded}" }= _('Show thread')
           = link_to_member(@project, discussion.author, avatar: false)
 
           .inline.discussion-headline-light

locale/gitlab.pot

@@ -18172,6 +18172,9 @@ msgstr ""
 msgid "Hide shared projects"
 msgstr ""
 
+msgid "Hide thread"
+msgstr ""
+
 msgid "Hide tooltips or popovers"
 msgstr ""
 
@@ -34156,6 +34159,9 @@ msgstr ""
 msgid "Show the Open list"
 msgstr ""
 
+msgid "Show thread"
+msgstr ""
+
 msgid "Show whitespace changes"
 msgstr ""
 
@@ -38795,9 +38801,6 @@ msgstr ""
 msgid "Toggle the Performance Bar"
 msgstr ""
 
-msgid "Toggle thread"
-msgstr ""
-
 msgid "Toggled :%{name}: emoji award."
 msgstr ""
 

spec/features/merge_request/user_resolves_diff_notes_and_discussions_resolve_spec.rb

@@ -140,7 +140,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
         describe 'reply form' do
           before do
-            click_button 'Toggle thread'
+            click_button _('Show thread')
           end
 
           it 'allows user to comment' do
@@ -362,7 +362,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
       it 'displays next thread even if hidden' do
         page.all('.note-discussion', count: 2).each do |discussion|
           page.within discussion do
-            click_button 'Toggle thread'
+            click_button _('Hide thread')
           end
         end
 
@@ -549,13 +549,13 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
       it 'shows resolved icon' do
         expect(page).to have_content 'All threads resolved'
 
-        click_button 'Toggle thread'
+        click_button _('Show thread')
         expect(page).to have_selector('.line-resolve-btn.is-active')
       end
 
       it 'does not allow user to click resolve button' do
         expect(page).to have_selector('.line-resolve-btn.is-active')
-        click_button 'Toggle thread'
+        click_button _('Show thread')
 
         expect(page).to have_selector('.line-resolve-btn.is-active')
       end

spec/frontend/notes/components/note_header_spec.js

 import { GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NoteHeader from '~/notes/components/note_header.vue';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
@@ -16,11 +16,12 @@ describe('NoteHeader component', () => {
   let wrapper;
 
   const findActionsWrapper = () => wrapper.find({ ref: 'discussionActions' });
+  const findToggleThreadButton = () => wrapper.findByTestId('thread-toggle');
   const findChevronIcon = () => wrapper.find({ ref: 'chevronIcon' });
   const findActionText = () => wrapper.find({ ref: 'actionText' });
   const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
-  const findConfidentialIndicator = () => wrapper.find('[data-testid="confidentialIndicator"]');
+  const findConfidentialIndicator = () => wrapper.findByTestId('confidentialIndicator');
   const findSpinner = () => wrapper.find({ ref: 'spinner' });
   const findAuthorStatus = () => wrapper.find({ ref: 'authorStatus' });
 
@@ -40,7 +41,7 @@ describe('NoteHeader component', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(NoteHeader, {
+    wrapper = shallowMountExtended(NoteHeader, {
       store: new Vuex.Store({
         actions,
       }),
@@ -98,6 +99,19 @@ describe('NoteHeader component', () => {
 
       expect(findChevronIcon().props('name')).toBe('chevron-down');
     });
+
+    it.each`
+      text                          | expanded
+      ${NoteHeader.i18n.showThread} | ${false}
+      ${NoteHeader.i18n.hideThread} | ${true}
+    `('toggle button has text $text is expanded is $expanded', ({ text, expanded }) => {
+      createComponent({
+        includeToggle: true,
+        expanded,
+      });
+
+      expect(findToggleThreadButton().text()).toBe(text);
+    });
   });
 
   it('renders an author link if author is passed to props', () => {