Merge branch '84402-remove-avatar-from-comment-forms' into 'master'

Remove avatar from note form and comment form

See merge request gitlab-org/gitlab!52180

app/assets/javascripts/diffs/components/diff_discussion_reply.vue

@@ -2,14 +2,12 @@
 import { mapGetters } from 'vuex';
 import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 export default {
   name: 'DiffDiscussionReply',
   components: {
     NoteSignedOutWidget,
     ReplyPlaceholder,
-    UserAvatarLink,
   },
   props: {
     hasForm: {
@@ -36,13 +34,6 @@ export default {
     <template v-if="userCanReply">
       <slot v-if="hasForm" name="form"></slot>
       <template v-else-if="renderReplyPlaceholder">
-        <user-avatar-link
-          :link-href="currentUser.path"
-          :img-src="currentUser.avatar_url"
-          :img-alt="currentUser.name"
-          :img-size="40"
-          class="d-none d-sm-block"
-        />
         <reply-placeholder
           :button-text="__('Start a new discussion...')"
           @onClick="$emit('showNewDiscussionForm')"

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -6,7 +6,6 @@ import { s__ } from '~/locale';
 import noteForm from '../../notes/components/note_form.vue';
 import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
 import autosave from '../../notes/mixins/autosave';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import { DIFF_NOTE_TYPE, INLINE_DIFF_LINES_KEY, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
 import {
   commentLineOptions,
@@ -16,7 +15,6 @@ import {
 export default {
   components: {
     noteForm,
-    userAvatarLink,
     MultilineCommentForm,
   },
   mixins: [autosave, diffLineNoteFormMixin, glFeatureFlagsMixin()],
@@ -174,14 +172,6 @@ export default {
         :comment-line-options="commentLineOptions"
       />
     </div>
-    <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"

app/assets/javascripts/notes.js

@@ -904,18 +904,7 @@ export default class Notes {
     // DiffNote
     form.find('#note_position').val(dataHolder.attr('data-position'));
 
-    form
-      .prepend(
-        `<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 || gon.default_avatar_url,
-        )}" alt="${escape(gon.current_user_fullname)}" /></a>`,
-      )
-      .append('</div>')
-      .find('.js-close-discussion-note-form')
-      .show()
-      .removeClass('hide');
+    form.append('</div>').find('.js-close-discussion-note-form').show().removeClass('hide');
     form.find('.js-note-target-close').remove();
     form.find('.js-note-new-discussion').remove();
     this.setupNoteForm(form);

app/assets/javascripts/notes/components/comment_form.vue

@@ -18,7 +18,6 @@ import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests
 import * as constants from '../constants';
 import eventHub from '../event_hub';
 import markdownField from '~/vue_shared/components/markdown/field.vue';
-import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
@@ -31,7 +30,6 @@ export default {
     noteSignedOutWidget,
     discussionLockedWidget,
     markdownField,
-    userAvatarLink,
     GlButton,
     TimelineEntryItem,
     GlIcon,
@@ -301,15 +299,6 @@ export default {
     <ul v-else-if="canCreateNote" class="notes notes-form timeline">
       <timeline-entry-item class="note-form">
         <div class="flash-container error-alert timeline-content"></div>
-        <div class="timeline-icon d-none d-md-block">
-          <user-avatar-link
-            v-if="author"
-            :link-href="author.path"
-            :img-src="author.avatar_url"
-            :img-alt="author.name"
-            :img-size="40"
-          />
-        </div>
         <div class="timeline-content timeline-content-form">
           <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
             <comment-field-layout

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -267,14 +267,6 @@ export default {
                   :class="{ 'is-replying': isReplying }"
                   class="discussion-reply-holder gl-border-t-0! clearfix"
                 >
-                  <user-avatar-link
-                    v-if="!isReplying && userCanReply"
-                    :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"
@@ -285,27 +277,18 @@ export default {
                     @showReplyForm="showReplyForm"
                     @resolve="resolveHandler"
                   />
-                  <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-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"
+                  />
                   <note-signed-out-widget v-if="!isLoggedIn" />
                 </div>
               </template>

app/assets/stylesheets/framework/diffs.scss

@@ -1136,10 +1136,6 @@ table.code {
       display: block;
     }
   }
-
-  .note-edit-form {
-    margin-left: $note-icon-gutter-width;
-  }
 }
 
 .discussion-body .image .frame {

app/assets/stylesheets/framework/files.scss

@@ -444,12 +444,6 @@ span.idiff {
     .user-avatar-link.new-comment {
       position: absolute;
       margin: 40px $gl-padding 0 116px;
-
-      ~ .note-edit-form form.edit-note {
-        @include media-breakpoint-up(sm) {
-          margin-left: $note-icon-gutter-width;
-        }
-      }
     }
   }
 

app/assets/stylesheets/framework/variables.scss

@@ -627,7 +627,6 @@ $search-input-xl-width: 320px;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
-$note-icon-gutter-width: 55px;
 
 /*
 * Identicon

app/assets/stylesheets/pages/issues.scss

@@ -203,15 +203,9 @@ ul.related-merge-requests > li {
   }
 }
 
-.discussion-reply-holder {
-  .avatar-note-form-holder .note-edit-form {
-    display: block;
-    margin-left: $note-icon-gutter-width;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 0;
-    }
-  }
+.discussion-reply-holder,
+.note-edit-form {
+  display: block;
 }
 
 .issue-sort-dropdown {

app/assets/stylesheets/pages/note_form.scss

@@ -212,8 +212,12 @@ table {
   }
 }
 
-.note-edit-form {
+// Snippets are the only non-vue form left
+.snippets.note-edit-form {
   display: none;
+}
+
+.note-edit-form {
   font-size: 14px;
 
   .md-area {

app/assets/stylesheets/pages/notes.scss

 $system-note-icon-size: 32px;
 $system-note-svg-size: 16px;
-$note-form-margin-left: 72px;
 
 @mixin vertical-line($left) {
   &::before {
@@ -54,16 +53,6 @@ $note-form-margin-left: 72px;
     &.note-form {
       margin-left: 0;
 
-      @include notes-media('min', map-get($grid-breakpoints, md)) {
-        margin-left: $note-form-margin-left;
-      }
-
-      .timeline-icon {
-        @include notes-media('min', map-get($grid-breakpoints, sm)) {
-          margin-left: -$note-icon-gutter-width;
-        }
-      }
-
       .timeline-content {
         margin-left: 0;
       }
@@ -529,21 +518,6 @@ $note-form-margin-left: 72px;
 .code-commit .notes-content,
 .diff-viewer > .image ~ .note-container {
   background-color: $white;
-
-  .avatar-note-form-holder {
-    .user-avatar-link img {
-      margin: 13px $gl-padding $gl-padding;
-    }
-
-    form,
-    ~ .discussion-form-container {
-      padding: $gl-padding;
-
-      @include media-breakpoint-up(sm) {
-        margin-left: $note-icon-gutter-width;
-      }
-    }
-  }
 }
 
 .diff-viewer > .image ~ .note-container form.new-note {

app/views/discussions/_notes.html.haml

@@ -19,8 +19,6 @@
 
   .discussion-reply-holder
     - if can_create_note?
-      %a.user-avatar-link.d-none.d-sm-block{ href: user_path(current_user) }
-        = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40'
       .discussion-with-resolve-btn
         = link_to_reply_discussion(discussion)
     - elsif !current_user

app/views/shared/notes/_edit_form.html.haml

-.note-edit-form
+.snippets.note-edit-form
   = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
     = hidden_field_tag :target_id, '', class: 'js-form-target-id'
     = hidden_field_tag :target_type, '', class: 'js-form-target-type'

app/views/shared/notes/_notes_with_form.html.haml

@@ -12,9 +12,6 @@
       .timeline-entry-inner
         .flash-container.timeline-content
 
-        .timeline-icon.d-none.d-md-block
-          %a.author-link{ href: user_path(current_user) }
-            = image_tag avatar_icon_for_user(current_user), alt: current_user.to_reference, class: 'avatar s40'
         .timeline-content.timeline-content-form
           = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user

changelogs/unreleased/84402-remove-avatar-from-comment-forms.yml

+---
+title: Remove Avatar from Comment Forms
+merge_request: 52180
+author: Lee Tickett @leetickett
+type: other

spec/frontend/notes/components/comment_form_spec.js

@@ -9,7 +9,6 @@ import CommentForm from '~/notes/components/comment_form.vue';
 import * as constants from '~/notes/constants';
 import eventHub from '~/notes/event_hub';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data';
 
 jest.mock('autosize');
@@ -64,14 +63,6 @@ describe('issue_comment_form component', () => {
   });
 
   describe('user is logged in', () => {
-    describe('avatar', () => {
-      it('should render user avatar with link', () => {
-        mountComponent({ mountFunction: mount });
-
-        expect(wrapper.find(UserAvatarLink).attributes('href')).toBe(userDataMock.path);
-      });
-    });
-
     describe('handleSave', () => {
       it('should request to save note when note is entered', () => {
         mountComponent({ mountFunction: mount, initialData: { note: 'hello world' } });