Merge pull request #17815 from overleaf/ar-allow-labels-to-be-added-in-label-list

Allow labels to be added from label list

GitOrigin-RevId: 61abbc74aff1901f4adb16575b02148f8dbf99e2

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -201,7 +201,7 @@ function AllHistoryList() {
             update.toV
           )
           const dropdownActive =
-            update === activeDropdownItem.item &&
+            update.toV === activeDropdownItem.item &&
             activeDropdownItem.whichDropDown === 'moreOptions'
           const compareDropdownActive =
             update === activeDropdownItem.item &&

services/web/frontend/js/features/history/components/change-list/dropdown/history-dropdown-content.tsx

@@ -1,38 +1,38 @@
 import AddLabel from './menu-item/add-label'
 import Download from './menu-item/download'
-import { LoadedUpdate } from '../../../services/types/update'
+import { Version } from '../../../services/types/update'
 import { useCallback } from 'react'
 import { ActiveDropdown } from '../../../hooks/use-dropdown-active-item'
 
 type VersionDropdownContentProps = {
   projectId: string
-  update: LoadedUpdate
+  version: Version
   closeDropdownForItem: ActiveDropdown['closeDropdownForItem']
 }
 
-function VersionDropdownContent({
+function HistoryDropdownContent({
   projectId,
-  update,
+  version,
   closeDropdownForItem,
 }: VersionDropdownContentProps) {
   const closeDropdown = useCallback(() => {
-    closeDropdownForItem(update, 'moreOptions')
+    closeDropdownForItem(version, 'moreOptions')
-  }, [closeDropdownForItem, update])
+  }, [closeDropdownForItem, version])
 
   return (
     <>
       <AddLabel
         projectId={projectId}
-        version={update.toV}
+        version={version}
         closeDropdown={closeDropdown}
       />
       <Download
         projectId={projectId}
-        version={update.toV}
+        version={version}
         closeDropdown={closeDropdown}
       />
     </>
   )
 }
 
-export default VersionDropdownContent
+export default HistoryDropdownContent

services/web/frontend/js/features/history/components/change-list/dropdown/label-dropdown-content.tsx

@@ -1,32 +0,0 @@
-import Download from './menu-item/download'
-import { Version } from '../../../services/types/update'
-import { ActiveDropdown } from '../../../hooks/use-dropdown-active-item'
-import { useCallback } from 'react'
-
-type LabelDropdownContentProps = {
-  projectId: string
-  version: Version
-  closeDropdownForItem: ActiveDropdown['closeDropdownForItem']
-}
-
-function LabelDropdownContent({
-  projectId,
-  version,
-  closeDropdownForItem,
-}: LabelDropdownContentProps) {
-  const closeDropdown = useCallback(() => {
-    closeDropdownForItem(version, 'moreOptions')
-  }, [closeDropdownForItem, version])
-
-  return (
-    <>
-      <Download
-        projectId={projectId}
-        version={version}
-        closeDropdown={closeDropdown}
-      />
-    </>
-  )
-}
-
-export default LabelDropdownContent

services/web/frontend/js/features/history/components/change-list/history-version.tsx

@@ -15,7 +15,7 @@ import {
 } from '../../utils/history-details'
 import { ActiveDropdown } from '../../hooks/use-dropdown-active-item'
 import { HistoryContextValue } from '../../context/types/history-context-value'
-import VersionDropdownContent from './dropdown/version-dropdown-content'
+import HistoryDropdownContent from './dropdown/history-dropdown-content'
 import CompareItems from './dropdown/menu-item/compare-items'
 import CompareVersionDropdown from './dropdown/compare-version-dropdown'
 import { CompareVersionDropdownContentAllHistory } from './dropdown/compare-version-dropdown-content'
@@ -55,7 +55,7 @@ function HistoryVersion({
 }: HistoryVersionProps) {
   const orderedLabels = orderBy(update.labels, ['created_at'], ['desc'])
   const closeDropdown = useCallback(() => {
-    closeDropdownForItem(update, 'moreOptions')
+    closeDropdownForItem(update.toV, 'moreOptions')
   }, [closeDropdownForItem, update])
 
   const updateRange = updateRangeForUpdate(update)
@@ -102,15 +102,15 @@ function HistoryVersion({
               isOpened={dropdownOpen}
               setIsOpened={(isOpened: boolean) =>
                 setActiveDropdownItem({
-                  item: update,
+                  item: update.toV,
                   isOpened,
                   whichDropDown: 'moreOptions',
                 })
               }
             >
               {dropdownActive ? (
-                <VersionDropdownContent
+                <HistoryDropdownContent
-                  update={update}
+                  version={update.toV}
                   projectId={projectId}
                   closeDropdownForItem={closeDropdownForItem}
                 />

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

@@ -8,11 +8,11 @@ import { LoadedLabel } from '../../services/types/label'
 import { useTranslation } from 'react-i18next'
 import { ActiveDropdown } from '../../hooks/use-dropdown-active-item'
 import { HistoryContextValue } from '../../context/types/history-context-value'
-import LabelDropdownContent from './dropdown/label-dropdown-content'
 import CompareItems from './dropdown/menu-item/compare-items'
 import { ItemSelectionState } from '../../utils/history-details'
 import CompareVersionDropdown from './dropdown/compare-version-dropdown'
 import { CompareVersionDropdownContentLabelsList } from './dropdown/compare-version-dropdown-content'
+import HistoryDropdownContent from '@/features/history/components/change-list/dropdown/history-dropdown-content'
 
 type LabelListItemProps = {
   version: Version
@@ -87,7 +87,7 @@ function LabelListItem({
         setIsOpened={setIsOpened}
       >
         {dropdownActive ? (
-          <LabelDropdownContent
+          <HistoryDropdownContent
             version={version}
             projectId={projectId}
             closeDropdownForItem={closeDropdownForItem}

services/web/test/frontend/features/history/components/change-list.spec.tsx

@@ -319,7 +319,7 @@ describe('change list', function () {
       cy.findByLabelText(/labels/i).click({ force: true })
     })
 
-    it('does not show the dropdown menu item for adding new labels', function () {
+    it('shows the dropdown menu item for adding new labels', function () {
       cy.findAllByTestId('history-version-details')
         .eq(1)
         .within(() => {
@@ -327,7 +327,7 @@ describe('change list', function () {
           cy.findByRole('menu').within(() => {
             cy.findByRole('menuitem', {
               name: /label this version/i,
-            }).should('not.exist')
+            }).should('exist')
           })
         })
     })