[web] Migrate "Manage Template" option in editor left menu to BS5 (#21799)

* Update manage template modal to BS5

* Update `ManageTemplateButton` to BS5

* Update `OLFormControl` prop types so it has its `as` props

* Update `LeftMenuButton` to BS5

* Fixup linting

* Update `ManageTemplateModalBody` style:

* Bold label
* Correct rows in BS3

* Set spinner color to `text-muted` instead of blue

* `npm run format:fix`

GitOrigin-RevId: c5311e4786b2859a8b7cf567d19cd3d7614dd3db

services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx

@@ -92,7 +92,7 @@ export const HrefTooltipContent: FC = () => {
             htmlSize={50}
             placeholder="https://…"
             value={url}
-            ref={element => {
+            ref={(element: HTMLInputElement) => {
               inputRef.current = element
             }}
             autoComplete="off"

services/web/frontend/js/features/ui/components/bootstrap-5/form/form-control.tsx

@@ -1,16 +1,20 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import {
   Form,
   FormControlProps as BS5FormControlProps,
 } from 'react-bootstrap-5'
 import classnames from 'classnames'
+import type { BsPrefixRefForwardingComponent } from 'react-bootstrap-5/helpers'
 
-type FormControlProps = BS5FormControlProps & {
+export type OLBS5FormControlProps = BS5FormControlProps & {
   prepend?: React.ReactNode
   append?: React.ReactNode
 }
 
-const FormControl = forwardRef<HTMLInputElement, FormControlProps>(
+const FormControl: BsPrefixRefForwardingComponent<
+  'input',
+  OLBS5FormControlProps
+> = forwardRef<HTMLInputElement, OLBS5FormControlProps>(
   ({ prepend, append, className, ...props }, ref) => {
     if (prepend || append) {
       const wrapperClassNames = classnames('form-control-wrapper', {

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

@@ -1,12 +1,15 @@
 import { forwardRef, ComponentProps, useCallback } from 'react'
 import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
-import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
+import FormControl, {
+  type OLBS5FormControlProps,
+} from '@/features/ui/components/bootstrap-5/form/form-control'
 import BS3FormControl from '@/features/ui/components/bootstrap-3/form/form-control'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import OLSpinner from '@/features/ui/components/ol/ol-spinner'
 import Icon from '@/shared/components/icon'
+import type { BsPrefixRefForwardingComponent } from 'react-bootstrap-5/helpers'
 
-type OLFormControlProps = ComponentProps<typeof FormControl> & {
+type OLFormControlProps = OLBS5FormControlProps & {
   bs3Props?: Record<string, unknown>
   'data-ol-dirty'?: unknown
   'main-field'?: any // For the CM6's benefit in the editor search panel
@@ -17,8 +20,10 @@ type BS3FormControlProps = ComponentProps<typeof BS3FormControl> & {
   'main-field'?: any
 }
 
-const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
-  (props, ref) => {
+const OLFormControl: BsPrefixRefForwardingComponent<
+  'input',
+  OLFormControlProps
+> = forwardRef<HTMLInputElement, OLFormControlProps>((props, ref) => {
   const { bs3Props, append, ...rest } = props
 
   // Use a callback so that the ref passed to the BS3 FormControl is stable
@@ -86,8 +91,7 @@ const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
       }
     />
   )
-  }
-)
+})
 OLFormControl.displayName = 'OLFormControl'
 
 export default OLFormControl