Merge pull request #26023 from overleaf/td-remove-components-from-includes

Remove imports of react-bootstrap components from marketing pages

GitOrigin-RevId: 12a3446cc42f1438a52f49a893e53a02a1b5be4f

services/web/frontend/js/marketing.ts

@@ -9,4 +9,3 @@ import './features/multi-submit'
 import './features/cookie-banner'
 import './features/autoplay-video'
 import './features/mathjax'
-import './features/header-footer-react'

services/web/frontend/js/pages/compromised-password.tsx

@@ -1,13 +1,5 @@
-import '../marketing'
+import { renderInReactLayout } from '@/react'
 
-import { createRoot } from 'react-dom/client'
-import { CompromisedPasswordCard } from '../features/compromised-password/components/compromised-password-root'
+import { CompromisedPasswordCard } from '@/features/compromised-password/components/compromised-password-root'
 
-const compromisedPasswordContainer = document.getElementById(
-  'compromised-password'
-)
-
-if (compromisedPasswordContainer) {
-  const root = createRoot(compromisedPasswordContainer)
-  root.render(<CompromisedPasswordCard />)
-}
+renderInReactLayout('compromised-password', () => <CompromisedPasswordCard />)

services/web/frontend/js/pages/socket-diagnostics.tsx

@@ -1,11 +1,5 @@
-import '../marketing'
+import { renderInReactLayout } from '@/react'
 
-import { createRoot } from 'react-dom/client'
 import { SocketDiagnostics } from '@/features/socket-diagnostics/components/socket-diagnostics'
 
-const socketDiagnosticsContainer = document.getElementById('socket-diagnostics')
-
-if (socketDiagnosticsContainer) {
-  const root = createRoot(socketDiagnosticsContainer)
-  root.render(<SocketDiagnostics />)
-}
+renderInReactLayout('socket-diagnostics', () => <SocketDiagnostics />)

services/web/frontend/js/pages/user/add-secondary-email.tsx

@@ -1,13 +1,5 @@
-import '../../marketing'
+import { renderInReactLayout } from '@/react'
 
-import { createRoot } from 'react-dom/client'
-import { AddSecondaryEmailPrompt } from '../../features/settings/components/emails/add-secondary-email-prompt'
+import { AddSecondaryEmailPrompt } from '@/features/settings/components/emails/add-secondary-email-prompt'
 
-const addSecondaryEmailContainer = document.getElementById(
-  'add-secondary-email'
-)
-
-if (addSecondaryEmailContainer) {
-  const root = createRoot(addSecondaryEmailContainer)
-  root.render(<AddSecondaryEmailPrompt />)
-}
+renderInReactLayout('add-secondary-email', () => <AddSecondaryEmailPrompt />)

services/web/frontend/js/pages/user/confirm-secondary-email.tsx

@@ -1,11 +1,7 @@
-import '../../marketing'
+import { renderInReactLayout } from '@/react'
 
-import { createRoot } from 'react-dom/client'
-import ConfirmSecondaryEmailForm from '../../features/settings/components/emails/confirm-secondary-email-form'
+import ConfirmSecondaryEmailForm from '@/features/settings/components/emails/confirm-secondary-email-form'
 
-const confirmEmailContainer = document.getElementById('confirm-secondary-email')
-
-if (confirmEmailContainer) {
-  const root = createRoot(confirmEmailContainer)
-  root.render(<ConfirmSecondaryEmailForm />)
-}
+renderInReactLayout('confirm-secondary-email', () => (
+  <ConfirmSecondaryEmailForm />
+))

services/web/frontend/js/pages/user/settings.jsx

