show json and add search box (#12784)

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';

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>