Display user-relative date , disable pdf/undo/redo buttons when needed, change some labels

ui/client/common/DateUtils.js

@@ -1,10 +1,14 @@
+import Moment from "moment";
+import {displayDateFormat} from "../config";
 
-export default {
+class DateUtils {
+    formatRelatively = (dateTimeString) => {
+        return Moment(dateTimeString).calendar(null, {sameElse: displayDateFormat})
+    }
 
+    formatAbsolutely = (dateTimeString) => {
+        return dateTimeString.replace("T", " | ").substring(0, 18)
+    }
+}
 
-  format(dateTimeString) {
-    //TODO: something better?
-    return dateTimeString.replace("T", " | ").substring(0, 18)
-  }
-
-}
+export default new DateUtils()

ui/client/common/ProcessUtils.js

@@ -9,6 +9,11 @@ class ProcessUtils {
     return !_.isEmpty(fetchedProcessDetails) ? _.isEqual(fetchedProcessDetails.json, processToDisplay) : true
   }
 
+  canExport = (state) => {
+      const fetchedProcessDetails = state.graphReducer.fetchedProcessDetails;
+      return _.isEmpty(fetchedProcessDetails) ? false : !_.isEmpty(fetchedProcessDetails.json.nodes)
+  }
+
   processDisplayName = (processId, versionId) => {
     return `${processId}:v${versionId}`
   }

ui/client/components/ProcessAttachments.js

