FEATURE: Add JSON result type component (#260)

If a column is payload or contains _payload it will be assumed
it has JSON data in it, then we will show the truncated JSON in the
result column with a button to show the full-screen formatted
JSON using our full-screen code viewer. We also do the same if
the column is the `json` postgres data type.

assets/javascripts/discourse/components/query-result.js

@@ -17,6 +17,7 @@ import UrlViewComponent from "./result-types/url";
 import UserViewComponent from "./result-types/user";
 import GroupViewComponent from "./result-types/group";
 import HtmlViewComponent from "./result-types/html";
+import JsonViewComponent from "./result-types/json";
 import CategoryViewComponent from "./result-types/category";
 
 const VIEW_COMPONENTS = {
@@ -29,6 +30,7 @@ const VIEW_COMPONENTS = {
   user: UserViewComponent,
   group: GroupViewComponent,
   html: HtmlViewComponent,
+  json: JsonViewComponent,
   category: CategoryViewComponent,
 };
 

assets/javascripts/discourse/components/result-types/json.hbs

@@ -0,0 +1,9 @@
+<div class="result-json">
+  <div class="result-json-value">{{@ctx.value}}</div>
+  <DButton
+    class="result-json-button"
+    @action={{action "viewJson"}}
+    @icon="ellipsis-h"
+    @title="explorer.view_json"
+  />
+</div>

assets/javascripts/discourse/components/result-types/json.js

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import FullscreenCodeModal from "discourse/components/modal/fullscreen-code";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import { cached } from "@glimmer/tracking";
+
+export default class Json extends Component {
+  @service dialog;
+  @service modal;
+
+  @cached
+  get parsedJson() {
+    try {
+      return JSON.parse(this.args.ctx.value);
+    } catch {
+      return null;
+    }
+  }
+
+  @action
+  viewJson() {
+    this.modal.show(FullscreenCodeModal, {
+      model: {
+        code: this.parsedJson
+          ? JSON.stringify(this.parsedJson, null, 2)
+          : this.args.ctx.value,
+        codeClasses: "",
+      },
+    });
+  }
+}