Jump to first unresolved thread for the MR widget

- In the discussion navigation mixin: add the actual
    behavior along with all of the other navigation
    behaviors
- In the discussion keyboard navigator component,
    adds the event hub listener that triggers the
    behavior
- In the UI component:
    - Rewords
    - Adds buttons
    - Triggers event hub event
    - Adds CSS class to wrap at small sizes
- Updates translations

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

@@ -2,9 +2,13 @@
 /* global Mousetrap */
 import 'mousetrap';
 import discussionNavigation from '~/notes/mixins/discussion_navigation';
+import eventHub from '~/notes/event_hub';
 
 export default {
   mixins: [discussionNavigation],
+  created() {
+    eventHub.$on('jumpToFirstUnresolvedDiscussion', this.jumpToFirstUnresolvedDiscussion);
+  },
   mounted() {
     Mousetrap.bind('n', this.jumpToNextDiscussion);
     Mousetrap.bind('p', this.jumpToPreviousDiscussion);
@@ -12,6 +16,8 @@ export default {
   beforeDestroy() {
     Mousetrap.unbind('n');
     Mousetrap.unbind('p');
+
+    eventHub.$off('jumpToFirstUnresolvedDiscussion', this.jumpToFirstUnresolvedDiscussion);
   },
   render() {
     return this.$slots.default;

app/assets/javascripts/notes/mixins/discussion_navigation.js

@@ -113,6 +113,14 @@ export default {
       handleDiscussionJump(this, this.previousUnresolvedDiscussionId);
     },
 
+    jumpToFirstUnresolvedDiscussion() {
+      this.setCurrentDiscussionId(null)
+        .then(() => {
+          this.jumpToNextDiscussion();
+        })
+        .catch(() => {});
+    },
+
     /**
      * Go to the next discussion from the given discussionId
      * @param {String} discussionId The id we are jumping from

app/assets/javascripts/vue_merge_request_widget/components/states/unresolved_discussions.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import statusIcon from '../mr_widget_status_icon.vue';
+import notesEventHub from '~/notes/event_hub';
 
 export default {
   name: 'UnresolvedDiscussions',
   components: {
     statusIcon,
+    GlButton,
   },
   props: {
     mr: {
@@ -12,23 +15,39 @@ export default {
       required: true,
     },
   },
+  methods: {
+    jumpToFirstUnresolvedDiscussion() {
+      notesEventHub.$emit('jumpToFirstUnresolvedDiscussion');
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="mr-widget-body media">
+  <div class="mr-widget-body media gl-flex-wrap">
     <status-icon :show-disabled-button="true" status="warning" />
-    <div class="media-body space-children">
-      <span class="bold">
-        {{ s__('mrWidget|There are unresolved threads. Please resolve these threads') }}
-      </span>
-      <a
+    <div class="media-body">
+      <span class="gl-ml-3 gl-font-weight-bold gl-display-block gl-w-100">{{
+        s__('mrWidget|Before this can be merged, one or more threads must be resolved.')
+      }}</span>
+      <gl-button
+        data-testid="jump-to-first"
+        class="gl-ml-3"
+        size="small"
+        icon="comment-next"
+        @click="jumpToFirstUnresolvedDiscussion"
+      >
+        {{ s__('mrWidget|Jump to first unresolved thread') }}
+      </gl-button>
+      <gl-button
         v-if="mr.createIssueToResolveDiscussionsPath"
         :href="mr.createIssueToResolveDiscussionsPath"
-        class="btn btn-default btn-sm js-create-issue"
+        class="js-create-issue gl-ml-3"
+        size="small"
+        icon="issue-new"
       >
-        {{ s__('mrWidget|Create an issue to resolve them later') }}
-      </a>
+        {{ s__('mrWidget|Resolve all threads in new issue') }}
+      </gl-button>
     </div>
   </div>
 </template>

locale/gitlab.pot

@@ -28418,6 +28418,9 @@ msgstr ""
 msgid "mrWidget|Are you adding technical debt or code vulnerabilities?"
 msgstr ""
 
+msgid "mrWidget|Before this can be merged, one or more threads must be resolved."
+msgstr ""
+
 msgid "mrWidget|Cancel automatic merge"
 msgstr ""
 
@@ -28442,9 +28445,6 @@ msgstr ""
 msgid "mrWidget|Closes"
 msgstr ""
 
-msgid "mrWidget|Create an issue to resolve them later"
-msgstr ""
-
 msgid "mrWidget|Delete source branch"
 msgstr ""
 
@@ -28478,6 +28478,9 @@ msgstr ""
 msgid "mrWidget|In the merge train at position %{mergeTrainPosition}"
 msgstr ""
 
+msgid "mrWidget|Jump to first unresolved thread"
+msgstr ""
+
 msgid "mrWidget|Loading deployment statistics"
 msgstr ""
 
@@ -28541,6 +28544,9 @@ msgstr ""
 msgid "mrWidget|Request to merge"
 msgstr ""
 
+msgid "mrWidget|Resolve all threads in new issue"
+msgstr ""
+
 msgid "mrWidget|Resolve conflicts"
 msgstr ""
 
@@ -28592,9 +28598,6 @@ msgstr ""
 msgid "mrWidget|There are merge conflicts"
 msgstr ""
 
-msgid "mrWidget|There are unresolved threads. Please resolve these threads"
-msgstr ""
-
 msgid "mrWidget|This feature merges changes from the target branch to the source branch. You cannot use this feature since the source branch is protected."
 msgstr ""