Bootstrap 3 cleanup from the IDE page - #2 (#24175)

* Remove skipLoadingStyleSheet

* Remove unused bootstrap-5 assignment from the Account settings page since it's archived

* Remove bsVersionIcon

* Remove bsVersion, bootstrapVersion and isBootstrap5 from elements on the IDE page

* Remove BS3Dropdown from the context menu

* Cleanup Bootstrap 3 related comment and type

GitOrigin-RevId: a67244eb78943ee84cc5f89bae164c0361e8fc13

services/web/app/src/Features/User/UserPagesController.mjs

@@ -117,10 +117,6 @@ async function settingsPage(req, res) {
     )
   }
 
-  // Get the user's assignment for this page's Bootstrap 5 split test, which
-  // populates splitTestVariants with a value for the split test name and allows
-  // Pug to read it
-  await SplitTestHandler.promises.getAssignment(req, res, 'bootstrap-5')
   // Get the users write-and-cite assignment to switch between translation strings
   await SplitTestHandler.promises.getAssignment(req, res, 'write-and-cite')
   // Get the users papers-integration assignment to show the linking widget

services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx

@@ -4,7 +4,6 @@ import EditorCloneProjectModalWrapper from '../../clone-project-modal/components
 import LeftMenuButton from './left-menu-button'
 import { useLocation } from '../../../shared/hooks/use-location'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import { bsVersionIcon } from '@/features/utils/bootstrap-5'
 
 type ProjectCopyResponse = {
   project_id: string
@@ -29,13 +28,7 @@ export default function ActionsCopyProject() {
 
   return (
     <>
-      <LeftMenuButton
-        onClick={handleShowModal}
-        icon={bsVersionIcon({
-          bs5: { type: 'file_copy' },
-          bs3: { type: 'copy', fw: true },
-        })}
-      >
+      <LeftMenuButton onClick={handleShowModal} icon="file_copy">
         {t('copy_project')}
       </LeftMenuButton>
       <EditorCloneProjectModalWrapper

services/web/frontend/js/features/editor-left-menu/components/actions-word-count.tsx

@@ -4,7 +4,6 @@ import { useDetachCompileContext as useCompileContext } from '../../../shared/co
 import WordCountModal from '../../word-count-modal/components/word-count-modal'
 import LeftMenuButton from './left-menu-button'
 import * as eventTracking from '../../../infrastructure/event-tracking'
-import { bsVersionIcon } from '@/features/utils/bootstrap-5'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export default function ActionsWordCount() {
@@ -20,13 +19,7 @@ export default function ActionsWordCount() {
   return (
     <>
       {pdfUrl ? (
-        <LeftMenuButton
-          onClick={handleShowModal}
-          icon={bsVersionIcon({
-            bs5: { type: 'match_case' },
-            bs3: { type: 'eye', fw: true },
-          })}
-        >
+        <LeftMenuButton onClick={handleShowModal} icon="match_case">
           {t('word_count')}
         </LeftMenuButton>
       ) : (
@@ -40,10 +33,7 @@ export default function ActionsWordCount() {
           {/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
           <div>
             <LeftMenuButton
-              icon={bsVersionIcon({
-                bs5: { type: 'match_case' },
-                bs3: { type: 'eye', fw: true },
-              })}
+              icon="match_case"
               disabled
               disabledAccesibilityText={t(
                 'please_compile_pdf_before_word_count'

services/web/frontend/js/features/editor-left-menu/components/help-contact-us.tsx

@@ -3,7 +3,6 @@ import { useCallback } from 'react'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { useContactUsModal } from '../../../shared/hooks/use-contact-us-modal'
 import LeftMenuButton from './left-menu-button'
-import { bsVersionIcon } from '@/features/utils/bootstrap-5'
 
 export default function HelpContactUs() {
   const { modal, showModal } = useContactUsModal()
@@ -16,13 +15,7 @@ export default function HelpContactUs() {
 
   return (
     <>
-      <LeftMenuButton
-        onClick={showModalWithAnalytics}
-        icon={bsVersionIcon({
-          bs5: { type: 'contact_support' },
-          bs3: { type: 'question', fw: true },
-        })}
-      >
+      <LeftMenuButton onClick={showModalWithAnalytics} icon="contact_support">
         {t('contact_us')}
       </LeftMenuButton>
       {modal}

services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx

@@ -1,20 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import LeftMenuButton from './left-menu-button'
-import { bsVersionIcon } from '@/features/utils/bootstrap-5'
 
 export default function HelpDocumentation() {
   const { t } = useTranslation()
 
   return (
     <>
-      <LeftMenuButton
-        type="link"
-        href="/learn"
-        icon={bsVersionIcon({
-          bs5: { type: 'book_4' },
-          bs3: { type: 'book', fw: true },
-        })}
-      >
+      <LeftMenuButton type="link" href="/learn" icon="book_4">
         {t('documentation')}
       </LeftMenuButton>
     </>

services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx

@@ -4,7 +4,6 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
 import { useProjectContext } from '../../../shared/context/project-context'
 import HotkeysModal from '../../hotkeys-modal/components/hotkeys-modal'
 import LeftMenuButton from './left-menu-button'
-import { bsVersionIcon } from '@/features/utils/bootstrap-5'
 import { isMac } from '@/shared/utils/os'
 
 export default function HelpShowHotkeys() {
@@ -19,13 +18,7 @@ export default function HelpShowHotkeys() {
 
   return (
     <>
-      <LeftMenuButton
-        onClick={showModalWithAnalytics}
-        icon={bsVersionIcon({
-          bs5: { type: 'keyboard' },
-          bs3: { type: 'keyboard-o', fw: true },
-        })}
-      >
+      <LeftMenuButton onClick={showModalWithAnalytics} icon="keyboard">
         {t('show_hotkeys')}
       </LeftMenuButton>
       <HotkeysModal

services/web/frontend/js/features/editor-left-menu/components/left-menu-button.tsx

@@ -3,10 +3,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 
 type Props = {
   onClick?: () => void
-  icon?: {
-    type: string
-    fw?: boolean
-  }
+  icon?: string
   svgIcon?: React.ReactElement | null
   disabled?: boolean
   disabledAccesibilityText?: string
@@ -19,12 +16,12 @@ function LeftMenuButtonIcon({
   icon,
 }: {
   svgIcon?: React.ReactElement | null
-  icon?: { type: string; fw?: boolean }
+  icon?: string
 }) {
   if (svgIcon) {
     return <div className="material-symbols">{svgIcon}</div>
   } else if (icon) {
-    return <MaterialIcon type={icon.type} />
+    return <MaterialIcon type={icon} />
   } else return null
 }
 

services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx

@@ -1,19 +1,12 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import _ from 'lodash'
-import type { OverallThemeMeta } from '../../../../../types/project-settings'
 import { saveUserSettings } from '../utils/api'
 import { UserSettings } from '../../../../../types/user-settings'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import getMeta from '@/utils/meta'
-import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 import { isIEEEBranded } from '@/utils/is-ieee-branded'
-import { useLayoutContext } from '@/shared/context/layout-context'
 
 export default function useSetOverallTheme() {
-  const [chosenTheme, setChosenTheme] = useState<OverallThemeMeta | null>(null)
-
-  const { loadingStyleSheet, setLoadingStyleSheet } = useLayoutContext()
-
   const { userSettings, setUserSettings } = useUserSettingsContext()
   const { overallTheme } = userSettings
 
@@ -24,54 +17,13 @@ export default function useSetOverallTheme() {
     [setUserSettings]
   )
 
-  const skipLoadingStyleSheet = isBootstrap5()
-
   useEffect(() => {
-    // Sets `data-theme` attribute to the body element, needed for Bootstrap 5 theming
+    // Sets the body's data-theme attribute for theming
     const theme =
       overallTheme === 'light-' && !isIEEEBranded() ? 'light' : 'default'
     document.body.dataset.theme = theme
   }, [overallTheme])
 
-  useEffect(() => {
-    if (skipLoadingStyleSheet) {
-      return
-    }
-
-    const docHeadEl = document.querySelector('head')
-    const oldStyleSheetEl = document.getElementById('main-stylesheet')
-
-    const newStyleSheetEl = document.createElement('link')
-    newStyleSheetEl.setAttribute('rel', 'stylesheet')
-    newStyleSheetEl.setAttribute('id', 'main-stylesheet')
-    newStyleSheetEl.setAttribute('href', chosenTheme?.path ?? '')
-
-    const loadEventCallback = () => {
-      setLoadingStyleSheet(false)
-
-      if (docHeadEl && oldStyleSheetEl) {
-        docHeadEl.removeChild(oldStyleSheetEl)
-      }
-    }
-
-    if (loadingStyleSheet) {
-      newStyleSheetEl.addEventListener('load', loadEventCallback, {
-        once: true,
-      })
-
-      docHeadEl?.appendChild(newStyleSheetEl)
-    }
-
-    return () => {
-      newStyleSheetEl.removeEventListener('load', loadEventCallback)
-    }
-  }, [
-    loadingStyleSheet,
-    setLoadingStyleSheet,
-    skipLoadingStyleSheet,
-    chosenTheme?.path,
-  ])
-
   return useCallback(
     (newOverallTheme: UserSettings['overallTheme']) => {
       if (overallTheme !== newOverallTheme) {
@@ -81,15 +33,11 @@ export default function useSetOverallTheme() {
         )
 
         if (chosenTheme) {
-          if (!skipLoadingStyleSheet) {
-            setLoadingStyleSheet(true)
-          }
-          setChosenTheme(chosenTheme)
           setOverallTheme(newOverallTheme)
           saveUserSettings('overallTheme', newOverallTheme)
         }
       }
     },
-    [overallTheme, setLoadingStyleSheet, skipLoadingStyleSheet, setOverallTheme]
+    [overallTheme, setOverallTheme]
   )
 }

services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
-import { Dropdown as BS3Dropdown } from 'react-bootstrap'
 import {
   Dropdown,
   DropdownMenu,
@@ -48,7 +47,7 @@ function FileTreeContextMenu() {
 
   // A11y - Close the context menu when the user presses the Tab key
   // Focus should move to the next element in the filetree
-  function handleKeyDown(event: React.KeyboardEvent<BS3Dropdown | Element>) {
+  function handleKeyDown(event: React.KeyboardEvent<Element>) {
     if (event.key === 'Tab') {
       close()
     }

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -181,7 +181,6 @@ function AllHistoryList() {
         onHide={hidePopover}
         // using scrollerRef to position the popover in the middle of the viewport
         target={scrollerRef.current}
-        // Only used in Bootstrap 5. In Bootstrap 3 this is done with CSS.
         popperConfig={{
           modifiers: [
             {

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

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import { FormControl } from 'react-bootstrap'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import classnames from 'classnames'
 import { Tag } from '../../../../../app/src/Features/Tags/types'
@@ -59,7 +58,7 @@ function SearchForm({
 
   const handleChange = (
     e: React.ChangeEvent<
-      HTMLInputElement & Omit<FormControl, keyof HTMLInputElement>
+      HTMLInputElement & Omit<typeof OLFormControl, keyof HTMLInputElement>
     >
   ) => {
     eventTracking.sendMB('project-list-page-interaction', {

services/web/frontend/js/features/source-editor/extensions/search.ts

@@ -303,7 +303,7 @@ const searchFormTheme = EditorView.theme({
       padding: 'var(--spacing-03) var(--spacing-05)',
     },
   },
-  '&.bootstrap-5 .ol-cm-search-form': {
+  '&.ol-cm-search-form': {
     '--ol-cm-search-form-gap': 'var(--spacing-05)',
     '--ol-cm-search-form-button-margin': 'var(--spacing-02)',
     '--input-border': 'var(--border-primary)',

services/web/frontend/js/features/source-editor/extensions/theme.ts

@@ -19,7 +19,6 @@ type Options = {
   fontFamily: FontFamily
   lineHeight: LineHeight
   overallTheme: OverallTheme
-  bootstrapVersion: 3 | 5
 }
 
 export const theme = (options: Options) => [
@@ -60,7 +59,6 @@ const createThemeFromOptions = ({
   fontFamily = 'monaco',
   lineHeight = 'normal',
   overallTheme = '',
-  bootstrapVersion = 3,
 }: Options) => {
   // Theme styles that depend on settings.
   const styles = userStyles({ fontSize, fontFamily, lineHeight })
@@ -68,8 +66,7 @@ const createThemeFromOptions = ({
   return [
     EditorView.editorAttributes.of({
       class: classNames(
-        overallTheme === '' ? 'overall-theme-dark' : 'overall-theme-light',
-        'bootstrap-' + bootstrapVersion
+        overallTheme === '' ? 'overall-theme-dark' : 'overall-theme-light'
       ),
       style: Object.entries({
         '--font-size': styles.fontSize,

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -56,7 +56,6 @@ import { useRangesContext } from '@/features/review-panel-new/context/ranges-con
 import { updateRanges } from '@/features/source-editor/extensions/ranges'
 import { useThreadsContext } from '@/features/review-panel-new/context/threads-context'
 import { useHunspell } from '@/features/source-editor/hooks/use-hunspell'
-import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 import { Permissions } from '@/features/ide-react/types/permissions'
 import { lineHeights } from '@/shared/utils/styles'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
@@ -130,7 +129,6 @@ function useCodeMirrorScope(view: EditorView) {
     lineHeight,
     overallTheme,
     editorTheme,
-    bootstrapVersion: 3 as 3 | 5,
   })
 
   useEffect(() => {
@@ -140,7 +138,6 @@ function useCodeMirrorScope(view: EditorView) {
       lineHeight,
       overallTheme,
       editorTheme,
-      bootstrapVersion: isBootstrap5() ? 5 : 3,
     }
 
     view.dispatch(
@@ -149,7 +146,6 @@ function useCodeMirrorScope(view: EditorView) {
         fontSize,
         lineHeight,
         overallTheme,
-        bootstrapVersion: themeRef.current.bootstrapVersion,
       })
     )
 

services/web/frontend/js/features/utils/bootstrap-5.ts

@@ -12,16 +12,6 @@ export function bsVersion({ bs5, bs3 }: { bs5?: unknown; bs3?: unknown }) {
   return isBootstrap5() ? bs5 : bs3
 }
 
-export const bsVersionIcon = ({
-  bs5,
-  bs3,
-}: {
-  bs5?: { type: string }
-  bs3?: { type: string; fw?: boolean }
-}) => {
-  return isBootstrap5() ? bs5 : bs3
-}
-
 // get all `aria-*` and `data-*` attributes
 export const getAriaAndDataProps = (obj: Record<string, unknown>) => {
   return Object.entries(obj).reduce(