Merge pull request #26440 from overleaf/mj-ide-co-branding-submit

[web] Editor redesign: Add co-branded submit button to toolbar

GitOrigin-RevId: 45f7ba93de8b28868d88a4ad913f6543e0f7e0a6

services/web/app/src/Features/BrandVariations/BrandVariationsHandler.js

@@ -74,6 +74,10 @@ function sanitizeBrandVariationDetails(details) {
       details.submit_button_html,
       settings.modules.sanitize.options
     )
+    details.submit_button_html_no_br = sanitizeHtml(
+      details.submit_button_html.replace(/<br\s*\/?>/gi, ' '),
+      settings.modules.sanitize.options
+    )
   }
 }
 

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

@@ -16,9 +16,10 @@ import EditableLabel from './editable-label'
 import { DuplicateProject } from './duplicate-project'
 
 const [publishModalModules] = importOverleafModules('publishModal')
-const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
+const SubmitProjectButton = publishModalModules?.import.NewPublishDropdownButton
 
 export const ToolbarProjectTitle = () => {
+  const { cobranding } = useEditorContext()
   const { t } = useTranslation()
   const { permissionsLevel, renameProject } = useEditorContext()
   const { name } = useProjectContext()
@@ -67,7 +68,7 @@ export const ToolbarProjectTitle = () => {
         />
       </DropdownToggle>
       <DropdownMenu renderOnMount>
-        {shouldDisplaySubmitButton && (
+        {shouldDisplaySubmitButton && !cobranding && (
           <>
             <SubmitProjectButton />
             <DropdownDivider />

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

@@ -11,12 +11,19 @@ import { useCallback } from 'react'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import { ToolbarLogos } from './logos'
 import { useEditorContext } from '@/shared/context/editor-context'
+import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import UpgradeButton from './upgrade-button'
 import getMeta from '@/utils/meta'
 
+const [publishModalModules] = importOverleafModules('publishModal')
+const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
+
 export const Toolbar = () => {
   const { view, setView } = useLayoutContext()
-  const { cobranding } = useEditorContext()
+  const { cobranding, permissionsLevel } = useEditorContext()
+  const shouldDisplaySubmitButton =
+    (permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite') &&
+    SubmitProjectButton
 
   const handleBackToEditorClick = useCallback(() => {
     eventTracking.sendMB('navigation-clicked-history', { action: 'close' })
@@ -47,6 +54,9 @@ export const Toolbar = () => {
         <OnlineUsers />
         <ShowHistoryButton />
         <ChangeLayoutButton />
+        {shouldDisplaySubmitButton && cobranding && (
+          <SubmitProjectButton cobranding={cobranding} />
+        )}
         <ShareProjectButton />
         {getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
       </div>

services/web/frontend/js/shared/context/editor-context.tsx

@@ -72,6 +72,7 @@ export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
         partner: brandVariation.partner,
         brandedMenu: brandVariation.branded_menu,
         submitBtnHtml: brandVariation.submit_button_html,
+        submitBtnHtmlNoBreaks: brandVariation.submit_button_html_no_br,
       }
     )
   }, [])

services/web/test/unit/src/BrandVariations/BrandVariationsHandlerTests.js

@@ -118,5 +118,21 @@ describe('BrandVariationsHandler', function () {
         '<br /><strong style="color:#B39500">AGU Journal</strong>hello'
       )
     })
+
+    it("should sanitize and remove breaks in 'submit_button_html_no_br'", async function () {
+      this.mockedBrandVariationDetails.submit_button_html =
+        'Submit to<br class="break"/><strong style="color:#B39500">AGU Journal</strong><iframe>hello</iframe>'
+      this.V1Api.request.callsArgWith(
+        1,
+        null,
+        { statusCode: 200 },
+        this.mockedBrandVariationDetails
+      )
+      const brandVariationDetails =
+        await this.BrandVariationsHandler.promises.getBrandVariationById('12')
+      expect(brandVariationDetails.submit_button_html_no_br).to.equal(
+        'Submit to <strong style="color:#B39500">AGU Journal</strong>hello'
+      )
+    })
   })
 })

services/web/types/cobranding.ts

@@ -8,4 +8,5 @@ export type Cobranding = {
   partner?: string
   brandedMenu?: boolean
   submitBtnHtml?: string
+  submitBtnHtmlNoBreaks?: string
 }