feat(studio): add help button (#411)

* feat(studio): add help button * add docs link * PR Changes
botpress · Apr 5, 2023 · 8ee6391 · 8ee6391
1 parent 651c1af
commit 8ee6391
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/packages/studio-ui/src/web/components/Layout/Toolbar/index.tsx b/packages/studio-ui/src/web/components/Layout/Toolbar/index.tsx
@@ -1,7 +1,7 @@
-import { Icon, Tooltip } from '@blueprintjs/core'
+import { Icon, Tooltip, Popover, Position, Menu, MenuItem } from '@blueprintjs/core'
 import { lang, ShortcutLabel } from 'botpress/shared'
 import classNames from 'classnames'
-import React, { FC, Fragment } from 'react'
+import React, { FC, Fragment, useState } from 'react'
 import { connect } from 'react-redux'
 import { AccessControl } from '~/components/Shared/Utils'
 
@@ -21,6 +21,8 @@ interface OwnProps {
 type StateProps = ReturnType<typeof mapStateToProps>
 
 type Props = StateProps & OwnProps
+const FORUM_LINK = 'https://github.com/botpress/botpress/discussions'
+const DOCS_LINK = 'https://v12.botpress.com/'
 
 const Toolbar: FC<Props> = (props) => {
   const { toggleDocs, toggleGuidedTour, hasDoc, onToggleEmulator, isEmulatorOpen, toggleBottomPanel } = props
@@ -51,10 +53,36 @@ const Toolbar: FC<Props> = (props) => {
           ) : (
             <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>
+                <Popover
+                  content={
+                    <Menu>
+                      <MenuItem icon="learning" text={lang.tr('toolbar.tutorial')} onClick={toggleGuidedTour} />
+                      <MenuItem
+                        icon="people"
+                        text={lang.tr('toolbar.forum')}
+                        onClick={() => window.open(FORUM_LINK, '_blank')}
+                      />
+                      <MenuItem
+                        icon="book"
+                        text={lang.tr('toolbar.docs')}
+                        onClick={() => window.open(DOCS_LINK, '_blank')}
+                      />
+                    </Menu>
+                  }
+                  target={
+                    <button id="statusbar_tutorial" className={style.item}>
+                      <Icon color="#1a1e22" icon="help" iconSize={16} />
+                      <span className={style.label}>{lang.tr('toolbar.help')}</span>
+                    </button>
+                  }
+                  minimal
+                  position={Position.TOP_RIGHT}
+                  canEscapeKeyClose
+                  fill
+                  modifiers={{
+                    preventOverflow: { enabled: true, boundariesElement: 'window' }
+                  }}
+                />
               </Tooltip>
             </Fragment>
           )}

diff --git a/packages/studio-ui/src/web/translations/en.json b/packages/studio-ui/src/web/translations/en.json
@@ -566,7 +566,9 @@
     "toggleBottomPanel": "Toggle Bottom Panel",
     "toggleEmulator": "Toggle Emulator",
     "toggleSidePanel": "Toggle Side Panel",
-    "tutorial": "Tutorial"
+    "tutorial": "Tutorial",
+    "docs": "Documentation",
+    "forum": "Forum"
   },
   "bottomPanel": {
     "inspector": {