From 6242379915420f24b756e1566609051441c7e82a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 22 Nov 2018 15:51:59 +0100
Subject: [PATCH] react-panel: Replace JSONFormatter npm package with the
 current monkey patched JsonExplorer

---
 .../components/JSONFormatter/JSONFormatter.tsx  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/public/app/core/components/JSONFormatter/JSONFormatter.tsx b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
index 82560c07d33..1dcc9fd170b 100644
--- a/public/app/core/components/JSONFormatter/JSONFormatter.tsx
+++ b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
@@ -1,16 +1,16 @@
 import React, { PureComponent, createRef } from 'react';
-import JSONFormatterJS, { JSONFormatterConfiguration } from 'json-formatter-js';
+// import JSONFormatterJS, { JSONFormatterConfiguration } from 'json-formatter-js';
+import { JsonExplorer } from 'app/core/core'; // We have made some monkey-patching of json-formatter-js so we can't switch right now
 
 interface Props {
   className?: string;
   json: {};
-  config?: JSONFormatterConfiguration;
+  config?: any;
   open?: number;
 }
 
 export class JSONFormatter extends PureComponent<Props> {
   private wrapperRef = createRef<HTMLDivElement>();
-  private formatter: any;
 
   static defaultProps = {
     open: 3,
@@ -30,21 +30,16 @@ export class JSONFormatter extends PureComponent<Props> {
 
   renderJson = () => {
     const { json, config, open } = this.props;
-    this.formatter = new JSONFormatterJS(json, open, config);
     const wrapperEl = this.wrapperRef.current;
-    const newJsonHtml = this.formatter.render();
+    const formatter = new JsonExplorer(json, open, config);
     const hasChildren: boolean = wrapperEl.hasChildNodes();
     if (hasChildren) {
-      wrapperEl.replaceChild(newJsonHtml, wrapperEl.lastChild);
+      wrapperEl.replaceChild(formatter.render(), wrapperEl.lastChild);
     } else {
-      wrapperEl.appendChild(newJsonHtml);
+      wrapperEl.appendChild(formatter.render());
     }
   };
 
-  componentWillUnmount() {
-    this.formatter = null;
-  }
-
   render() {
     const { className } = this.props;
     return <div className={className} ref={this.wrapperRef} />;