Add nullcheck to tag name to avoid crashing the client (#11519)

GitOrigin-RevId: 917fcffa672e2626203275ea5e62ce9388366f8e

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[]
 }

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])

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)}
           />

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)}
           />

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' : ''}`}

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

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 {