Commit c950440e authored by Axel García's avatar Axel García

Adds an indicator icon for confidential notes

This shows an slashed eye icon for private comments only. This icon has
a tooltip that explain this to the user.
parent 2976970e
<script>
import { mapActions } from 'vuex';
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
export default {
......@@ -7,6 +8,10 @@ export default {
timeAgoTooltip,
GitlabTeamMemberBadge: () =>
import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
GlIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
author: {
......@@ -44,6 +49,11 @@ export default {
required: false,
default: true,
},
isConfidential: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -174,6 +184,15 @@ export default {
</a>
<time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
</template>
<gl-icon
v-if="isConfidential"
v-gl-tooltip:tooltipcontainer.bottom
data-testid="confidentialIndicator"
name="eye-slash"
:size="14"
:title="s__('Notes|Private comments are accessible by internal staff only')"
class="gl-ml-1 gl-text-gray-800"
/>
<slot name="extra-controls"></slot>
<i
v-if="showSpinner"
......
......@@ -255,7 +255,13 @@ export default {
</div>
<div class="timeline-content">
<div class="note-header">
<note-header v-once :author="author" :created-at="note.created_at" :note-id="note.id">
<note-header
v-once
:author="author"
:created-at="note.created_at"
:note-id="note.id"
:is-confidential="note.confidential"
>
<slot slot="note-header-info" name="note-header-info"></slot>
<span v-if="commit" v-html="actionText"></span>
<span v-else-if="note.created_at" class="d-none d-sm-inline">&middot;</span>
......
......@@ -14402,6 +14402,9 @@ msgstr ""
msgid "Notes|Collapse replies"
msgstr ""
msgid "Notes|Private comments are accessible by internal staff only"
msgstr ""
msgid "Notes|Show all activity"
msgstr ""
......
......@@ -18,6 +18,7 @@ describe('NoteHeader component', () => {
const findActionText = () => wrapper.find({ ref: 'actionText' });
const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
const findConfidentialIndicator = () => wrapper.find('[data-testid="confidentialIndicator"]');
const findSpinner = () => wrapper.find({ ref: 'spinner' });
const author = {
......@@ -231,4 +232,15 @@ describe('NoteHeader component', () => {
});
});
});
describe('with confidentiality indicator', () => {
it.each`
status | condition
${true} | ${'shows'}
${false} | ${'hides'}
`('$condition icon indicator when isConfidential is $status', ({ status }) => {
createComponent({ isConfidential: status });
expect(findConfidentialIndicator().exists()).toBe(status);
});
});
});
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