Convert commit comments button to pajamas

- tooltip wasn't acting properly
- align with design

app/assets/javascripts/projects/commit/components/commit_comments_button.vue

+<script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { n__ } from '~/locale';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlButton,
+  },
+  props: {
+    commentsCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    tooltipText() {
+      return n__('%d comment on this commit', '%d comments on this commit', this.commentsCount);
+    },
+    showCommentButton() {
+      return this.commentsCount > 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="showCommentButton"
+    v-gl-tooltip
+    class="gl-display-none gl-sm-display-inline-block"
+    tabindex="0"
+    :title="tooltipText"
+    data-testid="comment-button-wrapper"
+  >
+    <gl-button icon="comment" class="gl-mr-3" disabled>
+      {{ commentsCount }}
+    </gl-button>
+  </span>
+</template>

app/assets/javascripts/projects/commit/index.js

 import initCherryPickCommitModal from './init_cherry_pick_commit_modal';
+import initCommitCommentsButton from './init_commit_comments_button';
 import initCommitOptionsDropdown from './init_commit_options_dropdown';
 import initRevertCommitModal from './init_revert_commit_modal';
 
 export default () => {
   initRevertCommitModal();
   initCherryPickCommitModal();
+  initCommitCommentsButton();
   initCommitOptionsDropdown();
 };

app/assets/javascripts/projects/commit/init_commit_comments_button.js

+import Vue from 'vue';
+import CommitCommentsButton from './components/commit_comments_button.vue';
+
+export default function initCommitCommentsButton() {
+  const el = document.querySelector('#js-commit-comments-button');
+
+  if (!el) {
+    return false;
+  }
+
+  const { commentsCount } = el.dataset;
+
+  return new Vue({
+    el,
+    render: (createElement) =>
+      createElement(CommitCommentsButton, { props: { commentsCount: Number(commentsCount) } }),
+  });
+}

app/views/projects/commit/_commit_box.html.haml

@@ -18,10 +18,7 @@
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
 
-  - if defined?(@notes_count) && @notes_count > 0
-    %span.btn.gl-button.btn-default.disabled.gl-button.btn-icon.d-none.d-sm-inline.gl-mr-3.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
-      = sprite_icon('comment')
-      = @notes_count
+  #js-commit-comments-button{ data: { comments_count: @notes_count.to_i } }
   = link_to _('Browse files'), project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 gl-xs-w-full gl-xs-mb-3"
   #js-commit-options-dropdown{ data: commit_options_dropdown_data(@project, @commit) }
 

changelogs/unreleased/324803-covert-has-tooltip-on-commit-page-to-pajamas.yml

+---
+title: Covert has-tooltip on commit page to pajamas
+merge_request: 57858
+author:
+type: fixed

spec/frontend/projects/commit/components/commit_comments_button_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CommitCommentsButton from '~/projects/commit/components/commit_comments_button.vue';
+
+describe('CommitCommentsButton', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(CommitCommentsButton, {
+        propsData: {
+          commentsCount: 1,
+          ...props,
+        },
+      }),
+    );
+  };
+
+  const tooltip = () => wrapper.findByTestId('comment-button-wrapper');
+
+  describe('Comment Button', () => {
+    it('has proper tooltip and button attributes for 1 comment', () => {
+      createComponent();
+
+      expect(tooltip().attributes('title')).toBe('1 comment on this commit');
+      expect(tooltip().text()).toBe('1');
+    });
+
+    it('has proper tooltip and button attributes for multiple comments', () => {
+      createComponent({ commentsCount: 2 });
+
+      expect(tooltip().attributes('title')).toBe('2 comments on this commit');
+      expect(tooltip().text()).toBe('2');
+    });
+
+    it('does not show when there are no comments', () => {
+      createComponent({ commentsCount: 0 });
+
+      expect(tooltip().exists()).toBe(false);
+    });
+  });
+});