Merge pull request #12374 from overleaf/ab-rename-folders-tags

[web] Rename folders to tags

GitOrigin-RevId: 05c34c515aeeb9230ed512c267f97bcb679767a8

services/web/frontend/extracted-translations.json

@@ -1,8 +1,8 @@
 {
   "a_more_comprehensive_list_of_keyboard_shortcuts": "",
   "about_to_archive_projects": "",
-  "about_to_delete_folder": "",
   "about_to_delete_projects": "",
+  "about_to_delete_tag": "",
   "about_to_delete_the_following": "",
   "about_to_leave_projects": "",
   "about_to_trash_projects": "",
@@ -27,7 +27,7 @@
   "add_new_email": "",
   "add_or_remove_project_from_tag": "",
   "add_role_and_department": "",
-  "add_to_folder": "",
+  "add_to_tag": "",
   "add_your_first_group_member_now": "",
   "adding": "",
   "additional_licenses": "",
@@ -153,8 +153,8 @@
   "coupons_not_included": "",
   "create": "",
   "create_first_project": "",
-  "create_new_folder": "",
   "create_new_subscription": "",
+  "create_new_tag": "",
   "create_project_in_github": "",
   "created_at": "",
   "creating": "",
@@ -169,8 +169,8 @@
   "delete_acct_no_existing_pw": "",
   "delete_and_leave": "",
   "delete_and_leave_projects": "",
-  "delete_folder": "",
   "delete_projects": "",
+  "delete_tag": "",
   "delete_your_account": "",
   "deleted_at": "",
   "deleting": "",
@@ -220,9 +220,9 @@
   "edit_dictionary": "",
   "edit_dictionary_empty": "",
   "edit_dictionary_remove": "",
-  "edit_folder": "",
   "edit_in_source_to_see_your_entire_latex_code": "",
   "edit_in_the_left_pane_click_recompile": "",
+  "edit_tag": "",
   "editing": "",
   "editor_and_pdf": "&",
   "editor_only_hide_pdf": "",
@@ -265,7 +265,6 @@
   "first_name": "",
   "first_x_days_free_after_that_y_per_month": "",
   "fold_line": "",
-  "folder_color": "",
   "following_paths_conflict": "",
   "font_family": "",
   "font_size": "",
@@ -526,6 +525,8 @@
   "new_password": "",
   "new_project": "",
   "new_subscription_will_be_billed_immediately": "",
+  "new_tag": "",
+  "new_tag_name": "",
   "new_to_latex_look_at": "",
   "newsletter": "",
   "next": "",
@@ -817,10 +818,10 @@
   "syntax_validation": "",
   "tab_connecting": "",
   "tab_no_longer_connected": "",
+  "tag_color": "",
   "tag_name_cannot_exceed_characters": "",
   "tag_name_is_already_used": "",
   "tags": "",
-  "tags_slash_folders": "",
   "take_short_survey": "",
   "template_approved_by_publisher": "",
   "template_description": "",

services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx

@@ -99,7 +99,7 @@ function ProjectsDropdown() {
           text={t('trashed_projects')}
           onClick={handleClose}
         />
-        <MenuItem header>{t('tags_slash_folders')}:</MenuItem>
+        <MenuItem header>{t('tags')}:</MenuItem>
         <TagsList onTagClick={handleClose} onEditClick={handleClose} />
       </Dropdown.Menu>
     </Dropdown>

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

@@ -70,7 +70,7 @@ export default function CreateTagModal({
   return (
     <AccessibleModal show animation onHide={onClose} id={id} backdrop="static">
       <Modal.Header closeButton>
-        <Modal.Title>{t('create_new_folder')}</Modal.Title>
+        <Modal.Title>{t('create_new_tag')}</Modal.Title>
       </Modal.Header>
 
       <Modal.Body>
@@ -80,14 +80,14 @@ export default function CreateTagModal({
               ref={autoFocusedRef}
               className="form-control"
               type="text"
-              placeholder="New Tag Name"
+              placeholder={t('new_tag_name')}
               name="new-tag-form-name"
               required
               onChange={e => setTagName(e.target.value)}
             />
           </FormGroup>
           <FormGroup aria-hidden="true">
-            <ControlLabel>{t('folder_color')}</ControlLabel>:{' '}
+            <ControlLabel>{t('tag_color')}</ControlLabel>:{' '}
             <div>
               <ColorPicker disableCustomColor={disableCustomColor} />
             </div>

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

@@ -40,11 +40,11 @@ export default function DeleteTagModal({
   return (
     <AccessibleModal show animation onHide={onClose} id={id} backdrop="static">
       <Modal.Header closeButton>
-        <Modal.Title>{t('delete_folder')}</Modal.Title>
+        <Modal.Title>{t('delete_tag')}</Modal.Title>
       </Modal.Header>
 
       <Modal.Body>
-        {t('about_to_delete_folder')}
+        {t('about_to_delete_tag')}
         <ul>
           <li>{tag.name}</li>
         </ul>

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

@@ -78,7 +78,7 @@ export function EditTagModal({ id, tag, onEdit, onClose }: EditTagModalProps) {
   return (
     <AccessibleModal show animation onHide={onClose} id={id} backdrop="static">
       <Modal.Header closeButton>
-        <Modal.Title>{t('edit_folder')}</Modal.Title>
+        <Modal.Title>{t('edit_tag')}</Modal.Title>
       </Modal.Header>
 
       <Modal.Body>
@@ -96,7 +96,7 @@ export function EditTagModal({ id, tag, onEdit, onClose }: EditTagModalProps) {
             />
           </FormGroup>
           <FormGroup aria-hidden="true">
-            <ControlLabel>{t('folder_color')}</ControlLabel>:{' '}
+            <ControlLabel>{t('tag_color')}</ControlLabel>:{' '}
             <div>
               <ColorPicker />
             </div>

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

@@ -79,7 +79,7 @@ export function ManageTagModal({
   return (
     <AccessibleModal show animation onHide={onClose} id={id} backdrop="static">
       <Modal.Header closeButton>
-        <Modal.Title>{t('edit_folder')}</Modal.Title>
+        <Modal.Title>{t('edit_tag')}</Modal.Title>
       </Modal.Header>
 
       <Modal.Body>
@@ -97,7 +97,7 @@ export function ManageTagModal({
             />
           </FormGroup>
           <FormGroup aria-hidden="true">
-            <ControlLabel>{t('folder_color')}</ControlLabel>:<br />
+            <ControlLabel>{t('tag_color')}</ControlLabel>:<br />
             <ColorPicker disableCustomColor />
           </FormGroup>
         </Form>
@@ -114,7 +114,7 @@ export function ManageTagModal({
               {isDeleteLoading ? (
                 <>{t('deleting')} &hellip;</>
               ) : (
-                t('delete_folder')
+                t('delete_tag')
               )}
             </Button>
           </div>

services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx

@@ -2,6 +2,7 @@ import { sortBy } from 'lodash'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../../shared/components/icon'
+import MaterialIcon from '../../../../shared/components/material-icon'
 import {
   UNCATEGORIZED_KEY,
   useProjectListContext,
@@ -31,7 +32,7 @@ export default function TagsList() {
   return (
     <>
       <li role="separator" className="separator">
-        <h2>{t('tags_slash_folders')}</h2>
+        <h2>{t('tags')}</h2>
       </li>
       <li className="tag">
         <Button
@@ -40,7 +41,7 @@ export default function TagsList() {
           bsStyle={null}
         >
           <Icon type="plus" />
-          <span className="name">{t('new_folder')}</span>
+          <span className="name">{t('new_tag')}</span>
         </Button>
       </li>
       {sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => {
@@ -61,9 +62,7 @@ export default function TagsList() {
                   color: getTagColor(tag),
                 }}
               >
-                <Icon
-                  type={selectedTagId === tag._id ? 'folder-open' : 'folder'}
-                />
+                <MaterialIcon type="label" style={{ verticalAlign: 'sub' }} />
               </span>
               <span className="name">
                 {tag.name}{' '}

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

@@ -4,6 +4,7 @@ import { Button, Dropdown } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import ControlledDropdown from '../../../../../../shared/components/controlled-dropdown'
 import Icon from '../../../../../../shared/components/icon'
+import MaterialIcon from '../../../../../../shared/components/material-icon'
 import { useProjectListContext } from '../../../../context/project-list-context'
 import useTag from '../../../../hooks/use-tag'
 import { addProjectsToTag, removeProjectsFromTag } from '../../../../util/api'
@@ -90,11 +91,11 @@ function TagsDropdown() {
           title={t('tags')}
           aria-label={t('tags')}
         >
-          <Icon type="folder-open" />
+          <MaterialIcon type="label" style={{ verticalAlign: 'sub' }} />
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
           <li className="dropdown-header" role="heading" aria-level={3}>
-            {t('add_to_folder')}
+            {t('add_to_tag')}
           </li>
           {sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => {
             return (
@@ -137,7 +138,7 @@ function TagsDropdown() {
               className="tag-dropdown-button"
               onClick={handleOpenCreateTagModal}
             >
-              {t('create_new_folder')}
+              {t('create_new_tag')}
             </Button>
           </li>
         </Dropdown.Menu>

services/web/frontend/js/features/project-list/components/tags-list.tsx

@@ -1,5 +1,6 @@
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
+import MaterialIcon from '../../../shared/components/material-icon'
 import { getTagColor } from '../util/tag'
 import MenuItemButton from './dropdown/menu-item-button'
 import Icon from '../../../shared/components/icon'
@@ -65,9 +66,7 @@ function TagsList({ onTagClick, onEditClick }: TagsListProps) {
                 color: getTagColor(tag),
               }}
             >
-              <Icon
-                type={selectedTagId === tag._id ? 'folder-open' : 'folder'}
-              />
+              <MaterialIcon type="label" style={{ verticalAlign: 'sub' }} />
             </span>
             <span>
               {tag.name}{' '}
@@ -100,7 +99,7 @@ function TagsList({ onTagClick, onEditClick }: TagsListProps) {
       >
         <span className="tag-item menu-item-button-text">
           <Icon type="plus" className="me-2" />
-          <span>{t('new_folder')}</span>
+          <span>{t('new_tag')}</span>
         </span>
       </MenuItemButton>
       <CreateTagModal id="create-tag-modal-dropdown" disableCustomColor />

services/web/locales/en.json

@@ -13,6 +13,7 @@
   "about_to_archive_projects": "You are about to archive the following projects:",
   "about_to_delete_folder": "You are about to delete the following folders (any projects in them will not be deleted):",
   "about_to_delete_projects": "You are about to delete the following projects:",
+  "about_to_delete_tag": "You are about to delete the following tag (any projects in them will not be deleted):",
   "about_to_delete_the_following": "You are about to delete the following ",
   "about_to_leave_projects": "You are about to leave the following projects:",
   "about_to_trash_projects": "You are about to trash the following projects:",
@@ -55,6 +56,7 @@
   "add_role_and_department": "Add role and department",
   "add_to_folder": "Add to folder",
   "add_to_folders": "Add to folders",
+  "add_to_tag": "Add to tag",
   "add_your_comment_here": "Add your comment here",
   "add_your_first_group_member_now": "Add your first group members now",
   "added": "added",
@@ -288,6 +290,7 @@
   "create_new_account": "Create new account",
   "create_new_folder": "Create New Folder",
   "create_new_subscription": "Create New Subscription",
+  "create_new_tag": "Create new tag",
   "create_project_in_github": "Create a GitHub repository",
   "create_your_first_project": "Create your first project!",
   "created_at": "Created at",
@@ -323,6 +326,7 @@
   "delete_and_leave_projects": "Delete and Leave Projects",
   "delete_folder": "Delete Folder",
   "delete_projects": "Delete Projects",
+  "delete_tag": "Delete Tag",
   "delete_your_account": "Delete your account",
   "deleted_at": "Deleted At",
   "deleted_files": "Deleted Files",
@@ -394,9 +398,9 @@
   "edit_dictionary": "Edit Dictionary",
   "edit_dictionary_empty": "Your custom dictionary is empty.",
   "edit_dictionary_remove": "Remove from dictionary",
-  "edit_folder": "Edit Folder",
   "edit_in_source_to_see_your_entire_latex_code": "Edit in <0>Source</0> to see your entire LaTeX code, or choose <0>Rich Text</0> for something more visual.",
   "edit_in_the_left_pane_click_recompile": "Edit in the left pane. Click <0>Recompile</0> to see the PDF output on the right.",
+  "edit_tag": "Edit Tag",
   "editing": "Editing",
   "editor_and_pdf": "Editor <0></0> PDF",
   "editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.",
@@ -508,7 +512,6 @@
   "first_name": "First Name",
   "first_x_days_free_after_that_y_per_month": "First <0>__trialLen__ days free</0>, after that <0>__price__</0> per month",
   "fold_line": "Fold line",
-  "folder_color": "Folder color",
   "folders": "Folders",
   "following_paths_conflict": "The following files and folders conflict with the same path",
   "font_family": "Font Family",
@@ -954,6 +957,8 @@
   "new_project": "New Project",
   "new_snippet_project": "Untitled",
   "new_subscription_will_be_billed_immediately": "Your new subscription will be billed immediately to your current payment method.",
+  "new_tag": "New Tag",
+  "new_tag_name": "New tag name",
   "new_to_latex_look_at": "New to LaTeX? Start by having a look at our",
   "newsletter": "Newsletter",
   "newsletter-accept": "I’d like emails about product offers and company news and events.",
@@ -1447,6 +1452,7 @@
   "syntax_validation": "Code check",
   "tab_connecting": "Connecting with the editor",
   "tab_no_longer_connected": "This tab is no longer connected with the editor",
+  "tag_color": "Tag color",
   "tag_name_cannot_exceed_characters": "Tag name cannot exceed __maxLength__ characters",
   "tag_name_is_already_used": "Tag \"__tagName__\" already exists",
   "tagline_collaborator": "Great for shared projects",

services/web/test/frontend/features/project-list/components/project-list-root.test.tsx

@@ -645,9 +645,9 @@ describe('<ProjectListRoot />', function () {
             const tagsDropdown = within(actionsToolbar).getByLabelText('Tags')
             fireEvent.click(tagsDropdown)
           })
-          screen.getByText('Add to folder')
+          screen.getByText('Add to tag')
 
-          const newTagButton = screen.getByText('Create New Folder')
+          const newTagButton = screen.getByText('Create new tag')
           fireEvent.click(newTagButton)
 
           const modal = screen.getAllByRole('dialog')[0]
@@ -685,7 +685,7 @@ describe('<ProjectListRoot />', function () {
 
           const tagsDropdown = within(actionsToolbar).getByLabelText('Tags')
           fireEvent.click(tagsDropdown)
-          within(actionsToolbar).getByText('Add to folder')
+          within(actionsToolbar).getByText('Add to tag')
 
           const tagButton = within(actionsToolbar).getByLabelText(
             `Add or remove project from tag ${this.tagName}`
@@ -718,7 +718,7 @@ describe('<ProjectListRoot />', function () {
 
           const tagsDropdown = within(actionsToolbar).getByLabelText('Tags')
           fireEvent.click(tagsDropdown)
-          within(actionsToolbar).getByText('Add to folder')
+          within(actionsToolbar).getByText('Add to tag')
 
           const tagButton = within(actionsToolbar).getByLabelText(
             `Add or remove project from tag ${this.tagName}`

services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx

@@ -43,10 +43,10 @@ describe('<TagsList />', function () {
 
   it('displays the tags list', function () {
     screen.getByRole('heading', {
-      name: 'Tags/Folders',
+      name: 'Tags',
     })
     screen.getByRole('button', {
-      name: 'New Folder',
+      name: 'New Tag',
     })
     screen.getByRole('button', {
       name: 'Tag 1 (1)',
@@ -82,7 +82,7 @@ describe('<TagsList />', function () {
   describe('Create modal', function () {
     beforeEach(async function () {
       const newTagButton = screen.getByRole('button', {
-        name: 'New Folder',
+        name: 'New Tag',
       })
 
       await fireEvent.click(newTagButton)
@@ -90,7 +90,7 @@ describe('<TagsList />', function () {
 
     it('modal is open', async function () {
       const modal = screen.getAllByRole('dialog', { hidden: false })[0]
-      within(modal).getByRole('heading', { name: 'Create New Folder' })
+      within(modal).getByRole('heading', { name: 'Create new tag' })
     })
 
     it('click on cancel closes the modal', async function () {
@@ -171,7 +171,7 @@ describe('<TagsList />', function () {
 
     it('modal is open', async function () {
       const modal = screen.getAllByRole('dialog', { hidden: false })[0]
-      within(modal).getByRole('heading', { name: 'Edit Folder' })
+      within(modal).getByRole('heading', { name: 'Edit Tag' })
     })
 
     it('click on cancel closes the modal', async function () {
@@ -264,7 +264,7 @@ describe('<TagsList />', function () {
 
     it('modal is open', async function () {
       const modal = screen.getAllByRole('dialog', { hidden: false })[0]
-      within(modal).getByRole('heading', { name: 'Delete Folder' })
+      within(modal).getByRole('heading', { name: 'Delete Tag' })
     })
 
     it('click on Cancel closes the modal', async function () {

services/web/test/frontend/features/project-list/components/table/project-tools/project-tools.test.tsx

@@ -18,6 +18,6 @@ describe('<ProjectTools />', function () {
     screen.getByLabelText('Archive')
     screen.getByLabelText('Trash')
     screen.getByTitle('Tags')
-    screen.getByRole('button', { name: 'Create New Folder' })
+    screen.getByRole('button', { name: 'Create new tag' })
   })
 })