diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/design_management/components/design_notes/design_note.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/design_management/components/design_notes/design_note.vue')
-rw-r--r-- | app/assets/javascripts/design_management/components/design_notes/design_note.vue | 49 |
1 files changed, 28 insertions, 21 deletions
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue index 1e1f5135290..5fb5989e11a 100644 --- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue +++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue @@ -1,11 +1,17 @@ <script> -import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; +import { + GlAvatar, + GlAvatarLink, + GlButton, + GlLink, + GlSafeHtmlDirective, + GlTooltipDirective, +} from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { __ } from '~/locale'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql'; import { hasErrors } from '../../utils/cache_update'; import { findNoteId, extractDesignNoteId } from '../../utils/design_management_utils'; @@ -16,13 +22,14 @@ export default { editCommentLabel: __('Edit comment'), }, components: { - UserAvatarLink, - TimelineEntryItem, - TimeAgoTooltip, - DesignReplyForm, ApolloMutation, - GlIcon, + DesignReplyForm, + GlAvatar, + GlAvatarLink, + GlButton, GlLink, + TimeAgoTooltip, + TimelineEntryItem, }, directives: { GlTooltip: GlTooltipDirective, @@ -86,18 +93,17 @@ export default { <template> <timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form"> - <user-avatar-link - :link-href="author.webUrl" - :img-src="author.avatarUrl" - :img-alt="author.username" - :img-size="40" - /> + <gl-avatar-link :href="author.webUrl" class="gl-float-left gl-mr-3"> + <gl-avatar :size="32" :src="author.avatarUrl" :entity-name="author.username" /> + </gl-avatar-link> + <div class="gl-display-flex gl-justify-content-space-between"> <div> <gl-link v-once :href="author.webUrl" class="js-user-link" + data-testid="user-link" :data-user-id="authorId" :data-username="author.username" > @@ -117,24 +123,25 @@ export default { </div> <div class="gl-display-flex gl-align-items-baseline"> <slot name="resolve-discussion"></slot> - <button + <gl-button v-if="isEditButtonVisible" v-gl-tooltip - type="button" - :title="$options.i18n.editCommentLabel" :aria-label="$options.i18n.editCommentLabel" - class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button" + :title="$options.i18n.editCommentLabel" + category="tertiary" + data-testid="note-edit" + icon="pencil" + size="small" @click="isEditing = true" - > - <gl-icon name="pencil" class="link-highlight" /> - </button> + /> </div> </div> <template v-if="!isEditing"> <div v-safe-html="note.bodyHtml" - class="note-text js-note-text md" + class="note-text md" data-qa-selector="note_content" + data-testid="note-text" ></div> <slot name="resolved-status"></slot> </template> |