Merge pull request #20161 from overleaf/td-bs5-contact-modal-wiki-search-visibility

Fix for learn wiki search results not appearing in BS5 nav contact modal

GitOrigin-RevId: 9f4476163c509ab6ec7fe119600276c906c44f7e

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx

@@ -1,25 +1,23 @@
 import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useTranslation } from 'react-i18next'
-import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
-import { UserProvider } from '@/shared/context/user-context'
 
-export default function ContactUsItem() {
+export default function ContactUsItem({
+  showModal,
+}: {
+  showModal: (event?: Event) => void
+}) {
   const { t } = useTranslation()
-  const { modal, showModal } = useContactUsModal({ autofillProjectUrl: false })
 
   return (
-    <>
-      <NavDropdownLinkItem
-        href="#"
-        onClick={() => {
-          sendMB('menu-clicked-contact')
-          showModal()
-        }}
-      >
-        {t('contact_us')}
-      </NavDropdownLinkItem>
-      <UserProvider>{modal}</UserProvider>
-    </>
+    <NavDropdownLinkItem
+      href="#"
+      onClick={() => {
+        sendMB('menu-clicked-contact')
+        showModal()
+      }}
+    >
+      {t('contact_us')}
+    </NavDropdownLinkItem>
   )
 }

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx

@@ -8,6 +8,8 @@ import NavItemFromData from '@/features/ui/components/bootstrap-5/navbar/nav-ite
 import LoggedInItems from '@/features/ui/components/bootstrap-5/navbar/logged-in-items'
 import HeaderLogoOrTitle from '@/features/ui/components/bootstrap-5/navbar/header-logo-or-title'
 import MaterialIcon from '@/shared/components/material-icon'
+import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
+import { UserProvider } from '@/shared/context/user-context'
 
 function LoggedOutItems() {
   return <span>Logged out</span>
@@ -32,6 +34,13 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
   const { t } = useTranslation()
   const { isReady } = useWaitForI18n()
 
+  // The Contact Us modal is rendered at this level rather than inside the nav
+  // bar because otherwise the help wiki search results dropdown doesn't show up
+  const { modal: contactUsModal, showModal: showContactUsModal } =
+    useContactUsModal({
+      autofillProjectUrl: false,
+    })
+
   if (!isReady) {
     return null
   }
@@ -95,7 +104,11 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                       (item.only_content_pages && !suppressNavContentLinks)
 
                     return showNavItem ? (
-                      <NavItemFromData item={item} key={index} />
+                      <NavItemFromData
+                        item={item}
+                        key={index}
+                        showContactUsModal={showContactUsModal}
+                      />
                     ) : null
                   })}
                   {sessionUser ? (
@@ -112,6 +125,7 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
           )}
         </Container>
       </Navbar>
+      <UserProvider>{contactUsModal}</UserProvider>
     </>
   )
 }

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx

@@ -9,8 +9,10 @@ import ContactUsItem from '@/features/ui/components/bootstrap-5/navbar/contact-u
 
 export default function NavDropdownFromData({
   item,
+  showContactUsModal,
 }: {
   item: NavbarDropdownItemData
+  showContactUsModal: (event?: Event) => void
 }) {
   return (
     <NavDropdownMenu title={item.translatedText} className={item.class}>
@@ -18,7 +20,7 @@ export default function NavDropdownFromData({
         if ('divider' in child) {
           return <NavDropdownDivider key={index} />
         } else if ('isContactUs' in child) {
-          return <ContactUsItem key={index} />
+          return <ContactUsItem key={index} showModal={showContactUsModal} />
         } else if (isDropdownLinkItem(child)) {
           return (
             <NavDropdownLinkItem

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-item-from-data.tsx

@@ -8,9 +8,20 @@ import NavItem from '@/features/ui/components/bootstrap-5/navbar/nav-item'
 import { sendMB } from '@/infrastructure/event-tracking'
 import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
 
-export default function NavItemFromData({ item }: { item: NavbarItemData }) {
+export default function NavItemFromData({
+  item,
+  showContactUsModal,
+}: {
+  item: NavbarItemData
+  showContactUsModal: (event?: Event) => void
+}) {
   if (isDropdownItem(item)) {
-    return <NavDropdownFromData item={item} />
+    return (
+      <NavDropdownFromData
+        item={item}
+        showContactUsModal={showContactUsModal}
+      />
+    )
   } else if (isLinkItem(item)) {
     return (
       <NavLinkItem

services/web/frontend/js/features/ui/components/ol/ol-form-select.tsx

@@ -18,6 +18,7 @@ function OLFormSelect(props: OLFormSelectProps) {
     bsSize: bs5Props.size,
     name: bs5Props.name,
     value: bs5Props.value,
+    defaultValue: bs5Props.defaultValue,
     disabled: bs5Props.disabled,
     onChange: bs5Props.onChange as BS3FormControlProps['onChange'],
     required: bs5Props.required,