Merge pull request #21512 from overleaf/rd-insert-link

Migrate the editor command tooltips to Bootstrap 5

GitOrigin-RevId: 9e3b477608e334e6e8bc0e79710cd2b3878680e6

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

@@ -14,10 +14,16 @@ import {
   ShortTextArgument,
   UrlArgument,
 } from '../../lezer-latex/latex.terms.mjs'
-import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
 import Icon from '../../../../shared/components/icon'
 import { EditorState } from '@codemirror/state'
 import { openURL } from '@/features/source-editor/utils/url'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const HrefTooltipContent: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -77,16 +83,16 @@ export const HrefTooltipContent: FC = () => {
 
   return (
     <div className="ol-cm-command-tooltip-content">
-      <form className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}>
-        <FormGroup controlId="link-tooltip-url-input">
-          <ControlLabel>URL</ControlLabel>
-          <FormControl
+      <OLForm className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}>
+        <OLFormGroup controlId="link-tooltip-url-input">
+          <OLFormLabel>URL</OLFormLabel>
+          <OLFormControl
             type="url"
-            bsSize="sm"
-            size={50}
+            size="lg"
+            htmlSize={50}
             placeholder="https://…"
             value={url}
-            inputRef={element => {
+            ref={element => {
               inputRef.current = element
             }}
             autoComplete="off"
@@ -100,27 +106,31 @@ export const HrefTooltipContent: FC = () => {
             }}
             disabled={state.readOnly}
           />
-        </FormGroup>
-      </form>
+        </OLFormGroup>
+      </OLForm>
 
-      <Button
+      <OLButton
+        variant="link"
         type="button"
-        bsStyle="link"
-        className="ol-cm-command-tooltip-link"
+        className="ol-cm-command-tooltip-link justify-content-start"
         onClick={() => {
           // TODO: unescape content
           openURL(url)
         }}
       >
-        <Icon type="external-link" fw />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="external-link" fw />}
+          bs5={<MaterialIcon type="open_in_new" />}
+        />
+
         {t('open_link')}
-      </Button>
+      </OLButton>
 
       {!state.readOnly && (
-        <Button
+        <OLButton
+          variant="link"
           type="button"
-          bsStyle="link"
-          className="ol-cm-command-tooltip-link"
+          className="ol-cm-command-tooltip-link justify-content-start"
           onClick={() => {
             const spec = removeLink(state)
             if (spec) {
@@ -129,9 +139,13 @@ export const HrefTooltipContent: FC = () => {
             }
           }}
         >
-          <Icon type="chain-broken" fw />
+          <BootstrapVersionSwitcher
+            bs3={<Icon type="chain-broken" fw />}
+            bs5={<MaterialIcon type="link_off" />}
+          />
+
           {t('remove_link')}
-        </Button>
+        </OLButton>
       )}
     </div>
   )

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

@@ -1,8 +1,10 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from 'react-bootstrap'
 import Icon from '@/shared/components/icon'
 import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
+import OLButton from '@/features/ui/components/ol/ol-button'
 
 export const IncludeTooltipContent: FC = () => {
   const { t } = useTranslation()
@@ -10,15 +12,18 @@ export const IncludeTooltipContent: FC = () => {
 
   return (
     <div className="ol-cm-command-tooltip-content">
-      <Button
+      <OLButton
+        variant="link"
         type="button"
-        bsStyle="link"
         className="ol-cm-command-tooltip-link"
         onClick={openIncludedFile}
       >
-        <Icon type="edit" fw />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="edit" fw />}
+          bs5={<MaterialIcon type="edit" />}
+        />
         {t('open_file')}
-      </Button>
+      </OLButton>
     </div>
   )
 }

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

@@ -1,8 +1,10 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button } from 'react-bootstrap'
 import Icon from '@/shared/components/icon'
 import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const InputTooltipContent: FC = () => {
   const { t } = useTranslation()
@@ -10,15 +12,18 @@ export const InputTooltipContent: FC = () => {
 
   return (
     <div className="ol-cm-command-tooltip-content">
-      <Button
+      <OLButton
+        variant="link"
         type="button"
-        bsStyle="link"
         className="ol-cm-command-tooltip-link"
         onClick={openIncludedFile}
       >
-        <Icon type="edit" fw />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="edit" fw />}
+          bs5={<MaterialIcon type="edit" />}
+        />
         {t('open_file')}
-      </Button>
+      </OLButton>
     </div>
   )
 }

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

