From 9795904facbfe78f4cd8a9a5397feb4a6235aab4 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Wed, 1 Feb 2023 09:31:13 -0700
Subject: [PATCH] Add nullcheck to tag name to avoid crashing the client
 (#11519)

GitOrigin-RevId: 917fcffa672e2626203275ea5e62ce9388366f8e
---
 services/web/app/src/Features/Tags/types.d.ts            | 2 +-
 .../components/dropdown/projects-dropdown.tsx            | 2 +-
 .../project-list/components/modals/edit-tag-modal.tsx    | 2 +-
 .../project-list/components/modals/rename-tag-modal.tsx  | 2 +-
 .../project-list/components/sidebar/tags-list.tsx        | 2 +-
 .../table/project-tools/buttons/tags-dropdown.tsx        | 2 +-
 .../project-list/context/project-list-context.tsx        | 9 ++++++++-
 7 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/services/web/app/src/Features/Tags/types.d.ts b/services/web/app/src/Features/Tags/types.d.ts
index 89d00e7487..3886cf0424 100644
--- a/services/web/app/src/Features/Tags/types.d.ts
+++ b/services/web/app/src/Features/Tags/types.d.ts
@@ -1,6 +1,6 @@
 export type Tag = {
   _id: string
   user_id: string
-  name: string
+  name: string | null
   project_ids?: string[]
 }
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
index 6b7d521b8c..59a51c10ad 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
@@ -66,7 +66,7 @@ function ProjectsDropdown() {
       const tag = tags.find(({ _id: id }) => id === selectedTagId)
 
       if (tag) {
-        setTitle(tag.name)
+        setTitle(tag.name ?? '')
       }
     }
   }, [filter, tags, selectedTagId, t])
diff --git a/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx
index 745cbeae9f..957f870214 100644
--- a/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx
+++ b/services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx
@@ -86,7 +86,7 @@ export default function EditTagModal({
             type="text"
             placeholder="Tag Name"
             name="new-tag-name"
-            value={newTagName === undefined ? tag.name : newTagName}
+            value={newTagName === undefined ? tag.name ?? '' : newTagName}
             required
             onChange={e => setNewTagName(e.target.value)}
           />
diff --git a/services/web/frontend/js/features/project-list/components/modals/rename-tag-modal.tsx b/services/web/frontend/js/features/project-list/components/modals/rename-tag-modal.tsx
index 70110efb1a..3db7260daf 100644
--- a/services/web/frontend/js/features/project-list/components/modals/rename-tag-modal.tsx
+++ b/services/web/frontend/js/features/project-list/components/modals/rename-tag-modal.tsx
@@ -85,7 +85,7 @@ export default function RenameTagModal({
             type="text"
             placeholder="Tag Name"
             name="new-tag-name"
-            value={newTagName === undefined ? tag.name : newTagName}
+            value={newTagName === undefined ? tag.name ?? '' : newTagName}
             required
             onChange={e => setNewTagName(e.target.value)}
           />
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
index c43dfb2dda..8cf9e18326 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
@@ -39,7 +39,7 @@ export default function TagsList() {
           <span className="name">{t('new_folder')}</span>
         </Button>
       </li>
-      {sortBy(tags, tag => tag.name.toLowerCase()).map(tag => {
+      {sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => {
         return (
           <li
             className={`tag ${selectedTagId === tag._id ? 'active' : ''}`}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
index c9233e8d65..5d4da43453 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx
@@ -95,7 +95,7 @@ function TagsDropdown() {
           <li className="dropdown-header" role="heading" aria-level={3}>
             {t('add_to_folder')}
           </li>
-          {sortBy(tags, tag => tag.name.toLowerCase()).map(tag => {
+          {sortBy(tags, tag => tag.name?.toLowerCase()).map(tag => {
             return (
               <li key={tag._id}>
                 <Button
diff --git a/services/web/frontend/js/features/project-list/context/project-list-context.tsx b/services/web/frontend/js/features/project-list/context/project-list-context.tsx
index a5eed4f409..7e1a98cb25 100644
--- a/services/web/frontend/js/features/project-list/context/project-list-context.tsx
+++ b/services/web/frontend/js/features/project-list/context/project-list-context.tsx
@@ -138,7 +138,14 @@ export function ProjectListProvider({ children }: ProjectListProviderProps) {
   const [selectedTagId, setSelectedTagId] = usePersistedState<
     string | undefined
   >('project-list-selected-tag-id', undefined)
-  const [tags, setTags] = useState<Tag[]>(getMeta('ol-tags', []) as Tag[])
+
+  const olTags: Tag[] = getMeta('ol-tags', [])
+
+  const [tags, setTags] = useState<Tag[]>(() =>
+    // `tag.name` data may be null for some old users
+    olTags.map(tag => ({ ...tag, name: tag.name ?? '' }))
+  )
+
   const [searchText, setSearchText] = useState('')
 
   const {