{
- if (!aceEditor.current || !internalValueError) return;
+ if (!editorViewRef.current || !internalValueError) return;
- const rc = extractRowColumnFromHjsonError(internalValueError);
- if (!rc) return;
+ const position = extractLineColumnFromHjsonError(internalValueError);
+ if (!position) return;
- aceEditor.current.focus(); // Grab the focus
- aceEditor.current.getSelection().moveCursorTo(rc.row, rc.column);
+ focusEditorAt(editorViewRef.current, position);
}}
>
{internalValueError.message}
diff --git a/web-console/src/components/query-error-pane/query-error-pane.tsx b/web-console/src/components/query-error-pane/query-error-pane.tsx
index 72e0b59521de..fd8ff66c47f2 100644
--- a/web-console/src/components/query-error-pane/query-error-pane.tsx
+++ b/web-console/src/components/query-error-pane/query-error-pane.tsx
@@ -19,14 +19,14 @@
import type { JSX } from 'react';
import React, { useState } from 'react';
-import type { DruidError, RowColumn } from '../../utils';
+import type { DruidError, LineColumn } from '../../utils';
import { HighlightText } from '../highlight-text/highlight-text';
import './query-error-pane.scss';
export interface QueryErrorPaneProps {
error: DruidError;
- moveCursorTo: (rowColumn: RowColumn) => void;
+ moveCursorTo: (position: LineColumn) => void;
queryString?: string;
onQueryStringChange?: (newQueryString: string, run?: boolean) => void;
}
@@ -39,7 +39,7 @@ export const QueryErrorPane = React.memo(function QueryErrorPane(props: QueryErr
return
{error.message}
;
}
- const { startRowColumn, suggestion } = error;
+ const { startLineColumn, suggestion } = error;
let suggestionElement: JSX.Element | undefined;
if (suggestion && queryString && onQueryStringChange) {
const newQuery = suggestion.fn(queryString);
@@ -69,14 +69,14 @@ export const QueryErrorPane = React.memo(function QueryErrorPane(props: QueryErr
)}
{error.errorMessageWithoutExpectation && (
- {startRowColumn ? (
+ {startLineColumn ? (
(
{
- moveCursorTo(startRowColumn);
+ moveCursorTo(startLineColumn);
}}
>
{found}
diff --git a/web-console/src/components/show-json-or-stages/show-json-or-stages.scss b/web-console/src/components/show-json-or-stages/show-json-or-stages.scss
index f4c7c60e34ce..b72dc7182907 100644
--- a/web-console/src/components/show-json-or-stages/show-json-or-stages.scss
+++ b/web-console/src/components/show-json-or-stages/show-json-or-stages.scss
@@ -41,6 +41,10 @@
resize: none;
}
+ & > .code-editor {
+ height: 100%;
+ }
+
.loader {
position: relative;
}
diff --git a/web-console/src/components/show-json-or-stages/show-json-or-stages.tsx b/web-console/src/components/show-json-or-stages/show-json-or-stages.tsx
index 23295073de1c..88095343e508 100644
--- a/web-console/src/components/show-json-or-stages/show-json-or-stages.tsx
+++ b/web-console/src/components/show-json-or-stages/show-json-or-stages.tsx
@@ -19,13 +19,14 @@
import { Button, ButtonGroup, Intent } from '@blueprintjs/core';
import * as JSONBig from 'json-bigint-native';
import React from 'react';
-import AceEditor from 'react-ace';
import { Execution } from '../../druid-models';
+import { hjson } from '../../editor-languages/hjson';
import { useQueryManager } from '../../hooks';
import { Api, AppToaster, UrlBaser } from '../../singletons';
import { copyToClipboard, downloadFile } from '../../utils';
import { ExecutionStagesPane } from '../../views/workbench-view/execution-stages-pane/execution-stages-pane';
+import { CodeEditor } from '../code-editor/code-editor';
import { Loader } from '../loader/loader';
import './show-json-or-stages.scss';
@@ -108,16 +109,10 @@ export const ShowJsonOrStages = React.memo(function ShowJsonOrStages(props: Show
) : execution ? (
) : (
-
)}
diff --git a/web-console/src/components/show-json/show-json.scss b/web-console/src/components/show-json/show-json.scss
index b5b960093cb2..91c162d3ced8 100644
--- a/web-console/src/components/show-json/show-json.scss
+++ b/web-console/src/components/show-json/show-json.scss
@@ -41,6 +41,10 @@
resize: none;
}
+ & > .code-editor {
+ height: 100%;
+ }
+
.loader {
position: relative;
}
diff --git a/web-console/src/components/show-json/show-json.tsx b/web-console/src/components/show-json/show-json.tsx
index f9fa6f6a31c2..b0b3dd76f41c 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -19,11 +19,12 @@
import { Button, ButtonGroup, Intent } from '@blueprintjs/core';
import * as JSONBig from 'json-bigint-native';
import React from 'react';
-import AceEditor from 'react-ace';
+import { hjson } from '../../editor-languages/hjson';
import { useQueryManager } from '../../hooks';
import { Api, AppToaster, UrlBaser } from '../../singletons';
import { copyToClipboard, downloadFile } from '../../utils';
+import { CodeEditor } from '../code-editor/code-editor';
import { Loader } from '../loader/loader';
import './show-json.scss';
@@ -90,16 +91,10 @@ export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
{jsonState.loading ? (