From 174f8f5823ea031597c30f89e95bc65017c31135 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 22 Oct 2020 23:51:33 +0200
Subject: [PATCH] Template dev tools: Print the type of the response and
 stringify objects (#7439)

---
 .../template/developer-tools-template.ts      | 37 ++++++++++++++-----
 src/translations/en.json                      |  1 +
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index a44755deb5..564f08f984 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -82,6 +82,13 @@ class HaPanelDevTemplate extends LitElement {
   }
 
   protected render() {
+    const type = typeof this._templateResult?.result;
+    const resultType =
+      type === "object"
+        ? Array.isArray(this._templateResult?.result)
+          ? "list"
+          : "dict"
+        : type;
     return html`
       <div
         class="content ${classMap({
@@ -141,16 +148,28 @@ class HaPanelDevTemplate extends LitElement {
         </div>
 
         <div class="render-pane">
-          <ha-circular-progress
-            class="render-spinner"
-            .active=${this._rendering}
-            size="small"
-          ></ha-circular-progress>
-
+          ${this._rendering
+            ? html`<ha-circular-progress
+                class="render-spinner"
+                active
+                size="small"
+              ></ha-circular-progress>`
+            : ""}
+          ${this._templateResult
+            ? html`${this.hass.localize(
+                "ui.panel.developer-tools.tabs.templates.result_type"
+              )}:
+              ${resultType}`
+            : ""}
+          <!-- prettier-ignore -->
           <pre
-            class="rendered ${classMap({ error: Boolean(this._error) })}"
-          ><!-- display: block -->${this._error}${this._templateResult
-            ?.result}</pre>
+            class="rendered ${classMap({
+            error: Boolean(this._error),
+            [resultType]: resultType,
+          })}"
+          >${this._error}${type === "object"
+            ? JSON.stringify(this._templateResult!.result, null, 2)
+            : this._templateResult?.result}</pre>
           ${this._templateResult?.listeners.time
             ? html`
                 <p>
diff --git a/src/translations/en.json b/src/translations/en.json
index 8a8d8d2c1c..faf54dd649 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2957,6 +2957,7 @@
             "description": "Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.",
             "editor": "Template editor",
             "reset": "Reset to demo template",
+            "result_type": "Result type",
             "jinja_documentation": "Jinja2 template documentation",
             "template_extensions": "Home Assistant template extensions",
             "unknown_error_template": "Unknown error rendering template",