From 5628f3ee960cd6e45c6d8d59dbb294a31561f8ad Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 12 Dec 2022 16:35:19 -0700
Subject: [PATCH 1/3] Switch to use a button click to start a new thread

The UX here is essentially identical to the previous version:
Both use a click to start leaving a comment. The previous version
used a click inside an input, and this one uses a click on a button.

The - important - difference is that the "new thread" interaction is
more visually distinct from the "reply" input on existing threads
above in the discussion tree.

Changelog: changed
---
 .../diffs/components/diff_discussion_reply.vue  | 17 ++++++++++-------
 app/assets/javascripts/diffs/i18n.js            |  1 +
 locale/gitlab.pot                               |  9 +++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
index 3766c1253258e1..8b747aa08dd341 100644
--- a/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
+++ b/app/assets/javascripts/diffs/components/diff_discussion_reply.vue
@@ -1,13 +1,18 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
-import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
 
+import { START_THREAD } from '../i18n';
+
 export default {
   name: 'DiffDiscussionReply',
+  i18n: {
+    START_THREAD,
+  },
   components: {
+    GlButton,
     NoteSignedOutWidget,
-    ReplyPlaceholder,
   },
   props: {
     hasForm: {
@@ -34,11 +39,9 @@ export default {
     <template v-if="userCanReply">
       <slot v-if="hasForm" name="form"></slot>
       <template v-else-if="renderReplyPlaceholder">
-        <reply-placeholder
-          :placeholder-text="__('Start a new discussion…')"
-          :label-text="__('New discussion')"
-          @focus="$emit('showNewDiscussionForm')"
-        />
+        <gl-button @click="$emit('showNewDiscussionForm')">
+          {{ $options.i18n.START_THREAD }}
+        </gl-button>
       </template>
     </template>
     <note-signed-out-widget v-else />
diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index b6978689f7f926..0f44eb06cb3d7b 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/app/assets/javascripts/diffs/i18n.js
@@ -19,6 +19,7 @@ export const DIFF_FILE = {
   autoCollapsed: __('Files with large changes are collapsed by default.'),
   expand: __('Expand file'),
 };
+export const START_THREAD = __('Start another thread');
 
 export const SETTINGS_DROPDOWN = {
   whitespace: __('Show whitespace changes'),
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index af8e1124052dd0..a3509f9f03d7dc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27213,9 +27213,6 @@ msgstr ""
 msgid "New directory"
 msgstr ""
 
-msgid "New discussion"
-msgstr ""
-
 msgid "New email address added"
 msgstr ""
 
@@ -39444,15 +39441,15 @@ msgstr ""
 msgid "Start a Free Ultimate Trial"
 msgstr ""
 
-msgid "Start a new discussion…"
-msgstr ""
-
 msgid "Start a new merge request with these changes"
 msgstr ""
 
 msgid "Start a review"
 msgstr ""
 
+msgid "Start another thread"
+msgstr ""
+
 msgid "Start by choosing a group to start exploring the merge requests in that group. You can then proceed to filter by projects, labels, milestones and authors."
 msgstr ""
 
-- 
GitLab


From 18eb02e50d8d482decb330db9e64ecdbfffd4f06 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 12 Dec 2022 18:20:20 -0700
Subject: [PATCH 2/3] Test new text button instead of child placeholder
 component

---
 .../diffs/components/diff_discussion_reply_spec.js         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
index 5ccd2002462f5a..15797c6fc58a28 100644
--- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js
+++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
@@ -2,9 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import DiffDiscussionReply from '~/diffs/components/diff_discussion_reply.vue';
-import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
 
+import { START_THREAD } from '~/diffs/i18n';
+
 Vue.use(Vuex);
 
 describe('DiffDiscussionReply', () => {
@@ -58,13 +59,13 @@ describe('DiffDiscussionReply', () => {
       expect(wrapper.find('#test-form').exists()).toBe(true);
     });
 
-    it('should render a reply placeholder if there is no form', () => {
+    it('should render a reply placeholder button if there is no form', () => {
       createComponent({
         renderReplyPlaceholder: true,
         hasForm: false,
       });
 
-      expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true);
+      expect(wrapper.text()).toContain(START_THREAD);
     });
   });
 
-- 
GitLab


From 1aeabd3013f7f6637c4931cfdb8626320f4849cb Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 14 Dec 2022 10:43:02 -0700
Subject: [PATCH 3/3] Test for the actual GlButton component

---
 .../components/diff_discussion_reply_spec.js  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
index 15797c6fc58a28..bf4a1a1c1f7b44 100644
--- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js
+++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import DiffDiscussionReply from '~/diffs/components/diff_discussion_reply.vue';
@@ -65,8 +66,36 @@ describe('DiffDiscussionReply', () => {
         hasForm: false,
       });
 
-      expect(wrapper.text()).toContain(START_THREAD);
+      expect(wrapper.findComponent(GlButton).text()).toBe(START_THREAD);
     });
+
+    it.each`
+      userCanReply | hasForm  | renderReplyPlaceholder | showButton
+      ${false}     | ${false} | ${false}               | ${false}
+      ${true}      | ${false} | ${false}               | ${false}
+      ${true}      | ${true}  | ${false}               | ${false}
+      ${true}      | ${true}  | ${true}                | ${false}
+      ${true}      | ${false} | ${true}                | ${true}
+      ${false}     | ${false} | ${true}                | ${false}
+    `(
+      'reply button existence is `$showButton` when userCanReply is `$userCanReply`, hasForm is `$hasForm` and renderReplyPlaceholder is `$renderReplyPlaceholder`',
+      ({ userCanReply, hasForm, renderReplyPlaceholder, showButton }) => {
+        getters = {
+          userCanReply: () => userCanReply,
+        };
+
+        store = new Vuex.Store({
+          getters,
+        });
+
+        createComponent({
+          renderReplyPlaceholder,
+          hasForm,
+        });
+
+        expect(wrapper.findComponent(GlButton).exists()).toBe(showButton);
+      },
+    );
   });
 
   it('renders a signed out widget when user is not logged in', () => {
-- 
GitLab