Merge pull request #18997 from overleaf/mj-fix-uncategorized-title

[web] Correct title when viewing uncategorized projects

GitOrigin-RevId: 6f284c437563f10125974eac7f6da6c92526e436

services/web/frontend/extracted-translations.json

@@ -1475,6 +1475,7 @@
   "turn_on_link_sharing": "",
   "unarchive": "",
   "uncategorized": "",
+  "uncategorized_projects": "",
   "unconfirmed": "",
   "undelete": "",
   "undeleting": "",

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

@@ -61,7 +61,7 @@ function ProjectsDropdown() {
     }
 
     if (selectedTagId === UNCATEGORIZED_KEY) {
-      setTitle(t('uncategorized'))
+      setTitle(t('uncategorized_projects'))
     } else {
       const tag = tags.find(({ _id: id }) => id === selectedTagId)
 

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

@@ -103,6 +103,7 @@ function ProjectListPageContent() {
                 <ProjectListTitle
                   filter={filter}
                   selectedTag={selectedTag}
+                  selectedTagId={selectedTagId}
                   className="hidden-xs text-truncate"
                 />
                 <div className="project-tools">

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

@@ -1,21 +1,25 @@
 import { useTranslation } from 'react-i18next'
 import classnames from 'classnames'
 import { Tag } from '../../../../../../app/src/Features/Tags/types'
-import { Filter } from '../../context/project-list-context'
+import { Filter, UNCATEGORIZED_KEY } from '../../context/project-list-context'
 
 function ProjectListTitle({
   filter,
   selectedTag,
+  selectedTagId,
   className,
 }: {
   filter: Filter
   selectedTag: Tag | undefined
+  selectedTagId: string | undefined
   className?: string
 }) {
   const { t } = useTranslation()
   let message = t('projects')
   if (selectedTag) {
     message = `${selectedTag.name}`
+  } else if (selectedTagId === UNCATEGORIZED_KEY) {
+    message = t('uncategorized_projects')
   } else {
     switch (filter) {
       case 'all':

services/web/locales/en.json

@@ -2085,6 +2085,7 @@
   "unable_to_extract_the_supplied_zip_file": "Opening this content on Overleaf failed because the zip file could not be extracted. Please ensure that it is a valid zip file. If this keeps happening for links on a particular site, please report this to them.",
   "unarchive": "Restore",
   "uncategorized": "Uncategorized",
+  "uncategorized_projects": "Uncategorized Projects",
   "unconfirmed": "Unconfirmed",
   "undelete": "Undelete",
   "undeleting": "Undeleting",

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

@@ -8,6 +8,7 @@ describe('<ProjectListTitle />', function () {
     filter: Filter
     selectedTag: Tag | undefined
     expectedText: string
+    selectedTagId: string | undefined
   }
 
   const testCases: Array<TestCase> = [
@@ -16,37 +17,50 @@ describe('<ProjectListTitle />', function () {
       filter: 'all',
       selectedTag: undefined,
       expectedText: 'all projects',
+      selectedTagId: undefined,
     },
     {
       filter: 'owned',
       selectedTag: undefined,
       expectedText: 'your projects',
+      selectedTagId: undefined,
     },
     {
       filter: 'shared',
       selectedTag: undefined,
       expectedText: 'shared with you',
+      selectedTagId: undefined,
     },
     {
       filter: 'archived',
       selectedTag: undefined,
       expectedText: 'archived projects',
+      selectedTagId: undefined,
     },
     {
       filter: 'trashed',
       selectedTag: undefined,
       expectedText: 'trashed projects',
+      selectedTagId: undefined,
     },
     // Tags
+    {
+      filter: 'all',
+      selectedTag: undefined,
+      expectedText: 'uncategorized',
+      selectedTagId: 'uncategorized',
+    },
     {
       filter: 'all',
       selectedTag: { _id: '', user_id: '', name: 'sometag' },
       expectedText: 'sometag',
+      selectedTagId: '',
     },
     {
       filter: 'shared',
       selectedTag: { _id: '', user_id: '', name: 'othertag' },
       expectedText: 'othertag',
+      selectedTagId: '',
     },
   ]
 
@@ -56,6 +70,7 @@ describe('<ProjectListTitle />', function () {
         <ProjectListTitle
           filter={testCase.filter}
           selectedTag={testCase.selectedTag}
+          selectedTagId={testCase.selectedTagId}
         />
       )
       screen.getByText(new RegExp(testCase.expectedText, 'i'))