@@ -4,7 +4,6 @@ import {
   useCodeMirrorStateContext,
   useCodeMirrorViewContext,
 } from '../codemirror-context'
-import { Button } from 'react-bootstrap'
 import { resolveCommandNode } from '../../extensions/command-tooltip'
 import {
   LabelArgument,
@@ -21,6 +20,9 @@ import {
 } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
 import Icon from '../../../../shared/components/icon'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const RefTooltipContent: FC = () => {
   const { t } = useTranslation()
@@ -29,9 +31,9 @@ export const RefTooltipContent: FC = () => {
 
   return (
     <div className="ol-cm-command-tooltip-content">
-      <Button
+      <OLButton
+        variant="link"
         type="button"
-        bsStyle="link"
         className="ol-cm-command-tooltip-link"
         onClick={() => {
           const target = readTarget(state)
@@ -44,9 +46,12 @@ export const RefTooltipContent: FC = () => {
           }
         }}
       >
-        <Icon type="link" fw />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="link" fw />}
+          bs5={<MaterialIcon type="link" />}
+        />
         {t('open_target')}
-      </Button>
+      </OLButton>
     </div>
   )
 }

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

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useCodeMirrorStateContext } from '../codemirror-context'
-import { Button } from 'react-bootstrap'
 import { resolveCommandNode } from '../../extensions/command-tooltip'
 import {
   LiteralArgContent,
@@ -10,6 +9,9 @@ import {
 import Icon from '../../../../shared/components/icon'
 import { EditorState } from '@codemirror/state'
 import { openURL } from '@/features/source-editor/utils/url'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const UrlTooltipContent: FC = () => {
   const { t } = useTranslation()
@@ -17,9 +19,9 @@ export const UrlTooltipContent: FC = () => {
 
   return (
     <div className="ol-cm-command-tooltip-content">
-      <Button
+      <OLButton
+        variant="link"
         type="button"
-        bsStyle="link"
         className="ol-cm-command-tooltip-link"
         onClick={() => {
           const url = readUrl(state)
@@ -28,9 +30,12 @@ export const UrlTooltipContent: FC = () => {
           }
         }}
       >
-        <Icon type="external-link" fw />
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="external-link" fw />}
+          bs5={<MaterialIcon type="open_in_new" />}
+        />
         {t('open_link')}
-      </Button>
+      </OLButton>
     </div>
   )
 }

services/web/frontend/js/features/source-editor/components/figure-modal/file-sources/figure-modal-upload-source.tsx

@@ -20,8 +20,8 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
 import OLButton from '@/features/ui/components/ol/ol-button'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import MaterialIcon from '@/shared/components/material-icon'
-import { Spinner } from 'react-bootstrap-5'
 import { isBootstrap5 } from '@/features/utils/bootstrap-5'
+import OLSpinner from '@/features/ui/components/ol/ol-spinner'
 
 /* eslint-disable no-unused-vars */
 export enum FileUploadStatus {
@@ -297,18 +297,7 @@ export const FileContainer: FC<{
           })}
         >
           {status === FileUploadStatus.UPLOADING ? (
-            <BootstrapVersionSwitcher
-              bs3={<Icon spin type="spinner" className="file-icon" />}
-              bs5={
-                <Spinner
-                  animation="border"
-                  aria-hidden="true"
-                  as="span"
-                  role="status"
-                  size="sm"
-                />
-              }
-            />
+            <OLSpinner size="sm" />
           ) : (
             <BootstrapVersionSwitcher
               bs3={<Icon type={icon} className="file-icon" />}

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

@@ -56,6 +56,7 @@ const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
       onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'],
       prepend: rest.prepend,
       append: rest.append,
+      size: rest.htmlSize,
       'main-field': rest['main-field'],
       ...bs3Props,
     }