fix(glossary):fix update comment,sort,and tooltip on source

https://zanata.atlassian.net/browse/ZNTA-760
https://zanata.atlassian.net/browse/ZNTA-759

frontend/src/main/web/index.html

@@ -34,7 +34,7 @@
   <main role="main">
     <div id="main-content" base-url="http://localhost:3000/lib/stores/testData"
       user='{"username": "test-user", "email":"zanata@zanata.org", "name": "admin-name", "loggedIn": "true", "imageUrl":"//www.gravatar.com/avatar/dda6e90e3f2a615fb8b31205e8b4894b?d=mm&r=g&s=115", "languageTeams": "English, French, German, Yodish (Yoda English)"}'
-      data='{"permission":{"updateGlossary":true, "insertGlossary":true}, "dev": "true", "profileUser" : {"username": "test-user", "email":"zanata@zanata.org", "name":"admin-name","loggedIn":"true","imageUrl":"//www.gravatar.com/avatar/dda6e90e3f2a615fb8b31205e8b4894b?d=mm&r=g&s=115","languageTeams":"English, French, German, Yodish (Yoda English)"}}'>
+      data='{"permission":{"updateGlossary":true, "insertGlossary":true, "deleteGlossary":true}, "dev": "true", "profileUser" : {"username": "test-user", "email":"zanata@zanata.org", "name":"admin-name","loggedIn":"true","imageUrl":"//www.gravatar.com/avatar/dda6e90e3f2a615fb8b31205e8b4894b?d=mm&r=g&s=115","languageTeams":"English, French, German, Yodish (Yoda English)"}}'>
     </div>
 
   </main>

frontend/src/main/web/lib/actions/GlossaryActions.js

@@ -1,8 +1,9 @@
 import Dispatcher from '../dispatchers/GlossaryDispatcher';
 import {GlossaryActionTypes} from '../constants/ActionTypes';
 
