Merge intermediate component wrappers into OL-prefixed components (#34996)

* Merge intermediate component wrappers into OL-prefixed components

* Replace all intermediate wrapper consumers with OL-prefixed components directly

* Fix jsx/js files still importing deleted shim components

* Remove duplicate OLNotification imports left by first pass

* Rename OLTagIcon to TagIcon, remove OL prefix

* Rename OLDropdownMenuItem to DropdownMenuItem, remove OL prefix

* Remove OLNotification, use Notification directly

* Move Notification to the main shared component folder

* Update tag-icon import path out of ol/

* Move TagIcon to the main shared component folder

* Update dropdown-menu-item import path out of ol/

* Move DropdownMenuItem to the main shared component folder

* Fix dropdown-menu-item import path to dropdown/ subfolder

* Remove BS5 alias prefixes from shared components

* Restore notification-list wrapper in Notification component

* Add translation for loading button

* Remove redundant import aliasing

* Resolve conflicts

* Restore notification container `notification-list`

GitOrigin-RevId: 24a5af18599a3e02ac6fd61c09cf5a49ef6e0020

services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx

@@ -5,7 +5,7 @@ import { debugging } from '@/utils/debugging'
 import { ElementType } from 'react'
 import { createPortal } from 'react-dom'
 import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 
 const rollingBuildsUpdatedAlert: Array<{
@@ -39,10 +39,12 @@ export function Alerts() {
       {connectionState.forceDisconnected &&
       // hide "disconnected" banner when displaying out of sync modal
       connectionState.error !== 'out-of-sync' ? (
-        <OLNotification
-          type="error"
-          content={<strong>{t('disconnected')}</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={<strong>{t('disconnected')}</strong>}
+          />
+        </div>
       ) : null}
 
       {connectionState.reconnectAt ? (
@@ -53,10 +55,12 @@ export function Alerts() {
       ) : null}
 
       {isStillReconnecting ? (
-        <OLNotification
-          type="warning"
-          content={<strong>{t('reconnecting')}…</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={<strong>{t('reconnecting')}…</strong>}
+          />
+        </div>
       ) : null}
 
       {connectionState.inactiveDisconnect ||
@@ -64,19 +68,23 @@ export function Alerts() {
         (connectionState.error === 'rate-limited' ||
           connectionState.error === 'unable-to-connect') &&
         !secondsUntilReconnect()) ? (
-        <OLNotification
-          type="warning"
-          content={
-            <strong>{t('editor_disconected_click_to_reconnect')}</strong>
-          }
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={
+              <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+            }
+          />
+        </div>
       ) : null}
 
       {debugging ? (
-        <OLNotification
-          type="warning"
-          content={<strong>Connected: {isConnected.toString()}</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={<strong>Connected: {isConnected.toString()}</strong>}
+          />
+        </div>
       ) : null}
     </>,
     globalAlertsContainer

services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
 import { secondsUntil } from '@/features/ide-react/connection/utils'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 
 type LostConnectionAlertProps = {
@@ -26,24 +26,26 @@ export function LostConnectionAlert({
   }, [reconnectAt])
 
   return (
-    <OLNotification
-      type="warning"
-      content={
-        <>
-          <strong>{t('lost_connection')}</strong>{' '}
-          {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
-        </>
-      }
-      action={
-        <OLButton
-          id="try-reconnect-now-button"
-          onClick={() => tryReconnectNow()}
-          size="sm"
-          variant="secondary"
-        >
-          {t('try_now')}
-        </OLButton>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={
+          <>
+            <strong>{t('lost_connection')}</strong>{' '}
+            {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
+          </>
+        }
+        action={
+          <OLButton
+            id="try-reconnect-now-button"
+            onClick={() => tryReconnectNow()}
+            size="sm"
+            variant="secondary"
+          >
+            {t('try_now')}
+          </OLButton>
+        }
+      />
+    </div>
   )
 }

services/web/frontend/js/features/ide-react/components/toolbar/download-project.tsx

@@ -1,5 +1,5 @@
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import { isSmallDevice, sendMB } from '@/infrastructure/event-tracking'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
@@ -31,14 +31,14 @@ export const DownloadProjectZip = () => {
   )
 
   return (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       href={`/project/${projectId}/download/zip`}
       target="_blank"
       rel="noreferrer"
       onClick={sendDownloadEvent}
     >
       {t('download_as_source_zip')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 }
 
@@ -75,7 +75,7 @@ export const DownloadProjectPDF = () => {
   )
 
   const button = (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       href={pdfDownloadUrl || pdfUrl}
       target="_blank"
       rel="noreferrer"
@@ -83,7 +83,7 @@ export const DownloadProjectPDF = () => {
       disabled={!pdfUrl}
     >
       {t('download_as_pdf')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 
   if (!pdfUrl) {

services/web/frontend/js/features/ide-react/components/toolbar/duplicate-project.tsx

@@ -1,5 +1,5 @@
 import EditorCloneProjectModalWrapper from '@/features/clone-project-modal/components/editor-clone-project-modal-wrapper'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 import useOpenProject from '@/shared/hooks/use-open-project'
 import getMeta from '@/utils/meta'
@@ -24,9 +24,9 @@ export const DuplicateProject = () => {
 
   return (
     <>
-      <OLDropdownMenuItem onClick={handleShowModal}>
+      <DropdownMenuItem onClick={handleShowModal}>
         {t('make_a_copy')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <EditorCloneProjectModalWrapper
         show={showModal}
         handleHide={() => setShowModal(false)}

services/web/frontend/js/features/ide-react/components/toolbar/export-project-with-conversion-button.tsx

@@ -3,7 +3,7 @@ import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { FC } from 'react'
 import useConvertProject from '../../hooks/use-convert-project'
 import { useCommandProvider } from '../../hooks/use-command-provider'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useRootDoc } from '@/shared/hooks/use-root-doc'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 
@@ -52,8 +52,6 @@ export const ExportProjectWithConversionButton: FC<
   }
 
   return (
-    <OLDropdownMenuItem onClick={downloadConversion}>
-      {label}
-    </OLDropdownMenuItem>
+    <DropdownMenuItem onClick={downloadConversion}>{label}</DropdownMenuItem>
   )
 }

services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx

@@ -12,7 +12,7 @@ import { useEditorContext } from '@/shared/context/editor-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { DownloadProjectPDF, DownloadProjectZip } from './download-project'
 import { useCallback, useState } from 'react'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import EditableLabel from './editable-label'
 import { DuplicateProject } from './duplicate-project'
 import { ExportProjectWithConversionButton } from './export-project-with-conversion-button'
@@ -99,14 +99,14 @@ export const ToolbarProjectTitle = () => {
         />
         <DropdownDivider />
         <DuplicateProject />
-        <OLDropdownMenuItem
+        <DropdownMenuItem
           onClick={() => {
             setIsRenaming(true)
           }}
           disabled={!hasRenamePermissions}
         >
           {t('rename')}
-        </OLDropdownMenuItem>
+        </DropdownMenuItem>
       </DropdownMenu>
     </Dropdown>
   )

services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx

@@ -1,7 +1,7 @@
 import { DropdownDivider } from '@/shared/components/dropdown/dropdown-menu'
 import { useTranslation } from 'react-i18next'
 import { useEditorPropertiesContext } from '../../context/editor-properties-context'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useIdeReactContext } from '../../context/ide-react-context'
 import { usePermissionsContext } from '../../context/permissions-context'
@@ -43,7 +43,7 @@ const ReviewModeOptions: React.FC = () => {
     <>
       <DropdownDivider />
       <NestedMenuBarDropdown id="editing-mode-group" title={t('editing_mode')}>
-        <OLDropdownMenuItem
+        <DropdownMenuItem
           as="button"
           disabled={!write || !user.id}
           onClick={() => {
@@ -61,8 +61,8 @@ const ReviewModeOptions: React.FC = () => {
           active={write && mode === 'edit'}
         >
           {t('editing')}
-        </OLDropdownMenuItem>
-        <OLDropdownMenuItem
+        </DropdownMenuItem>
+        <DropdownMenuItem
           as="button"
           disabled={permissionsLevel === 'readOnly' || !user.id}
           onClick={() => {
@@ -87,15 +87,15 @@ const ReviewModeOptions: React.FC = () => {
           active={trackedWrite && mode === 'review'}
         >
           {t('reviewing')}
-        </OLDropdownMenuItem>
+        </DropdownMenuItem>
         {showViewOption && (
-          <OLDropdownMenuItem
+          <DropdownMenuItem
             as="button"
             leadingIcon="visibility"
             active={mode === 'view'}
           >
             {t('viewing')}
-          </OLDropdownMenuItem>
+          </DropdownMenuItem>
         )}
       </NestedMenuBarDropdown>
     </>

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useMemo, useRef } from 'react'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 
@@ -50,12 +50,14 @@ const UnsavedDocAlert: FC<{ docId: string; seconds: number }> = ({
   }
 
   return (
-    <OLNotification
-      type="warning"
-      content={t('saving_notification_with_seconds', {
-        docname: doc.entity.name,
-        seconds,
-      })}
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={t('saving_notification_with_seconds', {
+          docname: doc.entity.name,
+          seconds,
+        })}
+      />
+    </div>
   )
 }

services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-alert.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 
@@ -18,14 +18,16 @@ export const UnsavedDocsLockedAlert: FC = () => {
   }, [reportError, openDocs])
 
   return (
-    <OLNotification
-      type="warning"
-      content={
-        <>
-          <strong>{t('connection_lost_with_unsaved_changes')}</strong>{' '}
-          {t('dont_reload_or_close_this_tab')} {t('your_changes_will_save')}
-        </>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={
+          <>
+            <strong>{t('connection_lost_with_unsaved_changes')}</strong>{' '}
+            {t('dont_reload_or_close_this_tab')} {t('your_changes_will_save')}
+          </>
+        }
+      />
+    </div>
   )
 }