@@ -50,7 +50,7 @@ export class ProcessAttachments_ extends React.Component {
                 </div>
                 <div className="header">
                   <span className="label label-info">{attachment.user}</span>
-                  <span className="date">{DateUtils.format(attachment.createDate)}</span>
+                  <span title={DateUtils.formatAbsolutely(attachment.createDate)} className="date">{DateUtils.formatRelatively(attachment.createDate)}</span>
                   <p>{ProcessUtils.processDisplayName(attachment.processId, attachment.processVersionId)}</p>
                 </div>
                 <p> {attachment.fileName} </p>

ui/client/components/ProcessComments.js

@@ -51,7 +51,7 @@ class ProcessComments extends React.Component {
             return (
               <div key={idx}>
                 <div className="header">
-                  <span className="date">{DateUtils.format(comment.createDate)}</span>
+                  <span title={DateUtils.formatAbsolutely(comment.createDate)} className="date">{DateUtils.formatRelatively(comment.createDate)}</span>
                   <span className="comment-header">v{comment.processVersionId} ({comment.user})</span>
                   {comment.user == this.props.loggedUser.id ?
                     <span className="remove glyphicon glyphicon-remove" onClick={this.deleteComment.bind(this, comment)}/>

ui/client/components/ProcessHistory.js

@@ -78,10 +78,10 @@ export class ProcessHistory_ extends Component {
                   null
                 }
                 <br/>
-                <small><i>{DateUtils.format(historyEntry.createDate)}</i></small>
+                <small><i title={DateUtils.formatAbsolutely(historyEntry.createDate)}>{DateUtils.formatRelatively(historyEntry.createDate)}</i></small>
                 <br/>
                 {historyEntry.deployments.map((deployment, index) =>
-                  <small key={index}><i>{DateUtils.format(deployment.deployedAt)}</i> <span className="label label-info">{deployment.environment}</span></small>
+                  <small key={index}><i title={DateUtils.formatAbsolutely(deployment.deployedAt)}>{DateUtils.formatRelatively(deployment.deployedAt)}</i> <span className="label label-info">{deployment.environment}</span></small>
                 )}
               </li>
             )

ui/client/components/graph/NodeDetailsModal.js

@@ -159,7 +159,7 @@ class NodeDetailsModal extends React.Component {
     const docsUrl = this.props.nodeSetting.docsUrl
     return docsUrl ?
       <a className="docsIcon" target="_blank" href={docsUrl} title="Documentation">
-        <SvgDiv svgFile={'book.svg'}/>
+        <SvgDiv svgFile={'documentation.svg'}/>
       </a> : null
   }
 
@@ -169,16 +169,18 @@ class NodeDetailsModal extends React.Component {
 
   render() {
     const isOpen = !_.isEmpty(this.props.nodeToDisplay) && this.props.showNodeDetailsModal
-    const headerStyles = EspModalStyles.headerStyles(this.nodeAttributes().styles.fill, this.nodeAttributes().styles.color)
+    const titleStyles = EspModalStyles.headerStyles(this.nodeAttributes().styles.fill, this.nodeAttributes().styles.color)
     const testResults = (id) => TestResultUtils.resultsForNode(this.props.testResults, id)
     const variableLanguage = this.variableLanguage(this.props.nodeToDisplay)
     const modelHeader = (_.isEmpty(variableLanguage) ? "" : `${variableLanguage} `) + this.nodeAttributes().name
 
     return (
       <div className="objectModal">
         <Modal shouldCloseOnOverlayClick={false} isOpen={isOpen} className="espModal" onRequestClose={this.closeModal}>
-          <div className="modalHeader" style={headerStyles}>
-            <span>{modelHeader}</span>
+          <div className="modalHeader">
+            <div className="modal-title" style={titleStyles}>
+              <span>{modelHeader}</span>
+            </div>
             {this.renderDocumentationIcon()}
           </div>
           <div className="modalContentDark">

ui/client/components/modals/CompareVersionsDialog.js

@@ -9,9 +9,8 @@ import HttpService from "../../http/HttpService";
 import * as JsonUtils from "../../common/JsonUtils";
 import NodeDetailsContent from "../graph/NodeDetailsContent";
 import EdgeDetailsContent from "../graph/EdgeDetailsContent";
-import Moment from "moment";
-import {dateFormat} from "../../config";
 import Scrollbars from "react-custom-scrollbars";
+import DateUtils from "../../common/DateUtils";
 
 //TODO: handle displaying groups
 //TODO: handle different textarea heights
@@ -64,7 +63,7 @@ class CompareVersionsDialog extends React.Component {
     const versionId = (versionPrefix || '') + version.processVersionId
     return (
       <option key={versionId} value={versionId}>
-        {this.versionDisplayString(versionId)} - created by {version.user} &nbsp;on {Moment(version.createDate).format(dateFormat)}</option>)
+        {this.versionDisplayString(versionId)} - created by {version.user} &nbsp; {DateUtils.formatAbsolutely(version.createDate)}</option>)
   }
 
   render() {

ui/client/components/right-panel/UserRightPanel.js

@@ -133,8 +133,8 @@ class UserRightPanel extends Component {
         {name: "migrate", visible: this.props.capabilities.deploy && !_.isEmpty(this.props.featuresSettings.remoteEnvironment), disabled: !conf.deployPossible, onClick: this.migrate, icon: InlinedSvgs.buttonMigrate},
         {name: "compare", onClick: this.compareVersions, icon: 'compare.svg', disabled: this.hasOneVersion()},
         {name: "import", visible: this.props.capabilities.write, disabled: false, onClick: this.importProcess, icon: InlinedSvgs.buttonImport, dropzone: true},
-        {name: "export", onClick: this.exportProcess, icon: InlinedSvgs.buttonExport},
-        {name: "exportPDF", disabled: !this.props.nothingToSave, onClick: this.exportProcessToPdf, icon: InlinedSvgs.buttonExport},
+        {name: "JSON", disabled: !this.props.canExport, onClick: this.exportProcess, icon: InlinedSvgs.buttonExport},
+        {name: "PDF", disabled: !this.props.canExport, onClick: this.exportProcessToPdf, icon: InlinedSvgs.pdf},
         {name: "zoomIn", onClick: this.props.zoomIn, icon: 'zoomin.svg'},
         {name: "zoomOut", onClick: this.props.zoomOut, icon: 'zoomout.svg'},
         {name: "archive", onClick: this.archiveProcess, icon: 'archive.svg', visible: this.props.capabilities.write}
@@ -143,15 +143,16 @@ class UserRightPanel extends Component {
       {
         panelName: "Edit",
         buttons: [
-          {
-            name: "undo",
+          {name: "undo",
             visible: this.props.capabilities.write,
+            disabled: this.props.history.past.length === 0,
             onClick: this.undo,
             icon: InlinedSvgs.buttonUndo
           },
           {
             name: "redo",
             visible: this.props.capabilities.write,
+            disabled: this.props.history.future.length === 0,
             onClick: this.redo,
             icon: InlinedSvgs.buttonRedo
           },
@@ -414,6 +415,7 @@ function mapState(state) {
 
     loggedUser: state.settings.loggedUser,
     nothingToSave: ProcessUtils.nothingToSave(state),
+    canExport: ProcessUtils.canExport(state),
     showRunProcessDetails: !_.isEmpty(state.graphReducer.testResults) || !_.isEmpty(state.graphReducer.processCounts),
     keyActionsAvailable: state.ui.allModalsClosed,
     processIsLatestVersion: _.get(fetchedProcessDetails, 'isLatestVersion', false),
@@ -423,7 +425,8 @@ function mapState(state) {
     featuresSettings: state.settings.featuresSettings,
     isSubprocess: _.get(state.graphReducer.processToDisplay, "properties.isSubprocess", false),
     businessView: state.graphReducer.businessView,
-    clipboard: state.graphReducer.clipboard
+    clipboard: state.graphReducer.clipboard,
+    history: state.graphReducer.history
   };
 }
 

ui/client/config.js

@@ -12,9 +12,11 @@ __webpack_public_path__ = `${nkPath}/static/`
 
 let API_URL = `${nkPath}/api`
 const dateFormat = "YYYY-MM-DD HH:mm:ss"
+const displayDateFormat = 'YYYY-MM-DD|HH:mm';
 
 export {
   API_URL,
   dateFormat,
+  displayDateFormat,
   nkPath
 }

ui/client/containers/Archive.js

@@ -112,7 +112,7 @@ class Archive extends BaseProcesses {
                   <Td column="subprocess" className="centered-column">
                     <Glyphicon glyph={process.isSubprocess ? 'ok' : 'remove'}/>
                   </Td>
-                  <Td column="modifyDate" className="centered-column">{DateUtils.format(process.modificationDate)}</Td>
+                  <Td column="modifyDate" title={DateUtils.formatAbsolutely(process.modificationDate)} className="centered-column">{DateUtils.formatRelatively(process.modificationDate)}</Td>
                   <Td column="view" className="edit-column">
                     <Glyphicon
                       glyph="eye-open"

ui/client/containers/Processes.js

@@ -159,7 +159,7 @@ class Processes extends BaseProcesses {
           hideFilterInput
           filterBy={this.state.search.toLowerCase()}
           columns={[
-            {key: 'name', label: 'Process name'},
+            {key: 'name', label: 'Name'},
             {key: 'category', label: 'Category'},
             {key: 'modifyDate', label: 'Last modification'},
             {key: 'status', label: 'Status'},
@@ -180,7 +180,7 @@ class Processes extends BaseProcesses {
                   />
                 </Td>
                 <Td column="category">{process.processCategory}</Td>
-                <Td column="modifyDate" className="centered-column">{DateUtils.format(process.modificationDate)}</Td>
+                <Td column="modifyDate" title={DateUtils.formatAbsolutely(process.modificationDate)} className="centered-column" value={process.modificationDate}>{DateUtils.formatRelatively(process.modificationDate)}</Td>
                 <Td column="status" className="status-column">
                   <div
                     className={this.processStatusClass(process)}

ui/client/containers/SubProcesses.js

@@ -115,7 +115,7 @@ class SubProcesses extends BaseProcesses {
               <Tr className="row-hover" key={index}>
                 <Td column="name">{process.name}</Td>
                 <Td column="category">{process.processCategory}</Td>
-                <Td column="modifyDate" className="centered-column">{DateUtils.format(process.modificationDate)}</Td>
+                <Td column="modifyDate" title={DateUtils.formatAbsolutely(process.modificationDate)} className="centered-column">{DateUtils.formatRelatively(process.modificationDate)}</Td>
                 <Td column="edit" className="edit-column">
                   <Glyphicon glyph="edit" title="Edit subprocess" onClick={this.showProcess.bind(this, process)} />
                 </Td>

ui/client/containers/admin/CustomProcesses.js

@@ -93,7 +93,7 @@ class CustomProcesses extends BaseProcesses {
                 <Tr className="row-hover" key={index}>
                   <Td column="name">{process.name}</Td>
                   <Td column="category">{process.processCategory}</Td>
-                  <Td column="modifyDate" className="centered-column">{DateUtils.format(process.modificationDate)}</Td>
+                  <Td column="modifyDate" title={DateUtils.formatAbsolutely(process.modificationDate)} className="centered-column">{DateUtils.formatRelatively(process.modificationDate)}</Td>
                   <Td column="status" className="status-column">
                     <div
                       className={this.processStatusClass(process)}

ui/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "esp-ui-client",
+  "name": "nussknacker-ui",
   "version": "0.0.0",
   "description": "ESP UI - client",
   "main": "server.js",

ui/client/stylesheets/graph.styl

@@ -148,24 +148,25 @@ espCheckbox(checkboxWidth)
   font-size 14px
   font-weight 600
   height: modalHeaderHeight
-  min-width modalHeaderWidth
-  display inline-block
   span
     display inline-block
     margin-left 15px
     margin-top 3px
   span::after
     content: "\00a0\00a0"
   .docsIcon
+    height: modalHeaderHeight
     background-color modalBkgColor
-    margin-left 15px
     float right
     fill: docsIconColor
     svg
       width 26px
       height 26px
       &:hover
         fill: modalLabelTextColor
+.modal-title
+  min-width modalHeaderWidth
+  display inline-block
 
 common-node-input(padding)
   width: 100%