upgrade in progress

Author: zamoore

ui/app/components/namespace-editor.hbs

@@ -16,38 +16,21 @@
 		</Hds::Form::TextInput::Field>
 	{{/if}}
 
-	<div class="boxed-section">
-		<div class="boxed-section-head">
-			Definition
-		</div>
-		<div class="boxed-section-body is-full-bleed">
-			<div
-				class="namespace-editor-wrapper boxed-section-body is-full-bleed
-				{{if this.JSONError 'error'}}"
-			>
-				{{!-- TODO: Needs to support extraKeys=(hash Cmd-Enter=this.save) --}}
-				<div
-					class="namespace-editor"
-					data-test-namespace-editor
-					{{hds-code-editor
-						ariaLabel="Namespace definition"
-						language="javascript"
-						value=this.definitionString
-						onInput=this.updateNamespaceDefinition
-					}}
-				/>
-				{{#if this.JSONError}}
-				<p class="help is-danger">
-					{{this.JSONError}}
-				</p>
-				{{/if}}
-			</div>
-		</div>
-	</div>
+	<Hds::CodeEditor
+		data-test-namespace-editor
+		@language="json"
+		@isLintingEnabled={{true}}
+		@value={{this.definitionString}}
+		@onInput={{this.updateNamespaceDefinition}}
+		@onLint={{this.onLint}}
+		as |CE|
+	>
+		<CE.Title>Definition</CE.Title>
+	</Hds::CodeEditor>
 
 	<footer>
 		{{#if (can "update namespace")}}
-      <Hds::Button @text="Save Namespace" @color="primary" disabled={{this.JSONError}}
+      <Hds::Button @text="Save Namespace" @color="primary" disabled={{this.hasLintingErrors}}
         {{on "click" this.save}}
 		data-test-save-namespace
       />

ui/app/components/namespace-editor.js

@@ -20,24 +20,21 @@ export default class NamespaceEditorComponent extends Component {
 
   @alias('args.namespace') namespace;
 
-  @tracked JSONError = null;
   @tracked definitionString = this.definitionStringFromNamespace(
     this.args.namespace
   );
+  @tracked hasLintingErrors = false;
 
   @action updateNamespaceName({ target: { value } }) {
     this.namespace.set('name', value);
   }
 
   @action updateNamespaceDefinition(value) {
-    this.JSONError = null;
     this.definitionString = value;
+  }
 
-    try {
-      JSON.parse(this.definitionString);
-    } catch (error) {
-      this.JSONError = 'Invalid JSON';
-    }
+  @action onLint(diagnostics) {
+    this.hasLintingErrors = diagnostics.length > 0;
   }
 
   @action async save(e) {

ui/app/components/policy-editor.hbs

@@ -16,25 +16,16 @@
 		</Hds::Form::TextInput::Field>
 	{{/if}}
 
-	<div class="boxed-section">
-		<div class="boxed-section-head">
-			Policy Definition
-		</div>
-		<div class="boxed-section-body is-full-bleed">
-
-			{{!-- TODO: extraKeys=(hash Cmd-Enter=this.save) --}}
-			<div
-				class="policy-editor"
-				data-test-policy-editor
-				{{hds-code-editor
-					ariaLabel="Policy definition"
-					language="ruby"
-					value=@policy.rules
-					onInput=this.updatePolicyRules
-				}}
-			/>
-		</div>
-	</div>
+	<Hds::CodeEditor
+		class="policy-editor"
+		data-test-policy-editor
+		@language="ruby"
+		@value={{@policy.rules}}
+		@onInput={{this.updatePolicyRules}}
+		as |CE|
+	>
+		<CE.Title>Policy Definition</CE.Title>
+	</Hds::CodeEditor>
 
 	<div>
 		<label>

ui/app/components/sentinel-policy-editor.hbs

@@ -16,24 +16,18 @@
 		</Hds::Form::TextInput::Field>
 	{{/if}}
 
-	<div class="boxed-section">
-		<div class="boxed-section-head">
+	<Hds::CodeEditor
+		class="policy-editor"
+		data-test-policy-editor
+		@language="ruby"
+		@value={{@policy.policy}}
+		@onInput={{this.updatePolicy}}
+		as |CE|
+	>
+		<CE.Title>
 			Policy Definition
-		</div>
-		<div class="boxed-section-body is-full-bleed">
-			{{!-- TODO: extraKeys=(hash Cmd-Enter=this.save) --}}
-			<div
-				class="policy-editor"
-				data-test-policy-editor
-				{{hds-code-editor
-					ariaLabel="Policy definition"
-					language="ruby"
-					value=@policy.policy
-					onInput=this.updatePolicy
-				}}
-			/>
-		</div>
-	</div>
+		</CE.Title>
+	</Hds::CodeEditor>
 
 	<div>
 		<label>

ui/app/components/variable-form.hbs

@@ -115,21 +115,20 @@
     {{#if (eq this.view "json")}}
       <div
         class="editor-wrapper boxed-section-body is-full-bleed
-          {{if this.JSONError 'error'}}"
+          {{if this.hasJSONErrors 'error'}}"
       >
         {{!-- TODO: extraKeys=(hash Cmd-Enter=(action "save")) --}}
         <div
           data-test-json-editor
           {{hds-code-editor
+            ariaLabel="Variable JSON Editor"
+            language="json"
             value=this.JSONItems
+            isLintingEnabled=true
             onInput=this.updateCode
+            onLint=this.onLint
           }}
         />
-        {{#if this.JSONError}}
-          <p class="help is-danger">
-            {{this.JSONError}}
-          </p>
-        {{/if}}
       </div>
     {{else}}
       {{#each this.keyValues as |entry iter|}}

ui/app/components/variable-form.js

@@ -37,6 +37,8 @@ export default class VariableFormComponent extends Component {
   @tracked variableNamespace = null;
   @tracked namespaceOptions = null;
   @tracked hasConflict = false;
+  @tracked hasFormatErrors = false;
+  @tracked lintingErrors = [];
 
   /**
    * @typedef {Object} conflictingVariable
@@ -71,6 +73,10 @@ export default class VariableFormComponent extends Component {
     }
   }
 
+  get hasJSONErrors() {
+    return this.lintingErrors.length > 0 || this.hasFormatErrors;
+  }
+
   get shouldDisableSave() {
     const disallowedPath =
       this.path?.startsWith('nomad/') &&
@@ -79,7 +85,7 @@ export default class VariableFormComponent extends Component {
         (this.path?.startsWith('nomad/job-templates') &&
           trimPath([this.path]) !== 'nomad/job-templates')
       );
-    return !!this.JSONError || !this.path || disallowedPath;
+    return this.hasJSONErrors || !this.path || disallowedPath;
   }
 
   get isJobTemplateVariable() {
@@ -329,6 +335,10 @@ export default class VariableFormComponent extends Component {
     return this.args.view === 'json';
   }
 
+  @action onLint(diagnostics) {
+    this.lintingErrors = diagnostics;
+  }
+
   // Prevent duplicate onUpdate events when @view is set to its already-existing value,
   // which happens because parent's queryParams and toggle button both resolve independently.
   @action onViewChange([view]) {
@@ -381,35 +391,27 @@ export default class VariableFormComponent extends Component {
         this.appendRow();
       }
     }
-
-    // Reset any error state, since the errorring json will not persist
-    set(this, 'JSONError', null);
   }
 
-  /**
-   * @type {string}
-   */
-  @tracked JSONError = null;
+  // TODO: Review this
   /**
    *
    * @param {string} value
    */
   @action updateCode(value) {
+    // "myString" is valid JSON, but it's not a valid Variable.
+    // Ditto for an array of objects. We expect a single object to be a Variable.
     try {
-      // "myString" is valid JSON, but it's not a valid Variable.
-      // Ditto for an array of objects. We expect a single object to be a Variable.
       const hasFormatErrors =
         JSON.parse(value) instanceof Array ||
         typeof JSON.parse(value) !== 'object';
-      if (hasFormatErrors) {
-        throw new Error('A Variable must be formatted as a single JSON object');
-      }
 
-      set(this, 'JSONError', null);
-      set(this, 'JSONItems', value);
-    } catch (error) {
-      set(this, 'JSONError', error);
+      this.hasFormatErrors = hasFormatErrors;
+    } catch (e) {
+      this.hasFormatErrors = true;
     }
+
+    set(this, 'JSONItems', value);
   }
   //#endregion JSON Editing
 

ui/app/routes/administration.js

@@ -24,7 +24,7 @@ export default class AdministrationRoute extends Route.extend(
       this.can.cannot('list tokens') ||
       this.can.cannot('list namespaces')
     ) {
-      this.router.transitionTo('/jobs');
+      // this.router.transitionTo('/jobs');
     }
   }
 

ui/app/routes/administration/policies/new.js

@@ -95,7 +95,7 @@ export default class AccessControlPoliciesNewRoute extends Route {
 
   beforeModel() {
     if (this.can.cannot('write policy')) {
-      this.router.transitionTo('/administration/policies');
+      // this.router.transitionTo('/administration/policies');
     }
   }
 

ui/app/routes/variables.js

@@ -22,7 +22,7 @@ export default class VariablesRoute extends Route.extend(WithForbiddenState) {
 
   beforeModel() {
     if (this.can.cannot('list variables')) {
-      this.router.transitionTo('/jobs');
+      // this.router.transitionTo('/jobs');
     }
   }