Migrate "help menu" in editor left menu to react

GitOrigin-RevId: 7ebbfa693205de1f57b1d54e25c46cfb1851acc8

services/web/app/views/project/editor/meta.pug

@@ -28,6 +28,7 @@ meta(name="ol-galileoFeatures" data-type="json" content=galileoFeatures)
 meta(name="ol-detachRole" data-type="string" content=detachRole)
 meta(name="ol-showUpgradePrompt" data-type="boolean" content=showUpgradePrompt)
 meta(name="ol-useOpenTelemetry" data-type="boolean" content=useOpenTelemetry)
+meta(name="ol-showSupport", data-type="boolean" content=showSupport)
 
 - var fileActionI18n = ['edited', 'renamed', 'created', 'deleted'].reduce((acc, i) => {acc[i] = translate('file_action_' + i); return acc}, {})
 meta(name="ol-fileActionI18n" data-type="json" content=fileActionI18n)

services/web/frontend/extracted-translations.json

@@ -135,6 +135,7 @@
   "disable_stop_on_first_error": "",
   "dismiss": "",
   "dismiss_error_popup": "",
+  "documentation": "",
   "doesnt_match": "",
   "doing_this_allow_log_in_through_institution": "",
   "doing_this_allow_log_in_through_institution_2": "",
@@ -269,6 +270,7 @@
   "group_plan_with_name_tooltip": "",
   "have_an_extra_backup": "",
   "headers": "",
+  "help": "",
   "hide_outline": "",
   "history": "",
   "hotkey_add_a_comment": "",
@@ -581,6 +583,7 @@
   "sharelatex_beta_program": "",
   "show_all_projects": "",
   "show_all_uppercase": "",
+  "show_hotkeys": "",
   "show_in_code": "",
   "show_in_pdf": "",
   "show_outline": "",

services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx

@@ -1,5 +1,6 @@
 import DownloadMenu from './download-menu'
 import ActionsMenu from './actions-menu'
+import HelpMenu from './help-menu'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import classNames from 'classnames'
 
@@ -14,6 +15,7 @@ export default function EditorLeftMenu() {
       >
         <DownloadMenu />
         <ActionsMenu />
+        <HelpMenu />
       </aside>
       {leftMenuShown ? (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

services/web/frontend/js/features/editor-left-menu/components/help-contact-us.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ContactUsModal from '../../../../../modules/support/frontend/js/components/contact-us-modal'
+import LeftMenuButton from './left-menu-button'
+
+export default function HelpContactUs() {
+  const [showModal, setShowModal] = useState(false)
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <LeftMenuButton
+        onClick={() => setShowModal(true)}
+        icon={{
+          type: 'question',
+          fw: true,
+        }}
+      >
+        {t('contact_us')}
+      </LeftMenuButton>
+      <ContactUsModal show={showModal} handleHide={() => setShowModal(false)} />
+    </>
+  )
+}

services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+import LeftMenuButton from './left-menu-button'
+
+export default function HelpDocumentation() {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <LeftMenuButton
+        type="link"
+        href="/learn"
+        icon={{
+          type: 'book',
+          fw: true,
+        }}
+      >
+        {t('documentation')}
+      </LeftMenuButton>
+    </>
+  )
+}

services/web/frontend/js/features/editor-left-menu/components/help-menu.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '../../../utils/meta'
+import HelpContactUs from './help-contact-us'
+import HelpDocumentation from './help-documentation'
+import HelpShowHotkeys from './help-show-hotkeys'
+
+export default function HelpMenu() {
+  const { t } = useTranslation()
+  const showSupport = getMeta('ol-showSupport') as boolean | undefined
+
+  return (
+    <>
+      <h4>{t('help')}</h4>
+      <ul className="list-unstyled nav">
+        <li>
+          <HelpShowHotkeys />
+        </li>
+        {showSupport ? (
+          <>
+            <li>
+              <HelpDocumentation />
+            </li>
+            <li>
+              <HelpContactUs />
+            </li>
+          </>
+        ) : null}
+      </ul>
+    </>
+  )
+}

services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useProjectContext } from '../../../shared/context/project-context'
+import HotkeysModal from '../../hotkeys-modal/components/hotkeys-modal'
+import LeftMenuButton from './left-menu-button'
+
+export default function HelpShowHotkeys() {
+  const [showModal, setShowModal] = useState(false)
+  const { t } = useTranslation()
+  const { features } = useProjectContext()
+  const isMac = /Mac/.test(window.navigator?.platform)
+
+  return (
+    <>
+      <LeftMenuButton
+        onClick={() => setShowModal(true)}
+        icon={{
+          type: 'keyboard-o',
+          fw: true,
+        }}
+      >
+        {t('show_hotkeys')}
+      </LeftMenuButton>
+      <HotkeysModal
+        show={showModal}
+        handleHide={() => setShowModal(false)}
+        isMac={isMac}
+        trackChangesVisible={features?.trackChangesVisible}
+      />
+    </>
+  )
+}

services/web/frontend/js/features/editor-left-menu/components/left-menu-button.tsx

@@ -9,6 +9,8 @@ type Props = {
   }
   disabled?: boolean
   disabledAccesibilityText?: string
+  type?: 'button' | 'link'
+  href?: string
 }
 
 export default function LeftMenuButton({
@@ -17,6 +19,8 @@ export default function LeftMenuButton({
   icon,
   disabled = false,
   disabledAccesibilityText,
+  type = 'button',
+  href,
 }: PropsWithChildren<Props>) {
   if (disabled) {
     return (
@@ -30,10 +34,24 @@ export default function LeftMenuButton({
     )
   }
 
-  return (
-    <button onClick={onClick} className="left-menu-button">
-      <Icon type={icon.type} fw={icon.fw} />
-      <span>{children}</span>
-    </button>
-  )
+  if (type === 'button') {
+    return (
+      <button onClick={onClick} className="left-menu-button">
+        <Icon type={icon.type} fw={icon.fw} />
+        <span>{children}</span>
+      </button>
+    )
+  } else {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className="left-menu-button"
+      >
+        <Icon type={icon.type} fw={icon.fw} />
+        <span>{children}</span>
+      </a>
+    )
+  }
 }