Deprecate old notes script

app/assets/javascripts/notes.js → app/assets/javascripts/deprecated_notes.js

@@ -7,7 +7,7 @@ class-methods-use-this */
 /* global ResolveService */
 
 /*
-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.
+deprecated_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 { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
@@ -1740,5 +1740,3 @@ export default class Notes {
     return $closeBtn.text($closeBtn.data('originalText'));
   }
 }
-
-window.Notes = Notes;

app/assets/javascripts/init_notes.js → app/assets/javascripts/init_deprecated_notes.js

-import Notes from './notes';
+import Notes from './deprecated_notes';
 
 export default () => {
   const dataEl = document.querySelector('.js-notes-data');

app/assets/javascripts/merge_request_tabs.js

@@ -11,16 +11,13 @@ import initChangesDropdown from './init_changes_dropdown';
 import axios from './lib/utils/axios_utils';
 import {
   parseUrlPathname,
-  handleLocationHash,
   isMetaClick,
   parseBoolean,
   scrollToElement,
 } from './lib/utils/common_utils';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import { isInVueNoteablePage } from './lib/utils/dom_utils';
-import { getLocationHash } from './lib/utils/url_utility';
 import { __ } from './locale';
-import Notes from './notes';
 import syntaxHighlight from './syntax_highlight';
 
 // MergeRequestTabs
@@ -193,6 +190,14 @@ export default class MergeRequestTabs {
         this.destroyPipelinesView();
       } else if (this.isDiffAction(action)) {
         if (!isInVueNoteablePage()) {
+          /*
+            for pages where we have not yet converted to the new vue
+            implementation we load the diff tab content the old way,
+            inserting html rendered by the backend.
+
+            in practice, this only occurs when comparing commits in
+            the new merge request form page.
+          */
           this.loadDiff(href);
         }
         if (bp.getBreakpointSize() !== 'xl') {
@@ -379,6 +384,7 @@ export default class MergeRequestTabs {
     pipelineTableViewEl.appendChild(this.commitPipelinesTable.$el);
   }
 
+  // load the diff tab content from the backend
   loadDiff(source) {
     if (this.diffsLoaded) {
       document.dispatchEvent(new CustomEvent('scroll'));
@@ -420,25 +426,6 @@ export default class MergeRequestTabs {
           }).init();
         });
 
-        // Scroll any linked note into view
-        // Similar to `toggler_behavior` in the discussion tab
-        const hash = getLocationHash();
-        const anchor = hash && $container.find(`.note[id="${hash}"]`);
-        if (anchor && anchor.length > 0) {
-          const notesContent = anchor.closest('.notes-content');
-          const lineType = notesContent.hasClass('new') ? 'new' : 'old';
-          Notes.instance.toggleDiffNote({
-            target: anchor,
-            lineType,
-            forceShow: true,
-          });
-          anchor[0].scrollIntoView();
-          handleLocationHash();
-          // We have multiple elements on the page with `#note_xxx`
-          // (discussion and diff tabs) and `:target` only applies to the first
-          anchor.addClass('target');
-        }
-
         this.toggleLoading(false);
       })
       .catch(() => {

app/assets/javascripts/pages/projects/commit/show/index.js

@@ -5,7 +5,7 @@ import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
 import createFlash from '~/flash';
 import initChangesDropdown from '~/init_changes_dropdown';
-import initNotes from '~/init_notes';
+import initDeprecatedNotes from '~/init_deprecated_notes';
 import axios from '~/lib/utils/axios_utils';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -23,7 +23,7 @@ new ShortcutsNavigation();
 
 initCommitBoxInfo();
 
-initNotes();
+initDeprecatedNotes();
 
 const filesContainer = $('.js-diffs-batch');
 

app/assets/javascripts/pages/projects/issues/show.js

@@ -6,7 +6,7 @@ import Issue from '~/issue';
 import initIncidentApp from '~/issue_show/incident';
 import { initIssuableApp, initIssueHeaderActions } from '~/issue_show/issue';
 import { parseIssuableData } from '~/issue_show/utils/parse_data';
-import initNotesApp from '~/notes/index';
+import initNotesApp from '~/notes';
 import { store } from '~/notes/stores';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';

app/assets/javascripts/snippet/snippet_show.js

 import loadAwardsHandler from '~/awards_handler';
-import initNotes from '~/init_notes';
+import initDeprecatedNotes from '~/init_deprecated_notes';
 import SnippetsAppFactory from '~/snippets';
 import SnippetsShow from '~/snippets/components/show.vue';
 import ZenMode from '~/zen_mode';
 
 SnippetsAppFactory(document.getElementById('js-snippet-view'), SnippetsShow);
 
-initNotes();
+initDeprecatedNotes();
 loadAwardsHandler();
 
 // eslint-disable-next-line no-new

ee/app/assets/javascripts/pages/groups/epics/show/index.js

@@ -2,7 +2,7 @@ import ShortcutsEpic from 'ee/behaviors/shortcuts/shortcuts_epic';
 import initEpicApp from 'ee/epic/epic_bundle';
 import EpicTabs from 'ee/epic/epic_tabs';
 import loadAwardsHandler from '~/awards_handler';
-import initNotesApp from '~/notes/index';
+import initNotesApp from '~/notes';
 import ZenMode from '~/zen_mode';
 
 initNotesApp();

spec/frontend/notes/old_notes_spec.js → spec/frontend/notes/deprecated_notes_spec.js

@@ -14,9 +14,8 @@ import * as urlUtility from '~/lib/utils/url_utility';
 window.jQuery = $;
 require('autosize');
 require('~/commons');
-require('~/notes');
+const Notes = require('~/deprecated_notes').default;
 
-const { Notes } = window;
 const FLASH_TYPE_ALERT = 'alert';
 const NOTES_POST_PATH = /(.*)\/notes\?html=true$/;
 const fixture = 'snippets/show.html';
@@ -31,7 +30,7 @@ gl.utils.disableButtonIfEmptyField = () => {};
 // the following test is unreliable and failing in main 2-3 times a day
 // see https://gitlab.com/gitlab-org/gitlab/issues/206906#note_290602581
 // eslint-disable-next-line jest/no-disabled-tests
-describe.skip('Old Notes (~/notes.js)', () => {
+describe.skip('Old Notes (~/deprecated_notes.js)', () => {
   beforeEach(() => {
     loadFixtures(fixture);
 
@@ -67,7 +66,7 @@ describe.skip('Old Notes (~/notes.js)', () => {
     it('calls postComment when comment button is clicked', () => {
       jest.spyOn(Notes.prototype, 'postComment');
 
-      new window.Notes('', []);
+      new Notes('', []);
       $('.js-comment-button').click();
       expect(Notes.prototype.postComment).toHaveBeenCalled();
     });

spec/frontend/zen_mode_spec.js

@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Dropzone from 'dropzone';
 import $ from 'jquery';
 import Mousetrap from 'mousetrap';
-import initNotes from '~/init_notes';
+import GLForm from '~/gl_form';
 import * as utils from '~/lib/utils/common_utils';
 import ZenMode from '~/zen_mode';
 
@@ -34,7 +34,9 @@ describe('ZenMode', () => {
     mock.onGet().reply(200);
 
     loadFixtures(fixtureName);
-    initNotes();
+
+    const form = $('.js-new-note-form');
+    new GLForm(form); // eslint-disable-line no-new
 
     dropzoneForElementSpy = jest.spyOn(Dropzone, 'forElement').mockImplementation(() => ({
       enable: () => true,