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

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<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="has-text-weight-bold">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 @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
        {{else}}
          <JsonEditor
            @title="Policy"
            @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"
          @value={{@model.policy}}
          @valueUpdated={{action (mut @model.policy)}}
          @mode="ruby"
          @extraKeys={{hash Shift-Enter=(perform this.save)}}
          data-test-policy-editor
        />
      {{/if}}
      <div class="has-top-margin-xs">
        <span class="is-size-9 has-text-grey has-bottom-margin-l">
          You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field.
        </span>
        {{! Only renders button (and modal) if not already in the "create policy" modal }}
        {{#if @renderPolicyExampleModal}}
          <span class="is-size-9 has-text-grey has-bottom-margin-l">
            See
            <button
              type="button"
              class="text-button has-text-info"
              {{on "click" (fn (mut this.showTemplateModal))}}
              data-test-policy-example-button
            >
              example template
            </button>.
          </span>
          {{! Only renders more information if already in the "create policy" modal }}
        {{else}}
          <p class="has-top-margin-l">
            More information about
            {{uppercase @model.policyType}}
            policies can be found
            <DocLink
              @path={{if
                (eq @model.policyType "acl")
                "/vault/docs/concepts/policies#capabilities"
                "/vault/tutorials/policies/sentinel#role-governing-policies-rgps"
              }}
            >
              here.
            </DocLink>
          </p>
        {{/if}}
      </div>
    </div>
    {{#each @model.additionalAttrs as |attr|}}
      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
    {{/each}}
  </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>
{{! SAMPLE POLICY MODAL. Only renders modal if not already in create policy modal }}
{{#if @renderPolicyExampleModal}}
  <Modal
    @title="Example {{uppercase @model.policyType}} Policy"
    @onClose={{fn (mut this.showTemplateModal) false}}
    @isActive={{this.showTemplateModal}}
    @showCloseButton={{true}}
    data-test-policy-example-modal
  >
    <section class="modal-card-body">
      {{! code-mirror modifier does not render value initially until focus event fires }}
      {{! wait until the Modal is rendered and then show the PolicyExample (contains JsonEditor) }}
      {{#if this.showTemplateModal}}
        <PolicyExample @policyType={{@model.policyType}} />
      {{/if}}
    </section>
    <div class="modal-card-head has-border-top-light">
      <button type="button" class="button" {{on "click" (fn (mut this.showTemplateModal) false)}} data-test-close-modal>
        Close
      </button>
    </div>
  </Modal>
{{/if}}