Merge branch '33475-files-inside-wiki-repo-fe' into 'master'

FE for "Uploads to a wiki should be stored inside the wiki git repository"

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

app/assets/javascripts/dropzone_input.js

@@ -7,6 +7,19 @@ import axios from './lib/utils/axios_utils';
 
 Dropzone.autoDiscover = false;
 
+/**
+ * Return the error message string from the given response.
+ *
+ * @param {String|Object} res
+ */
+function getErrorMessage(res) {
+  if (!res || _.isString(res)) {
+    return res;
+  }
+
+  return res.message;
+}
+
 export default function dropzoneInput(form) {
   const divHover = '<div class="div-dropzone-hover"></div>';
   const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
@@ -18,7 +31,7 @@ export default function dropzoneInput(form) {
   const $uploadingErrorContainer = form.find('.uploading-error-container');
   const $uploadingErrorMessage = form.find('.uploading-error-message');
   const $uploadingProgressContainer = form.find('.uploading-progress-container');
-  const uploadsPath = window.uploads_path || null;
+  const uploadsPath = form.data('uploads-path') || window.uploads_path || null;
   const maxFileSize = gon.max_file_size || 10;
   const formTextarea = form.find('.js-gfm-input');
   let handlePaste;
@@ -42,7 +55,7 @@ export default function dropzoneInput(form) {
 
   if (!uploadsPath) {
     $formDropzone.addClass('js-invalid-dropzone');
-    return;
+    return null;
   }
 
   const dropzone = $formDropzone.dropzone({
@@ -84,9 +97,7 @@ export default function dropzoneInput(form) {
       // xhr object (xhr.responseText is error message).
       // On error we hide the 'Attach' and 'Cancel' buttons
       // and show an error.
-
-      // If there's xhr error message, let's show it instead of dropzone's one.
-      const message = xhr ? xhr.responseText : errorMessage;
+      const message = getErrorMessage(errorMessage || xhr.responseText);
 
       $uploadingErrorContainer.removeClass('hide');
       $uploadingErrorMessage.html(message);
@@ -274,4 +285,6 @@ export default function dropzoneInput(form) {
     $(this).closest('.gfm-form').find('.div-dropzone').click();
     formTextarea.focus();
   });
+
+  return Dropzone.forElement($formDropzone.get(0));
 }

app/views/projects/wikis/_form.html.haml

@@ -7,7 +7,7 @@
 
 = form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post,
            html: { class: 'wiki-form common-note-form prepend-top-default js-quick-submit' },
-           data: { markdown_version: markdown_version } do |f|
+           data: { markdown_version: markdown_version, uploads_path: uploads_path } do |f|
   = form_errors(@page)
 
   - if @page.persisted?

app/views/projects/wikis/edit.html.haml

@@ -36,13 +36,8 @@
           type: 'button' }
           = _('Delete')
 
-= render 'form'
+= render 'form', uploads_path: wiki_attachment_upload_url
 
 = render 'sidebar'
 
 #delete-wiki-modal.modal.fade
-
-- content_for :scripts_body do
-  -# haml-lint:disable InlineJavaScript
-  :javascript
-    window.uploads_path = "#{wiki_attachment_upload_url}";

spec/javascripts/dropzone_input_spec.js

@@ -0,0 +1,68 @@
+import $ from 'jquery';
+import dropzoneInput from '~/dropzone_input';
+import { TEST_HOST } from 'spec/test_constants';
+
+const TEST_FILE = {
+  upload: {},
+};
+const TEST_UPLOAD_PATH = `${TEST_HOST}/upload/file`;
+const TEST_ERROR_MESSAGE = 'A big error occurred!';
+const TEMPLATE = (
+`<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}">
+  <textarea class="js-gfm-input"></textarea>
+  <div class="uploading-error-message"></div>
+</form>`
+);
+
+describe('dropzone_input', () => {
+  let form;
+  let dropzone;
+  let xhr;
+  let oldXMLHttpRequest;
+
+  beforeEach(() => {
+    form = $(TEMPLATE);
+
+    dropzone = dropzoneInput(form);
+
+    xhr = jasmine.createSpyObj(Object.keys(XMLHttpRequest.prototype));
+    oldXMLHttpRequest = window.XMLHttpRequest;
+    window.XMLHttpRequest = () => xhr;
+  });
+
+  afterEach(() => {
+    window.XMLHttpRequest = oldXMLHttpRequest;
+  });
+
+  it('shows error message, when AJAX fails with json', () => {
+    xhr = {
+      ...xhr,
+      statusCode: 400,
+      readyState: 4,
+      responseText: JSON.stringify({ message: TEST_ERROR_MESSAGE }),
+      getResponseHeader: () => 'application/json',
+    };
+
+    dropzone.processFile(TEST_FILE);
+
+    xhr.onload();
+
+    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+  });
+
+  it('shows error message, when AJAX fails with text', () => {
+    xhr = {
+      ...xhr,
+      statusCode: 400,
+      readyState: 4,
+      responseText: TEST_ERROR_MESSAGE,
+      getResponseHeader: () => 'text/plain',
+    };
+
+    dropzone.processFile(TEST_FILE);
+
+    xhr.onload();
+
+    expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+  });
+});