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

<div class="boxed-section">
  <div class="boxed-section-head">
    Job Definition
    {{#if @data.cancelable}}
    <div class="pull-right" style="display: flex">
      <Tooltip
        @condition={{unless @data.hasSpecification true false}}
        @isFullText={{true}}
        @text="A jobspec file was not submitted when this job was run. You can still view and edit the expanded JSON format."
      >
        <div
          class="job-definition-select
            {{unless @data.hasSpecification ' disabled'}}"
          data-test-select={{@data.view}}
        >
          <button
            class="button is-small is-borderless
              {{if (eq @data.view 'job-spec') 'is-active'}}"
            type="button"
            {{on "click" (fn @fns.onSelect "job-spec")}}
          >
            Job Spec
          </button>
          <button
            class="button is-small is-borderless
              {{if (eq @data.view 'full-definition') 'is-active'}}"
            type="button"
            {{on "click" (fn @fns.onSelect "full-definition")}}
            data-test-select-full
          >
            Full Definition
          </button>
        </div>
      </Tooltip>
        <button
          class="button is-light is-compact pull-right"
          onclick={{@fns.onCancel}}
          type="button"
          data-test-cancel-editing
        >
          Cancel
        </button>
    </div>
    {{/if}}
  </div>
  <div class="boxed-section-body is-full-bleed">
    <div
      data-test-editor
      {{code-mirror
        screenReaderLabel="Job definition"
        content=@data.job._newDefinition
        theme="hashi"
        onUpdate=@fns.onUpdate
        mode=(if (eq @data.format "json") "javascript" "ruby")
      }}
    ></div>
  </div>
  {{#if (eq @data.view "job-spec")}}
    <div class="boxed-section" style="margin-top: 10px">
      <div class="boxed-section-head">
        Edit HCL Variable Values
      </div>
      <div class="boxed-section-body is-full-bleed">
        <div
          class="json-viewer is-variable-editor"
          data-test-variable-editor
          {{code-mirror
            autofocus=false
            screenReaderLabel="HLC Variables for Job Spec"
            content=@data.job._newDefinitionVariables
            theme="hashi"
            onUpdate=@fns.onUpdate
            type="hclVariables"
            mode="ruby"
          }}
        ></div>
      </div>
    </div>
  {{/if}}
</div>
<div class="is-associative buttonset sticky">
  <Hds::Button
    {{on "click" (perform @fns.onPlan)}}
    disabled={{or @fns.onPlan.isRunning (not @data.job._newDefinition)}}
    data-test-plan
    @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>
  {{/if}}
</div>