[ui] HCL-in-UI: Re-arrange buttons, add save-as-file (#17752)

* Move buttons over as expected

* Let a user download file locally

* test mock fns for jobeditor

* Changelog

.changelog/17752.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds a Download as .nomad.hcl button to jobspec editing in the UI
+```

ui/app/components/job-editor.js

@@ -21,6 +21,7 @@ import { tracked } from '@glimmer/tracking';
 export default class JobEditor extends Component {
   @service config;
   @service store;
+  @service notifications;
 
   @tracked error = null;
   @tracked planOutput = null;
@@ -199,6 +200,42 @@ export default class JobEditor extends Component {
     reader.readAsText(file);
   }
 
+  /**
+   * Download the job's definition or specification as .nomad.hcl file locally
+   */
+  @action
+  async handleSaveAsFile() {
+    try {
+      const blob = new Blob([this.args.job._newDefinition], {
+        type: 'text/plain',
+      });
+      const url = window.URL.createObjectURL(blob);
+      const downloadAnchor = document.createElement('a');
+
+      downloadAnchor.href = url;
+      downloadAnchor.target = '_blank';
+      downloadAnchor.rel = 'noopener noreferrer';
+      downloadAnchor.download = 'jobspec.nomad.hcl';
+
+      downloadAnchor.click();
+      downloadAnchor.remove();
+
+      window.URL.revokeObjectURL(url);
+      this.notifications.add({
+        title: 'jobspec.nomad.hcl has been downloaded',
+        color: 'success',
+        icon: 'download',
+      });
+    } catch (err) {
+      this.notifications.add({
+        title: 'Error downloading file',
+        message: err.message,
+        color: 'critical',
+        sticky: true,
+      });
+    }
+  }
+
   /**
    * Get the definition or specification based on the view type.
    *
@@ -253,6 +290,7 @@ export default class JobEditor extends Component {
       onPlan: this.plan,
       onReset: this.reset,
       onSaveAs: this.args.handleSaveAsTemplate,
+      onSaveFile: this.handleSaveAsFile,
       onSubmit: this.submit,
       onSelect: this.args.onSelect,
       onUpdate: this.updateCode,

ui/app/styles/components/codemirror.scss

@@ -140,6 +140,7 @@ header.run-job-header {
   grid-template-columns: 1fr auto;
   margin-bottom: 2rem;
   gap: 0 1rem;
+  align-items: end;
   & > h1 {
     grid-column: -1 / 1;
   }
@@ -166,6 +167,10 @@ header.run-job-header {
     bottom: 0;
     background: white;
     padding: 0.5rem 0;
+
+    &.pull-left {
+      justify-content: flex-start;
+    }
   }
 }
 

ui/app/templates/components/job-editor.hbs

@@ -15,6 +15,28 @@
         <p>
           Paste or author HCL or JSON to submit to your cluster, or select from a list of templates. A plan will be requested before the job is submitted. You can also attach a job spec by uploading a job file or dragging &amp; dropping a file to the editor.
         </p>
+
+        {{#if (can "write variable" path="*" namespace="*")}}
+          <Hds::ButtonSet>
+            <label
+              class="job-spec-upload hds-button hds-button--color-secondary hds-button--size-medium"
+            >
+              <div class="hds-button__text">Upload file</div>
+              <input
+                type="file"
+                onchange={{action this.uploadJobSpec}}
+                accept=".hcl,.json,.nomad"
+              />
+            </label>
+            <Hds::Button
+              @text="Choose from template"
+              @color="secondary"
+              @route="jobs.run.templates"
+              data-test-choose-template
+            />
+          </Hds::ButtonSet>
+        {{/if}}
+
       </header>
     {{/if}}
     {{did-update this.setDefinitionOnModel this.definition}}

ui/app/templates/components/job-editor/edit.hbs

@@ -83,7 +83,7 @@
     </div>
   {{/if}}
 </div>
-<div class="is-associative buttonset sticky">
+<Hds::ButtonSet class="is-associative buttonset sticky pull-left">
   <Hds::Button
     {{on "click" (perform @fns.onPlan)}}
     disabled={{or @fns.onPlan.isRunning (not @data.job._newDefinition)}}
@@ -91,34 +91,18 @@
     @text="Plan"
   />
   {{#if @data.job.isNew}}
-    <Hds::ButtonSet>
-      <label
-        class="job-spec-upload hds-button hds-button--color-secondary hds-button--size-medium"
-      >
-        <div class="hds-button__text">Upload file</div>
-        <input
-          type="file"
-          onchange={{action @fns.onUpload}}
-          accept=".hcl,.json,.nomad"
-        />
-      </label>
-      {{#if (can "write variable" path="*" namespace="*")}}
-        <Hds::Button
-          @icon="file-plus"
-          @text="Save as template"
-          @color="tertiary"
-          @route="jobs.run.templates.new"
-          {{on "click" @fns.onSaveAs}}
-          data-test-save-as-template
-        />
-        <Hds::Button
-          @icon="file-text"
-          @text="Choose from a template"
-          @color="tertiary"
-          @route="jobs.run.templates"
-          data-test-choose-template
-        />
-      {{/if}}
-    </Hds::ButtonSet>
+    <Hds::Button
+      @text="Save as template"
+      @color="secondary"
+      @route="jobs.run.templates.new"
+      {{on "click" @fns.onSaveAs}}
+      data-test-save-as-template
+    />
   {{/if}}
-</div>
+  <Hds::Button
+    @text="Save as .nomad.hcl"
+    @color="secondary"
+    {{on "click" @fns.onSaveFile}}
+
+  />
+</Hds::ButtonSet>

ui/tests/integration/components/job-editor-test.js

@@ -85,6 +85,7 @@ module('Integration | Component | job-editor', function (hooks) {
       @job={{job}}
       @context={{context}}
       @onSubmit={{onSubmit}}
+      @handleSaveAsTemplate={{handleSaveAsTemplate}}
     />
   `;
 
@@ -92,6 +93,7 @@ module('Integration | Component | job-editor', function (hooks) {
     component.setProperties({
       job,
       onSubmit: sinon.spy(),
+      handleSaveAsTemplate: sinon.spy(),
       context: 'new',
     });
     await component.render(commonTemplate);