Merge pull request #1147 from botpress/ya-fix-ux

fix(ux): minor ajustments to different elements
botpress · Nov 21, 2018 · ad4f43d · ad4f43d
2 parents 55ba887 + e5c8471
commit ad4f43d
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 34 deletions.
diff --git a/modules/basic-skills/src/backend/choice.ts b/modules/basic-skills/src/backend/choice.ts
@@ -80,14 +80,14 @@ const createTransitions = data => {
     return {
       caption: `User picked [${choiceShort}]`,
       condition: `state['skill-choice-ret'] == "${choice}"`,
-      node: 'entry'
+      node: ''
     }
   })
 
   transitions.push({
     caption: 'On failure',
     condition: 'true',
-    node: 'entry'
+    node: ''
   })
 
   return transitions

diff --git a/modules/channel-web/src/backend/api.ts b/modules/channel-web/src/backend/api.ts
@@ -305,17 +305,17 @@ export default async (bp: SDK, db: Database) => {
     const { messages } = conversation
     const { result: user } = await bp.users.getOrCreateUser('web', conversation.userId)
     const timeFormat = 'MM/DD/YY HH:mm'
-
+    const fullName = `${user.attributes['first_name'] || ''} ${user.attributes['last_name'] || ''}`
     const metadata = `Title: ${conversation.title}\r\nCreated on: ${moment(conversation.created_on).format(
       timeFormat
-    )}\r\nUser: ${user.attributes.get('first_name')} ${user.attributes.get('last_name')}\r\n-----------------\r\n`
+    )}\r\nUser: ${fullName}\r\n-----------------\r\n`
 
     const messagesAsTxt = messages.map(message => {
       if (message.message_type === 'session_reset') {
         return ''
       }
-
-      return `[${moment(message.sent_on).format(timeFormat)}] ${message.full_name}: ${getMessageContent(message)}\r\n`
+      const userName = message.full_name.indexOf('undefined') > -1 ? 'User' : message.full_name
+      return `[${moment(message.sent_on).format(timeFormat)}] ${userName}: ${getMessageContent(message)}\r\n`
     })
 
     return [metadata, ...messagesAsTxt].join('')

diff --git a/modules/channel-web/src/backend/db.ts b/modules/channel-web/src/backend/db.ts
@@ -268,6 +268,7 @@ export default class WebchatDb {
     }
 
     return query
+      .whereNot({ message_type: 'visit' })
       .orderBy('sent_on', 'desc')
       .limit(20)
       .then()

diff --git a/modules/channel-web/src/views/web/index.jsx b/modules/channel-web/src/views/web/index.jsx
@@ -385,6 +385,10 @@ export default class Web extends React.Component {
   }
 
   handleSendMessage = () => {
+    if (!this.state.textToSend || !this.state.textToSend.length) {
+      return
+    }
+
     this.setState({
       messageHistory: _.take([this.state.textToSend, ...this.state.messageHistory], HISTORY_MAX_MESSAGES),
       historyPosition: HISTORY_STARTING_POINT

diff --git a/modules/channel-web/src/views/web/messages/quick_replies.jsx b/modules/channel-web/src/views/web/messages/quick_replies.jsx
@@ -11,7 +11,7 @@ class QuickReply extends Component {
     this.state = { hover: false }
   }
 
-  handleClick(event) {
+  handleClick = e => {
     this.props.onQuickReplySend && this.props.onQuickReplySend(this.props.title, this.props.payload)
   }
 
@@ -61,7 +61,7 @@ class QuickReply extends Component {
       <button
         className={style.bubble}
         style={{ color: this.props.fgColor, backgroundColor }}
-        onClick={::this.handleClick}
+        onClick={this.handleClick}
         onMouseOver={() => this.setState({ hover: true })}
         onMouseOut={() => this.setState({ hover: false })}
       >
@@ -76,7 +76,7 @@ const QuickReplies = props => {
     return null
   }
 
-  const quick_replies = props.quick_replies.map(qr => <QuickReply {...props} {...qr} />)
+  const quick_replies = props.quick_replies.map((qr, idx) => <QuickReply key={idx} {...props} {...qr} />)
 
   return <div className={style.quickReplyContainer}>{quick_replies}</div>
 }

diff --git a/modules/nlu/src/views/index.jsx b/modules/nlu/src/views/index.jsx
@@ -192,9 +192,14 @@ export default class Module extends React.Component {
                     onChange={this.onFilterChanged}
                   />
                 </p>
-                <Checkbox checked={this.state.showHiddenIntents} onChange={this.toggleShowHiddenIntents}>
-                  Show hidden intents
-                </Checkbox>
+                <span className={style.checkboxContainer}>
+                  <Checkbox
+                    id="showHidden"
+                    checked={this.state.showHiddenIntents}
+                    onChange={this.toggleShowHiddenIntents}
+                  />
+                  <label htmlFor="showHidden">Show hidden intents</label>
+                </span>
               </div>
               <div className={style.list}>{this.renderCategory()}</div>
             </nav>

diff --git a/modules/nlu/src/views/style.scss b/modules/nlu/src/views/style.scss
@@ -42,8 +42,9 @@ footer {
       padding: 5px;
       font-size: 14px;
     }
-    .checkbox input {
-      width: auto;
+
+    .checkboxContainer {
+      display: flex;
     }
   }
 

diff --git a/modules/qna/src/views/FormModal.jsx b/modules/qna/src/views/FormModal.jsx
@@ -201,8 +201,13 @@ export default class FormModal extends Component {
               <span className={style.qnaReplyTitle}>Reply with:</span>
               <div className={style.qnaAnswer}>
                 <span className={style.qnaAnswerCheck}>
-                  <input type="checkbox" checked={this.state.isText} onChange={this.changeItemAction('isText')} />
-                  &nbsp; Type your answer
+                  <input
+                    id="reply"
+                    type="checkbox"
+                    checked={this.state.isText}
+                    onChange={this.changeItemAction('isText')}
+                  />
+                  <label htmlFor="reply">&nbsp; Type your answer</label>
                 </span>
                 <FormControl
                   className={classnames(style.qnaAnswerTextarea, {
@@ -222,12 +227,13 @@ export default class FormModal extends Component {
                 <div className={style.qnaRedirectToFlow}>
                   <span className={style.qnaRedirectToFlowCheck}>
                     <input
+                      id="redirect"
                       type="checkbox"
                       checked={this.state.isRedirect}
                       onChange={this.changeItemAction('isRedirect')}
                       className={style.qnaRedirectToFlowCheckCheckbox}
                     />
-                    &nbsp;Redirect to flow
+                    <label htmlFor="redirect">&nbsp;Redirect to flow</label>
                   </span>
                   <Select
                     className={classnames(style.qnaRedirectToFlowCheckSelect, {

diff --git a/modules/qna/src/views/index.jsx b/modules/qna/src/views/index.jsx
@@ -79,9 +79,10 @@ export default class QnaAdmin extends Component {
 
   fetchCategories() {
     this.props.bp.axios.get('/mod/qna/categories').then(({ data: { categories } }) => {
-      const categoryOptions = categories.map(category => ({ label: category, value: category }))
-
-      this.setState({ categoryOptions })
+      if (categories) {
+        const categoryOptions = categories.map(category => ({ label: category, value: category }))
+        this.setState({ categoryOptions })
+      }
     })
   }
 
@@ -310,7 +311,7 @@ export default class QnaAdmin extends Component {
     const isRedirect = item.redirectFlow && item.redirectNode
 
     return (
-      <Well className={style.qnaItem} bsSize="small">
+      <Well className={style.qnaItem} bsSize="small" key={id}>
         <div className={style.itemContainer}>
           <div className={style.itemQuestions}>
             <span className={style.itemQuestionsTitle}>Q: </span>

diff --git a/src/bp/ui-studio/src/web/components/Content/Select/index.js b/src/bp/ui-studio/src/web/components/Content/Select/index.js
@@ -13,7 +13,7 @@ import axios from 'axios'
 
 const style = require('./style.scss')
 
-const SEARCH_RESULTS_LIMIT = 5
+const SEARCH_RESULTS_LIMIT = 10
 
 const formSteps = {
   INITIAL: 0,

diff --git a/src/bp/ui-studio/src/web/img/grid.png b/src/bp/ui-studio/src/web/img/grid.png
diff --git a/src/bp/ui-studio/src/web/views/Content/List/index.js b/src/bp/ui-studio/src/web/views/Content/List/index.js
@@ -105,7 +105,7 @@ export default class ListView extends Component {
       <tr className={className} key={i}>
         {!this.props.readOnly && (
           <td style={{ width: '2%', minWidth: '34px' }}>
-            <Checkbox checked={checked} onClick={() => this.handleCheckboxChanged(m.id, m.contentType)} />
+            <Checkbox checked={checked} onChange={() => this.handleCheckboxChanged(m.id, m.contentType)} />
           </td>
         )}
         <td style={{ width: '16%' }}>{'#!' + m.id}</td>
@@ -159,7 +159,7 @@ export default class ListView extends Component {
       <span>
         {!this.props.readOnly && (
           <Button onClick={this.handleAllCheckedChanged}>
-            <Checkbox checked={this.state.allChecked} onClick={this.handleAllCheckedChanged} />
+            <Checkbox checked={this.state.allChecked} onChange={this.handleAllCheckedChanged} />
           </Button>
         )}
         <Button onClick={this.props.handleRefresh} title="Refresh">

diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.jsx b/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.jsx
@@ -467,7 +467,7 @@ export default class FlowBuilder extends Component {
       this.copySelectedElementToBuffer()
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
       this.pasteElementFromBuffer()
-    } else if (event.code === 'Backspace') {
+    } else if (event.code === 'Backspace' || event.code === 'Delete') {
       this.deleteSelectedElements()
     }
   }

diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/nodeProps/ConditionModalForm.jsx b/src/bp/ui-studio/src/web/views/FlowBuilder/nodeProps/ConditionModalForm.jsx
@@ -46,7 +46,8 @@ export default class ConditionModalForm extends Component {
     this.setState({
       typeOfTransition: type,
       flowToSubflow: this.state.flowToSubflow || _.get(subflowOptions, '[0].value'),
-      flowToNode: this.state.flowToNode || _.get(nodeOptions, '[0].value')
+      flowToNode: this.state.flowToNode || _.get(nodeOptions, '[0].value'),
+      transitionError: null
     })
   }
 
@@ -59,14 +60,6 @@ export default class ConditionModalForm extends Component {
       return false
     }
 
-    if (this.state.typeOfTransition === 'node' && !this.state.flowToNode && this.getNodeOptions().length > 0) {
-      this.setState({
-        transitionError: 'You must select a subflow to transition to'
-      })
-
-      return false
-    }
-
     if (_.isEmpty(this.state.condition)) {
       this.setState({
         conditionError: 'Specify a condition'