From 50f1f5840d2f090179ebafbe53a27cea54e7734d Mon Sep 17 00:00:00 2001
From: Yuanli Han <44718283+yuanlihan@users.noreply.github.com>
Date: Fri, 15 Jul 2022 08:01:30 +0800
Subject: [PATCH] show json and add search box (#12784)

---
 web-console/src/bootstrap/ace.ts                 |  1 +
 .../src/components/show-json/show-json.tsx       | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web-console/src/bootstrap/ace.ts b/web-console/src/bootstrap/ace.ts
index 50ec648f562..1d8ea64d06a 100644
--- a/web-console/src/bootstrap/ace.ts
+++ b/web-console/src/bootstrap/ace.ts
@@ -18,6 +18,7 @@
 
 import 'ace-builds/src-noconflict/ace'; // Import Ace editor and all the sub components used in the app
 import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/theme-solarized_dark';
 import '../ace-modes/dsql';
 import '../ace-modes/hjson';
diff --git a/web-console/src/components/show-json/show-json.tsx b/web-console/src/components/show-json/show-json.tsx
index 18b331e41e4..c840c95e24b 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Intent, TextArea } from '@blueprintjs/core';
+import { Button, ButtonGroup, Intent } from '@blueprintjs/core';
 import copy from 'copy-to-clipboard';
 import * as JSONBig from 'json-bigint-native';
 import React from 'react';
+import AceEditor from 'react-ace';
 
 import { useQueryManager } from '../../hooks';
 import { Api, AppToaster, UrlBaser } from '../../singletons';
@@ -84,7 +85,18 @@ export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
         {jsonState.loading ? (
           <Loader />
         ) : (
-          <TextArea readOnly value={!jsonState.error ? jsonValue : jsonState.getErrorMessage()} />
+          <AceEditor
+            mode="hjson"
+            theme="tomorrow"
+            readOnly
+            fontSize={12}
+            width="100%"
+            height="100%"
+            showPrintMargin={false}
+            showGutter={false}
+            value={!jsonState.error ? jsonValue : jsonState.getErrorMessage()}
+            style={{}}
+          />
         )}
       </div>
     </div>