From 2aec43918880859f20f2ff6cf34f85dc7097f789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Pi=C4=99del?= Date: Fri, 18 Oct 2019 06:52:31 +0200 Subject: [PATCH] Display user-relative date , disable pdf/undo/redo buttons when needed, change pdf icon, rename some labels --- ui/client/assets/icons/InlinedSvgs.js | 4 +++- ui/client/assets/img/book.svg | 4 ---- ui/client/assets/img/documentation.svg | 8 ++++++++ ui/client/common/DateUtils.js | 18 +++++++++++------- ui/client/common/ProcessUtils.js | 5 +++++ ui/client/components/ProcessAttachments.js | 2 +- ui/client/components/ProcessComments.js | 2 +- ui/client/components/ProcessHistory.js | 4 ++-- ui/client/components/graph/NodeDetailsModal.js | 10 ++++++---- .../components/modals/CompareVersionsDialog.js | 5 ++--- .../components/right-panel/UserRightPanel.js | 13 ++++++++----- ui/client/config.js | 2 ++ ui/client/containers/Archive.js | 2 +- ui/client/containers/Processes.js | 4 ++-- ui/client/containers/SubProcesses.js | 2 +- ui/client/containers/admin/CustomProcesses.js | 2 +- ui/client/package-lock.json | 2 +- ui/client/package.json | 2 +- ui/client/stylesheets/graph.styl | 7 ++++--- 19 files changed, 60 insertions(+), 38 deletions(-) delete mode 100644 ui/client/assets/img/book.svg create mode 100644 ui/client/assets/img/documentation.svg diff --git a/ui/client/assets/icons/InlinedSvgs.js b/ui/client/assets/icons/InlinedSvgs.js index 9d3f5011438..0a821155ce8 100644 --- a/ui/client/assets/icons/InlinedSvgs.js +++ b/ui/client/assets/icons/InlinedSvgs.js @@ -60,4 +60,6 @@ InlinedSvgs.buttonCounts = ` ` -InlinedSvgs.compareButton = ` ` \ No newline at end of file +InlinedSvgs.compareButton = ` ` + +InlinedSvgs.pdf = ` ` \ No newline at end of file diff --git a/ui/client/assets/img/book.svg b/ui/client/assets/img/book.svg deleted file mode 100644 index add694e9eeb..00000000000 --- a/ui/client/assets/img/book.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/ui/client/assets/img/documentation.svg b/ui/client/assets/img/documentation.svg new file mode 100644 index 00000000000..c0da51b6183 --- /dev/null +++ b/ui/client/assets/img/documentation.svg @@ -0,0 +1,8 @@ + + + documentation + + + \ No newline at end of file diff --git a/ui/client/common/DateUtils.js b/ui/client/common/DateUtils.js index 9f4d9703532..56ed98ae17c 100644 --- a/ui/client/common/DateUtils.js +++ b/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) - } - -} \ No newline at end of file +export default new DateUtils() \ No newline at end of file diff --git a/ui/client/common/ProcessUtils.js b/ui/client/common/ProcessUtils.js index 893fb02861d..3d47a8befe7 100644 --- a/ui/client/common/ProcessUtils.js +++ b/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}` } diff --git a/ui/client/components/ProcessAttachments.js b/ui/client/components/ProcessAttachments.js index b3371fcad5b..8bec66447f9 100644 --- a/ui/client/components/ProcessAttachments.js +++ b/ui/client/components/ProcessAttachments.js @@ -50,7 +50,7 @@ export class ProcessAttachments_ extends React.Component {
{attachment.user} - {DateUtils.format(attachment.createDate)} + {DateUtils.formatRelatively(attachment.createDate)}

{ProcessUtils.processDisplayName(attachment.processId, attachment.processVersionId)}

{attachment.fileName}

diff --git a/ui/client/components/ProcessComments.js b/ui/client/components/ProcessComments.js index 8e13ed49657..6a5e8e2e827 100644 --- a/ui/client/components/ProcessComments.js +++ b/ui/client/components/ProcessComments.js @@ -51,7 +51,7 @@ class ProcessComments extends React.Component { return (
- {DateUtils.format(comment.createDate)} + {DateUtils.formatRelatively(comment.createDate)} v{comment.processVersionId} ({comment.user}) {comment.user == this.props.loggedUser.id ? diff --git a/ui/client/components/ProcessHistory.js b/ui/client/components/ProcessHistory.js index dd6aa895ace..ef4a2d31831 100644 --- a/ui/client/components/ProcessHistory.js +++ b/ui/client/components/ProcessHistory.js @@ -78,10 +78,10 @@ export class ProcessHistory_ extends Component { null }
- {DateUtils.format(historyEntry.createDate)} + {DateUtils.formatRelatively(historyEntry.createDate)}
{historyEntry.deployments.map((deployment, index) => - {DateUtils.format(deployment.deployedAt)} {deployment.environment} + {DateUtils.formatRelatively(deployment.deployedAt)} {deployment.environment} )} ) diff --git a/ui/client/components/graph/NodeDetailsModal.js b/ui/client/components/graph/NodeDetailsModal.js index f8929ac4044..a6ea95f9230 100644 --- a/ui/client/components/graph/NodeDetailsModal.js +++ b/ui/client/components/graph/NodeDetailsModal.js @@ -159,7 +159,7 @@ class NodeDetailsModal extends React.Component { const docsUrl = this.props.nodeSetting.docsUrl return docsUrl ? - + : null } @@ -169,7 +169,7 @@ 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 @@ -177,8 +177,10 @@ class NodeDetailsModal extends React.Component { return (
-
- {modelHeader} +
+
+ {modelHeader} +
{this.renderDocumentationIcon()}
diff --git a/ui/client/components/modals/CompareVersionsDialog.js b/ui/client/components/modals/CompareVersionsDialog.js index 3e85e875a19..d42ff620844 100644 --- a/ui/client/components/modals/CompareVersionsDialog.js +++ b/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 ( ) + {this.versionDisplayString(versionId)} - created by {version.user}   {DateUtils.formatAbsolutely(version.createDate)}) } render() { diff --git a/ui/client/components/right-panel/UserRightPanel.js b/ui/client/components/right-panel/UserRightPanel.js index 8aee5796933..8124f876728 100644 --- a/ui/client/components/right-panel/UserRightPanel.js +++ b/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 }; } diff --git a/ui/client/config.js b/ui/client/config.js index 1a215dd9f6c..68f397bccc2 100644 --- a/ui/client/config.js +++ b/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 } \ No newline at end of file diff --git a/ui/client/containers/Archive.js b/ui/client/containers/Archive.js index daed3b65774..c24b8035360 100644 --- a/ui/client/containers/Archive.js +++ b/ui/client/containers/Archive.js @@ -112,7 +112,7 @@ class Archive extends BaseProcesses { - {DateUtils.format(process.modificationDate)} + {DateUtils.formatRelatively(process.modificationDate)} {process.processCategory} - {DateUtils.format(process.modificationDate)} + {DateUtils.formatRelatively(process.modificationDate)}
{process.name} {process.processCategory} - {DateUtils.format(process.modificationDate)} + {DateUtils.formatRelatively(process.modificationDate)} diff --git a/ui/client/containers/admin/CustomProcesses.js b/ui/client/containers/admin/CustomProcesses.js index d0aedb5412e..ea086e6605c 100644 --- a/ui/client/containers/admin/CustomProcesses.js +++ b/ui/client/containers/admin/CustomProcesses.js @@ -93,7 +93,7 @@ class CustomProcesses extends BaseProcesses { {process.name} {process.processCategory} - {DateUtils.format(process.modificationDate)} + {DateUtils.formatRelatively(process.modificationDate)}