Format vue files with prettier

Add changelog file

6 files changed, 92 insertions, 18 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 2b3d6d1a3fa..d59b1136677 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -8,6 +8,7 @@ import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_d
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import NoteForm from '../../notes/components/note_form.vue';
 import ImageDiffOverlay from './image_diff_overlay.vue';
 import DiffDiscussions from './diff_discussions.vue';
@@ -26,6 +27,7 @@ export default {
     ImageDiffOverlay,
     NotDiffableViewer,
     NoPreviewViewer,
+    userAvatarLink,
     DiffFileDrafts: () => import('ee_component/batch_comments/components/diff_file_drafts.vue'),
   },
   mixins: [diffLineNoteFormMixin, draftCommentsMixin],
@@ -47,7 +49,7 @@ export default {
     }),
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
     ...mapGetters('diffs', ['getCommentFormForDiffFile']),
-    ...mapGetters(['getNoteableData', 'noteableType']),
+    ...mapGetters(['getNoteableData', 'noteableType', 'getUserData']),
     diffMode() {
       return getDiffMode(this.diffFile);
     },
@@ -72,6 +74,9 @@ export default {
     diffFileHash() {
       return this.diffFile.file_hash;
     },
+    author() {
+      return this.getUserData;
+    },
   },
   methods: {
     ...mapActions('diffs', ['saveDiffDiscussion', 'closeDiffFileCommentForm']),
@@ -134,6 +139,14 @@ export default {
           :can-comment="getNoteableData.current_user.can_create_note"
         />
         <div v-if="showNotesContainer" class="note-container">
+          <user-avatar-link
+            v-if="diffFileCommentForm && author"
+            :link-href="author.path"
+            :img-src="author.avatar_url"
+            :img-alt="author.name"
+            :img-size="40"
+            class="d-none d-sm-block new-comment"
+          />
           <diff-discussions
             v-if="diffFile.discussions.length"
             class="diff-file-discussions"
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index 41670b45798..c209b857652 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -4,11 +4,13 @@ import { s__ } from '~/locale';
 import diffLineNoteFormMixin from 'ee_else_ce/notes/mixins/diff_line_note_form';
 import noteForm from '../../notes/components/note_form.vue';
 import autosave from '../../notes/mixins/autosave';
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import { DIFF_NOTE_TYPE } from '../constants';
 
 export default {
   components: {
     noteForm,
+    userAvatarLink,
   },
   mixins: [autosave, diffLineNoteFormMixin],
   props: {
@@ -41,7 +43,16 @@ export default {
       diffViewType: state => state.diffs.diffViewType,
     }),
     ...mapGetters('diffs', ['getDiffFileByHash']),
-    ...mapGetters(['isLoggedIn', 'noteableType', 'getNoteableData', 'getNotesDataByProp']),
+    ...mapGetters([
+      'isLoggedIn',
+      'noteableType',
+      'getNoteableData',
+      'getNotesDataByProp',
+      'getUserData',
+    ]),
+    author() {
+      return this.getUserData;
+    },
     formData() {
       return {
         noteableData: this.noteableData,
@@ -99,6 +110,14 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
+    <user-avatar-link
+      v-if="author"
+      :link-href="author.path"
+      :img-src="author.avatar_url"
+      :img-alt="author.name"
+      :img-size="40"
+      class="d-none d-sm-block"
+    />
     <note-form
       ref="noteForm"
       :is-editing="true"
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 1c9ca180100..a7156bd2406 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -990,6 +990,14 @@ export default class Notes {
     form.find('#note_position').val(dataHolder.attr('data-position'));
 
     form
+      .prepend(
+        `<div class="avatar-note-form-holder"><div class="content"><a href="${escape(
+          gon.current_username,
+        )}" class="user-avatar-link d-none d-sm-block"><img class="avatar s40" src="${encodeURI(
+          gon.current_user_avatar_url,
+        )}" alt="${escape(gon.current_user_fullname)}" /></a></div></div>`,
+      )
+      .append('</div>')
       .find('.js-close-discussion-note-form')
       .show()
       .removeClass('hide');
@@ -1025,6 +1033,9 @@ export default class Notes {
       target: $link,
       lineType: link.dataset.lineType,
       showReplyInput,
+      currentUsername: gon.current_username,
+      currentUserAvatar: gon.current_user_avatar_url,
+      currentUserFullname: gon.current_user_fullname,
     });
   }
 
@@ -1053,7 +1064,15 @@ export default class Notes {
     this.setupDiscussionNoteForm($link, newForm);
   }
 
-  toggleDiffNote({ target, lineType, forceShow, showReplyInput = false }) {
+  toggleDiffNote({
+    target,
+    lineType,
+    forceShow,
+    showReplyInput = false,
+    currentUsername,
+    currentUserAvatar,
+    currentUserFullname,
+  }) {
     var $link,
       addForm,
       hasNotes,
@@ -1546,7 +1565,9 @@ export default class Notes {
                <div class="note-header">
                   <div class="note-header-info">
                      <a href="/${_.escape(currentUsername)}">
-                       <span class="d-none d-sm-inline-block">${_.escape(currentUsername)}</span>
+                       <span class="d-none d-sm-inline-block bold">${_.escape(
+                         currentUsername,
+                       )}</span>
                        <span class="note-headline-light">${_.escape(currentUsername)}</span>
                      </a>
                   </div>
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 5c59c0c32dd..fbf82fab9e9 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -82,7 +82,7 @@ export default {
       :data-username="author.username"
     >
       <slot name="note-header-info"></slot>
-      <span class="note-header-author-name">{{ author.name }}</span>
+      <span class="note-header-author-name bold">{{ author.name }}</span>
       <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
       <span class="note-headline-light">@{{ author.username }}</span>
     </a>
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 2c549e7abdd..eb6a4a67fff 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -87,7 +87,11 @@ export default {
       'unresolvedDiscussionsCount',
       'hasUnresolvedDiscussions',
       'showJumpToNextDiscussion',
+      'getUserData',
     ]),
+    currentUser() {
+      return this.getUserData;
+    },
     author() {
       return this.firstNote.author;
     },
@@ -377,6 +381,14 @@ Please check your network connection and try again.`;
                   :class="{ 'is-replying': isReplying }"
                   class="discussion-reply-holder"
                 >
+                  <user-avatar-link
+                    v-if="!isReplying && currentUser"
+                    :link-href="currentUser.path"
+                    :img-src="currentUser.avatar_url"
+                    :img-alt="currentUser.name"
+                    :img-size="40"
+                    class="d-none d-sm-block"
+                  />
                   <discussion-actions
                     v-if="!isReplying && userCanReply"
                     :discussion="discussion"
@@ -388,18 +400,27 @@ Please check your network connection and try again.`;
                     @resolve="resolveHandler"
                     @jumpToNextDiscussion="jumpToNextDiscussion"
                   />
-                  <note-form
-                    v-if="isReplying"
-                    ref="noteForm"
-                    :discussion="discussion"
-                    :is-editing="false"
-                    :line="diffLine"
-                    save-button-title="Comment"
-                    :autosave-key="autosaveKey"
-                    @handleFormUpdateAddToReview="addReplyToReview"
-                    @handleFormUpdate="saveReply"
-                    @cancelForm="cancelReplyForm"
-                  />
+                  <div v-if="isReplying" class="avatar-note-form-holder">
+                    <user-avatar-link
+                      v-if="currentUser"
+                      :link-href="currentUser.path"
+                      :img-src="currentUser.avatar_url"
+                      :img-alt="currentUser.name"
+                      :img-size="40"
+                      class="d-none d-sm-block"
+                    />
+                    <note-form
+                      ref="noteForm"
+                      :discussion="discussion"
+                      :is-editing="false"
+                      :line="diffLine"
+                      save-button-title="Comment"
+                      :autosave-key="autosaveKey"
+                      @handleFormUpdateAddToReview="addReplyToReview"
+                      @handleFormUpdate="saveReply"
+                      @cancelForm="cancelReplyForm"
+                    />
+                  </div>
                   <note-signed-out-widget v-if="!userCanReply" />
                 </div>
               </template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index a50f49c1279..baed26a157c 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -51,7 +51,7 @@ export default {
       <div class="note-header">
         <div class="note-header-info">
           <a :href="getUserData.path">
-            <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span>
+            <span class="d-none d-sm-inline-block bold">{{ getUserData.name }}</span>
             <span class="note-headline-light">@{{ getUserData.username }}</span>
           </a>
         </div>