fix(ui): no model warning in debugger only appears when there's no mo…

…del (#257) * fix(ui): fix react warnings in chrome console + add typings * fix(ui): no model warning in debugger only appears when there's no model
botpress · Jan 28, 2022 · f66369f · f66369f
1 parent 1fe38d5
commit f66369f
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/components/Settings.tsx b/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/components/Settings.tsx
@@ -25,8 +25,8 @@ const Settings = () => {
 
       const parsed = JSON.parse(payload)
 
-      setUserId(parsed.userId)
-      setExternalAuthToken(parsed.externalAuthToken)
+      setUserId(parsed.userId ?? '')
+      setExternalAuthToken(parsed.externalAuthToken ?? '')
     }
   }
 
@@ -53,7 +53,7 @@ const Settings = () => {
         >
           <InputGroup
             value={userId}
-            onChange={e => setUserId(e.currentTarget.value)}
+            onChange={e => setUserId(e.currentTarget.value ?? '')}
             placeholder={lang.tr('bottomPanel.debugger.settings.userIdPlaceholder')}
           />
         </FormGroup>
@@ -63,7 +63,7 @@ const Settings = () => {
         >
           <InputGroup
             value={externalAuthToken}
-            onChange={e => setExternalAuthToken(e.currentTarget.value)}
+            onChange={e => setExternalAuthToken(e.currentTarget.value ?? '')}
             placeholder={lang.tr('bottomPanel.debugger.settings.authTokenPlaceholder')}
           />
         </FormGroup>

diff --git a/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/index.tsx b/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/index.tsx
@@ -6,7 +6,6 @@ import { lang, ToolTip } from 'botpress/shared'
 import cx from 'classnames'
 import _ from 'lodash'
 import ms from 'ms'
-import nanoid from 'nanoid'
 import React, { Fragment } from 'react'
 import { connect } from 'react-redux'
 import '@botpress/ui-shared/dist/theme.css'
@@ -82,7 +81,7 @@ export class Debugger extends React.Component<Props, State> {
     }
   }
 
-  async componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps: Props) {
     if (prevProps.messageId !== this.props.messageId) {
       await this.loadEvent(this.props.messageId)
     }
@@ -215,9 +214,7 @@ export class Debugger extends React.Component<Props, State> {
           id="basic"
           title={lang.tr('summary')}
           className={btStyle.tab}
-          panel={
-            <Fragment>{this.state.event ? <Summary event={this.state.event} /> : this.renderWhenNoEvent()}</Fragment>
-          }
+          panel={<Fragment>{hasEvent ? <Summary event={this.state.event} /> : this.renderWhenNoEvent()}</Fragment>}
         />
         {ndu && <Tab id="ndu" title="NDU" className={btStyle.tab} panel={<NDU ndu={ndu} />} />}
         {hasEvent && this.renderProcessingTab()}

diff --git a/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/NLU.tsx b/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/NLU.tsx
@@ -20,7 +20,7 @@ const NLU: FC<{ nluData: sdk.IO.EventUnderstanding; session: any }> = ({ nluData
     <Fragment>
       <ContentSection title={lang.tr('bottomPanel.debugger.nlu.languageUnderstanding')} className={style.section}>
         <div>
-          {!nluData?.modelId?.length && (
+          {!nluData.modelId && (
             <span style={{ color: Colors.RED3 }}>
               <Icon icon="warning-sign" color={Colors.RED3} />
               <strong>&nbsp;{lang.tr('bottomPanel.debugger.nlu.noModel')}</strong>

diff --git a/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/Processing.tsx b/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/Processing.tsx
@@ -1,4 +1,4 @@
-import { Icon, ProgressBar, Tooltip } from '@blueprintjs/core'
+import { Icon } from '@blueprintjs/core'
 import sdk from 'botpress/sdk'
 import { ContentSection, lang, ToolTip } from 'botpress/shared'
 import cx from 'classnames'
@@ -9,12 +9,29 @@ import React, { FC, Fragment, useState } from 'react'
 import bpStyle from '../../style.scss'
 import style from '../style.scss'
 
+interface Element {
+  execTime: number
+  logs?: string[]
+  errors?: sdk.IO.EventError[]
+  date?: Date
+  type: string
+  name: string
+  status: string
+  completed: moment.Moment
+}
+
+interface ProcessedElement {
+  type: string
+  name: string
+  subItems: Element[]
+}
+
 export const Processing: FC<{ processing: { [activity: string]: sdk.IO.ProcessingEntry } }> = props => {
   const [expanded, setExpanded] = useState({})
   const { processing } = props
   let isBeforeMW = true
 
-  const elements = Object.keys(processing)
+  const elements: Element[] = Object.keys(processing)
     .map(key => {
       const [type, name, status] = key.split(':')
       return { type, name, status, completed: moment(processing[key].date), ...processing[key] }
@@ -46,15 +63,15 @@ export const Processing: FC<{ processing: { [activity: string]: sdk.IO.Processin
       acc = acc.concat({ type: item.type, name, subItems: [item] })
     }
     return acc
-  }, [])
+  }, [] as ProcessedElement[])
 
-  const renderToggleItem = (item, key) => {
+  const renderToggleItem = (item: Element, key: string) => {
     const isExpanded = expanded[key]
     const hasError = item.status === 'error' || !!item.errors?.length
     const hasLog = !!item.logs?.length
 
     return (
-      <Fragment>
+      <Fragment key={key}>
         <ToolTip content={lang.tr('bottomPanel.debugger.processing.executedIn', { n: item.execTime || 0 })}>
           <button className={style.itemButton} onClick={() => setExpanded({ ...expanded, [key]: !isExpanded })}>
             <Icon className={style.itemButtonIcon} icon={isExpanded ? 'chevron-down' : 'chevron-right'} iconSize={10} />
@@ -90,7 +107,7 @@ export const Processing: FC<{ processing: { [activity: string]: sdk.IO.Processin
     )
   }
 
-  const renderItem = (item, key) => {
+  const renderItem = (item: Element, key: string) => {
     const hasError = item.status === 'error' || !!item.errors?.length
     const hasLog = !!item.logs?.length
 
@@ -99,7 +116,7 @@ export const Processing: FC<{ processing: { [activity: string]: sdk.IO.Processin
     }
 
     return (
-      <ToolTip content={lang.tr('bottomPanel.debugger.processing.executedIn', { n: item.execTime || 0 })}>
+      <ToolTip key={key} content={lang.tr('bottomPanel.debugger.processing.executedIn', { n: item.execTime || 0 })}>
         <div className={style.processingItemName}>{item.name}</div>
       </ToolTip>
     )
@@ -109,24 +126,25 @@ export const Processing: FC<{ processing: { [activity: string]: sdk.IO.Processin
     const width = 600
     const total = _.sumBy(elements, 'execTime')
 
-    const renderItem = item => {
-      const adjustedWidth = (item.execTime / total) * width
+    const renderItem = (item: Element, key: string) => {
+      let adjustedWidth = (item.execTime / total) * width
+      adjustedWidth = isNaN(adjustedWidth) ? 0 : adjustedWidth
       return (
-        <Tooltip content={`${item.name || item.type} | ${item.execTime}ms`}>
+        <ToolTip key={key} content={`${item.name || item.type} | ${item.execTime}ms`}>
           <div
             className={cx(style.item, {
               [style.ok]: item.status !== 'error',
               [style.error]: item.status === 'error'
             })}
             style={{ width: adjustedWidth }}
-          ></div>
-        </Tooltip>
+          />
+        </ToolTip>
       )
     }
 
     return (
       <div className={style.bar}>
-        {elements.map(x => renderItem(x))} ({total}ms)
+        {elements.map((x, idx) => renderItem(x, `${idx}`))} ({total}ms)
       </div>
     )
   }
@@ -141,7 +159,7 @@ export const Processing: FC<{ processing: { [activity: string]: sdk.IO.Processin
           <Fragment key={index}>
             {!item.subItems}
             <div className={cx(style.processingItem, style.processingSection)}>
-              {!hasChildren && renderItem({ ...item.subItems?.[0], name: item.name }, index)}
+              {!hasChildren && renderItem({ ...item.subItems?.[0], name: item.name }, `${index}`)}
               {!!hasChildren && item.name}
             </div>
             {!!hasChildren && (

diff --git a/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/Summary.tsx b/packages/studio-ui/src/web/components/Layout/BottomPanel/Debugger/views/Summary.tsx
@@ -37,6 +37,10 @@ export default class Summary extends React.Component<Props> {
       return null
     }
 
+    if (!this.props.event.processing?.completed) {
+      return null
+    }
+
     return (
       <div className={style.sectionContainer}>
         <Dialog