-
 var Actions = {
+  NO_INFO_MESSAGE: 'No information available',
+
   changeTransLocale: function(selectedLocale) {
     Dispatcher.handleViewAction({
       actionType: GlossaryActionTypes.TRANS_LOCALE_SELECTED,

frontend/src/main/web/lib/components/glossary/ActionCell.jsx

@@ -1,11 +1,11 @@
 import React, {PureRenderMixin} from 'react/addons';
-import { Button, Icon, Tooltip, OverlayTrigger } from 'zanata-ui';
+import { Button, Icon, Tooltip, OverlayTrigger, Overlay } from 'zanata-ui';
 import Actions from '../../actions/GlossaryActions';
 import LoadingCell from './LoadingCell'
-import Comment from './Comment'
 import GlossaryStore from '../../stores/GlossaryStore';
 import StringUtils from '../../utils/StringUtils'
 import _ from 'lodash';
+import cx from 'classnames'
 
 var ActionCell = React.createClass({
   propTypes: {
@@ -22,9 +22,13 @@ var ActionCell = React.createClass({
   },
 
   _getState: function() {
+    var entry = GlossaryStore.getEntry(this.props.id);
     return {
-      entry: GlossaryStore.getEntry(this.props.id),
-      saving: false
+      entry: entry,
+      saving: false,
+      comment: _.cloneDeep(entry.transTerm.comment),
+      savingComment: false,
+      showComment: false
     }
   },
 
@@ -51,8 +55,34 @@ var ActionCell = React.createClass({
     Actions.resetEntry(this.props.id);
   },
 
-  _onUpdateComment: function (value) {
-    Actions.updateComment(this.props.id, value);
+  _onUpdateComment: function () {
+    this.setState({savingComment: true});
+    Actions.updateComment(this.props.id, this.state.comment);
+  },
+
+  _hasCommentChanged: function() {
+    var initialValue = _.isUndefined(this.state.entry.transTerm.comment) ? '' : this.state.entry.transTerm.comment;
+    var newValue = _.isUndefined(this.state.comment) ? '' : this.state.comment;
+    return initialValue !== newValue;
+  },
+
+  _toggleComment: function () {
+    this.setState({showComment: !this.state.showComment});
+  },
+
+  _onCommentChange: function(event) {
+    this.setState({comment: event.target.value});
+  },
+
+  _onCancelComment: function () {
+    var value = _.isUndefined(this.state.entry.transTerm.comment) ? '' : this.state.entry.transTerm.comment;
+    this.setState({comment: value, showComment: false});
+  },
+
+  _handleCommentKeyUp: function (event) {
+    if(event.key === 'Escape') {
+      this._onCancelComment();
+    }
   },
 
   render: function () {
@@ -71,13 +101,68 @@ var ActionCell = React.createClass({
 
       var updateButton,
         cancelButton,
-        comment = (
-          <Comment
-            className="ml1/4"
-            readOnly={!this.props.canUpdateEntry || !canUpdateComment || isSaving}
-            value={this.state.entry.transTerm.comment}
-            onUpdateCommentCallback={this._onUpdateComment}/>
+        readOnlyComment = !this.props.canUpdateEntry || !canUpdateComment || isSaving,
+        disableCommentUpdate = !this._hasCommentChanged(),
+        saveCommentButton;
+
+      if(this.state.savingComment) {
+        saveCommentButton = (
+          <Button kind='primary' size={-1} disabled={disableCommentUpdate}
+            onClick={this._onUpdateComment} loading>
+            Update Comment
+          </Button>
+        );
+      } else {
+        saveCommentButton = (
+          <Button kind='primary' size={-1} disabled={disableCommentUpdate}
+            onClick={this._onUpdateComment}>
+            Update Comment
+          </Button>
+        );
+      }
+
+      if(readOnlyComment !== true) {
+        var tooltip = (
+          <Tooltip id="comment" title="Comment">
+            <textarea className="p1/4 w100p bd2 bdcsec30 bdrs1/4"
+              onChange={this._onCommentChange}
+              value={this.state.comment}
+              onKeyUp={this._handleCommentKeyUp}/>
+            <div className="mt1/4">
+              <Button className="mr1/2" link
+                onClick={this._onCancelComment}>
+                Cancel
+              </Button>
+            {saveCommentButton}
+            </div>
+          </Tooltip>
         );
+      } else {
+        var comment = StringUtils.isEmptyOrNull(this.state.comment) ? (<i>No comment</i>) : (<span>{this.state.comment}</span>);
+        tooltip = (<Tooltip id="comment">{comment}</Tooltip>);
+      }
+
+      var buttonClasses = cx(
+        this.props.className,
+        'mr1/2'
+      );
+
+      var comment = (
+        <div className="dib">
+          <Overlay placement='top'
+            target={() => React.findDOMNode(this)}
+            onHide={this._onCancelComment}
+            rootClose show={this.state.showComment}>
+            {tooltip}
+          </Overlay>
+          <Button link
+            kind={StringUtils.isEmptyOrNull(this.state.comment) ? 'muted' : 'primary'}
+            className={buttonClasses}
+            onClick={this._toggleComment}>
+            <Icon name='comment'/>
+          </Button>
+        </div>
+      );
 
       if(isSaving) {
         return (

frontend/src/main/web/lib/components/glossary/DataTable.jsx

@@ -5,6 +5,7 @@ import StringUtils from '../../utils/StringUtils'
 import InputCell from './InputCell';
 import LoadingCell from './LoadingCell'
 import ActionCell from './ActionCell'
+import { Icon, Tooltip, OverlayTrigger } from 'zanata-ui';
 import SourceActionCell from './SourceActionCell'
 import ColumnHeader from './ColumnHeader'
 import _ from 'lodash';
@@ -140,7 +141,7 @@ var DataTable = React.createClass({
       }
     }
     if(StringUtils.isEmptyOrNull(title)) {
-      title = "No information available";
+      title = Actions.NO_INFO_MESSAGE;
     }
     return title;
   },
@@ -193,14 +194,24 @@ var DataTable = React.createClass({
     Actions.updateSortOrder(field, ascending);
   },
 
-  _renderCell: function ({ id, rowIndex, field, readOnly, placeholder, maxLength }) {
+  _renderCell: function ({ id, rowIndex, field, readOnly, placeholder, maxLength, tooltip }) {
     var key = this._generateKey(field.col, rowIndex, id);
     if (id === null) {
       return <LoadingCell key={key}/>;
     } else {
       var entry = this._getGlossaryEntry(id);
       var value = _.get(entry, field.field);
       if (readOnly) {
+        var title;
+        if(!StringUtils.isEmptyOrNull(tooltip)) {
+          return (
+            <OverlayTrigger placement='top'
+              rootClose
+              overlay={<Tooltip id='src-info'>{tooltip}</Tooltip>}>
+              <span className="mh1/2" key={key}>{value}</span>
+            </OverlayTrigger>
+          );
+        }
         return <span className="mh1/2" key={key}>{value}</span>;
       } else {
         return (
@@ -220,12 +231,16 @@ var DataTable = React.createClass({
 
   _renderSourceCell: function (id, cellDataKey, rowData, rowIndex,
                                columnData, width) {
+    var entry = this._getGlossaryEntry(id);
+    var tooltip = entry.description;
+
     return this._renderCell({
       id: id,
       rowIndex: rowIndex,
       field: this.ENTRY.SRC,
       readOnly: true,
-      placeholder: ''
+      placeholder: '',
+      tooltip: tooltip
     });
   },
 

frontend/src/main/web/lib/components/glossary/SourceActionCell.jsx

@@ -56,11 +56,12 @@ var SourceActionCell = React.createClass({
     if(this.props.id === null || this.state.entry === null) {
       return <LoadingCell/>;
     } else {
+      var classes = this.props.info === Actions.NO_INFO_MESSAGE ? 'csec50' : 'cpri';
       var info = (
         <OverlayTrigger placement='top'
           rootClose
           overlay={<Tooltip id='src-info'>{this.props.info}</Tooltip>}>
-          <Icon className="cpri" name="info"/>
+          <Icon className={classes} name="info"/>
         </OverlayTrigger>
       );
 

frontend/src/main/web/lib/stores/GlossaryStore.js

@@ -267,10 +267,7 @@ function resetCache() {
   _.assign(_state, {
     page: 1,
     glossary: {},
-    glossaryIds: [],
-    sort:{
-      src_content: true
-    }
+    glossaryIds: []
   });
 }
 

frontend/src/main/web/lib/stores/testData/glossary/entries.json

@@ -9,9 +9,7 @@
       "glossaryTerms": [
         {
           "content": " interceptor stack configuration",
-          "locale": "en-US",
-          "lastModifiedDate": 1445391143000,
-          "lastModifiedBy": "Administrator"
+          "locale": "en-US"
         },
         {
           "content": "Interceptor Stack-Konfiguration1",