Fixes commit comments in side-by-side diff viewcommit-side-by-side-comment

This was caused by the `notes` global class not existing when the
`file_comment_button` code is run. The notes class was used to check
if the diff is currently in parallel view or not. To get around this
I've added a check into the `file_comment_button` JS to check if the
view is currently parallel or not.

Closes #38117

3 files changed, 44 insertions, 3 deletions

diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index d02e4cd5876..a00d29a845a 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -7,6 +7,8 @@
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 
+import Cookies from 'js-cookie';
+
 const LINE_NUMBER_CLASS = 'diff-line-num';
 const UNFOLDABLE_LINE_CLASS = 'js-unfold';
 const NO_COMMENT_CLASS = 'no-comment-btn';
@@ -27,9 +29,7 @@ export default {
       this.userCanCreateNote = $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('can-create-note') === '';
     }
 
-    if (typeof notes !== 'undefined' && !this.isParallelView) {
-      this.isParallelView = notes.isParallelView && notes.isParallelView();
-    }
+    this.isParallelView = Cookies.get('diff_view') === 'parallel';
 
     if (this.userCanCreateNote) {
       $diffFile.on('mouseover', LINE_COLUMN_CLASSES, e => this.showButton(this.isParallelView, e))
diff --git a/changelogs/unreleased/commit-side-by-side-comment.yml b/changelogs/unreleased/commit-side-by-side-comment.yml
new file mode 100644
index 00000000000..f9bea285a77
--- /dev/null
+++ b/changelogs/unreleased/commit-side-by-side-comment.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed commenting on side-by-side commit diff
+merge_request:
+author:
+type: fixed
diff --git a/spec/features/projects/commit/diff_notes_spec.rb b/spec/features/projects/commit/diff_notes_spec.rb
new file mode 100644
index 00000000000..f0fe4e00acc
--- /dev/null
+++ b/spec/features/projects/commit/diff_notes_spec.rb
@@ -0,0 +1,36 @@
+require 'spec_helper'
+
+feature 'Commit diff', :js do
+  include RepoHelpers
+
+  let(:user)          { create(:user) }
+  let(:project)       { create(:project, :public, :repository) }
+
+  before do
+    project.add_master(user)
+    sign_in user
+  end
+
+  %w(inline parallel).each do |view|
+    context "#{view} view" do
+      before do
+        visit project_commit_path(project, sample_commit.id, view: view)
+      end
+
+      it "adds comment to diff" do
+        diff_line_num = first('.diff-line-num.new')
+
+        diff_line_num.trigger('mouseover')
+        diff_line_num.find('.js-add-diff-note-button').trigger('click')
+
+        page.within(first('.diff-viewer')) do
+          find('.js-note-text').set 'test comment'
+
+          click_button 'Comment'
+
+          expect(page).to have_content('test comment')
+        end
+      end
+    end
+  end
+end