From 1ee87a823d7d0a0d19aae26a10a58dbe3df9187d Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Mon, 13 Jul 2026 12:55:19 +0200
Subject: [PATCH] Unify component wrappers and OL-prefix dropdown components
(#35152)
* Rename dropdown primitives to OL-prefixed components
* Migrate all consumers to OL-prefixed dropdown components
* Migrate subscription dropdown shells to OL components
* Update pdf-preview story to OL-prefixed dropdown components
* Migrate navbar and spelling dropdowns to OL components
* Move dropdown primitives to ol/ol-dropdown-menu, remove BS5 import aliases
* Rename dropdown prop types to OL-prefixed, clean up BS5 import aliases
* Widen OLDropdownItem/Toggle/Menu props to include AriaAttributes and data-*
GitOrigin-RevId: 0babce46867849b3f176bac8cf1652dc76fd34da
---
.../chat/components/message-dropdown.tsx | 30 ++---
.../components/online-users-widget.tsx | 32 +++---
.../components/file-tree-context-menu.tsx | 14 +--
.../file-tree-item-menu-items.tsx | 38 ++++---
.../members-table/dropdown-button.tsx | 32 +++---
.../change-list/dropdown/actions-dropdown.tsx | 20 ++--
.../components/rail/rail-action-element.tsx | 18 +--
.../components/rail/rail-help-dropdown.tsx | 26 ++---
.../rail/rail-overflow-dropdown.tsx | 6 +-
.../toolbar/change-layout-button.tsx | 20 ++--
.../toolbar/change-layout-options.tsx | 16 +--
.../components/toolbar/command-dropdown.tsx | 10 +-
.../ide-react/components/toolbar/menu-bar.tsx | 20 ++--
.../components/toolbar/project-title.tsx | 26 ++---
.../toolbar/review-mode-options.tsx | 4 +-
.../components/pdf-compile-button.tsx | 88 +++++++-------
.../components/pdf-download-files-button.tsx | 20 ++--
.../pdf-preview/components/pdf-file-list.tsx | 24 ++--
.../components/pdf-zoom-dropdown.tsx | 62 +++++-----
.../components/dropdown/actions-dropdown.tsx | 62 +++++-----
.../dropdown/mobile-page-switcher-items.tsx | 14 +--
.../components/dropdown/projects-dropdown.tsx | 36 +++---
.../components/dropdown/sort-by-dropdown.tsx | 32 +++---
.../components/new-project-button.tsx | 72 ++++++------
.../components/sidebar/tags-list.tsx | 30 ++---
.../project-tools-more-dropdown-button.tsx | 23 ++--
.../project-tools/buttons/tags-dropdown.tsx | 40 +++----
.../project-list/components/tags-list.tsx | 18 +--
...me-message-create-new-project-dropdown.tsx | 58 +++++-----
.../components/review-mode-switcher.tsx | 28 ++---
.../review-panel-comment-options.tsx | 30 ++---
.../emails/add-email/country-input.tsx | 6 +-
.../components/emails/downshift-input.tsx | 10 +-
.../components/edit-member.tsx | 20 ++--
.../share-project-modal/components/invite.tsx | 20 ++--
.../components/project-access.tsx | 54 ++++-----
.../components/select-collaborators.tsx | 6 +-
.../editor-context-menu-feedback.tsx | 12 +-
.../components/editor-context-menu.tsx | 24 ++--
.../components/math-preview-tooltip.tsx | 20 ++--
.../components/tabs/tabs-context-menu.tsx | 36 +++---
.../components/toolbar/math-dropdown.tsx | 6 +-
.../components/toolbar/table-dropdown.tsx | 6 +-
.../spelling-suggestions-language.tsx | 6 +-
.../spelling/spelling-suggestions.tsx | 24 ++--
.../dashboard/states/active/add-ons.tsx | 18 +--
.../writefull-bundle-management-modal.tsx | 18 +--
.../dropdown/dropdown-menu-item.tsx | 8 +-
.../js/shared/components/language-picker.tsx | 32 +++---
.../components/menu-bar/menu-bar-dropdown.tsx | 32 +++---
.../components/menu-bar/menu-bar-option.tsx | 6 +-
.../components/navbar/account-menu-items.tsx | 10 +-
.../components/navbar/contact-us-item.tsx | 6 +-
.../navbar/nav-dropdown-divider.tsx | 4 +-
.../navbar/nav-dropdown-link-item.tsx | 10 +-
.../components/navbar/nav-dropdown-menu.tsx | 19 ++--
.../shared/components/ol/ol-autocomplete.tsx | 18 +--
.../ol-dropdown-menu.tsx} | 92 ++++++++-------
.../frontend/js/shared/components/select.tsx | 10 +-
.../sidebar/sidebar-lower-section.tsx | 38 +++----
.../components/types/dropdown-menu-props.ts | 107 ++++++++++--------
61 files changed, 831 insertions(+), 796 deletions(-)
rename services/web/frontend/js/shared/components/{dropdown/dropdown-menu.tsx => ol/ol-dropdown-menu.tsx} (66%)
diff --git a/services/web/frontend/js/features/chat/components/message-dropdown.tsx b/services/web/frontend/js/features/chat/components/message-dropdown.tsx
index 505d84922b..4393202bee 100644
--- a/services/web/frontend/js/features/chat/components/message-dropdown.tsx
+++ b/services/web/frontend/js/features/chat/components/message-dropdown.tsx
@@ -1,9 +1,9 @@
import {
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import MaterialIcon from '@/shared/components/material-icon'
import { useTranslation } from 'react-i18next'
import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
@@ -32,11 +32,11 @@ export default function MessageDropdown({ message }: { message: Message }) {
}, [message.id, startedEditingMessage])
return (
-
-
+
+
-
-
+
-
+
{t('edit')}
-
-
+
+
{t('delete')}
-
+
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx
index fef467abef..e36f70ddff 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx
@@ -1,11 +1,11 @@
import { OnlineUser } from '@/features/ide-react/context/online-users-context'
import {
- Dropdown,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
import {
getBackgroundColorForUserId,
@@ -116,8 +116,8 @@ const OnlineUserOverflow = ({
}) => {
const { t } = useTranslation()
return (
-
-
+
+
+{users.length}
-
-
-
+
+
+
{t('connected_users')}
-
+
{users.map((user, index) => (
- goToUser(user)}
>
{user.name}
-
+
))}
-
-
+
+
)
}
diff --git 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
index debc2bd083..f8d4e5ee74 100644
--- 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,9 +1,9 @@
import React, { useCallback, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'
import {
- Dropdown,
- DropdownMenu,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { useFileTreeData } from '@/shared/context/file-tree-data-context'
import { useFileTreeMainContext } from '../contexts/file-tree-main'
@@ -96,13 +96,13 @@ function FileTreeContextMenu() {
return ReactDOM.createPortal(
-
-
-
+
+
,
document.body
)
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx
index 3ffdbe7642..fe4a65b244 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-menu-items.tsx
@@ -4,9 +4,9 @@ import * as eventTracking from '../../../../infrastructure/event-tracking'
import { useProjectContext } from '@/shared/context/project-context'
import {
- DropdownDivider,
- DropdownItem,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownDivider,
+ OLDropdownItem,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
function FileTreeItemMenuItems() {
@@ -51,55 +51,57 @@ function FileTreeItemMenuItems() {
<>
{canRename ? (
- {t('rename')}
+ {t('rename')}
) : null}
{downloadPath ? (
-
{t('download')}
-
+
) : null}
{canSetRootDocId ? (
<>
-
+
-
+
{t('set_as_main_document')}
-
+
>
) : null}
{canDelete ? (
<>
-
+
- {t('delete')}
+
+ {t('delete')}
+
>
) : null}
{canCreate ? (
<>
-
+
-
+
{t('new_file')}
-
+
-
+
{t('new_folder')}
-
+
-
+
{t('upload')}
-
+
>
) : null}
diff --git a/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx b/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx
index 5b03a2ce6c..26949031a0 100644
--- a/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/dropdown-button.tsx
@@ -6,11 +6,11 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import {
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { User } from '../../../../../../types/group-management/user'
import useAsync from '@/shared/hooks/use-async'
import { type FetchError, postJSON } from '@/infrastructure/fetch-json'
@@ -318,30 +318,30 @@ export default function DropdownButton({
if (buttons.length === 0) {
buttons.push(
-
{t('no_actions')}
-
+
)
}
return (
-
-
+
-
-
+
+
{buttons}
-
-
+
+
)
}
@@ -349,7 +349,7 @@ type MenuItemButtonProps = {
isLoading?: boolean
'data-testid'?: string
} & Pick, 'children' | 'onClick' | 'className'> &
- Pick, 'variant'>
+ Pick, 'variant'>
function MenuItemButton({
children,
@@ -360,7 +360,7 @@ function MenuItemButton({
}: MenuItemButtonProps) {
return (
-
{children}
-
+
)
}
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
index 750bae7fa0..62a824c1f2 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/actions-dropdown.tsx
@@ -1,9 +1,9 @@
import React, { ReactNode } from 'react'
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
type ActionDropdownProps = {
@@ -19,7 +19,7 @@ function ActionsDropdown(props: ActionDropdownProps) {
const { id, children, isOpened, iconTag, setIsOpened, tooltipDescription } =
props
return (
-
{/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
-
{iconTag}
-
+
-
+
{children}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx b/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
index 14d959ab0d..c3e8f62ec2 100644
--- a/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
+++ b/services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx
@@ -3,11 +3,11 @@ import MaterialIcon, {
} from '@/shared/components/material-icon'
import { forwardRef, ReactElement, useCallback } from 'react'
import {
- Dropdown,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
-import { DropdownToggle as BS5DropdownToggle } from 'react-bootstrap'
+import { DropdownToggle } from 'react-bootstrap'
type RailActionButton = {
key: string
@@ -45,15 +45,15 @@ const RailActionElement = forwardRef(
if ('dropdown' in action) {
return (
-
+
- }
+ }
id={`rail-dropdown-btn-${action.key}`}
className="ide-rail-tab-link ide-rail-tab-button ide-rail-tab-dropdown"
as="button"
@@ -63,11 +63,11 @@ const RailActionElement = forwardRef(
type={action.icon}
indicator={action.indicator}
/>
-
+
{action.dropdown}
-
+
)
} else {
return (
diff --git a/services/web/frontend/js/features/ide-react/components/rail/rail-help-dropdown.tsx b/services/web/frontend/js/features/ide-react/components/rail/rail-help-dropdown.tsx
index 654d29f858..7b70d33408 100644
--- a/services/web/frontend/js/features/ide-react/components/rail/rail-help-dropdown.tsx
+++ b/services/web/frontend/js/features/ide-react/components/rail/rail-help-dropdown.tsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'
import { useRailContext } from '@/features/ide-react/context/rail-context'
import { useCallback } from 'react'
import {
- DropdownDivider,
- DropdownItem,
- DropdownMenu,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownDivider,
+ OLDropdownItem,
+ OLDropdownMenu,
+} from '@/shared/components/ol/ol-dropdown-menu'
export default function RailHelpDropdown() {
const showSupport = getMeta('ol-showSupport')
@@ -21,28 +21,28 @@ export default function RailHelpDropdown() {
}, [setActiveModal])
return (
-
-
+
+
{t('keyboard_shortcuts')}
-
+
{showDocumentation && (
-
{t('documentation')}
-
+
)}
{showSupport && (
<>
-
-
+
+
{t('contact_us')}
-
+
>
)}
-
+
)
}
diff --git a/services/web/frontend/js/features/ide-react/components/rail/rail-overflow-dropdown.tsx b/services/web/frontend/js/features/ide-react/components/rail/rail-overflow-dropdown.tsx
index 642b91497f..c8d88fa3b0 100644
--- a/services/web/frontend/js/features/ide-react/components/rail/rail-overflow-dropdown.tsx
+++ b/services/web/frontend/js/features/ide-react/components/rail/rail-overflow-dropdown.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenu } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownMenu } from '@/shared/components/ol/ol-dropdown-menu'
import { RailTabKey } from '@/features/ide-react/context/rail-context'
import { RailElement } from '@/features/ide-react/util/rail-types'
import RailTab from './rail-tab'
@@ -14,7 +14,7 @@ export default function RailOverflowDropdown({
selectedTab: RailTabKey
}) {
return (
-
+
{tabs
.filter(shouldIncludeElement)
.map(({ icon, key, indicator, title, disabled }) => (
@@ -28,6 +28,6 @@ export default function RailOverflowDropdown({
disabled={disabled}
/>
))}
-
+
)
}
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx
index 4ec702a6b7..debe5ed0da 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import ChangeLayoutOptions from './change-layout-options'
import MaterialIcon from '@/shared/components/material-icon'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
@@ -19,26 +19,26 @@ export default function ChangeLayoutButton() {
return (
)
}
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx
index 15b307a27d..d324be7770 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx
@@ -1,8 +1,8 @@
import {
- DropdownItem,
- DropdownHeader,
- DropdownDivider,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownItem,
+ OLDropdownHeader,
+ OLDropdownDivider,
+} from '@/shared/components/ol/ol-dropdown-menu'
import {
IdeLayout,
IdeView,
@@ -81,7 +81,7 @@ const LayoutDropdownItem = ({
}
return (
-
{children}
-
+
)
}
@@ -139,7 +139,7 @@ export default function ChangeLayoutOptions() {
return (
<>
- {t('layout_options')}
+ {t('layout_options')}
handleChangeLayout('sideBySide')}
active={activeLayoutOption === 'sideBySide'}
@@ -184,7 +184,7 @@ export default function ChangeLayoutOptions() {
{focusModeEnabled && (
<>
-
+
{
setFocusMode(!focusMode)
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/command-dropdown.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/command-dropdown.tsx
index e0457b8217..be92aadce1 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/command-dropdown.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/command-dropdown.tsx
@@ -5,9 +5,9 @@ import {
useCommandRegistry,
} from '@/features/ide-react/context/command-registry-context'
import {
- DropdownDivider,
- DropdownHeader,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownDivider,
+ OLDropdownHeader,
+} from '@/shared/components/ol/ol-dropdown-menu'
import {
MenuBarDropdown,
NestedMenuBarDropdown,
@@ -101,8 +101,8 @@ function CommandSectionContent({
}
return (
<>
- {includeDivider && }
- {section.title && {section.title}}
+ {includeDivider && }
+ {section.title && {section.title}}
{section.children.map(child => (
))}
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx
index 413d3e715a..40a3cfc4d1 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx
@@ -1,8 +1,8 @@
import {
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { MenuBar } from '@/shared/components/menu-bar/menu-bar'
import { MenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
import { MenuBarOption } from '@/shared/components/menu-bar/menu-bar-option'
@@ -270,13 +270,13 @@ export const ToolbarMenuBar = () => {
>
-
- {t('editor_settings')}
+
+ {t('editor_settings')}
+ breadcrumbs ? 'check' :
}
onClick={toggleBreadcrumbs}
/>
@@ -285,7 +285,7 @@ export const ToolbarMenuBar = () => {
eventKey="show_editor_tabs"
title={t('show_editor_tabs')}
leadingIcon={
- editorTabs ? 'check' :
+ editorTabs ? 'check' :
}
onClick={toggleEditorTabs}
/>
@@ -294,7 +294,7 @@ export const ToolbarMenuBar = () => {
eventKey="show_equation_preview"
title={t('show_equation_preview')}
leadingIcon={
- mathPreview ? 'check' :
+ mathPreview ? 'check' :
}
onClick={toggleMathPreview}
/>
@@ -329,7 +329,7 @@ export const ToolbarMenuBar = () => {
)}
{showSupport && (
<>
-
+
{
}
return (
-
-
+ {
{name}
-
-
+
+
{shouldDisplaySubmitButton && !cobranding && (
<>
-
+
>
)}
@@ -97,7 +97,7 @@ export const ToolbarProjectTitle = () => {
label={t('export_as_html')}
menuBarId="export-as-html"
/>
-
+
{
@@ -107,7 +107,7 @@ export const ToolbarProjectTitle = () => {
>
{t('rename')}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
index 98fcf95859..8e2b592acd 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
@@ -1,4 +1,4 @@
-import { DropdownDivider } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownDivider } from '@/shared/components/ol/ol-dropdown-menu'
import { useTranslation } from 'react-i18next'
import { useEditorPropertiesContext } from '../../context/editor-properties-context'
import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
@@ -41,7 +41,7 @@ const ReviewModeOptions: React.FC = () => {
return (
<>
-
+
+
-
-
- {t('auto_compile')}
+
+ {t('auto_compile')}
-
sendEventAndSet(true, setAutoCompile, 'auto-compile')
@@ -175,10 +175,10 @@ function PdfCompileButton() {
trailingIcon={autoCompile ? 'check' : null}
>
{t('on')}
-
+
-
sendEventAndSet(false, setAutoCompile, 'auto-compile')
@@ -186,44 +186,44 @@ function PdfCompileButton() {
trailingIcon={!autoCompile ? 'check' : null}
>
{t('off')}
-
+
-
- {t('compile_mode')}
+
+ {t('compile_mode')}
- setCompileMode('normal')}
trailingIcon={!draft && !png2pdf ? 'check' : null}
>
{t('normal')}
-
+
{png2pdfEnabled && (
- setCompileMode('png2pdf')}
trailingIcon={png2pdf ? 'check' : null}
>
{t('fast')}
[optimize images]
-
+
)}
- setCompileMode('draft')}
trailingIcon={draft ? 'check' : null}
>
{t('fast')} [draft]
-
+
-
- {t('syntax_checks')}
+
+ {t('syntax_checks')}
-
sendEventAndSet(true, setStopOnValidationError, 'syntax-check')
@@ -231,10 +231,10 @@ function PdfCompileButton() {
trailingIcon={stopOnValidationError ? 'check' : null}
>
{t('stop_on_validation_error')}
-
+
-
sendEventAndSet(false, setStopOnValidationError, 'syntax-check')
@@ -242,51 +242,51 @@ function PdfCompileButton() {
trailingIcon={!stopOnValidationError ? 'check' : null}
>
{t('ignore_validation_errors')}
-
+
-
- {t('compile_error_handling')}
+
+ {t('compile_error_handling')}
-
{t('stop_on_first_error')}
-
+
-
{t('try_to_compile_despite_errors')}
-
+
-
+
- stopCompile()}
disabled={!compiling}
aria-disabled={!compiling}
>
{t('stop_compile')}
-
+
-
{t('recompile_from_scratch')}
-
+
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-download-files-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-download-files-button.tsx
index 31e6f0cae6..b7b0646260 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-download-files-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-download-files-button.tsx
@@ -1,8 +1,8 @@
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import PdfFileList from './pdf-file-list'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
@@ -18,19 +18,19 @@ function PdfDownloadFilesButton() {
}
return (
-
-
+
{t('other_logs_and_files')}
-
-
+
+
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-file-list.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-file-list.tsx
index f2ddcc05fc..efa0e46e42 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-file-list.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-file-list.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from 'react-i18next'
import { memo } from 'react'
import {
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { PdfFileData, PdfFileDataList } from '../util/types'
function PdfFileList({ fileList }: { fileList: PdfFileDataList }) {
@@ -20,46 +20,46 @@ function PdfFileList({ fileList }: { fileList: PdfFileDataList }) {
return (
<>
- {t('other_output_files')}
+ {t('other_output_files')}
{fileList.top.map(file => (
-
{file.path}
-
+
))}
{fileList.other.length > 0 && fileList.top.length > 0 && (
-
+
)}
{fileList.other.map(file => (
-
{file.path}
-
+
))}
{fileList.archive?.fileCount !== undefined &&
fileList.archive?.fileCount > 0 && (
-
{t('download_all')} ({fileList.archive.fileCount})
-
+
)}
>
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
index 950dd73f5e..1cc7b2f1fc 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
@@ -1,13 +1,13 @@
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
- Dropdown,
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import OLFormControl from '@/shared/components/ol/ol-form-control'
import { isMac } from '@/shared/utils/os'
import { Shortcut } from '@/shared/components/shortcut'
@@ -56,7 +56,7 @@ function PdfZoomDropdown({
const showPresentOption = document.fullscreenEnabled
return (
- {
if (eventKey === 'custom-zoom') {
return
@@ -71,17 +71,17 @@ function PdfZoomDropdown({
}}
align="end"
>
-
{rawScaleToPercentage(rawScale)}
-
-
+
+
-
-
+
-
+
- }
>
{t('zoom_in')}
-
+
- }
>
{t('zoom_out')}
-
+
- }
>
{t('fit_to_width')}
-
+
- }
>
{t('fit_to_height')}
-
+
- {showPresentOption && }
+ {showPresentOption && }
{showPresentOption && (
-
+
{t('presentation_mode')}
-
+
)}
-
- {t('zoom_to')}
+
+ {t('zoom_to')}
{zoomValues.map(value => (
-
+
{rawScaleToPercentage(Number(value))}
-
+
))}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
index c6f13e8e2c..a1bd0c3a09 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
@@ -1,10 +1,10 @@
import { useTranslation } from 'react-i18next'
import {
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import CopyProjectButton from '../table/cells/action-buttons/copy-project-button'
import DownloadProjectButton from '../table/cells/action-buttons/download-project-button'
import ArchiveProjectButton from '../table/cells/action-buttons/archive-project-button'
@@ -27,60 +27,60 @@ function ActionsDropdown({ project }: ActionDropdownProps) {
const { t } = useTranslation()
return (
-
-
+
-
-
+
+
{(text, handleOpenModal) => (
-
{text}
-
+
)}
{(text, handleOpenModal) => (
-
{text}
-
+
)}
{(text, downloadProject) => (
-
{text}
-
+
)}
{(text, pendingCompile, downloadProject) => (
- {
@@ -99,96 +99,96 @@ function ActionsDropdown({ project }: ActionDropdownProps) {
}
>
{text}
-
+
)}
{(text, handleOpenModal) => (
-
{text}
-
+
)}
{(text, handleOpenModal) => (
-
{text}
-
+
)}
{(text, unarchiveProject) => (
-
{text}
-
+
)}
{(text, untrashProject) => (
-
{text}
-
+
)}
{(text, handleOpenModal) => (
-
{text}
-
+
)}
{(text, handleOpenModal) => (
-
{text}
-
+
)}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/mobile-page-switcher-items.tsx b/services/web/frontend/js/features/project-list/components/dropdown/mobile-page-switcher-items.tsx
index 959822ae64..0c42b4fc7d 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/mobile-page-switcher-items.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/mobile-page-switcher-items.tsx
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next'
-import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownItem } from '@/shared/components/ol/ol-dropdown-menu'
type Props = {
activePage: 'library' | 'projects'
@@ -12,13 +12,13 @@ function MobilePageSwitcherItems({ activePage, onProjectsClick }: Props) {
return (
<>
-
+
{t('library')}
-
+
{onProjectsClick ? (
-
{t('projects')}
-
+
) : (
-
+
{t('projects')}
-
+
)}
>
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
index 571eb1dab3..f1d7cab3d6 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
@@ -6,12 +6,12 @@ import {
useProjectListContext,
} from '../../context/project-list-context'
import {
- Dropdown,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import MaterialIcon from '@/shared/components/material-icon'
import { isSplitTestEnabled } from '@/utils/splitTestUtils'
import ProjectsFilterMenu from '../projects-filter-menu'
@@ -34,7 +34,7 @@ export function Item({ filter, text, onClick }: ItemProps) {
return (
{isActive => (
-
{text}
-
+
)}
)
@@ -95,13 +95,15 @@ function ProjectsDropdown() {
- {t('tags')}:
+
+ {t('tags')}:
+
>
)
return (
- {
@@ -112,7 +114,7 @@ function ProjectsDropdown() {
: undefined
}
>
-
{title}
-
-
+
+
{!isLibraryEnabled && submenuItems}
{isLibraryEnabled && view === 'submenu' && (
<>
- }
@@ -138,7 +140,7 @@ function ProjectsDropdown() {
}}
>
{t('projects')}
-
+
{submenuItems}
>
@@ -149,8 +151,8 @@ function ProjectsDropdown() {
onProjectsClick={() => setView('submenu')}
/>
)}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
index 52876b3309..1d1c7bc183 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
@@ -5,23 +5,23 @@ import withContent, { SortBtnProps } from '../sort/with-content'
import { useProjectListContext } from '../../context/project-list-context'
import { Sort } from '../../../../../../types/project/dashboard/api'
import {
- Dropdown,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
function Item({ onClick, text, iconType }: SortBtnProps) {
return (
-
{text}
-
+
)
}
@@ -48,8 +48,8 @@ function SortByDropdown() {
}, [sort.by])
return (
-
-
+
{title}
-
-
-
+
+
+
{t('sort_by')}:
-
+
handleClick('lastUpdated')}
/>
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/new-project-button.tsx b/services/web/frontend/js/features/project-list/components/new-project-button.tsx
index 2fc07f17b7..56803027df 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button.tsx
@@ -10,14 +10,14 @@ import { Nullable } from '../../../../../types/utils'
import { sendMB } from '../../../infrastructure/event-tracking'
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
import {
- Dropdown,
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
-import type { DropdownProps } from '@/shared/components/types/dropdown-menu-props'
+ OLDropdown,
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
+import type { OLDropdownProps } from '@/shared/components/types/dropdown-menu-props'
import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
import type { PortalTemplate } from '../../../../../types/portal-template'
import { useFeatureFlag } from '@/shared/context/split-test-context'
@@ -46,7 +46,7 @@ type NewProjectButtonProps = {
className?: string
trackingKey?: string
showAddAffiliationWidget?: boolean
- align?: DropdownProps['align']
+ align?: OLDropdownProps['align']
}
function NewProjectButton({
@@ -176,7 +176,7 @@ function NewProjectButton({
return (
<>
-
-
{buttonText || t('new_project')}
-
-
+
+
-
handleModalMenuClick(e, {
modalVariant: 'blank_project',
@@ -202,10 +202,10 @@ function NewProjectButton({
}
>
{t('blank_project')}
-
+
-
handleModalMenuClick(e, {
modalVariant: 'example_project',
@@ -214,10 +214,10 @@ function NewProjectButton({
}
>
{t('example_project')}
-
+
-
handleModalMenuClick(e, {
modalVariant: 'upload_project',
@@ -226,11 +226,11 @@ function NewProjectButton({
}
>
{t('upload_project')}
-
+
{docxImportEnabled && (
-
handleModalMenuClick(e, {
modalVariant: 'import_docx',
@@ -240,12 +240,12 @@ function NewProjectButton({
trailingIcon={}
>
{t('import_word_document')}
-
+
)}
{markdownImportEnabled && (
-
handleModalMenuClick(e, {
modalVariant: 'import_markdown',
@@ -255,7 +255,7 @@ function NewProjectButton({
trailingIcon={}
>
{t('import_markdown_file')}
-
+
)}
@@ -272,20 +272,20 @@ function NewProjectButton({
{portalTemplates.length > 0 ? (
<>
-
-
+
+
{`${t('institution')} ${t('templates')}`}
-
+
{portalTemplates.map((portalTemplate, index) => (
- handlePortalTemplateClick(e, portalTemplate)}
aria-label={`${portalTemplate.name} ${t('template')}`}
>
{portalTemplate.name}
-
+
))}
>
@@ -293,15 +293,15 @@ function NewProjectButton({
{templateLinks && templateLinks.length > 0 && (
<>
-
-
+
+
{t('templates')}
-
+
>
)}
{templateLinks?.map((templateLink, index) => (
- handleStaticTemplateClick(e, templateLink)}
aria-label={`${templateLink.name} ${t('template')}`}
@@ -309,19 +309,19 @@ function NewProjectButton({
{templateLink.name === 'view_all'
? t('view_all')
: templateLink.name}
-
+
))}
{showAddAffiliationWidget && enableAddAffiliationWidget ? (
<>
-
+
>
) : null}
-
-
+
+
setModal(null)}
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
index 94f5488073..bd101e322a 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
@@ -8,11 +8,11 @@ import {
import useTag from '../../hooks/use-tag'
import { getTagColor } from '../../util/tag'
import {
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
export default function TagsList() {
const { t } = useTranslation()
@@ -77,31 +77,31 @@ export default function TagsList() {
-
-
+
-
-
-
+
+ handleEditTag(e, tag._id)}
>
{t('edit')}
-
-
+ handleDeleteTag(e, tag._id)}
>
{t('delete')}
-
-
-
+
+
+
)
})}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/project-tools-more-dropdown-button.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/project-tools-more-dropdown-button.tsx
index 656637b290..c44397685d 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/project-tools-more-dropdown-button.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/project-tools-more-dropdown-button.tsx
@@ -3,24 +3,27 @@ import { useTranslation } from 'react-i18next'
import CopyProjectMenuItem from '../menu-items/copy-project-menu-item'
import RenameProjectMenuItem from '../menu-items/rename-project-menu-item'
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
function ProjectToolsMoreDropdownButton() {
const { t } = useTranslation()
return (
-
-
+
+
{t('more')}
-
-
+
+
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
index b590c16dbd..fe0d363f17 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
@@ -7,13 +7,13 @@ import useTag from '../../../../hooks/use-tag'
import { addProjectsToTag, removeProjectsFromTag } from '../../../../util/api'
import { getTagColor } from '../../../../util/tag'
import {
- Dropdown,
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import { Tag } from '../../../../../../../../app/src/Features/Tags/types'
function TagsDropdown() {
@@ -78,22 +78,22 @@ function TagsDropdown() {
return (
<>
-
-
+
-
-
+
- {t('add_to_tag')}
+ {t('add_to_tag')}
{sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => (
-
containsAllSelectedProjects(tag)
? handleRemoveTagFromSelectedProjects(e, tag._id)
@@ -108,7 +108,7 @@ function TagsDropdown() {
containsAllSelectedProjects(tag) ? (
'check'
) : (
-
+
)
}
translate="no"
@@ -122,21 +122,21 @@ function TagsDropdown() {
{tag.name}
-
+
))}
-
+
-
{t('create_new_tag')}
-
+
-
-
+
+
>
)
diff --git a/services/web/frontend/js/features/project-list/components/tags-list.tsx b/services/web/frontend/js/features/project-list/components/tags-list.tsx
index 1129bc4a21..a59d56e2eb 100644
--- a/services/web/frontend/js/features/project-list/components/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/tags-list.tsx
@@ -8,7 +8,7 @@ import {
import useTag from '../hooks/use-tag'
import { sortBy } from 'lodash'
import { Tag } from '../../../../../app/src/Features/Tags/types'
-import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownItem } from '@/shared/components/ol/ol-dropdown-menu'
type TagsListProps = {
onTagClick?: () => void
@@ -37,7 +37,7 @@ function TagsList({ onTagClick }: TagsListProps) {
<>
{sortBy(tags, ['name']).map((tag, index) => (
- handleClick(e as unknown as React.MouseEvent, tag)}
@@ -52,8 +52,8 @@ function TagsList({ onTagClick }: TagsListProps) {
{tag.name} ({tag.project_ids?.length})
-
-
+
-
+
))}
- selectTag(UNCATEGORIZED_KEY)}
@@ -78,17 +78,17 @@ function TagsList({ onTagClick }: TagsListProps) {
active={selectedTagId === UNCATEGORIZED_KEY}
>
{t('uncategorized')} ({untaggedProjectsCount})
-
+
-
{t('new_tag')}
-
+
>
diff --git a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
index 7c3b0e9573..8c206680bb 100644
--- a/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/welcome-message-new/welcome-message-create-new-project-dropdown.tsx
@@ -4,13 +4,13 @@ import { sendMB } from '../../../../infrastructure/event-tracking'
import getMeta from '../../../../utils/meta'
import { NewProjectButtonModalVariant } from '../new-project-button/new-project-button-modal'
import {
- Dropdown,
- DropdownDivider,
- DropdownHeader,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownDivider,
+ OLDropdownHeader,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import createNewProjectImage from '../../images/create-a-new-project.svg'
import { useFeatureFlag } from '@/shared/context/split-test-context'
import MaterialIcon from '@/shared/components/material-icon'
@@ -103,14 +103,14 @@ function WelcomeMessageCreateNewProjectDropdown({
)
return (
-
-
+
-
+
-
handleDropdownItemClick(e, 'blank_project', 'blank-project')
@@ -118,10 +118,10 @@ function WelcomeMessageCreateNewProjectDropdown({
tabIndex={-1}
>
{t('blank_project')}
-
+
-
handleDropdownItemClick(e, 'example_project', 'example-project')
@@ -129,10 +129,10 @@ function WelcomeMessageCreateNewProjectDropdown({
tabIndex={-1}
>
{t('example_project')}
-
+
-
handleDropdownItemClick(e, 'upload_project', 'upload-project')
@@ -140,11 +140,11 @@ function WelcomeMessageCreateNewProjectDropdown({
tabIndex={-1}
>
{t('upload_project')}
-
+
{docxImportEnabled && (
-
handleDropdownItemClick(e, 'import_docx', 'import-docx')
@@ -153,12 +153,12 @@ function WelcomeMessageCreateNewProjectDropdown({
trailingIcon={}
>
{t('import_word_document')}
-
+
)}
{markdownImportEnabled && (
-
handleDropdownItemClick(e, 'import_markdown', 'import-markdown')
@@ -167,12 +167,12 @@ function WelcomeMessageCreateNewProjectDropdown({
trailingIcon={}
>
{t('import_markdown_file')}
-
+
)}
{isOverleaf && (
-
handleDropdownItemClick(
@@ -184,28 +184,28 @@ function WelcomeMessageCreateNewProjectDropdown({
tabIndex={-1}
>
{t('import_from_github')}
-
+
)}
{(portalTemplates?.length ?? 0) > 0 ? (
<>
-
-
+
+
{t('institution_templates')}
-
+
{portalTemplates?.map((portalTemplate, index) => (
- handlePortalTemplateClick(e, portalTemplate.name)}
href={`${portalTemplate.url}#templates`}
>
{portalTemplate.name}
-
+
))}
>
) : null}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx b/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
index b0e0593703..20fc49ca93 100644
--- a/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
+++ b/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
@@ -1,9 +1,9 @@
import { forwardRef, memo, MouseEventHandler } from 'react'
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
import MaterialIcon from '@/shared/components/material-icon'
import classNames from 'classnames'
@@ -114,12 +114,12 @@ function ReviewModeSwitcher() {
if (isToolbarMigration) {
return (
-
-
+
-
-
-
+
+
)
}
@@ -137,15 +137,15 @@ function ReviewModeSwitcher() {
// over the editor at top-right of the scroll area.
return (
)
}
diff --git a/services/web/frontend/js/features/review-panel/components/review-panel-comment-options.tsx b/services/web/frontend/js/features/review-panel/components/review-panel-comment-options.tsx
index 70fea96628..bba96e9ad2 100644
--- a/services/web/frontend/js/features/review-panel/components/review-panel-comment-options.tsx
+++ b/services/web/frontend/js/features/review-panel/components/review-panel-comment-options.tsx
@@ -2,11 +2,11 @@ import MaterialIcon from '@/shared/components/material-icon'
import { FC, memo, forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
import {
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownItem,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import classnames from 'classnames'
const ReviewPanelCommentDropdownToggleButton = forwardRef<
@@ -32,8 +32,8 @@ const ReviewPanelCommentOptions: FC<{
}
return (
-
-
+
-
-
+
+
{canEdit && (
-
+
{t('edit')}
-
+
)}
{canDelete && (
-
+
{t('delete')}
-
+
)}
-
-
+
+
)
}
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
index 88596e696c..105e104747 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
@@ -4,7 +4,7 @@ import { useCombobox } from 'downshift'
import classnames from 'classnames'
import countries, { CountryCode } from '../../../data/countries-list'
import OLFormControl from '@/shared/components/ol/ol-form-control'
-import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownItem } from '@/shared/components/ol/ol-dropdown-menu'
type CountryInputProps = {
setValue: React.Dispatch>
@@ -74,7 +74,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
{...getItemProps({ item, index })}
aria-selected={selectedItem?.name === item.name}
>
-
{item.name}
-
+
))}
diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
index ab032fe3a2..b4042f3e40 100644
--- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
@@ -3,7 +3,7 @@ import { useCombobox } from 'downshift'
import classnames from 'classnames'
import { escapeRegExp } from 'lodash'
import OLFormControl from '@/shared/components/ol/ol-form-control'
-import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownItem } from '@/shared/components/ol/ol-dropdown-menu'
import OLFormLabel from '@/shared/components/ol/ol-form-label'
import DSFormLabel from '@/shared/components/ds/ds-form-label'
import DSFormControl from '@/shared/components/ds/ds-form-control'
@@ -97,9 +97,9 @@ function Downshift({
>
{showSuggestedText && inputItems.length > 0 && (
-
+
{itemsTitle}
-
+
)}
{inputItems.map((item, index) => (
@@ -109,7 +109,7 @@ function Downshift({
{...getItemProps({ item, index })}
aria-selected={selectedItem === item}
>
-
{highlightMatchedCharacters(item, inputValue)}
-
+
))}
diff --git a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
index 8623f19d3b..111a42b686 100644
--- a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
@@ -17,10 +17,10 @@ import { useUserContext } from '@/shared/context/user-context'
import { upgradePlan } from '@/main/account-upgrade'
import ShareProjectModalRow from '@/features/share-project-modal/components/share-project-modal-row'
import {
- Dropdown,
- DropdownMenu,
- DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+ OLDropdown,
+ OLDropdownMenu,
+ OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
import { useFeatureFlag } from '@/shared/context/split-test-context'
import classnames from 'classnames'
@@ -247,7 +247,7 @@ export default function EditMember({
- {
if (eventKey) {
@@ -259,15 +259,15 @@ export default function EditMember({
{hasBeenDowngraded && !confirmRemoval && (
)}
-
{getDropdownLabel()}
-
+
-
+
{t('remove_access')}
-
-
+
+
{confirmRemoval && (