Merge pull request #84 from ascribe/AD-1531-contract-settings-buttons-look-weird

AD-1531 Contract settings buttons look weird

js/actions/contract_list_actions.js

@@ -31,9 +31,7 @@ class ContractListActions {
     changeContract(contract) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.changeContract(contract)
-                .then((res) => {
+                .then(resolve)
-                    resolve(res);
-                })
                 .catch((err)=> {
                     console.logGlobal(err);
                     reject(err);
@@ -44,9 +42,7 @@ class ContractListActions {
     removeContract(contractId) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.deleteContract(contractId)
-                .then((res) => {
+                .then(resolve)
-                    resolve(res);
-                })
                 .catch((err) => {
                     console.logGlobal(err);
                     reject(err);

js/components/ascribe_settings/contract_settings.js

@@ -28,10 +28,6 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils
 
 
 let ContractSettings = React.createClass({
-    propTypes: {
-        location: React.PropTypes.object
-    },
-
     getInitialState() {
         return mergeOptions(
             ContractListStore.getState(),
@@ -64,11 +60,11 @@ let ContractSettings = React.createClass({
             ContractListActions.removeContract(contract.id)
                 .then((response) => {
                     ContractListActions.fetchContractList(true);
-                    let notification = new GlobalNotificationModel(response.notification, 'success', 4000);
+                    const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 })
                 .catch((err) => {
-                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
+                    const notification = new GlobalNotificationModel(err, 'danger', 10000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
         };
@@ -83,8 +79,8 @@ let ContractSettings = React.createClass({
     },
 
     render() {
-        let publicContracts = this.getPublicContracts();
+        const publicContracts = this.getPublicContracts();
-        let privateContracts = this.getPrivateContracts();
+        const privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
 
         setDocumentTitle(getLangText('Contracts settings'));
@@ -96,8 +92,7 @@ let ContractSettings = React.createClass({
                     fileClassToUpload={{
                         singular: 'new contract',
                         plural: 'new contracts'
-                    }}
+                    }} />
-                    location={this.props.location}/>
             );
         }
 
@@ -114,7 +109,7 @@ let ContractSettings = React.createClass({
                             {publicContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -123,8 +118,7 @@ let ContractSettings = React.createClass({
                                                     aclObject={this.state.whitelabel}
                                                     aclName="acl_update_public_contract">
                                                     <ContractSettingsUpdateButton
-                                                        contract={contract}
+                                                        contract={contract} />
-                                                        location={this.props.location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -154,12 +148,11 @@ let ContractSettings = React.createClass({
                             fileClassToUpload={{
                                 singular: getLangText('new contract'),
                                 plural: getLangText('new contracts')
-                            }}
+                            }} />
-                            location={this.props.location}/>
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -168,8 +161,7 @@ let ContractSettings = React.createClass({
                                                     aclObject={this.state.whitelabel}
                                                     aclName="acl_update_private_contract">
                                                     <ContractSettingsUpdateButton
-                                                        contract={contract}
+                                                        contract={contract} />
-                                                        location={this.props.location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"

js/components/ascribe_settings/contract_settings_update_button.js

@@ -24,38 +24,42 @@ let ContractSettingsUpdateButton = React.createClass({
     },
 
     submitFile(file) {
-        let contract = this.props.contract;
-
         // override the blob with the key's value
-        contract.blob = file.key;
+        const contract = Object.assign(this.props.contract, { blob: file.key });
 
         // send it to the server
         ContractListActions
             .changeContract(contract)
             .then((res) => {
-
                 // Display feedback to the user
-                let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000);
+                const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
 
                 // and refresh the contract list to get the updated contracs
-                return ContractListActions.fetchContractList(true);
+                return ContractListActions
-            })
+                            .fetchContractList(true)
-            .then(() => {
+                            // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
-                // Also, reset the fineuploader component so that the user can again 'update' his contract
+                            .then(this.refs.fineuploader.reset)
-                this.refs.fineuploader.reset();
-            })
                             .catch((err) => {
-                console.logGlobal(err);
+                                const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
-                let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
                                 GlobalNotificationActions.appendGlobalNotification(notification);
+
+                                return Promise.reject(err);
                             });
+            }, (err) => {
+                const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
+                GlobalNotificationActions.appendGlobalNotification(notification);
+
+                return Promise.reject(err);
+            })
+            .catch(console.logGlobal);
     },
 
     render() {
         return (
            <ReactS3FineUploader
-                fileInputElement={UploadButton()}
+               ref='fineuploader'
+               fileInputElement={UploadButton({ showLabel: false })}
                keyRoutine={{
                    url: AppConstants.serverUrl + 's3/key/',
                    fileClass: 'contract'

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
@@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 const { func, array, bool, shape, string } = React.PropTypes;
 
 
-export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
+export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
     return React.createClass({
         displayName: 'UploadButton',
 
@@ -119,6 +120,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFileLabel() {
+            if (showLabel) {
                 const uploadedFile = this.getUploadedFile();
                 const uploadingFiles = this.getUploadingFiles();
 
@@ -138,9 +140,8 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                         </span>
                     );
                 } else {
-                return (
+                    return <span>{getLangText('No file chosen')}</span>;
-                    <span>{getLangText('No file chosen')}</span>
+                }
-                );
             }
         },
 
@@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
              */
             return (
-                <div className="upload-button-wrapper">
+                <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
                     {/*
                         The button needs to be of `type="button"` as it would
                         otherwise submit the form its in.

sass/ascribe_uploader.scss

@@ -182,9 +182,13 @@
     height: 12px;
 }
 
-.upload-button-wrapper {
+.ascribe-upload-button {
+    display: inline-block;
     text-align: left;
 
+    &.ascribe-upload-button-has-label {
+        display: block;
+
         .btn {
             font-size: 1em;
             margin-right: 1em;
@@ -194,3 +198,4 @@
             margin-left: 1em;
         }
     }
+}