[GitHub] garrensmith closed pull request #999: Fix View Attachments menu and upload modal in doc editor

[GitBox <gi...@apache.org>]

garrensmith closed pull request #999: Fix View Attachments menu and upload modal in doc editor
URL: https://github.com/apache/couchdb-fauxton/pull/999
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/app/addons/documents/doc-editor/actions.js b/app/addons/documents/doc-editor/actions.js
index b3093350b..7fda0dfe6 100644
--- a/app/addons/documents/doc-editor/actions.js
+++ b/app/addons/documents/doc-editor/actions.js
@@ -173,6 +173,9 @@ function uploadAttachment (params) {
     type: 'PUT',
     data: file,
     contentType: file.type,
+    headers: {
+      Accept: "application/json; charset=utf-8"
+    },
     processData: false,
     xhrFields: {
       withCredentials: true
@@ -214,7 +217,7 @@ function uploadAttachment (params) {
       FauxtonAPI.dispatch({
         type: ActionTypes.FILE_UPLOAD_ERROR,
         options: {
-          error: JSON.parse(resp.responseText).reason
+          error: resp.responseJSON ? resp.responseJSON.reason : 'Error uploading file: (' + resp.statusText + ')'
         }
       });
     }
diff --git a/app/addons/documents/doc-editor/components.js b/app/addons/documents/doc-editor/components.js
index fd96b491f..252d0d6c9 100644
--- a/app/addons/documents/doc-editor/components.js
+++ b/app/addons/documents/doc-editor/components.js
@@ -17,6 +17,7 @@ import app from "../../../app";
 import PropTypes from 'prop-types';
 
 import React from "react";
+import { Dropdown, MenuItem } from "react-bootstrap";
 import ReactDOM from "react-dom";
 import Actions from "./actions";
 import Stores from "./stores";
@@ -224,12 +225,11 @@ class AttachmentsPanelButton extends React.Component {
     return _.map(this.props.doc.get('_attachments'), function (item, filename) {
       var url = FauxtonAPI.urls('document', 'attachment', db, doc, app.utils.safeURLName(filename));
       return (
-        <li key={filename}>
-          <a href={url} target="_blank" data-bypass="true"> <strong>{filename}</strong>
-            <span className="attachment-delimiter">-</span>
-            <span>{item.content_type}, {Helpers.formatSize(item.length)}</span>
-          </a>
-        </li>
+        <MenuItem key={filename} href={url} target="_blank" data-bypass="true">
+          <strong>{filename}</strong>
+          <span className="attachment-delimiter">-</span>
+          <span>{item.content_type}{item.content_type ? ', ' : ''}{Helpers.formatSize(item.length)}</span>
+        </MenuItem>
       );
     });
   };
@@ -241,15 +241,16 @@ class AttachmentsPanelButton extends React.Component {
 
     return (
       <div className="panel-section view-attachments-section btn-group">
-        <button className="panel-button dropdown-toggle btn" data-bypass="true" data-toggle="dropdown" title="View Attachments"
-          id="view-attachments-menu">
-          <i className="icon icon-paper-clip"></i>
-          <span className="button-text">View Attachments</span>
-          <span className="caret"></span>
-        </button>
-        <ul className="dropdown-menu" role="menu" aria-labelledby="view-attachments-menu">
-          {this.getAttachmentList()}
-        </ul>
+        <Dropdown id="view-attachments-menu">
+          <Dropdown.Toggle noCaret className="panel-button dropdown-toggle btn" data-bypass="true">
+            <i className="icon icon-paper-clip"></i>
+            <span className="button-text">View Attachments</span>
+            <span className="caret"></span>
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            {this.getAttachmentList()}
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     );
   }
@@ -296,6 +297,18 @@ class UploadModal extends React.Component {
     };
   };
 
+  componentDidMount() {
+    store.on('change', this.onChange, this);
+  }
+
+  componentWillUnmount() {
+    store.off('change', this.onChange);
+  }
+
+  onChange = () => {
+    this.setState(this.getStoreState());
+  };
+
   closeModal = (e) => {
     if (e) {
       e.preventDefault();


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services