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-shadowless 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">
      <Toolbar aria-label="toolbar for managing {{or @model.name 'new'}} policy">
        <label class="has-text-weight-bold has-right-margin-4">Policy</label>
        {{#if @renderPolicyExampleModal}}
          {{! only true in policy create and edit routes }}
          <ToolbarFilters aria-label="help tools for managing {{or @model.name 'new'}} policy">
            <Hds::Button
              @text="How to write a policy"
              @icon="bulb"
              @size="small"
              @color="tertiary"
              {{on "click" (fn (mut this.showTemplateModal))}}
              data-test-policy-example-button
            />
          </ToolbarFilters>
        {{/if}}
        <ToolbarActions aria-label="actions for managing {{or @model.name 'new'}} policy">
          <div class="toolbar-separator"></div>
          {{#if @model.isNew}}
            <div class="control is-flex">
              <Input
                id="fileUploadToggle"
                @type="checkbox"
                name="fileUploadToggle"
                class="toggle is-success is-small"
                @checked={{this.showFileUpload}}
                {{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
                data-test-policy-edit-toggle
              />
              <label for="fileUploadToggle" class="has-text-weight-bold is-size-8">Upload file</label>
            </div>
          {{else}}
            {{! EDITING - no file upload toggle}}
            <Hds::Copy::Button
              @text="Copy"
              @isIconOnly={{true}}
              @textToCopy={{@model.policy}}
              @onError={{(fn
                (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")
              )}}
              class="transparent"
              data-test-copy-button
            />
          {{/if}}
        </ToolbarActions>
      </Toolbar>
      {{#if this.showFileUpload}}
        <div class="has-top-margin-xs">
          <TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
        </div>
      {{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}}
      {{#unless this.showFileUpload}}
        <span class="is-size-9 has-text-grey has-bottom-margin-l has-top-margin-xs" data-test-alt-tab-message>
          You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field.
        </span>
      {{/unless}}
    </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">
    <Hds::ButtonSet>
      <Hds::Button
        @text={{if @model.isNew "Create policy" "Save"}}
        @icon={{if this.save.isRunning "loading"}}
        type="submit"
        disabled={{this.save.isRunning}}
        data-test-policy-save
      />
      <Hds::Button
        @text="Cancel"
        @color="secondary"
        disabled={{this.save.isRunning}}
        {{on "click" this.cancel}}
        data-test-policy-cancel
      />
    </Hds::ButtonSet>
  </div>
</form>

{{! SAMPLE POLICY MODAL. Only renders in policy create and edit routes }}
{{#if this.showTemplateModal}}
  <Hds::Modal
    id="policy-example-modal"
    @size="large"
    @onClose={{fn (mut this.showTemplateModal) false}}
    data-test-policy-example-modal
    as |M|
  >
    <M.Header data-test-modal-title>
      Example
      {{uppercase @model.policyType}}
      Policy
    </M.Header>
    <M.Body>
      <PolicyExample @policyType={{@model.policyType}} @container="#policy-example-modal" />
    </M.Body>
    <M.Footer as |F|>
      <Hds::Button @text="Close" {{on "click" F.close}} data-test-modal-close-button />
    </M.Footer>
  </Hds::Modal>
{{/if}}