Tweak to job spec upload to be above editor layer

hashicorp · Oct 17, 2022 · 3448a66 · 3448a66
1 parent cc41c8d
commit 3448a66
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 54 deletions.
diff --git a/ui/app/components/job-editor.js b/ui/app/components/job-editor.js
@@ -49,7 +49,6 @@ export default class JobEditor extends Component {
   planOutput = null;
 
   @localStorageProperty('nomadMessageJobPlan', true) showPlanMessage;
-  @localStorageProperty('nomadMessageJobEditor', true) showEditorMessage;
 
   @computed('planOutput')
   get stage() {
@@ -117,14 +116,4 @@ export default class JobEditor extends Component {
       window.scrollTo(0, 0);
     }
   }
-
-  @action uploadJobSpec(event) {
-    const reader = new FileReader();
-    reader.onload = () => {
-      this.updateCode(reader.result);
-    };
-
-    const [file] = event.target.files;
-    reader.readAsText(file);
-  }
 }
diff --git a/ui/app/controllers/jobs/run.js b/ui/app/controllers/jobs/run.js
@@ -1,9 +1,20 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class RunController extends Controller {
   @service router;
   onSubmit(id, namespace) {
     this.router.transitionTo('jobs.job', `${id}@${namespace || 'default'}`);
   }
+
+  @action uploadJobSpec(event) {
+    const reader = new FileReader();
+    reader.onload = () => {
+      this.model._newDefinition = reader.result;
+    };
+
+    const [file] = event.target.files;
+    reader.readAsText(file);
+  }
 }
diff --git a/ui/app/styles/components/codemirror.scss b/ui/app/styles/components/codemirror.scss
@@ -130,22 +130,24 @@ $dark-bright: lighten($dark, 15%);
   }
 }
 
-label.job-spec-upload {
-  display: block;
-  cursor: pointer;
-  background-color: #eee;
-  margin-top: -1.5rem;
-  margin-bottom: 1.5rem;
-
-  input {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    display: none;
-  }
-
-  span {
-    display: block;
-    padding: 0.5rem 1rem;
+header.run-job-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  margin-bottom: 2rem;
+  gap: 0 1rem;
+  & > h1 {
+    grid-column: -1 / 1;
+  }
+
+  .job-spec-upload {
+    .button {
+      cursor: pointer;
+    }
+    input {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      display: none;
+    }
   }
 }
diff --git a/ui/app/templates/components/job-editor.hbs b/ui/app/templates/components/job-editor.hbs
@@ -18,26 +18,6 @@
 {{/if}}
 
 {{#if (eq this.stage "editor")}}
-  {{#if (and this.showEditorMessage (eq this.context "new"))}}
-    <div class="notification is-info">
-      <div class="columns">
-        <div class="column">
-          <h3 class="title is-4" data-test-editor-help-title>Run a Job</h3>
-          <p data-test-editor-help-message>Paste or author HCL or JSON to submit
-            to your cluster. A plan will be requested before the job is
-            submitted.</p>
-        </div>
-        <div class="column is-centered is-minimum">
-          <button
-            class="button is-info"
-            onclick={{toggle-action "showEditorMessage" this}}
-            data-test-editor-help-dismiss
-            type="button"
-          >Okay</button>
-        </div>
-      </div>
-    </div>
-  {{/if}}
   <div class="boxed-section">
     <div class="boxed-section-head">
       Job Definition
@@ -64,11 +44,6 @@
     </div>
   </div>
 
-  <label class="job-spec-upload">
-    <input type="file" onchange={{action this.uploadJobSpec}} accept=".hcl,.json,.nomad" />
-    <span>Attach a job spec by clicking here or dragging &amp; dropping a file to the editor above</span>
-  </label>
-
   <div class="content is-associative">
     <button
       class="button is-primary {{if this.plan.isRunning 'is-loading'}}"

diff --git a/ui/app/templates/jobs/run.hbs b/ui/app/templates/jobs/run.hbs
@@ -1,5 +1,13 @@
 <Breadcrumb @crumb={{hash label="Run" args=(array "jobs.run")}} />
 {{page-title "Run a job"}}
 <section class="section">
-  <JobEditor @job={{this.model}} @context="new" @onSubmit={{action this.onSubmit}} />
+  <header class="run-job-header">
+    <h1 class="title is-3">Run a job</h1>
+    <p>Paste or author HCL or JSON to submit to your cluster. 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>
+    <label class="job-spec-upload">
+      <input type="file" onchange={{action this.uploadJobSpec}} accept=".hcl,.json,.nomad" />
+      <span class="button">Upload a job spec file</span>
+    </label>
+  </header>
+    <JobEditor @job={{this.model}} @context="new" @onSubmit={{action this.onSubmit}} />
 </section>