fix(key-value): display null values as 'null' string after CSV import

core-web/libs/dotcms-webcomponents/src/components/contenttypes-fields/dot-key-value/dot-key-value.e2e.ts

@@ -358,6 +358,28 @@ describe('dot-key-value', () => {
                 ]);
             });
 
+            it('should handle null values in HTML-encoded JSON', async () => {
+                element.setProperty('value', '{"my-value":null}');
+                await page.waitForChanges();
+                const list = await getList();
+                expect(await list.getProperty('items')).toEqual([
+                    { key: 'my-value', value: 'null' }
+                ]);
+            });
+
+            it('should handle mixed null and non-null values in HTML-encoded JSON', async () => {
+                element.setProperty(
+                    'value',
+                    '{"key1":null,"key2":"value2"}'
+                );
+                await page.waitForChanges();
+                const list = await getList();
+                expect(await list.getProperty('items')).toEqual([
+                    { key: 'key1', value: 'null' },
+                    { key: 'key2', value: 'value2' }
+                ]);
+            });
+
             it('should handle invalid format', async () => {
                 element.setProperty('value', 'hello/world*hola,mundo');
                 await page.waitForChanges();

core-web/libs/dotcms-webcomponents/src/components/contenttypes-fields/dot-key-value/dot-key-value.tsx

@@ -166,6 +166,7 @@ export class DotKeyValueComponent {
             formattedValue = this.value
                 .replace(/&lt;/gi, '<')
                 .replace(/[|]/gi, '&#124;')
+                .replace(/&#x22;:null/gi, '&#x22;:&#x22;null&#x22;')
                 .replace(/&#x22;:&#x22;/gi, '|')
                 .replace(/&#x22;,&#x22;/gi, ',')
                 .replace(/{&#x22;/gi, '')

core-web/libs/edit-content/src/lib/fields/dot-edit-content-key-value/components/key-value-field/key-value-field.component.ts

@@ -65,7 +65,7 @@ export class DotKeyValueFieldComponent extends BaseControlValueAccessor<
 
         return Object.keys(data).map((key: string) => ({
             key,
-            value: data[key] ?? ''
+            value: data[key] === null ? 'null' : (data[key] ?? '')
         }));
     }
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-key-value/dot-edit-content-key-value.component.spec.ts

@@ -191,14 +191,14 @@ describe('DotEditContentKeyValueComponent', () => {
             expect(keyValueField.$initialValue()).toEqual([]);
         });
 
-        it('should coalesce null values to empty string after import', () => {
+        it('should display null values as the string "null" after import', () => {
             const testData = { key1: null, key2: 'value2' };
             const keyValueField = spectator.query(DotKeyValueFieldComponent);
             keyValueField.writeValue(testData);
             spectator.detectChanges();
 
             expect(keyValueField.$initialValue()).toEqual([
-                { key: 'key1', value: '' },
+                { key: 'key1', value: 'null' },
                 { key: 'key2', value: 'value2' }
             ]);
         });

core-web/libs/ui/src/lib/components/dot-key-value-ng/dot-key-value-table-row/dot-key-value-table-row.component.spec.ts

@@ -240,6 +240,30 @@ describe('DotKeyValueTableRowComponent', () => {
             });
         });
 
+        describe('Null value displayed as "null" string (imported data)', () => {
+            beforeEach(() => {
+                spectator = createComponent({
+                    props: {
+                        showHiddenField: false,
+                        variable: { key: 'imported-key', hidden: false, value: 'null' },
+                        index: 0,
+                        dragAndDrop: false
+                    } as unknown
+                });
+                spectator.detectChanges();
+            });
+
+            it('should render the row and show "null" as value', () => {
+                const keyElement = spectator.query(byTestId('dot-key-value-key'));
+                const valueInput = spectator.query<HTMLInputElement>(
+                    byTestId('dot-key-value-input')
+                );
+                expect(keyElement.textContent).toContain('imported-key');
+                expect(valueInput).toBeTruthy();
+                expect(valueInput.value).toBe('null');
+            });
+        });
+
         describe('Drag and Drop', () => {
             beforeEach(() => {
                 spectator = createComponent({

dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp

@@ -1484,13 +1484,13 @@
         while (iterator.hasNext()) {
             final String key = iterator.next();
             final Object object = keyValueMap.get(key);
-            if(null != object) {
-                keyValueDataRaw.append(key.replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;")).append(":").append(object.toString().replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;"));
-                dotKeyValueDataRaw.append("&#x22;" + key.replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;") + "&#x22;").append(":").append("&#x22;" + object.toString().replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;") + "&#x22;");
-                if (iterator.hasNext()) {
-                    keyValueDataRaw.append(',');
-                    dotKeyValueDataRaw.append(',');
-                }
+            final String encodedKey = key.replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;");
+            final String encodedValue = null != object ? object.toString().replaceAll(":", "&#58;").replaceAll(",", "&#44;").replaceAll("<", "&lt;") : "null";
+            keyValueDataRaw.append(encodedKey).append(":").append(encodedValue);
+            dotKeyValueDataRaw.append("&#x22;" + encodedKey + "&#x22;").append(":").append("&#x22;" + encodedValue + "&#x22;");
+            if (iterator.hasNext()) {
+                keyValueDataRaw.append(',');
+                dotKeyValueDataRaw.append(',');
             }
         }
         keyValueDataRaw.append("}");