Merge pull request #24083 from overleaf/td-bs5-misc-bs3-removal

Remove Bootstrap 3 components in a few places

GitOrigin-RevId: 0380506543b40f3d8d83f2bf6199af28f61ad5af

services/web/frontend/js/features/project-list/components/search-form.tsx

@@ -56,11 +56,9 @@ function SearchForm({
   }
   const placeholder = `${placeholderMessage}…`
 
-  const handleChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement & Omit<typeof OLFormControl, keyof HTMLInputElement>
-    >
-  ) => {
+  const handleChange: React.ComponentProps<
+    typeof OLFormControl
+  >['onChange'] = e => {
     eventTracking.sendMB('project-list-page-interaction', {
       action: 'search',
       isSmallDevice,

services/web/frontend/js/features/token-access/components/leave-project-modal.tsx

@@ -3,9 +3,9 @@ import OLModal, {
   OLModalBody,
   OLModalFooter,
   OLModalHeader,
+  OLModalTitle,
 } from '@/features/ui/components/ol/ol-modal'
 import Notification from '@/shared/components/notification'
-import { Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
 type LeaveProjectModalProps = {
@@ -29,7 +29,7 @@ function LeaveProjectModal({
       backdrop="static"
     >
       <OLModalHeader closeButton>
-        <Modal.Title>{t('leave_project')}</Modal.Title>
+        <OLModalTitle>{t('leave_project')}</OLModalTitle>
       </OLModalHeader>
       <OLModalBody>
         <p>{t('about_to_leave_project')}</p>

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

@@ -36,6 +36,7 @@ function OLFormCheckbox(props: OLFormCheckboxProps) {
     children: rest.label,
     checked: rest.checked,
     value: rest.value,
+    id: rest.id,
     name: rest.name,
     required: rest.required,
     readOnly: rest.readOnly,

services/web/frontend/js/shared/components/split-test-badge.tsx

@@ -1,10 +1,8 @@
 import { useSplitTestContext } from '../context/split-test-context'
 import BetaBadge from './beta-badge'
-import { OverlayTriggerProps } from 'react-bootstrap'
 
 type TooltipProps = {
   id?: string
-  placement?: OverlayTriggerProps['placement']
   className?: string
 }
 

services/web/test/frontend/shared/hooks/use-detach-layout.spec.tsx

@@ -1,7 +1,10 @@
 import useDetachLayout from '../../../../frontend/js/shared/hooks/use-detach-layout'
 import { detachChannel, testDetachChannel } from '../../helpers/detach-channel'
 import { EditorProviders } from '../../helpers/editor-providers'
-import { Button, Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 const DetachLayoutTest = () => {
   const { role, reattach, detach, isLinked, isLinking, isRedundant } =
@@ -12,24 +15,29 @@ const DetachLayoutTest = () => {
       <legend>
         role: <span id="role">{role || 'none'}</span>
       </legend>
-      <FormGroup>
-        <Checkbox id="isLinked" inline checked={isLinked} readOnly />
-        <ControlLabel>linked</ControlLabel>
-      </FormGroup>
-      <FormGroup>
-        <Checkbox id="isLinking" inline checked={isLinking} readOnly />
-        <ControlLabel>linking</ControlLabel>
-      </FormGroup>
-      <FormGroup>
-        <Checkbox id="isRedundant" inline checked={isRedundant} readOnly />
-        <ControlLabel>redundant</ControlLabel>
-      </FormGroup>
-      <Button id="reattach" onClick={reattach}>
+      <OLFormGroup>
+        <OLFormCheckbox id="isLinked" inline checked={isLinked} readOnly />
+        <OLFormLabel>linked</OLFormLabel>
+      </OLFormGroup>
+      <OLFormGroup>
+        <OLFormCheckbox id="isLinking" inline checked={isLinking} readOnly />
+        <OLFormLabel>linking</OLFormLabel>
+      </OLFormGroup>
+      <OLFormGroup>
+        <OLFormCheckbox
+          id="isRedundant"
+          inline
+          checked={isRedundant}
+          readOnly
+        />
+        <OLFormLabel>redundant</OLFormLabel>
+      </OLFormGroup>
+      <OLButton id="reattach" onClick={reattach}>
         reattach
-      </Button>
-      <Button id="detach" onClick={detach}>
+      </OLButton>
+      <OLButton id="detach" onClick={detach}>
         detach
-      </Button>
+      </OLButton>
     </fieldset>
   )
 }