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
2026-05-23 17:19:37 +02:00 · 2025-03-10 10:07:45 +01:00
parent 6a344c7a52
commit 69bc8a135b
15 changed files with 16 additions and 134 deletions
--- a/services/web/app/src/Features/User/UserPagesController.mjs
+++ b/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
--- a/services/web/frontend/js/features/editor-left-menu/components/actions-copy-project.tsx
+++ b/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
--- a/services/web/frontend/js/features/editor-left-menu/components/actions-word-count.tsx
+++ b/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'
--- a/services/web/frontend/js/features/editor-left-menu/components/help-contact-us.tsx
+++ b/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}
--- a/services/web/frontend/js/features/editor-left-menu/components/help-documentation.tsx
+++ b/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>
    </>
--- a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx
+++ b/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
--- a/services/web/frontend/js/features/editor-left-menu/components/left-menu-button.tsx
+++ b/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
 }

--- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx
+++ b/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]
  )
 }
--- a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
+++ b/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()
    }
--- a/services/web/frontend/js/features/history/components/change-list/all-history-list.tsx
+++ b/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: [
            {
--- a/services/web/frontend/js/features/project-list/components/search-form.tsx
+++ b/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', {
--- a/services/web/frontend/js/features/source-editor/extensions/search.ts
+++ b/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)',
--- a/services/web/frontend/js/features/source-editor/extensions/theme.ts
+++ b/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,
--- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
+++ b/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,
      })
    )

--- a/services/web/frontend/js/features/utils/bootstrap-5.ts
+++ b/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(