Warn before closing Translations table modal

jsapp/js/app.es6

@@ -102,9 +102,6 @@ class App extends React.Component {
       case 'EDGE':
         document.body.classList.toggle('hide-edge')
         break
-      case 'CLOSE_MODAL':
-        stores.pageState.hideModal()
-        break
     }
   }
   getChildContext() {

jsapp/js/components/assetrow.es6

@@ -361,7 +361,7 @@ class AssetRow extends React.Component {
                   data-asset-uid={this.props.uid}
                 >
                   <i className='k-icon-language' />
-                  {t('Manage translations')}
+                  {t('Manage Translations')}
                 </bem.PopoverMenu__link>
               }
               {this.props.downloads.map((dl)=>{

jsapp/js/components/header.es6

@@ -228,7 +228,11 @@ class MainHeader extends Reflux.Component {
       userCanEditAsset = this.userCan('change_asset', this.state.asset);
 
     const formTitleNameMods = [];
-    if (typeof this.state.asset.name === 'string' && this.state.asset.name.length > 125) {
+    if (
+      this.state.asset &&
+      typeof this.state.asset.name === 'string' &&
+      this.state.asset.name.length > 125
+    ) {
       formTitleNameMods.push('long');
     }
 

jsapp/js/components/modal.es6

@@ -2,22 +2,17 @@ import React from 'react';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
-import {hashHistory} from 'react-router';
-
+import alertify from 'alertifyjs';
 import {dataInterface} from '../dataInterface';
 import actions from '../actions';
 import bem from '../bem';
 import ui from '../ui';
 import stores from '../stores';
-import mixins from '../mixins';
-
-import {t, notify} from '../utils';
-
+import {t} from '../utils';
 import {
   PROJECT_SETTINGS_CONTEXTS,
   MODAL_TYPES
 } from '../constants';
-
 import ProjectSettings from '../components/modalForms/projectSettings';
 import SharingForm from '../components/modalForms/sharingForm';
 import Submission from '../components/modalForms/submission';
@@ -86,12 +81,12 @@ class Modal extends React.Component {
         break;
 
       case MODAL_TYPES.FORM_LANGUAGES:
-        this.setModalTitle(t('Manage languages'));
+        this.setModalTitle(t('Manage Languages'));
         break;
 
       case MODAL_TYPES.FORM_TRANSLATIONS_TABLE:
         this.setState({
-          title: t('Translations table'),
+          title: t('Translations Table'),
           modalClass: 'modal--large'
         });
         break;
@@ -149,11 +144,32 @@ class Modal extends React.Component {
 
     return title;
   }
+  displaySafeCloseConfirm(title, message) {
+    const dialog = alertify.dialog('confirm');
+    const opts = {
+      title: title,
+      message: message,
+      labels: {ok: t('Close'), cancel: t('Cancel')},
+      onok: stores.pageState.hideModal,
+      oncancel: dialog.destroy
+    };
+    dialog.set(opts).show();
+  }
+  onModalClose(evt) {
+    if (this.props.params.type === MODAL_TYPES.FORM_TRANSLATIONS_TABLE) {
+      this.displaySafeCloseConfirm(
+        t('Close Translations Table?'),
+        t('You will lose all unsaved changes.')
+      );
+    } else {
+      stores.pageState.hideModal();
+    }
+  }
   render() {
     return (
       <ui.Modal
         open
-        onClose={()=>{stores.pageState.hideModal()}}
+        onClose={this.onModalClose}
         title={this.state.title}
         className={this.state.modalClass}
       >

jsapp/js/components/modalForms/translationSettings.es6

@@ -41,7 +41,11 @@ export class TranslationSettings extends React.Component {
     this.listenTo(stores.asset, this.onAssetsChange);
 
     if (!this.state.asset && this.state.assetUid) {
-      stores.allAssets.whenLoaded(this.props.assetUid, this.onAssetChange);
+      if (stores.asset.data[this.state.assetUid]) {
+        this.onAssetChange(stores.asset.data[this.state.assetUid]);
+      } else {
+        stores.allAssets.whenLoaded(this.props.assetUid, this.onAssetChange);
+      }
     }
   }
   onAssetChange(asset) {

jsapp/js/components/modalForms/translationTable.es6

@@ -1,21 +1,25 @@
 import React from 'react'
 import ReactTable from 'react-table'
 import TextareaAutosize from 'react-autosize-textarea'
-
+import alertify from 'alertifyjs'
 import bem from 'js/bem'
 import actions from 'js/actions'
 import stores from 'js/stores'
-
 import {MODAL_TYPES} from 'js/constants'
 import {t} from 'utils'
 
-const SAVE_CHANGES_BUTTON_TEXT_DEFAULT = t('Save Changes');
+const SAVE_BUTTON_TEXT = {
+  DEFAULT: t('Save Changes'),
+  UNSAVED: t('* Save Changes'),
+  PENDING: t('Saving…')
+}
 
 export class TranslationTable extends React.Component {
   constructor(props){
     super(props);
     this.state = {
-      saveChangesButtonText: SAVE_CHANGES_BUTTON_TEXT_DEFAULT,
+      saveChangesButtonText: SAVE_BUTTON_TEXT.DEFAULT,
+      hasUnsavedChanges: false,
       isSaveChangesButtonPending: false,
       tableData: []
     };
@@ -59,7 +63,7 @@ export class TranslationTable extends React.Component {
         minWidth: 130,
         Cell: cellInfo => cellInfo.original.original
       },{
-        Header: `${translations[langIndex]} ${t('Translation')}`,
+        Header: t('##lang## translation').replace('##lang##', translations[langIndex]),
         accessor: 'translation',
         className: 'translation',
         Cell: cellInfo => (
@@ -68,25 +72,36 @@ export class TranslationTable extends React.Component {
               const data = [...this.state.tableData];
               data[cellInfo.index].value = e.target.value;
               this.setState({ data });
+              this.markSaveButtonUnsaved();
             }}
             value={this.state.tableData[cellInfo.index].value || ''}/>
         )
       }
     ];
   }
 
+  markSaveButtonUnsaved() {
+    this.setState({
+      saveChangesButtonText: SAVE_BUTTON_TEXT.UNSAVED,
+      hasUnsavedChanges: true,
+      isSaveChangesButtonPending: false
+    });
+  }
+
   markSaveButtonPending() {
     this.setState({
-      saveChangesButtonText: t('Saving…'),
-      isSaveChangesButtonPending: true,
-    })
+      saveChangesButtonText: SAVE_BUTTON_TEXT.PENDING,
+      hasUnsavedChanges: true,
+      isSaveChangesButtonPending: true
+    });
   }
 
   markSaveButtonIdle() {
     this.setState({
-      saveChangesButtonText: SAVE_CHANGES_BUTTON_TEXT_DEFAULT,
-      isSaveChangesButtonPending: false,
-    })
+      saveChangesButtonText: SAVE_BUTTON_TEXT.DEFAULT,
+      hasUnsavedChanges: false,
+      isSaveChangesButtonPending: false
+    });
   }
 
   saveChanges() {
@@ -106,18 +121,32 @@ export class TranslationTable extends React.Component {
     this.markSaveButtonPending();
     actions.resources.updateAsset(
       this.props.asset.uid,
-      {content: JSON.stringify(content)},
       {
-        onComplete: () => {
-          this.markSaveButtonIdle();
-        },
-        onFailed: () => {
-          this.markSaveButtonIdle();
-        }
+        content: JSON.stringify(content)
+      },
+      {
+        onComplete: this.markSaveButtonIdle.bind(this),
+        onFailed: this.markSaveButtonUnsaved.bind(this)
       }
     );
   }
 
+  onBack() {
+    if (this.state.hasUnsavedChanges) {
+      const dialog = alertify.dialog('confirm');
+      const opts = {
+        title: t('Go back?'),
+        message: t('You will lose all unsaved changes.'),
+        labels: {ok: t('Go back'), cancel: t('Cancel')},
+        onok: this.showManageLanguagesModal.bind(this),
+        oncancel: dialog.destroy
+      };
+      dialog.set(opts).show();
+    } else {
+      this.showManageLanguagesModal();
+    }
+  }
+
   showManageLanguagesModal() {
     stores.pageState.switchModal({
       type: MODAL_TYPES.FORM_LANGUAGES,
@@ -147,7 +176,10 @@ export class TranslationTable extends React.Component {
         </div>
 
         <bem.Modal__footer>
-          <bem.Modal__footerButton m='back' onClick={this.showManageLanguagesModal.bind(this)}>
+          <bem.Modal__footerButton
+            m='back'
+            onClick={this.onBack.bind(this)}
+          >
             {t('Back')}
           </bem.Modal__footerButton>
 

jsapp/js/keymap.js

@@ -1,6 +1,5 @@
 export default {
   APP_SHORTCUTS: {
-    EDGE: 'alt+e',
-    CLOSE_MODAL: 'esc',
+    EDGE: 'alt+e'
   },
 }

jsapp/js/ui.es6

@@ -50,6 +50,17 @@ class Modal extends React.Component {
     super(props);
     autoBind(this);
   }
+  componentDidMount() {
+    document.addEventListener('keydown', this.escFunction);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.escFunction);
+  }
+  escFunction (evt) {
+    if (evt.keyCode === 27 || evt.key === 'Escape') {
+      this.props.onClose.call(evt);
+    }
+  }
   backdropClick (evt) {
     if (evt.currentTarget === evt.target) {
       this.props.onClose.call(evt);