Merge branch 'master' into 59532-danger-css59532-danger-css

* master: (1920 commits)
  Upgrade gitlab-ui and migrate gl-pagination
  New translations gitlab.pot (Danish) [skip ci]
  Fix missing deployment rockets in monitor dashboard
  Add basic support for AsciiDoc include directive
  Improve the gitea importer test
  Backport of EE changes from MR 13763
  Clarify ED25519 SSH key support
  Exclude preexisting lint issues for i18n
  Add back sidekiq metrics exporter
  Breakup first pass
  Use scoped routes for labels and milestones
  AutoDevops fix ensure_namespace() does not explicitly test namespace
  Speed up commit loads by disabling BatchLoader replace_methods
  Speed up merge request loads by disabling BatchLoader replace_methods
  Remove unused selector
  Disable unnecessary ESLint i18n offences
  Unquarantine spec in user_edits_files_spec.rb
  Refactor for cleaner caching in dashboards
  Update height of -tabs-height
  Change SLA to target SLO for bugs and defects
  ...

1 files changed, 55 insertions, 16 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 36725e22365..a7156bd2406 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -7,6 +7,10 @@ no-unused-vars, no-shadow, no-useless-escape, class-methods-use-this */
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
 
+/*
+old_notes_spec.js is the spec for the legacy, jQuery notes application. It has nothing to do with the new, fancy Vue notes app.
+ */
+
 import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
@@ -35,6 +39,7 @@ import {
 } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 import { localTimeAgo } from './lib/utils/datetime_utility';
+import { sprintf, s__, __ } from './locale';
 
 window.autosize = Autosize;
 
@@ -253,7 +258,7 @@ export default class Notes {
         discussionNoteForm = $textarea.closest('.js-discussion-note-form');
         if (discussionNoteForm.length) {
           if ($textarea.val() !== '') {
-            if (!window.confirm('Are you sure you want to cancel creating this comment?')) {
+            if (!window.confirm(__('Are you sure you want to cancel creating this comment?'))) {
               return;
             }
           }
@@ -265,7 +270,7 @@ export default class Notes {
           originalText = $textarea.closest('form').data('originalNote');
           newText = $textarea.val();
           if (originalText !== newText) {
-            if (!window.confirm('Are you sure you want to cancel editing this comment?')) {
+            if (!window.confirm(__('Are you sure you want to cancel editing this comment?'))) {
               return;
             }
           }
@@ -636,7 +641,7 @@ export default class Notes {
     this.glForm = new GLForm(form, enableGFM);
     textarea = form.find('.js-note-text');
     key = [
-      'Note',
+      s__('NoteForm|Note'),
       form.find('#note_noteable_type').val(),
       form.find('#note_noteable_id').val(),
       form.find('#note_commit_id').val(),
@@ -670,7 +675,9 @@ export default class Notes {
       formParentTimeline = $form.closest('.discussion-notes').find('.notes');
     }
     return this.addFlash(
-      'Your comment could not be submitted! Please check your network connection and try again.',
+      __(
+        'Your comment could not be submitted! Please check your network connection and try again.',
+      ),
       'alert',
       formParentTimeline.get(0),
     );
@@ -679,7 +686,7 @@ export default class Notes {
   updateNoteError($parentTimeline) {
     // eslint-disable-next-line no-new
     new Flash(
-      'Your comment could not be updated! Please check your network connection and try again.',
+      __('Your comment could not be updated! Please check your network connection and try again.'),
     );
   }
 
@@ -983,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');
@@ -1018,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,
     });
   }
 
@@ -1046,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,
@@ -1258,12 +1284,19 @@ export default class Notes {
 
   putConflictEditWarningInPlace(noteEntity, $note) {
     if ($note.find('.js-conflict-edit-warning').length === 0) {
+      const open_link = `<a href="#note_${
+        noteEntity.id
+      }" target="_blank" rel="noopener noreferrer">`;
       const $alert = $(`<div class="js-conflict-edit-warning alert alert-danger">
-        This comment has changed since you started editing, please review the
-        <a href="#note_${noteEntity.id}" target="_blank" rel="noopener noreferrer">
-          updated comment
-        </a>
-        to ensure information is not lost
+        ${sprintf(
+          s__(
+            'Notes|This comment has changed since you started editing, please review the %{open_link}updated comment%{close_link} to ensure information is not lost',
+          ),
+          {
+            open_link,
+            close_link: '</a>',
+          },
+        )}
       </div>`);
       $alert.insertAfter($note.find('.note-text'));
     }
@@ -1491,13 +1524,15 @@ export default class Notes {
 
     if (executedCommands && executedCommands.length) {
       if (executedCommands.length > 1) {
-        tempFormContent = 'Applying multiple commands';
+        tempFormContent = __('Applying multiple commands');
       } else {
         const commandDescription = executedCommands[0].description.toLowerCase();
-        tempFormContent = `Applying command to ${commandDescription}`;
+        tempFormContent = sprintf(__('Applying command to %{commandDescription}'), {
+          commandDescription,
+        });
       }
     } else {
-      tempFormContent = 'Applying command';
+      tempFormContent = __('Applying command');
     }
 
     return tempFormContent;
@@ -1530,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>
@@ -1817,7 +1854,9 @@ export default class Notes {
     $editingNote
       .find('.note-headline-meta a')
       .html(
-        '<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>',
+        `<i class="fa fa-spinner fa-spin" aria-label="${__(
+          'Comment is being updated',
+        )}" aria-hidden="true"></i>`,
       );
 
     // Make request to update comment on server