[#7649] renamed the stringify util and removed its unnecessery tags stripping

CHANGELOG.md

@@ -4,18 +4,20 @@
 
 - Slightly adjusted the dark theme colors for better readability ([#7648](https://github.com/pocketbase/pocketbase/discussions/7648)).
 
+- Removed unnecessery tags stripping from the displayed log attributes ([#7649](https://github.com/pocketbase/pocketbase/issues/7649)).
+
 
 ## v0.37.1
 
 - Minor UI bugfixes:
     - Fixed `number` field input values normalization ([#7646](https://github.com/pocketbase/pocketbase/issues/7646)).
-    - Allow opening collections in new tab on middle click.
+    - Allow opening collections in new tab with middle click.
     - Show collection name in the page title on initial load.
 
 
 ## v0.37.0
 
-- New UI rewritten from scratch and with support for external customizations in mind.
+- New UI rewritten from scratch and with support for external customization in mind.
     > Note that as explained in [#7612](https://github.com/pocketbase/pocketbase/discussions/7612) the new UI kit and extensions APIs will intentionally remain undocumented until "Stage 2 completion" _(there no ETAs)_.
 
     The new UI also introduced several other small improvements:

ui/dist/index.html

@@ -13,7 +13,7 @@
 
     <!-- prism -->
     <script src="./libs/prism/prism.js" data-manual></script>
-  <script type="module" crossorigin src="./assets/index-CqTYCBEi.js"></script>
+  <script type="module" crossorigin src="./assets/index-BNqjqJMs.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
   <link rel="stylesheet" crossorigin href="./assets/index-B4KpgLuQ.css">
 </head>

ui/src/fields/text/input.js

@@ -73,7 +73,7 @@ export function input(props) {
 
                 const autodateValues = [];
                 for (let f of autodateFields) {
-                    autodateValues.push(`${f.name}: ${app.utils.stringifyValue(props.record[f.name])}`);
+                    autodateValues.push(`${f.name}: ${app.utils.displayValue(props.record[f.name])}`);
                 }
 
                 return t.div(

ui/src/logs/logPreviewModal.js

@@ -239,7 +239,7 @@ function logPreviewModal(logIdOrModel, settings) {
 
                                         return t.span({
                                             className: "txt",
-                                            textContent: app.utils.stringifyValue(value, "N/A", 1000),
+                                            textContent: app.utils.displayValue(value, 1000),
                                         });
                                     }),
                                     t.td({ className: "col-copy min-width" }, app.components.copyButton(value)),

ui/src/logs/logsList.js

@@ -374,18 +374,12 @@ export function logsList(logsSettings) {
                                                     if (app.utils.logDataFormatters[keyItem.key]) {
                                                         value = app.utils.logDataFormatters[keyItem.key](log);
                                                     } else {
-                                                        value = app.utils.stringifyValue(
+                                                        value = app.utils.displayValue(log.data[keyItem.key], 80);
-                                                            log.data[keyItem.key],
-                                                            "N/A",
-                                                            80,
-                                                        );
                                                     }
 
                                                     labels.push(
                                                         t.span(
-                                                            {
+                                                            { className: `label sm ${keyItem.label || ""}` },
-                                                                className: `label sm ${keyItem.label || ""}`,
-                                                            },
                                                             `${keyItem.key}: ${value}`,
                                                         ),
                                                     );

ui/src/records/recordPreviewModal.js

@@ -213,7 +213,7 @@ function recordPreviewModal(rawRecord, modalSettings) {
                                         });
                                     }
 
-                                    return app.utils.stringifyValue(data.record[f.name]);
+                                    return app.utils.displayValue(data.record[f.name], 1000);
                                 },
                             ),
                         );

ui/src/utils.js

@@ -606,47 +606,36 @@ const utils = {
     },
 
     /**
-     * Stringifies the provided value or fallback to missingValue in case it is empty.
+     * Returns a stringified truncated version of the provided value
+     * or fallback to `missingValue` in case it is empty.
      *
      * @param  {Mixed}  val
+     * @param  {number} [truncateLength]
      * @param  {string} [missingValue]
-     * @param  {string} [truncateLength]
      * @return {string}
      */
-    stringifyValue(val, missingValue = "N/A", truncateLength = 150) {
+    displayValue(val, truncateLength = 150, missingValue = "N/A") {
+        // check the raw value for "emptiness"
         if (utils.isEmpty(val)) {
             return missingValue;
         }
 
-        if (typeof val == "number") {
-            return "" + val;
-        }
-
-        if (typeof val == "boolean") {
-            return val ? "True" : "False";
-        }
-
         if (typeof val == "string") {
-            val = val.indexOf("<") >= 0 ? utils.plainText(val) : val;
+            // already a string
-            return utils.truncate(val, truncateLength) || missingValue;
+        } else if (typeof val == "boolean") {
-        }
+            val = val ? "True" : "False";
-
+        } else if (Array.isArray(val) && typeof val[0] != "object") {
-        // plain array
+            // assuming primitive array values
-        if (Array.isArray(val) && typeof val[0] != "object") {
+            val = val.map((child) => utils.displayValue(child, truncateLength, missingValue)).join(", ");
-            return utils.truncate(val.join(","), truncateLength);
+        } else {
-        }
-
-        // json
-        if (typeof val == "object") {
             try {
-                return utils.truncate(JSON.stringify(val), truncateLength) || missingValue;
+                val = JSON.stringify(val) || "";
             } catch (_) {
-                return missingValue;
+                val = "" + val;
             }
         }
 
-        // return as it is
+        return val ? utils.truncate(val, truncateLength) : missingValue;
-        return val;
     },
 
     /**