Merge pull request #23406 from overleaf/dp-share-submit-buttons

Connect up share and submit project buttons in new editor

GitOrigin-RevId: 6eb4ef82662b8de3f59417b6a2d8d5fcf125a579

services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx

@@ -0,0 +1,40 @@
+import ShareProjectModal from '@/features/share-project-modal/components/share-project-modal'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import * as eventTracking from '@/infrastructure/event-tracking'
+
+export default function ShareProjectButton() {
+  const { t } = useTranslation()
+
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const handleOpenShareModal = useCallback(() => {
+    eventTracking.sendMBOnce('ide-open-share-modal-once')
+    setShowShareModal(true)
+  }, [])
+
+  const handleHideShareModal = useCallback(() => {
+    setShowShareModal(false)
+  }, [])
+
+  return (
+    <>
+      <div className="ide-redesign-toolbar-button-container">
+        <OLButton
+          variant="primary"
+          leadingIcon={<MaterialIcon type="person_add" />}
+          onClick={handleOpenShareModal}
+        >
+          {t('share')}
+        </OLButton>
+      </div>
+      <ShareProjectModal
+        show={showShareModal}
+        handleOpen={handleOpenShareModal}
+        handleHide={handleHideShareModal}
+      />
+    </>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -4,6 +4,12 @@ import { useTranslation } from 'react-i18next'
 import { ToolbarMenuBar } from './menu-bar'
 import { ToolbarProjectTitle } from './project-title'
 import { OnlineUsers } from './online-users'
+import ShareProjectButton from './share-project-button'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import { useEditorContext } from '@/shared/context/editor-context'
+
+const [publishModalModules] = importOverleafModules('publishModal')
+const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
 
 export const Toolbar = () => {
   return (
@@ -35,7 +41,12 @@ const ToolbarMenus = () => {
 }
 
 const ToolbarButtons = () => {
-  const { t } = useTranslation()
+  const { permissionsLevel } = useEditorContext()
+
+  const shouldDisplaySubmitButton =
+    (permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite') &&
+    SubmitProjectButton
+
   return (
     <div className="ide-redesign-toolbar-actions">
       <OnlineUsers />
@@ -46,23 +57,8 @@ const ToolbarButtons = () => {
           leadingIcon={<MaterialIcon type="history" />}
         />
       </div>
-      <div className="ide-redesign-toolbar-button-container">
-        <OLButton
-          variant="link"
-          className="ide-redesign-toolbar-button-subdued"
-          leadingIcon={<MaterialIcon type="send" />}
-        >
-          {t('submit_title')}
-        </OLButton>
-      </div>
-      <div className="ide-redesign-toolbar-button-container">
-        <OLButton
-          variant="primary"
-          leadingIcon={<MaterialIcon type="person_add" />}
-        >
-          {t('share')}
-        </OLButton>
-      </div>
+      {shouldDisplaySubmitButton && <SubmitProjectButton />}
+      <ShareProjectButton />
     </div>
   )
 }