Migrate github-sync menu to react

GitOrigin-RevId: 87e767a064421c7bad6c4fa3c7053959bfdb4cd4

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

@@ -3,6 +3,7 @@ import ActionsMenu from './actions-menu'
 import HelpMenu from './help-menu'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import classNames from 'classnames'
+import SyncMenu from './sync-menu'
 
 export default function EditorLeftMenu() {
   const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
@@ -15,6 +16,7 @@ export default function EditorLeftMenu() {
       >
         <DownloadMenu />
         <ActionsMenu />
+        <SyncMenu />
         <HelpMenu />
       </aside>
       {leftMenuShown ? (

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

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
+import getMeta from '../../../utils/meta'
+
+export default function SyncMenu() {
+  const { t } = useTranslation()
+  const anonymous = getMeta('ol-anonymous') as boolean | undefined
+  const [editorLeftMenuSync] = useState<any[]>(
+    () =>
+      getMeta('editorLeftMenuSync') ||
+      importOverleafModules('editorLeftMenuSync')
+  )
+
+  if (anonymous === true || anonymous === undefined) {
+    return null
+  }
+
+  if (editorLeftMenuSync.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      <h4>{t('sync')}</h4>
+      <ul className="list-unstyled nav">
+        {editorLeftMenuSync.map(({ import: importObject }) => (
+          <li key={Object.keys(importObject)[0]}>
+            <ModuleComponent Component={Object.values(importObject)[0]} />
+          </li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+type ModuleComponentProps = {
+  Component: any
+}
+
+function ModuleComponent({ Component }: ModuleComponentProps) {
+  return <Component />
+}