Merge pull request #2891 from asashour/qna-missing-translations

fix(qna): fix redirection and incorrect message

modules/qna/src/views/full/Editor/EditorModal.tsx

@@ -1,4 +1,5 @@
 import { Dialog } from '@blueprintjs/core'
+import { Flow } from 'botpress/sdk'
 import _ from 'lodash'
 import React, { FC } from 'react'
 
@@ -17,7 +18,7 @@ interface Props {
   categories: any
   bp: any
   flowsList: any
-  flows: any
+  flows: Flow[]
 }
 
 const EditorModal: FC<Props> = props => {

modules/qna/src/views/full/Editor/index.tsx

@@ -11,7 +11,7 @@ import Select from 'react-select'
 import style from '../style.scss'
 import QnaHint from '../QnaHint'
 
-const ACTIONS = {
+export const ACTIONS = {
   TEXT: 'text',
   REDIRECT: 'redirect',
   TEXT_REDIRECT: 'text_redirect'
@@ -59,7 +59,8 @@ export default class Editor extends Component<Props> {
       errorMessage: undefined,
       isText: true,
       isRedirect: false,
-      hasDuplicates: false
+      hasDuplicates: false,
+      isIncorrectRedirection: false
     }
   }
 
@@ -128,9 +129,18 @@ export default class Editor extends Component<Props> {
       redirectNode: isRedirect && !item.redirectNode.value
     }
     const hasDuplicates = this.isQuestionDuplicated()
+    const isIncorrectRedirection = !this.isValidRedirection()
 
-    this.setState({ invalidFields, hasDuplicates, errorMessage: undefined })
-    return some(invalidFields) || hasDuplicates
+    this.setState({ invalidFields, hasDuplicates, isIncorrectRedirection, errorMessage: undefined })
+    return some(invalidFields) || hasDuplicates || isIncorrectRedirection
+  }
+
+  isValidRedirection() {
+    if (!this.state.isRedirect) {
+      return true
+    }
+    const flow = _.find(this.props.flows, f => f.name === this.state.item.redirectFlow.value)
+    return flow && _.find(flow.nodes, n => n.name === this.state.item.redirectNode.value)
   }
 
   isQuestionDuplicated() {
@@ -180,7 +190,8 @@ export default class Editor extends Component<Props> {
 
   alertMessage() {
     const hasInvalidInputs = Object.values(this.state.invalidFields).find(Boolean)
-    const missingTranslations = this.props.isEditing && (!this.itemAnswers.length || !this.itemQuestions.length)
+    const missingTranslations =
+      this.props.isEditing && (!this.itemQuestions.length || (!this.itemAnswers.length && this.state.isText))
 
     return (
       <div>
@@ -189,6 +200,7 @@ export default class Editor extends Component<Props> {
         {this.state.hasDuplicates && <Callout intent={Intent.DANGER}>Duplicated questions aren't allowed.</Callout>}
         {this.state.errorMessage && <Callout intent={Intent.DANGER}>{this.state.errorMessage}</Callout>}
         {missingTranslations && <Callout intent={Intent.DANGER}>Missing translations</Callout>}
+        {this.state.isIncorrectRedirection && <Callout intent={Intent.DANGER}>Incorrect redirection</Callout>}
       </div>
     )
   }
@@ -283,7 +295,8 @@ export default class Editor extends Component<Props> {
                 fill={true}
                 rows={5}
                 className={classnames({
-                  qnaCategoryError: invalidFields.questions || this.state.hasDuplicates
+                  qnaCategoryError:
+                    invalidFields.questions || this.state.hasDuplicates || this.state.isIncorrectRedirection
                 })}
               />
             </FormGroup>
@@ -356,7 +369,7 @@ export default class Editor extends Component<Props> {
             <AccessControl resource="module.qna" operation="write">
               <Button
                 id="btn-submit"
-                text={isEditing ? 'Edit' : 'Save'}
+                text={isEditing ? 'Save' : 'Add'}
                 intent={Intent.PRIMARY}
                 onClick={this.handleSubmit}
               />

modules/qna/src/views/full/Item/RedirectInfo.tsx

@@ -1,26 +1,47 @@
+import { Icon, Intent, Tooltip } from '@blueprintjs/core'
+import { Flow } from 'botpress/sdk'
+import { getFlowLabel } from 'botpress/utils'
+import _ from 'lodash'
 import React, { FC } from 'react'
 
 import style from '../style.scss'
 
 interface Props {
+  id: string
   redirectFlow: string
   redirectNode: string
+  flows?: Flow[]
+  onEditItem: (id: string) => void
 }
 
-const RedirectInfo: FC<Props> = ({ redirectFlow, redirectNode }) => {
+const RedirectInfo: FC<Props> = ({ id, redirectFlow, redirectNode, flows, onEditItem }) => {
   if (!redirectFlow || !redirectNode) {
     return null
   }
 
-  const flowName = redirectFlow.replace('.flow.json', '')
+  const flowName = redirectFlow.replace(/\.flow\.json$/i, '')
   const flowBuilderLink = `/studio/${window.BOT_ID}/flows/${flowName}/#search:${redirectNode}`
+  let incorrectRedirection = false
+  if (flows) {
+    const flow = _.find(flows, f => f.name === redirectFlow)
+    incorrectRedirection = !flow || !_.find(flow.nodes, n => n.name === redirectNode)
+  }
 
   return (
     <React.Fragment>
-      <div className={style.itemRedirectTitle}>Redirect to:</div>
+      <div className={style.itemRedirectTitle}>
+        Redirect to:
+        {incorrectRedirection && (
+          <a onClick={() => onEditItem(id)}>
+            <Tooltip content="Incorrect redirection">
+              <Icon icon="warning-sign" intent={Intent.DANGER} />
+            </Tooltip>
+          </a>
+        )}
+      </div>
       <a href={flowBuilderLink}>
         <div className={style.itemFlow}>
-          Flow: <span className={style.itemFlowName}>{redirectFlow}</span>
+          Flow: <span className={style.itemFlowName}>{getFlowLabel(redirectFlow)}</span>
         </div>
         <div className={style.itemNode}>
           Node: <span className={style.itemNodeName}>{redirectNode}</span>

modules/qna/src/views/full/Item/index.tsx

@@ -1,9 +1,11 @@
 import { Button, Icon, Intent, Switch, Tooltip } from '@blueprintjs/core'
+import { Flow } from 'botpress/sdk'
 import { AccessControl } from 'botpress/utils'
 import cx from 'classnames'
 import React, { FC } from 'react'
 
 import style from '../style.scss'
+import { ACTIONS } from '../Editor'
 
 import RedirectInfo from './RedirectInfo'
 import Variations from './Variations'
@@ -12,6 +14,7 @@ interface Props {
   id: string
   item: any
   contentLang: string
+  flows?: Flow[]
   // Hides category and redirect info
   isVersion2?: boolean
   onEditItem: (id: string) => void
@@ -28,11 +31,12 @@ const Item: FC<Props> = props => {
 
   const questions = item.questions[contentLang] || []
   const answers = item.answers[contentLang] || []
+  const missingTranslations = !questions.length || (item.action !== ACTIONS.REDIRECT && !answers.length)
 
   return (
     <div className={cx(style.qnaItem, style.well)} key={id}>
       <div className={style.itemContainer} role="entry">
-        {!questions.length && (
+        {missingTranslations && (
           <div className={style.itemQuestions}>
             <a className={style.firstQuestionTitle} onClick={() => props.onEditItem(id)}>
               <Tooltip content="Missing translation">
@@ -48,7 +52,7 @@ const Item: FC<Props> = props => {
           </div>
         )}
 
-        {questions.length > 0 && (
+        {!missingTranslations && (
           <div className={style.itemQuestions}>
             <span className={style.itemQuestionsTitle}>Q:</span>
             <a className={style.firstQuestionTitle} onClick={() => props.onEditItem(id)}>
@@ -69,7 +73,13 @@ const Item: FC<Props> = props => {
         {!props.isVersion2 && (
           <div>
             <div className={style.itemRedirect}>
-              {<RedirectInfo redirectFlow={item.redirectFlow} redirectNode={item.redirectNode} />}
+              <RedirectInfo
+                id={props.id}
+                redirectFlow={item.redirectFlow}
+                redirectNode={item.redirectNode}
+                flows={props.flows}
+                onEditItem={props.onEditItem}
+              />
             </div>
           </div>
         )}

modules/qna/src/views/full/index.tsx

@@ -27,7 +27,7 @@ export default class QnaAdmin extends Component<Props> {
   state = {
     items: [],
     currentItemId: undefined,
-    flows: null,
+    flows: [],
     flowsList: [],
     filter: '',
     showBulkImport: undefined,
@@ -280,6 +280,7 @@ export default class QnaAdmin extends Component<Props> {
         key={id}
         id={id}
         item={data}
+        flows={this.state.flows}
         contentLang={this.props.contentLang}
         onEditItem={this.editItem(id)}
         onToggleItem={this.toggleEnableItem.bind(this)}