Merge pull request #22288 from overleaf/td-history-dropdown-layout-fix

Fix history dropdown layout issue in Bootstrap 3

GitOrigin-RevId: 85709eaa45fd496128afb95738841894c5d211dd

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
 import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
 import AddLabelModal from '../../add-label-modal'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type DownloadProps = {
   projectId: string
@@ -26,7 +25,7 @@ function AddLabel({
   }
 
   return (
-    <DropdownListItem>
+    <>
       <OLDropdownMenuItem
         onClick={handleClick}
         leadingIcon={<OLTagIcon />}
@@ -41,7 +40,7 @@ function AddLabel({
         setShow={setShowModal}
         version={version}
       />
-    </DropdownListItem>
+    </>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx

@@ -2,7 +2,6 @@ import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import { ReactNode } from 'react'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type CompareProps = {
   comparisonRange: UpdateRange
@@ -33,17 +32,15 @@ function CompareDropDownItem({
   }
 
   return (
-    <DropdownListItem>
-      <OLDropdownMenuItem
-        {...props}
-        leadingIcon={icon}
-        as="button"
-        onClick={handleCompareVersion}
-        className="dropdown-item-material-icon-small"
-      >
-        {text}
-      </OLDropdownMenuItem>
-    </DropdownListItem>
+    <OLDropdownMenuItem
+      {...props}
+      leadingIcon={icon}
+      as="button"
+      onClick={handleCompareVersion}
+      className="dropdown-item-material-icon-small"
+    >
+      {text}
+    </OLDropdownMenuItem>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx

@@ -3,7 +3,6 @@ import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-ite
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import Icon from '../../../../../../shared/components/icon'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type DownloadProps = {
   projectId: string
@@ -20,23 +19,21 @@ function Download({
   const { t } = useTranslation()
 
   return (
-    <DropdownListItem>
-      <OLDropdownMenuItem
-        href={`/project/${projectId}/version/${version}/zip`}
-        download={`${projectId}_v${version}.zip`}
-        rel="noreferrer"
-        onClick={closeDropdown}
-        leadingIcon={
-          <BootstrapVersionSwitcher
-            bs3={<Icon type="cloud-download" fw />}
-            bs5={<MaterialIcon type="download" />}
-          />
-        }
-        {...props}
-      >
-        {t('history_download_this_version')}
-      </OLDropdownMenuItem>
-    </DropdownListItem>
+    <OLDropdownMenuItem
+      href={`/project/${projectId}/version/${version}/zip`}
+      download={`${projectId}_v${version}.zip`}
+      rel="noreferrer"
+      onClick={closeDropdown}
+      leadingIcon={
+        <BootstrapVersionSwitcher
+          bs3={<Icon type="cloud-download" fw />}
+          bs5={<MaterialIcon type="download" />}
+        />
+      }
+      {...props}
+    >
+      {t('history_download_this_version')}
+    </OLDropdownMenuItem>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx

@@ -9,7 +9,6 @@ import withErrorBoundary from '@/infrastructure/error-boundary'
 import { RestoreProjectErrorModal } from '../../../diff-view/modals/restore-project-error-modal'
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
-import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type RestoreProjectProps = {
   projectId: string
@@ -46,7 +45,7 @@ const RestoreProject = ({
   }
 
   return (
-    <DropdownListItem>
+    <>
       <OLDropdownMenuItem
         as="button"
         leadingIcon={
@@ -66,7 +65,7 @@ const RestoreProject = ({
         isRestoring={isRestoring}
         onRestore={onRestore}
       />
-    </DropdownListItem>
+    </>
   )
 }
 

services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx

@@ -113,27 +113,23 @@ const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({
                 />
               </DropdownToggle>
               <DropdownMenu flip={false}>
-                <li>
-                  <OLDropdownMenuItem
-                    onClick={onHide}
-                    description={t('temporarily_hides_the_preview')}
-                    trailingIcon={
-                      <span className="math-tooltip-options-keyboard-shortcut">
-                        Esc
-                      </span>
-                    }
-                  >
-                    {t('hide')}
-                  </OLDropdownMenuItem>
-                </li>
-                <li>
-                  <OLDropdownMenuItem
-                    onClick={openDisableModal}
-                    description={t('permanently_disables_the_preview')}
-                  >
-                    {t('disable')}
-                  </OLDropdownMenuItem>
-                </li>
+                <OLDropdownMenuItem
+                  onClick={onHide}
+                  description={t('temporarily_hides_the_preview')}
+                  trailingIcon={
+                    <span className="math-tooltip-options-keyboard-shortcut">
+                      Esc
+                    </span>
+                  }
+                >
+                  {t('hide')}
+                </OLDropdownMenuItem>
+                <OLDropdownMenuItem
+                  onClick={openDisableModal}
+                  description={t('permanently_disables_the_preview')}
+                >
+                  {t('disable')}
+                </OLDropdownMenuItem>
               </DropdownMenu>
             </Dropdown>
           }

services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx

@@ -2,11 +2,13 @@ import { MenuItem, MenuItemProps } from 'react-bootstrap'
 import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
 import { DropdownItemProps } from '@/features/ui/components/types/dropdown-menu-props'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type OLDropdownMenuItemProps = DropdownItemProps & {
   bs3Props?: MenuItemProps
 }
 
+// This represents a menu item. It wraps the item within an <li> element.
 function OLDropdownMenuItem(props: OLDropdownMenuItemProps) {
   const { bs3Props, ...rest } = props
 
@@ -30,7 +32,11 @@ function OLDropdownMenuItem(props: OLDropdownMenuItemProps) {
   return (
     <BootstrapVersionSwitcher
       bs3={<MenuItem {...bs3MenuItemProps} />}
-      bs5={<DropdownItem {...rest} />}
+      bs5={
+        <DropdownListItem>
+          <DropdownItem {...rest} />
+        </DropdownListItem>
+      }
     />
   )
 }

services/web/frontend/stories/ui/dropdown-menu.stories.tsx

@@ -141,54 +141,44 @@ export const Description = (args: Args) => {
 export const Icon = (args: Args) => {
   return (
     <DropdownMenu show>
-      <li>
-        <OLDropdownMenuItem
-          disabled={args.disabled}
-          eventKey="1"
-          href="#/action-1"
-          leadingIcon="view_column_2"
-        >
-          Editor & PDF
-        </OLDropdownMenuItem>
-      </li>
-      <li>
-        <OLDropdownMenuItem
-          active
-          eventKey="2"
-          href="#/action-2"
-          leadingIcon="terminal"
-        >
-          Editor only
-        </OLDropdownMenuItem>
-      </li>
-      <li>
-        <OLDropdownMenuItem
-          eventKey="3"
-          href="#/action-3"
-          leadingIcon="picture_as_pdf"
-        >
-          PDF only
-        </OLDropdownMenuItem>
-      </li>
-      <li>
-        <OLDropdownMenuItem
-          eventKey="4"
-          href="#/action-4"
-          leadingIcon="select_window"
-        >
-          PDF in separate tab
-        </OLDropdownMenuItem>
-      </li>
-      <li>
-        <OLDropdownMenuItem
-          eventKey="5"
-          href="#/action-5"
-          leadingIcon="align_space_even"
-          className="dropdown-item-material-icon-small"
-        >
-          Small icon
-        </OLDropdownMenuItem>
-      </li>
+      <OLDropdownMenuItem
+        disabled={args.disabled}
+        eventKey="1"
+        href="#/action-1"
+        leadingIcon="view_column_2"
+      >
+        Editor & PDF
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        active
+        eventKey="2"
+        href="#/action-2"
+        leadingIcon="terminal"
+      >
+        Editor only
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="3"
+        href="#/action-3"
+        leadingIcon="picture_as_pdf"
+      >
+        PDF only
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="4"
+        href="#/action-4"
+        leadingIcon="select_window"
+      >
+        PDF in separate tab
+      </OLDropdownMenuItem>
+      <OLDropdownMenuItem
+        eventKey="5"
+        href="#/action-5"
+        leadingIcon="align_space_even"
+        className="dropdown-item-material-icon-small"
+      >
+        Small icon
+      </OLDropdownMenuItem>
     </DropdownMenu>
   )
 }