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>
   )
 }