Merge pull request #9794 from overleaf/ab-endpoint-add-remove-tag-multiple-projects

[web] Handle adding/removing multiple projects from a tag at once

GitOrigin-RevId: 7d052fa9930035286f8ce41433d6c3959817148a

services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx

@@ -75,7 +75,7 @@ export default function CreateTagModal({
             className="form-control"
             type="text"
             placeholder="New Tag Name"
-            name="new-tag-name"
+            name="new-tag-form-name"
             required
             onChange={e => setTagName(e.target.value)}
           />

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx

@@ -6,7 +6,7 @@ import ControlledDropdown from '../../../../../../shared/components/controlled-d
 import Icon from '../../../../../../shared/components/icon'
 import { useProjectListContext } from '../../../../context/project-list-context'
 import useTag from '../../../../hooks/use-tag'
-import { addProjectToTag, removeProjectFromTag } from '../../../../util/api'
+import { addProjectsToTag, removeProjectsFromTag } from '../../../../util/api'
 
 function TagsDropdown() {
   const {
@@ -30,12 +30,14 @@ function TagsDropdown() {
     (e, tagId) => {
       e.preventDefault()
       const tag = tags.find(tag => tag._id === tagId)
+      const projectIds = []
       for (const selectedProject of selectedProjects) {
         if (!tag?.project_ids?.includes(selectedProject.id)) {
           addProjectToTagInView(tagId, selectedProject.id)
-          addProjectToTag(tagId, selectedProject.id)
+          projectIds.push(selectedProject.id)
         }
       }
+      addProjectsToTag(tagId, projectIds)
     },
     [tags, selectedProjects, addProjectToTagInView]
   )
@@ -45,8 +47,11 @@ function TagsDropdown() {
       e.preventDefault()
       for (const selectedProject of selectedProjects) {
         removeProjectFromTagInView(tagId, selectedProject.id)
-        removeProjectFromTag(tagId, selectedProject.id)
       }
+      removeProjectsFromTag(
+        tagId,
+        selectedProjects.map(project => project.id)
+      )
     },
     [selectedProjects, removeProjectFromTagInView]
   )
@@ -78,7 +83,11 @@ function TagsDropdown() {
   return (
     <>
       <ControlledDropdown id="tags">
-        <Dropdown.Toggle bsStyle="default" title={t('tags')}>
+        <Dropdown.Toggle
+          bsStyle="default"
+          title={t('tags')}
+          aria-label={t('tags')}
+        >
           <Icon type="folder-open" />
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">

services/web/frontend/js/features/project-list/hooks/use-tag.tsx

@@ -6,7 +6,7 @@ import RenameTagModal from '../components/modals/rename-tag-modal'
 import DeleteTagModal from '../components/modals/delete-tag-modal'
 import EditTagModal from '../components/modals/edit-tag-modal'
 import { find } from 'lodash'
-import { addProjectToTag } from '../util/api'
+import { addProjectsToTag } from '../util/api'
 
 function useTag() {
   const {
@@ -41,8 +41,11 @@ function useTag() {
       addTag(tag)
       for (const selectedProject of selectedProjects) {
         addProjectToTagInView(tag._id, selectedProject.id)
-        addProjectToTag(tag._id, selectedProject.id)
       }
+      addProjectsToTag(
+        tag._id,
+        selectedProjects.map(project => project.id)
+      )
     },
     [addTag, selectedProjects, addProjectToTagInView]
   )

services/web/frontend/js/features/project-list/util/api.ts

@@ -25,14 +25,26 @@ export function deleteTag(tagId: string) {
   return deleteJSON(`/tag/${tagId}`)
 }
 
-export function addProjectToTag(tagId: string, projectId: string) {
-  return postJSON(`/tag/${tagId}/project/${projectId}`)
+export function addProjectsToTag(tagId: string, projectIds: string[]) {
+  return postJSON(`/tag/${tagId}/projects`, {
+    body: {
+      projectIds,
+    },
+  })
 }
 
 export function removeProjectFromTag(tagId: string, projectId: string) {
   return deleteJSON(`/tag/${tagId}/project/${projectId}`)
 }
 
+export function removeProjectsFromTag(tagId: string, projectIds: string[]) {
+  return deleteJSON(`/tag/${tagId}/projects`, {
+    body: {
+      projectIds,
+    },
+  })
+}
+
 export function archiveProject(projectId: string) {
   return postJSON(`/project/${projectId}/archive`)
 }