Fetch job spec from URL

ui/app/components/job-editor.js

@@ -41,6 +41,22 @@ export default class JobEditor extends Component {
     }
   }
 
+  _newSpecURL = '';
+  /**
+   * Performs a fetch to the passed URL and returns the content back as raw text
+   * @param {string} url
+   */
+  @action async fetchFromURL(event) {
+    event.preventDefault();
+    if (this._newSpecURL) {
+      const spec = await fetch(this._newSpecURL).then((response) =>
+        response.text()
+      );
+      this.updateCode(spec);
+      this._newSpecURL = '';
+    }
+  }
+
   _context = null;
   parseError = null;
   planError = null;

ui/app/styles/components/codemirror.scss

@@ -129,3 +129,18 @@ $dark-bright: lighten($dark, 15%);
     background-color: $dark-2;
   }
 }
+
+.job-from-url {
+  display: block;
+  margin-bottom: 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.25rem 1rem;
+  & > label {
+    grid-column: -1 / 1;
+  }
+  input {
+    padding: 0.25rem;
+    width: 100%;
+  }
+}

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

@@ -63,6 +63,13 @@
       />
     </div>
   </div>
+
+  <form class="job-from-url" {{on "submit" this.fetchFromURL}}>
+    <label for="url-input">Or, fetch a valid Nomad job spec from a URL</label>
+    <Input id="url-input" @type="url" placeholder="https://example.com/job.nomad" @value={{this._newSpecURL}}
+    />
+    <button type="submit">Fetch</button>
+  </form>
   <div class="content is-associative">
     <button
       class="button is-primary {{if this.plan.isRunning 'is-loading'}}"