feat(studio): adds guided tour button to top (#227)

* Removes need to catch analytics errors * Missing help button becomes Guided Tour trigger Co-authored-by: Samuel Massé <samuelmasse4@gmail.com>
botpress · Feb 3, 2022 · 8c0d57f · 8c0d57f
1 parent e15f83e
commit 8c0d57f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 15 deletions.
diff --git a/packages/studio-ui/src/web/components/Layout/GuidedTour.tsx b/packages/studio-ui/src/web/components/Layout/GuidedTour.tsx
@@ -2,6 +2,7 @@ import { Button } from '@blueprintjs/core'
 import { utils } from 'botpress/shared'
 import React from 'react'
 import Tour from 'reactour'
+import { trackEvent } from '~/util/InjectSegment'
 
 // Change this key to display the tour the next time a user opens Botpress
 const TOUR_KEY = 'guidedTour11_9_0'
@@ -23,16 +24,32 @@ export default class GuidedTour extends React.Component<Props> {
     console.error('Error while processing guided tour', error)
   }
 
+  getCurrentStep = (current_step: number) => {
+    trackEvent('general_tour_step', { current_step })
+  }
+
+  onAfterOpen = () => {
+    trackEvent('general_tour_open')
+  }
+
+  onRequestClose = () => {
+    trackEvent('general_tour_close')
+    this.props.onToggle()
+  }
+
   render() {
     const steps = [
       {
         selector: '',
         content: 'Welcome to Botpress! This is a quick tour of the most important features.'
       },
+      {
+        selector: '#statusbar_tutorial',
+        content: 'You can re-open the tutorial at any time by clicking this button.'
+      },
       {
         selector: '#bp-menu_flows',
-        content:
-          'The Flows screen is the main interface where you can see and edit your conversation flows.'
+        content: 'The Flows screen is the main interface where you can see and edit your conversation flows.'
       },
       {
         selector: '#bp-menu_nlu',
@@ -45,25 +62,31 @@ export default class GuidedTour extends React.Component<Props> {
       },
       {
         selector: '#statusbar_emulator',
-        content:
-          'Use the emulator to try out your bot at any time! You can also use it to troubleshoot.'
+        content: 'Use the emulator to try out your bot at any time! You can also use it to troubleshoot.'
       },
       {
         selector: '#bp-menu_admin',
         content: 'Finally, this button will allow you to return to the administration panel or switch bot.'
       },
       {
         selector: '',
-        content: 'All done. Enjoy building bots! For more information, please refer to the guide on botpress.com/docs'
+        content: 'All done. Enjoy building bots! For more information, please refer to the guides on botpress.com/docs'
       }
     ]
 
+    // resets tutorial to first step when re-opened
+    if (!this.props.isDisplayed) {
+      return null
+    }
+
     return (
       <Tour
         steps={steps}
         isOpen={this.props.isDisplayed}
-        onRequestClose={this.props.onToggle}
+        onRequestClose={this.onRequestClose}
+        onAfterOpen={this.onAfterOpen}
         showNumber={false}
+        getCurrentStep={this.getCurrentStep}
       />
     )
   }

diff --git a/packages/studio-ui/src/web/components/Layout/Toolbar/index.tsx b/packages/studio-ui/src/web/components/Layout/Toolbar/index.tsx
@@ -13,6 +13,7 @@ interface OwnProps {
   isEmulatorOpen: boolean
   hasDoc: boolean
   toggleDocs: () => void
+  toggleGuidedTour: () => void
   toggleBottomPanel: () => void
   onToggleEmulator: () => void
 }
@@ -22,7 +23,7 @@ type StateProps = ReturnType<typeof mapStateToProps>
 type Props = StateProps & OwnProps
 
 const Toolbar: FC<Props> = props => {
-  const { toggleDocs, hasDoc, onToggleEmulator, isEmulatorOpen, toggleBottomPanel } = props
+  const { toggleDocs, toggleGuidedTour, hasDoc, onToggleEmulator, isEmulatorOpen, toggleBottomPanel } = props
 
   return (
     <header className={style.toolbar}>
@@ -37,7 +38,7 @@ const Toolbar: FC<Props> = props => {
           </Tooltip>
         )}
         <div>
-          {!!hasDoc && (
+          {!!hasDoc ? (
             <Fragment>
               <Tooltip
                 content={
@@ -51,9 +52,18 @@ const Toolbar: FC<Props> = props => {
               >
                 <button className={style.item} onClick={toggleDocs}>
                   <Icon color="#1a1e22" icon="help" iconSize={16} />
+                  <span className={style.label}>{lang.tr('toolbar.help')}</span>
+                </button>
+              </Tooltip>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <Tooltip content={<div>{lang.tr('toolbar.help')}</div>}>
+                <button id="statusbar_tutorial" className={style.item} onClick={toggleGuidedTour}>
+                  <Icon color="#1a1e22" icon="help" iconSize={16} />
+                  <span className={style.label}>{lang.tr('toolbar.tutorial')}</span>
                 </button>
               </Tooltip>
-              <span className={style.divider}></span>
             </Fragment>
           )}
           <AccessControl resource="bot.logs" operation="read">
@@ -69,13 +79,14 @@ const Toolbar: FC<Props> = props => {
             >
               <button className={style.item} id="toggle-bottom-panel" onClick={toggleBottomPanel}>
                 <Icon color="#1a1e22" icon="console" iconSize={16} />
+                <span className={style.label}>{lang.tr('toolbar.bottomPanel')}</span>
               </button>
             </Tooltip>
           </AccessControl>
           {window.IS_BOT_MOUNTED && (
             <Tooltip content={<ShortcutLabel light shortcut="emulator-focus" />}>
               <button
-                className={classNames(style.item, style.itemSpacing, { [style.active]: isEmulatorOpen })}
+                className={classNames(style.item, { [style.active]: isEmulatorOpen })}
                 onClick={onToggleEmulator}
                 id="statusbar_emulator"
               >

diff --git a/packages/studio-ui/src/web/components/Layout/index.tsx b/packages/studio-ui/src/web/components/Layout/index.tsx
@@ -197,6 +197,7 @@ const Layout: FC<Props> = (props: Props) => {
           <Toolbar
             hasDoc={props.docHints?.length}
             toggleDocs={toggleDocs}
+            toggleGuidedTour={toggleGuidedTour}
             onToggleEmulator={toggleEmulator}
             toggleBottomPanel={props.toggleBottomPanel}
           />

diff --git a/packages/studio-ui/src/web/translations/en.json b/packages/studio-ui/src/web/translations/en.json
@@ -563,7 +563,8 @@
     "showEmulator": "Show Emulator",
     "toggleBottomPanel": "Toggle Bottom Panel",
     "toggleEmulator": "Toggle Emulator",
-    "toggleSidePanel": "Toggle Side Panel"
+    "toggleSidePanel": "Toggle Side Panel",
+    "tutorial": "Tutorial"
   },
   "bottomPanel": {
     "inspector": {

diff --git a/packages/studio-ui/src/web/util/InjectSegment.ts b/packages/studio-ui/src/web/util/InjectSegment.ts
@@ -48,17 +48,21 @@ export default (user: UserReducer): void => {
   })
 }
 
-function trackEvent(eventName: string, payload?: any, options?: any, callback?: (...params: any[]) => any) {
+function trackEvent(eventName: string, payload?: any, options?: any, callback?: (...params: any[]) => any): void {
   if (analytics) {
     // analytics only defined if window.SEND_USAGE_STATS is true
-    return analytics.track(eventName, payload, options, callback)
+    analytics.track(eventName, payload, options, callback).catch(e => {
+      console.error('Analytics error - event', e)
+    })
   }
 }
 
-function trackPage(data?: PageData, options?: any, callback?: (...params: any[]) => any) {
+function trackPage(data?: PageData, options?: any, callback?: (...params: any[]) => any): void {
   if (analytics) {
     // analytics only defined if window.SEND_USAGE_STATS is true
-    return analytics.page(data, options, callback)
+    analytics.page(data, options, callback).catch(e => {
+      console.error('Analytics error - page', e)
+    })
   }
 }