Merge branch 'backport-epic-fullscreen' into 'master'

Backport epic fullscreen

See merge request gitlab-org/gitlab-ce!15437

3 files changed, 91 insertions, 68 deletions

diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index b7747ee3f83..c84be42649a 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -36,7 +36,10 @@ export default function dropzoneInput(form) {
   $formDropzone.append(divHover);
   $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
 
-  if (!uploadsPath) return;
+  if (!uploadsPath) {
+    $formDropzone.addClass('js-invalid-dropzone');
+    return;
+  }
 
   const dropzone = $formDropzone.dropzone({
     url: uploadsPath,
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index cba7b9227cd..06a86f3b94a 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -71,7 +71,7 @@ export default class ZenMode {
     this.active_textarea = this.active_backdrop.find('textarea');
     // Prevent a user-resized textarea from persisting to fullscreen
     this.active_textarea.removeAttr('style');
-    return this.active_textarea.focus();
+    this.active_textarea.focus();
   }
 
   exit() {
@@ -81,7 +81,11 @@ export default class ZenMode {
       this.scrollTo(this.active_textarea);
       this.active_textarea = null;
       this.active_backdrop = null;
-      return Dropzone.forElement('.div-dropzone').enable();
+
+      const $dropzone = $('.div-dropzone');
+      if ($dropzone && !$dropzone.hasClass('js-invalid-dropzone')) {
+        Dropzone.forElement('.div-dropzone').enable();
+      }
     }
   }
 
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index 7047053d131..45a0bb0650f 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -1,77 +1,93 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-return-assign, new-cap, max-len */
 /* global Mousetrap */
 import Dropzone from 'dropzone';
 import ZenMode from '~/zen_mode';
 
-(function() {
-  var enterZen, escapeKeydown, exitZen;
-
-  describe('ZenMode', function() {
-    var fixtureName = 'merge_requests/merge_request_with_comment.html.raw';
-    preloadFixtures(fixtureName);
-    beforeEach(function() {
-      loadFixtures(fixtureName);
-      spyOn(Dropzone, 'forElement').and.callFake(function() {
-        return {
-          enable: function() {
-            return true;
-          }
-        };
-      // Stub Dropzone.forElement(...).enable()
-      });
-      this.zen = new ZenMode();
-      // Set this manually because we can't actually scroll the window
-      return this.zen.scroll_position = 456;
+describe('ZenMode', () => {
+  let zen;
+  const fixtureName = 'merge_requests/merge_request_with_comment.html.raw';
+
+  preloadFixtures(fixtureName);
+
+  function enterZen() {
+    $('.notes-form .js-zen-enter').click();
+  }
+
+  function exitZen() {
+    $('.notes-form .js-zen-leave').click();
+  }
+
+  function escapeKeydown() {
+    $('.notes-form textarea').trigger($.Event('keydown', {
+      keyCode: 27,
+    }));
+  }
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+
+    spyOn(Dropzone, 'forElement').and.callFake(() => ({
+      enable: () => true,
+    }));
+    zen = new ZenMode();
+
+    // Set this manually because we can't actually scroll the window
+    zen.scroll_position = 456;
+  });
+
+  describe('on enter', () => {
+    it('pauses Mousetrap', () => {
+      spyOn(Mousetrap, 'pause');
+      enterZen();
+      expect(Mousetrap.pause).toHaveBeenCalled();
     });
-    describe('on enter', function() {
-      it('pauses Mousetrap', function() {
-        spyOn(Mousetrap, 'pause');
-        enterZen();
-        return expect(Mousetrap.pause).toHaveBeenCalled();
-      });
-      return it('removes textarea styling', function() {
-        $('.notes-form textarea').attr('style', 'height: 400px');
-        enterZen();
-        return expect($('.notes-form textarea')).not.toHaveAttr('style');
-      });
+
+    it('removes textarea styling', () => {
+      $('.notes-form textarea').attr('style', 'height: 400px');
+      enterZen();
+      expect($('.notes-form textarea')).not.toHaveAttr('style');
     });
-    describe('in use', function() {
-      beforeEach(function() {
-        return enterZen();
-      });
-      return it('exits on Escape', function() {
-        escapeKeydown();
-        return expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen');
-      });
+  });
+
+  describe('in use', () => {
+    beforeEach(enterZen);
+
+    it('exits on Escape', () => {
+      escapeKeydown();
+      expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen');
+    });
+  });
+
+  describe('on exit', () => {
+    beforeEach(enterZen);
+
+    it('unpauses Mousetrap', () => {
+      spyOn(Mousetrap, 'unpause');
+      exitZen();
+      expect(Mousetrap.unpause).toHaveBeenCalled();
     });
-    return describe('on exit', function() {
-      beforeEach(function() {
-        return enterZen();
-      });
-      it('unpauses Mousetrap', function() {
-        spyOn(Mousetrap, 'unpause');
-        exitZen();
-        return expect(Mousetrap.unpause).toHaveBeenCalled();
-      });
-      return it('restores the scroll position', function() {
-        spyOn(this.zen, 'scrollTo');
-        exitZen();
-        return expect(this.zen.scrollTo).toHaveBeenCalled();
-      });
+
+    it('restores the scroll position', () => {
+      spyOn(zen, 'scrollTo');
+      exitZen();
+      expect(zen.scrollTo).toHaveBeenCalled();
     });
   });
 
-  enterZen = function() {
-    return $('.notes-form .js-zen-enter').click();
-  };
+  describe('enabling dropzone', () => {
+    beforeEach(() => {
+      enterZen();
+    });
 
-  exitZen = function() {
-    return $('.notes-form .js-zen-leave').click();
-  };
+    it('should not call dropzone if element is not dropzone valid', () => {
+      $('.div-dropzone').addClass('js-invalid-dropzone');
+      exitZen();
+      expect(Dropzone.forElement).not.toHaveBeenCalled();
+    });
 
-  escapeKeydown = function() {
-    return $('.notes-form textarea').trigger($.Event('keydown', {
-      keyCode: 27
-    }));
-  };
-}).call(window);
+    it('should call dropzone if element is dropzone valid', () => {
+      $('.div-dropzone').removeClass('js-invalid-dropzone');
+      exitZen();
+      expect(Dropzone.forElement).toHaveBeenCalled();
+    });
+  });
+});