From e43da5569cec1811bc72896fd50a8ebb3afcc768 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 6 Feb 2025 15:41:38 +0000
Subject: [PATCH] Merge pull request #23406 from
 overleaf/dp-share-submit-buttons

Connect up share and submit project buttons in new editor

GitOrigin-RevId: 6eb4ef82662b8de3f59417b6a2d8d5fcf125a579
---
 .../toolbar/share-project-button.tsx          | 40 +++++++++++++++++++
 .../components/toolbar/toolbar.tsx            | 32 +++++++--------
 2 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx

diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/share-project-button.tsx
new file mode 100644
index 0000000000..aeefb1336f
--- /dev/null
+++ b/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}
+      />
+    </>
+  )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
index d5ceee5dbf..a7043dc688 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+++ b/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>
   )
 }