fix spec dialog highlighting (#8533)

web-console/src/dialogs/spec-dialog/spec-dialog.tsx

@@ -20,6 +20,8 @@ import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
 import React from 'react';
 import AceEditor from 'react-ace';
 
+import { validJson } from '../../utils';
+
 import './spec-dialog.scss';
 
 export interface SpecDialogProps {
@@ -34,15 +36,6 @@ export interface SpecDialogState {
 }
 
 export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogState> {
-  static validJson(json: string): boolean {
-    try {
-      JSON.parse(json);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
   constructor(props: SpecDialogProps) {
     super(props);
     this.state = {
@@ -53,7 +46,7 @@ export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogS
   private postSpec(): void {
     const { onClose, onSubmit } = this.props;
     const { spec } = this.state;
-    if (!SpecDialog.validJson(spec)) return;
+    if (!validJson(spec)) return;
     onSubmit(JSON.parse(spec));
     onClose();
   }
@@ -71,7 +64,7 @@ export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogS
         canOutsideClickClose={false}
       >
         <AceEditor
-          mode="json"
+          mode="hjson"
           theme="solarized_dark"
           className="spec-dialog-textarea"
           onChange={e => {
@@ -96,7 +89,7 @@ export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogS
               text="Submit"
               intent={Intent.PRIMARY}
               onClick={() => this.postSpec()}
-              disabled={!SpecDialog.validJson(spec)}
+              disabled={!validJson(spec)}
             />
           </div>
         </div>

web-console/src/views/load-data-view/load-data-view.tsx

@@ -2625,14 +2625,6 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
             model={granularitySpec}
             onChange={g => this.updateSpec(deepSet(spec, 'dataSchema.granularitySpec', g))}
           />
-        </div>
-        <div className="other">
-          <H5>Secondary partitioning</H5>
-          <AutoForm
-            fields={getPartitionRelatedTuningSpecFormFields(getSpecType(spec) || 'index')}
-            model={tuningConfig}
-            onChange={t => this.updateSpec(deepSet(spec, 'tuningConfig', t))}
-          />
           <AutoForm
             fields={[
               {
@@ -2653,6 +2645,14 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
             onChange={s => this.updateSpec(s)}
           />
         </div>
+        <div className="other">
+          <H5>Secondary partitioning</H5>
+          <AutoForm
+            fields={getPartitionRelatedTuningSpecFormFields(getSpecType(spec) || 'index')}
+            model={tuningConfig}
+            onChange={t => this.updateSpec(deepSet(spec, 'tuningConfig', t))}
+          />
+        </div>
         <div className="control">
           <Callout className="intro">
             <p className="optional">Optional</p>