open-consul/ui-v2/app/components/consul-kv-form/index.hbs

<DataForm
  @dc={{dc}}
  @nspace={{nspace}}
  @type="kv"
  @label="key"
  @autofill={{autofill}}
  @item={{item}}
  @src={{src}}
  @onchange={{action "change"}}
  @onsubmit={{action onsubmit}}
  as |api|
>
  <BlockSlot @name="content">
    <form onsubmit={{action api.submit}}>
      <fieldset disabled={{api.disabled}}>
{{#if api.isCreate}}
        <label class="type-text{{if api.data.error.Key ' has-error'}}">
            <span>Key or folder</span>
            <input autofocus="autofocus" type="text" value={{left-trim api.data.Key parent.Key}} name="additional" oninput={{action api.change}} placeholder="Key or folder" />
            <em>To create a folder, end a key with <code>/</code></em>
        </label>
{{/if}}
{{#if (or (eq (left-trim api.data.Key parent.Key) '') (not-eq (last api.data.Key) '/'))}}
        <div>
            <div class="type-toggle">
              <label>
                  <input type="checkbox" name="json" checked={{if json 'checked'}} onchange={{action api.change}} />
                  <span>Code</span>
              </label>
            </div>
            <label for="" class="type-text{{if api.data.error.Value ' has-error'}}">
                <span>Value</span>
{{#if json}}
                <CodeEditor @name="value" @value={{atob api.data.Value}} @onkeyup={{action api.change "value"}} />
{{else}}
                <textarea autofocus={{not api.isCreate}} name="value" oninput={{action api.change}}>{{atob api.data.Value}}</textarea>
{{/if}}
            </label>
        </div>
{{/if}}
    </fieldset>
    {{#if api.isCreate}}
        <button type="submit" disabled={{or api.data.isPristine api.data.isInvalid api.disabled}}>Save</button>
        <button type="reset" onclick={{action oncancel api.data}} disabled={{api.disabled}}>Cancel</button>
    {{else}}
        <button type="submit" disabled={{or api.data.isInvalid api.disabled}}>Save</button>
        <button type="reset" onclick={{action oncancel api.data}} disabled={{api.disabled}}>Cancel</button>
        <ConfirmationDialog @message="Are you sure you want to delete this key?">
          <BlockSlot @name="action" as |confirm|>
            <button data-test-delete type="button" class="type-delete" {{action confirm api.delete}} disabled={{api.disabled}}>Delete</button>
          </BlockSlot>
          <BlockSlot @name="dialog" as |execute cancel message|>
            <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
          </BlockSlot>
        </ConfirmationDialog>
    {{/if}}
      </form>
    </BlockSlot>
</DataForm>