adjust TextView in Profile and popup

.tool-versions

@@ -1 +1 @@
-nodejs 20.12.1
+nodejs 22.20.0

app/package-lock.json

@@ -50,6 +50,9 @@
         "typescript": "^5.0.2",
         "vite": "^6.2.0",
         "vite-plugin-pwa": "^0.21.1"
+      },
+      "engines": {
+        "node": ">=22.20.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4517,13 +4520,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -11545,9 +11548,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",

app/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=22.20.0"
+  },
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as third-party-ext
+FROM node:22.20.0-alpine as third-party-ext
 RUN apk add python3 g++ make
 WORKDIR /extensions
 ADD extensions .

backend/extensions/package.json

@@ -1,5 +1,8 @@
 {
   "name": "directus-extensions",
+  "engines": {
+    "node": ">=22.20.0"
+  },
   "dependencies": {
     "directus-extension-sync": "3.0.4"
   }

lib/package-lock.json

@@ -97,6 +97,9 @@
         "vite-plugin-svgr": "^4.3.0",
         "vitest": "^3.0.5"
       },
+      "engines": {
+        "node": ">=22.20.0"
+      },
       "peerDependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -3899,13 +3902,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -12772,9 +12775,9 @@
       "license": "MIT"
     },
     "node_modules/tmp": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -13359,9 +13362,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

lib/package.json

@@ -4,6 +4,9 @@
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",
+  "engines": {
+    "node": ">=22.20.0"
+  },
   "module": "./dist/index.esm.js",
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",

lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -28,7 +28,7 @@ export const TextView = ({
 }: {
   item?: Item
   itemId?: string
-  text?: string
+  text?: string | null
   truncate?: boolean
   rawText?: string
 }) => {
@@ -44,7 +44,15 @@ export const TextView = ({
 
   if (rawText) {
     innerText = replacedText = rawText
-  } else if (text) {
+  } else if (text === undefined) {
+    // Field was omitted by backend (no permission)
+    innerText =
+      replacedText = `Login to see this ${item?.layer?.name ? (item.layer.name.endsWith('s') ? item.layer.name.slice(0, -1) : item.layer.name) : ''}`
+  } else if (text === null || text === '') {
+    // Field is not set or empty - show nothing
+    innerText = ''
+  } else {
+    // Field has a value
     innerText = text
   }
 

lib/src/Components/Profile/Subcomponents/GalleryView.tsx

@@ -24,6 +24,7 @@ export const GalleryView = ({ item }: { item: Item }) => {
   const appState = useAppState()
   const images =
     item.gallery?.flatMap((g, index) => {
+      if (!g.directus_files_id) return []
       const file = g.directus_files_id
       if (typeof file === 'string') return []
       const { id, type, width, height } = file

lib/src/Components/Profile/Subcomponents/ProfileTextView.tsx

@@ -17,15 +17,14 @@ export const ProfileTextView = ({
 }) => {
   const text = get(item, dataField)
 
-  const parsedText = typeof text !== 'string' ? '' : text
+  // undefined = no permission, null = not set, string = value exists
+  const shouldShowHeading = !(hideWhenEmpty && (text === '' || text === null))
 
   return (
     <div className='tw:my-10 tw:mt-2 tw:px-6'>
-      {!(text === '' && hideWhenEmpty) && (
-        <h2 className='tw:text-lg tw:font-semibold'>{heading}</h2>
-      )}
+      {shouldShowHeading && <h2 className='tw:text-lg tw:font-semibold'>{heading}</h2>}
       <div className='tw:mt-2 tw:text-sm'>
-        <TextView itemId={item.id} rawText={parsedText} />
+        <TextView item={item} text={text as string | null | undefined} itemId={item.id} />
       </div>
     </div>
   )