@@ -1,19 +0,0 @@
-import '../../marketing'
-import './../../utils/meta'
-import '../../utils/webpack-public-path'
-import './../../infrastructure/error-reporter'
-import '@/i18n'
-import '../../features/settings/components/root'
-import { createRoot } from 'react-dom/client'
-import SettingsPageRoot from '../../features/settings/components/root.tsx'
-
-const element = document.getElementById('settings-page-root')
-// For react-google-recaptcha
-window.recaptchaOptions = {
-  enterprise: true,
-  useRecaptchaNet: true,
-}
-if (element) {
-  const root = createRoot(element)
-  root.render(<SettingsPageRoot />)
-}

services/web/frontend/js/pages/user/settings.tsx

@@ -0,0 +1,13 @@
+import { renderInReactLayout } from '@/react'
+import '@/utils/meta'
+import '@/utils/webpack-public-path'
+import '@/infrastructure/error-reporter'
+import '@/i18n'
+import SettingsPageRoot from '@/features/settings/components/root'
+
+// For react-google-recaptcha
+window.recaptchaOptions = {
+  enterprise: true,
+  useRecaptchaNet: true,
+}
+renderInReactLayout('settings-page-root', () => <SettingsPageRoot />)

services/web/frontend/js/pages/user/subscription/preview-change.tsx

@@ -1,14 +1,9 @@
-import '@/marketing'
-import { createRoot } from 'react-dom/client'
+import { renderInReactLayout } from '@/react'
 import PreviewSubscriptionChange from '@/features/subscription/components/preview-subscription-change/root'
 import { SplitTestProvider } from '@/shared/context/split-test-context'
 
-const element = document.getElementById('subscription-preview-change')
-if (element) {
-  const root = createRoot(element)
-  root.render(
-    <SplitTestProvider>
-      <PreviewSubscriptionChange />
-    </SplitTestProvider>
-  )
-}
+renderInReactLayout('subscription-preview-change', () => (
+  <SplitTestProvider>
+    <PreviewSubscriptionChange />
+  </SplitTestProvider>
+))

services/web/frontend/js/react.ts

@@ -0,0 +1,15 @@
+import './marketing'
+import './features/header-footer-react'
+import { createRoot } from 'react-dom/client'
+import { ReactNode } from 'react'
+
+export function renderInReactLayout(
+  parentId: string,
+  createChildren: () => ReactNode
+) {
+  const parentElement = document.getElementById(parentId)
+  if (parentElement) {
+    const root = createRoot(parentElement)
+    root.render(createChildren())
+  }
+}

services/web/frontend/js/utils/meta.ts

@@ -133,6 +133,7 @@ export interface Meta {
   'ol-hasIndividualPaidSubscription': boolean
   'ol-hasManagedUsersFeature': boolean
   'ol-hasPassword': boolean
+  'ol-hasSplitTestWriteAccess': boolean
   'ol-hasSubscription': boolean
   'ol-hasTrackChangesFeature': boolean
   'ol-hideLinkingWidgets': boolean // CI only
@@ -241,6 +242,7 @@ export interface Meta {
   'ol-showUpgradePrompt': boolean
   'ol-skipUrl': string
   'ol-splitTestInfo': { [name: string]: SplitTestInfo }
+  'ol-splitTestName': string
   'ol-splitTestVariants': { [name: string]: string }
   'ol-ssoDisabled': boolean
   'ol-ssoErrorMessage': string

services/web/modules/user-activate/frontend/js/pages/user-activate-page.jsx

@@ -1,10 +0,0 @@
-import '@/marketing'
-
-import { createRoot } from 'react-dom/client'
-import UserActivateRegister from '../components/user-activate-register'
-
-const container = document.getElementById('user-activate-register-container')
-if (container) {
-  const root = createRoot(container)
-  root.render(<UserActivateRegister />)
-}

services/web/modules/user-activate/frontend/js/pages/user-activate-page.tsx

@@ -0,0 +1,7 @@
+import { renderInReactLayout } from '@/react'
+
+import UserActivateRegister from '../components/user-activate-register'
+
+renderInReactLayout('user-activate-register-container', () => (
+  <UserActivateRegister />
+))