Add buttons to the Commit Item to navigate among MR commits

- Adds two buttons to the commit item so a user can navigate to
    next or previous commits

app/assets/javascripts/diffs/components/commit_item.vue

 <script>
+import { mapActions } from 'vuex';
+import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+
 import initUserPopovers from '../../user_popovers';
+import { setUrlParams } from '../../lib/utils/url_utility';
 
 /**
  * CommitItem
@@ -18,7 +24,16 @@ import initUserPopovers from '../../user_popovers';
  * coexist, but there is an issue to remove the duplication.
  * https://gitlab.com/gitlab-org/gitlab-foss/issues/51613
  *
+ * EXCEPTION WARNING
+ * 1. The commit navigation buttons (next neighbor, previous neighbor)
+ *    are not duplicated because:
+ *     - We don't have the same data available on the Rails side (yet,
+ *        without backend work)
+ *     - This Vue component should always be what's used when in the
+ *        context of an MR diff, so the HAML should never have any idea
+ *        about navigating among commits.
  */
+
 export default {
   components: {
     UserAvatarLink,
@@ -26,6 +41,12 @@ export default {
     ClipboardButton,
     TimeAgoTooltip,
     CommitPipelineStatus,
+    GlButtonGroup,
+    GlButton,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     commit: {
@@ -54,12 +75,28 @@ export default {
     authorAvatar() {
       return this.author.avatar_url || this.commit.author_gravatar_url;
     },
+    nextCommitUrl() {
+      return this.commit.next_commit_id
+        ? setUrlParams({ commit_id: this.commit.next_commit_id })
+        : '';
+    },
+    previousCommitUrl() {
+      return this.commit.prev_commit_id
+        ? setUrlParams({ commit_id: this.commit.prev_commit_id })
+        : '';
+    },
+    hasNeighborCommits() {
+      return this.commit.next_commit_id || this.commit.prev_commit_id;
+    },
   },
   created() {
     this.$nextTick(() => {
       initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
     });
   },
+  methods: {
+    ...mapActions('diffs', ['moveToNeighboringCommit']),
+  },
 };
 </script>
 
@@ -123,6 +160,38 @@ export default {
             class="btn btn-default"
           />
         </div>
+        <div v-if="hasNeighborCommits" class="commit-nav-buttons ml-3">
+          <gl-button-group>
+            <gl-button
+              :href="previousCommitUrl"
+              :disabled="!commit.prev_commit_id"
+              @click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
+            >
+              <span
+                v-if="!commit.prev_commit_id"
+                v-gl-tooltip
+                class="h-100 w-100 position-absolute"
+                :title="__('You\'re at the first commit')"
+              ></span>
+              <gl-icon name="chevron-left" />
+              {{ __('Prev') }}
+            </gl-button>
+            <gl-button
+              :href="nextCommitUrl"
+              :disabled="!commit.next_commit_id"
+              @click.prevent="moveToNeighboringCommit({ direction: 'next' })"
+            >
+              <span
+                v-if="!commit.next_commit_id"
+                v-gl-tooltip
+                class="h-100 w-100 position-absolute"
+                :title="__('You\'re at the last commit')"
+              ></span>
+              {{ __('Next') }}
+              <gl-icon name="chevron-right" />
+            </gl-button>
+          </gl-button-group>
+        </div>
       </div>
     </div>
   </li>

app/assets/stylesheets/pages/commits.scss

@@ -208,6 +208,18 @@
   }
 }
 
+.commit-nav-buttons {
+  a.btn,
+  button {
+    // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730
+    &:last-child > svg {
+      margin-left: 0.25rem;
+      margin-right: 0;
+    }
+  }
+}
+
+
 .clipboard-group,
 .commit-sha-group {
   display: inline-flex;

app/views/projects/commits/_commit.html.haml

 -#-----------------------------------------------------------------
   WARNING: Please keep changes up-to-date with the following files:
   - `assets/javascripts/diffs/components/commit_item.vue`
+
+  EXCEPTION WARNING - see above `.vue` file for de-sync drift
 -#-----------------------------------------------------------------
 - view_details  = local_assigns.fetch(:view_details, false)
 - merge_request = local_assigns.fetch(:merge_request, nil)

locale/gitlab.pot

@@ -15553,6 +15553,9 @@ msgstr ""
 msgid "Press %{key}-C to copy"
 msgstr ""
 
+msgid "Prev"
+msgstr ""
+
 msgid "Prevent adding new members to project membership within this group"
 msgstr ""
 
@@ -24525,6 +24528,12 @@ msgstr ""
 msgid "You're about to reduce the visibility of the project %{strong_start}%{project_name}%{strong_end}."
 msgstr ""
 
+msgid "You're at the first commit"
+msgstr ""
+
+msgid "You're at the last commit"
+msgstr ""
+
 msgid "You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request."
 msgstr ""