Merge pull request #1991 from botpress/ya-fix-shortcuts

fix(shortcuts): better ux with shortcuts & standardized mac/win

src/bp/ui-studio/src/web/components/Layout/index.tsx

@@ -28,6 +28,7 @@ interface ILayoutProps {
   docHints: any
   updateDocumentationModal: any
   location: any
+  history: any
 }
 
 class Layout extends React.Component<ILayoutProps> {
@@ -74,15 +75,17 @@ class Layout extends React.Component<ILayoutProps> {
     window.botpressWebChat.sendEvent({ type: 'hide' })
   }
 
-  toggleDocs = () => {
+  toggleDocs = e => {
+    e.preventDefault()
     if (this.props.docModal) {
       this.props.updateDocumentationModal(null)
     } else if (this.props.docHints.length) {
       this.props.updateDocumentationModal(this.props.docHints[0])
     }
   }
 
-  toggleLangSwitcher = () => {
+  toggleLangSwitcher = e => {
+    e.preventDefault()
     if (!isInputFocused()) {
       const langSwitcherOpen = !this.state.langSwitcherOpen
       this.setState({ langSwitcherOpen }, () => {
@@ -100,6 +103,11 @@ class Layout extends React.Component<ILayoutProps> {
     }
   }
 
+  gotoUrl = url => {
+    this.props.history.push(url)
+    this.focusMain()
+  }
+
   render() {
     if (this.props.viewMode < 0) {
       return null
@@ -109,7 +117,15 @@ class Layout extends React.Component<ILayoutProps> {
       'emulator-focus': this.focusEmulator,
       cancel: this.closeEmulator,
       'docs-toggle': this.toggleDocs,
-      'lang-switcher': this.toggleLangSwitcher
+      'lang-switcher': this.toggleLangSwitcher,
+      'go-flow': () => this.gotoUrl('/flows'),
+      'go-content': () => this.gotoUrl('/content'),
+      'go-module-code': () => this.gotoUrl('/modules/code-editor'),
+      'go-module-qna': () => this.gotoUrl('/modules/qna'),
+      'go-module-testing': () => this.gotoUrl('/modules/testing'),
+      'go-module-analytics': () => this.gotoUrl('/modules/analytics'),
+      'go-module-nlu-intent': () => this.gotoUrl('/modules/nlu/Intents'),
+      'go-module-nlu-entities': () => this.gotoUrl('/modules/nlu/Entities')
     }
 
     return (

src/bp/ui-studio/src/web/keyboardShortcuts.js

@@ -1,6 +1,5 @@
 const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
-
-const navigationKey = isMac ? 'ctrl' : 'ctrl+shift'
+const controlKey = isMac ? 'command' : 'ctrl'
 
 export const keyMap = {
   // Navigation to screens
@@ -10,16 +9,24 @@ export const keyMap = {
   // 'go-content': 'g c',
   // 'go-emulator': 'g e',
   // 'go-module-qna': 'g m q',
-
-  // Flow-Editor Actions
-  'flow-add-node': `${navigationKey}+a`,
-  'flow-save': `${navigationKey}+s`,
+  add: `${controlKey}+a`,
+  save: `${controlKey}+s`,
+  undo: `${controlKey}+z`,
+  redo: `${controlKey}+shift+z`,
   'emulator-focus': `e`,
-  'docs-toggle': `${navigationKey}+h`,
-  'lang-switcher': `${navigationKey}+l`,
-  'toggle-sidepanel': `ctrl+b`,
-  'create-new': `ctrl+alt+n`,
-  cancel: 'esc'
+  'docs-toggle': `${controlKey}+h`,
+  'lang-switcher': `${controlKey}+l`,
+  'toggle-sidepanel': `${controlKey}+b`,
+  'create-new': `${controlKey}+alt+n`,
+  cancel: 'esc',
+  'go-flow': `g f`,
+  'go-content': `g c`,
+  'go-module-code': `g m c`,
+  'go-module-qna': `g m q`,
+  'go-module-testing': `g m t`,
+  'go-module-analytics': 'g m a',
+  'go-module-nlu-intent': `g i`,
+  'go-module-nlu-entities': `g e`
 }
 
 export const isInputFocused = () => {

src/bp/ui-studio/src/web/views/FlowBuilder/index.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
-import { setDiagramAction, switchFlow } from '~/actions'
+import { flowEditorRedo, flowEditorUndo, setDiagramAction, switchFlow } from '~/actions'
 import { operationAllowed } from '~/components/Layout/PermissionsChecker'
 import { Container } from '~/components/Shared/Interface'
 import DocumentationProvider from '~/components/Util/DocumentationProvider'
@@ -77,8 +77,22 @@ class FlowBuilder extends Component<Props, State> {
     const { readOnly } = this.state
 
     const keyHandlers = {
-      'flow-add-node': () => this.props.setDiagramAction('insert_node'),
-      'flow-save': () => this.diagram.saveAllFlows()
+      add: e => {
+        e.preventDefault()
+        this.props.setDiagramAction('insert_node')
+      },
+      save: e => {
+        e.preventDefault()
+        this.diagram.saveAllFlows()
+      },
+      undo: e => {
+        e.preventDefault()
+        this.props.flowEditorUndo()
+      },
+      redo: e => {
+        e.preventDefault()
+        this.props.flowEditorRedo()
+      }
     }
 
     return (
@@ -135,7 +149,9 @@ const mapStateToProps = (state: RootReducer) => ({
 
 const mapDispatchToProps = {
   switchFlow,
-  setDiagramAction
+  setDiagramAction,
+  flowEditorUndo,
+  flowEditorRedo
 }
 
 export default connect(
@@ -150,6 +166,8 @@ type Props = {
   user: UserReducer
   setDiagramAction: any
   switchFlow: any
+  flowEditorUndo: any
+  flowEditorRedo: any
 } & RouteComponentProps
 
 interface State {

src/bp/ui-studio/src/web/views/FlowBuilder/toolbar.tsx

@@ -46,7 +46,8 @@ const FlowToolbar = props => {
 
   const hasUnsavedChanges = !_.isEmpty(props.dirtyFlows)
   const isInsertNodeMode = props.currentDiagramAction === 'insert_node'
-  const canDelete = !!props.currentFlowNode && props.currentFlowNode.name !== props.currentFlow.startNode
+
+  const isStartNode = props.currentFlowNode && props.currentFlowNode.name === props.currentFlow.startNode
   const canCopy = !!props.currentFlowNode
 
   return (
@@ -90,17 +91,13 @@ const FlowToolbar = props => {
 
         <Divider />
 
-        {canMakeStartNode() && (
-          <Tooltip content="Set as Start node" position={Position.BOTTOM}>
-            <AnchorButton icon="star" onClick={setAsCurrentNode} />
-          </Tooltip>
-        )}
-
-        {canDelete && (
-          <Tooltip content="Delete" position={Position.BOTTOM}>
-            <AnchorButton icon="trash" onClick={props.onDelete} />
-          </Tooltip>
-        )}
+        <Tooltip content="Set as Start node" position={Position.BOTTOM}>
+          <AnchorButton icon="star" disabled={!canMakeStartNode()} onClick={setAsCurrentNode} />
+        </Tooltip>
+
+        <Tooltip content="Delete" position={Position.BOTTOM}>
+          <AnchorButton icon="trash" disabled={isStartNode} onClick={props.onDelete} />
+        </Tooltip>
       </LeftToolbarButtons>
     </Toolbar>
   )