Repository: hashicorp/vault
File: ui/app/components/tools/wrap.js (JavaScript)

Code before:
  }

  @action handleToggle() {
    this.showJson = !this.showJson;
    this.buttonDisabled = false;
  }

  @action
  reset(clearData = true) {
    this.token = '';
    this.errorMessage = '';
    this.wrapTTL = null;
    if (clearData) this.wrapData = null;
  }

  @action
  updateTtl(evt) {
    if (!evt) return;
    this.wrapTTL = evt.enabled ? `${evt.seconds}s` : '30m';
  }

  @action
  codemirrorUpdated(val, codemirror) {
    codemirror.performLint();
    const hasErrors = codemirror?.state.lint.marked?.length > 0;
    this.buttonDisabled = hasErrors;
    if (!hasErrors) this.wrapData = JSON.parse(val);
  }

  @action
  async handleSubmit(evt) {
    evt.preventDefault();
    const data = this.wrapData;
    const wrapTTL = this.wrapTTL || null;

    try {
      const response = await this.store.adapterFor('tools').toolAction('wrap', data, { wrapTTL });
      this.token = response.wrap_info.token;
      this.flashMessages.success('Wrap was successful.');
    } catch (error) {
      this.errorMessage = errorMessage(error);
    }
  }
}


Review comment (suggestion):
Mostly an FYI - disabling submit buttons when there is a form error is an outdated pattern and against accessibility. The updated pattern is to allow clicking, but in the submit/save function catch the error and display an alert below the form buttons. 
<img width="378" alt="Screenshot 2025-02-24 at 10 27 59 AM" src="https://github.com/user-attachments/assets/8199bbaf-ac25-4579-8935-f508d5a91386" />

This is a bit of a weird case since we're not "saving" something, but instead generating a wrap token. While I think it'd be a nice improvement to 1) remove the button disabling and 2) add the linting warning we show in other implementations of the JsonEditor - that might blow up the scope of this work too much. What do you think? I don't want to delay the TOTP work much more. We could always make a ticket for this improvement and tackle after the TOTP epic is complete.

<img width="480" alt="Screenshot 2025-02-24 at 10 33 14 AM" src="https://github.com/user-attachments/assets/d5be68b7-9852-4b43-8319-2f554035c91f" />


https://github.com/hashicorp/vault/blob/f634808ed4b881af97df02b19eb15dd12c5051d2/ui/lib/kv/addon/components/kv-patch/json-form.hbs#L8-L14

Code after:
  }

  @action
  handleToggle() {
    this.showJson = !this.showJson;
    this.hasLintingErrors = false;
  }

  @action
  reset(clearData = true) {
    this.token = '';
    this.errorMessage = '';
    this.wrapTTL = null;
    this.hasLintingErrors = false;
    if (clearData) this.wrapData = null;
  }

  @action
  updateTtl(evt) {
    if (!evt) return;
    this.wrapTTL = evt.enabled ? `${evt.seconds}s` : '30m';
  }

  @action
  codemirrorUpdated(val, codemirror) {
    codemirror.performLint();
    this.hasLintingErrors = codemirror?.state.lint.marked?.length > 0;
    if (!this.hasLintingErrors) this.wrapData = JSON.parse(val);
  }

  @action
  async handleSubmit(evt) {
    evt.preventDefault();

    const data = this.wrapData;
    const wrapTTL = this.wrapTTL || null;

    try {
      const response = await this.store.adapterFor('tools').toolAction('wrap', data, { wrapTTL });
      this.token = response.wrap_info.token;
      this.flashMessages.success('Wrap was successful.');
    } catch (error) {
      this.errorMessage = errorMessage(error);
    }
  }
}