Commit ce1a410e authored by Doug Stull's avatar Doug Stull Committed by Mike Greiling

Convert commit comments button to pajamas

- tooltip wasn't acting properly
- align with design
parent 89c97d78
<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>
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();
};
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) } }),
});
}
......@@ -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) }
......
---
title: Covert has-tooltip on commit page to pajamas
merge_request: 57858
author:
type: fixed
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment