Add latest changes from gitlab-org/gitlab@15-3-stable-ee

9 files changed, 49 insertions, 61 deletions

diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue
index 111b670596b..3cd1a2525e9 100644
--- a/app/assets/javascripts/batch_comments/components/review_bar.vue
+++ b/app/assets/javascripts/batch_comments/components/review_bar.vue
@@ -2,20 +2,10 @@
 import { mapActions, mapGetters } from 'vuex';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants';
-import { PREVENT_LEAVING_PENDING_REVIEW } from '../i18n';
 import PreviewDropdown from './preview_dropdown.vue';
 import PublishButton from './publish_button.vue';
 import SubmitDropdown from './submit_dropdown.vue';
 
-function closeInterrupt(event) {
-  event.preventDefault();
-
-  // This is the correct way to write backwards-compatible beforeunload listeners
-  // https://developer.chrome.com/blog/page-lifecycle-api/#the-beforeunload-event
-  /* eslint-disable-next-line no-return-assign, no-param-reassign */
-  return (event.returnValue = PREVENT_LEAVING_PENDING_REVIEW);
-}
-
 export default {
   components: {
     PreviewDropdown,
@@ -35,26 +25,8 @@ export default {
   },
   mounted() {
     document.body.classList.add(REVIEW_BAR_VISIBLE_CLASS_NAME);
-    /*
-     * This stuff is a lot trickier than it looks.
-     *
-     * Mandatory reading: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-     * Some notable sentences:
-     *     - "[...] browsers may not display prompts created in beforeunload event handlers unless the
-     *         page has been interacted with, or may even not display them at all."
-     *     - "Especially on mobile, the beforeunload event is not reliably fired."
-     *     - "The beforeunload event is not compatible with the back/forward cache (bfcache) [...]
-     *         It is recommended that developers listen for beforeunload only in this scenario, and only
-     *         when they actually have unsaved changes, so as to minimize the effect on performance."
-     *
-     * Please ensure that this is really not working before you modify it, because there are a LOT
-     * of scenarios where browser behavior will make it _seem_ like it's not working, but it actually
-     * is under the right combination of contexts.
-     */
-    window.addEventListener('beforeunload', closeInterrupt, { capture: true });
   },
   beforeDestroy() {
-    window.removeEventListener('beforeunload', closeInterrupt, { capture: true });
     document.body.classList.remove(REVIEW_BAR_VISIBLE_CLASS_NAME);
   },
   methods: {
diff --git a/app/assets/javascripts/batch_comments/i18n.js b/app/assets/javascripts/batch_comments/i18n.js
deleted file mode 100644
index 6cdbf00f9ca..00000000000
--- a/app/assets/javascripts/batch_comments/i18n.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { __ } from '~/locale';
-
-export const PREVENT_LEAVING_PENDING_REVIEW = __('There are unsubmitted review comments.');
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 863d2a99972..a44b9827fe9 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -1,12 +1,9 @@
 import { isEmpty } from 'lodash';
-
 import createFlash from '~/flash';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-
 import { CHANGES_TAB, DISCUSSION_TAB, SHOW_TAB } from '../../../constants';
 import service from '../../../services/drafts_service';
-
 import * as types from './mutation_types';
 
 export const saveDraft = ({ dispatch }, draft) =>
@@ -18,7 +15,6 @@ export const addDraftToDiscussion = ({ commit }, { endpoint, data }) =>
     .then((res) => res.data)
     .then((res) => {
       commit(types.ADD_NEW_DRAFT, res);
-
       return res;
     })
     .catch(() => {
@@ -33,7 +29,6 @@ export const createNewDraft = ({ commit }, { endpoint, data }) =>
     .then((res) => res.data)
     .then((res) => {
       commit(types.ADD_NEW_DRAFT, res);
-
       return res;
     })
     .catch(() => {
diff --git a/app/assets/javascripts/blob/blob_blame_link.js b/app/assets/javascripts/blob/blob_blame_link.js
new file mode 100644
index 00000000000..41dfd7b82b8
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_blame_link.js
@@ -0,0 +1,31 @@
+function addBlameLink(containerSelector, linkClass) {
+  const containerEl = document.querySelector(containerSelector);
+
+  if (!containerEl) {
+    return;
+  }
+
+  containerEl.addEventListener('mouseover', (e) => {
+    const isLineLink = e.target.classList.contains(linkClass);
+    if (isLineLink) {
+      const lineLink = e.target;
+      const lineLinkCopy = lineLink.cloneNode(true);
+      lineLinkCopy.classList.remove(linkClass, 'diff-line-num');
+
+      const { lineNumber } = lineLink.dataset;
+      const { blamePath } = document.querySelector('.line-numbers').dataset;
+      const blameLink = document.createElement('a');
+      blameLink.classList.add('file-line-blame');
+      blameLink.href = `${blamePath}#L${lineNumber}`;
+
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('line-links', 'diff-line-num');
+
+      wrapper.appendChild(blameLink);
+      wrapper.appendChild(lineLinkCopy);
+      lineLink.replaceWith(wrapper);
+    }
+  });
+}
+
+export default addBlameLink;
diff --git a/app/assets/javascripts/blob/blob_links_tracking.js b/app/assets/javascripts/blob/blob_links_tracking.js
index 9a49aa8b0fc..713cc3fad05 100644
--- a/app/assets/javascripts/blob/blob_links_tracking.js
+++ b/app/assets/javascripts/blob/blob_links_tracking.js
@@ -1,7 +1,12 @@
 import Tracking from '~/tracking';
 
-function addBlobLinksTracking(containerSelector, eventsToTrack) {
-  const containerEl = document.querySelector(containerSelector);
+const eventsToTrack = [
+  { selector: '.file-line-blame', property: 'blame' },
+  { selector: '.file-line-num', property: 'link' },
+];
+
+function addBlobLinksTracking() {
+  const containerEl = document.querySelector('.file-holder');
 
   if (!containerEl) {
     return;
diff --git a/app/assets/javascripts/pages/projects/init_blob.js b/app/assets/javascripts/pages/projects/init_blob.js
index f7849e8d588..f37a2987685 100644
--- a/app/assets/javascripts/pages/projects/init_blob.js
+++ b/app/assets/javascripts/pages/projects/init_blob.js
@@ -4,7 +4,6 @@ import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
 import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import LineHighlighter from '~/blob/line_highlighter';
 import initBlobBundle from '~/blob_edit/blob_bundle';
-import addBlobLinksTracking from '~/blob/blob_links_tracking';
 
 export default () => {
   new LineHighlighter(); // eslint-disable-line no-new
@@ -16,12 +15,6 @@ export default () => {
     document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
   );
 
-  const eventsToTrack = [
-    { selector: '.file-line-blame', property: 'blame' },
-    { selector: '.file-line-num', property: 'link' },
-  ];
-  addBlobLinksTracking('#blob-content-holder', eventsToTrack);
-
   const fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
   const fileBlobPermalinkUrl =
     fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 7999b916e0f..78572f11f6f 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -13,6 +13,7 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
 import LineHighlighter from '~/blob/line_highlighter';
+import addBlameLink from '~/blob/blob_blame_link';
 import getRefMixin from '../mixins/get_ref';
 import blobInfoQuery from '../queries/blob_info.query.graphql';
 import userInfoQuery from '../queries/user_info.query.graphql';
@@ -242,6 +243,7 @@ export default {
 
             if (type === SIMPLE_BLOB_VIEWER) {
               new LineHighlighter(); // eslint-disable-line no-new
+              addBlameLink('.file-holder', 'js-line-links');
             }
           });
 
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index ccc8b44942a..f471db24889 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -3,6 +3,7 @@ import { GlSafeHtmlDirective, GlLoadingIcon } from '@gitlab/ui';
 import LineHighlighter from '~/blob/line_highlighter';
 import eventHub from '~/notes/event_hub';
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import addBlobLinksTracking from '~/blob/blob_links_tracking';
 import Tracking from '~/tracking';
 import {
   EVENT_ACTION,
@@ -66,6 +67,7 @@ export default {
     },
   },
   async created() {
+    addBlobLinksTracking();
     this.trackEvent(EVENT_LABEL_VIEWER);
 
     if (this.unsupportedLanguage) {
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 2b76e70fa17..ab426f388c6 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -95,23 +95,14 @@ td.line-numbers {
 
 .blob-viewer {
   .line-numbers {
+    min-width: 6rem;
     // for server-side-rendering
     .line-links {
       @include gl-display-flex;
-
-
-      &:first-child {
-        margin-top: 10px;
-      }
-
-      &:last-child {
-        margin-bottom: 10px;
-      }
     }
 
     // for client
     &.line-links {
-      min-width: 6rem;
       border-bottom-left-radius: 0;
 
       + pre {
@@ -120,15 +111,15 @@ td.line-numbers {
     }
   }
 
-  .line-links {
-    &:hover a::before,
-    &:focus-within a::before {
-      @include gl-visibility-visible;
-    }
+  .line-numbers:not(.line-links) a:hover::before,
+  .line-numbers:not(.line-links) a:focus-within::before,
+  .line-links:hover a::before,
+  .line-links:focus-within a::before {
+    @include gl-visibility-visible;
   }
 
+
   .file-line-num {
-    min-width: 4.5rem;
     @include gl-justify-content-end;
     @include gl-flex-grow-1;
     @include gl-pr-3;