open-vault/ui/app/components/policy-form.hbs

<form {{on "submit" (perform this.save)}} data-test-policy-form>
  <div class="box is-bottomless is-fullwidth is-marginless">
    <MessageError @errorMessage={{this.errorBanner}} />
    <NamespaceReminder @mode={{if @model.isNew "create" "edit"}} @noun="policy" />
    {{#if @model.isNew}}
      <div class="field">
        <label for="policy-name" class="is-label">Name</label>
        <div class="control">
          <Input
            @type="text"
            @value={{lowercase @model.name}}
            id="policy-name"
            class="input"
            {{on "input" this.setModelName}}
            data-test-policy-input="name"
          />
        </div>
      </div>
    {{/if}}
    <div class="field">
      {{#if @model.isNew}}
        <Toolbar>
          <label class="is-label">Policy</label>
          <ToolbarActions>
            <div class="toolbar-separator"></div>
            <div class="control is-flex">
              <Input
                id="fileUploadToggle"
                @type="checkbox"
                name="fileUploadToggle"
                class="switch is-rounded is-success is-small"
                @checked={{this.showFileUpload}}
                {{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
                data-test-policy-edit-toggle
              />
              <label for="fileUploadToggle">Upload file</label>
            </div>
          </ToolbarActions>
        </Toolbar>
        {{#if this.showFileUpload}}
          <TextFile @inputOnly={{true}} @file={{this.file}} @onChange={{this.setPolicyFromFile}} />
        {{else}}
          <JsonEditor
            @title="Policy"
            @helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
            @showToolbar={{false}}
            @value={{@model.policy}}
            @valueUpdated={{action (mut @model.policy)}}
            @mode="ruby"
            @extraKeys={{hash Shift-Enter=(perform this.save)}}
            data-test-policy-editor
          />
        {{/if}}
      {{else}}
        {{! EDITING - no file upload toggle}}
        <JsonEditor
          @title="Policy"
          @helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
          @value={{@model.policy}}
          @valueUpdated={{action (mut @model.policy)}}
          @mode="ruby"
          @extraKeys={{hash Shift-Enter=(perform this.save)}}
          data-test-policy-editor
        />
      {{/if}}
    </div>
    {{#each @model.additionalAttrs as |attr|}}
      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
    {{/each}}
  </div>
  <div class="has-bottom-margin-m">
    <p>
      More information about
      {{uppercase @model.policyType}}
      policies can be found
      <DocLink
        @host="https://developer.hashicorp.com"
        @path={{if
          (eq @model.policyType "acl")
          "/vault/docs/concepts/policies#capabilities"
          "/vault/tutorials/policies/sentinel#role-governing-policies-rgps"
        }}
      >
        here.
      </DocLink>
    </p>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button
        type="submit"
        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
        disabled={{this.save.isRunning}}
        data-test-policy-save
      >
        {{if @model.isNew "Create policy" "Save"}}
      </button>
      <button
        type="button"
        class="button has-left-margin-s"
        disabled={{this.save.isRunning}}
        {{on "click" this.cancel}}
        data-test-policy-cancel
      >
        Cancel
      </button>
    </div>
  </div>
</form>