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

Code before:
  @tracked wrapTTL = null;
  @tracked wrapData;
  @tracked errorMessage = '';
  @tracked showJson = true;
  get jsonWrapStartValue() {
    return '{\n}';
  }

  get startingValue() {
    // must pass the third param called "space" in JSON.stringify to structure object with whitespace
    // otherwise the following codemirror modifier check will pass `this._editor.getValue() !== namedArgs.content` and _setValue will be called.
    // the method _setValue moves the cursor to the beginning of the text field.
    // the effect is that the cursor jumps after the first key input.
    return JSON.stringify({ '': '' }, null, 2);
  }

  get stringifiedWrapData() {
    return this?.wrapData ? stringify([this.wrapData], {}) : this.jsonWrapStartValue;
  }

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

  @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;

Review comment (suggestion):
We should keep the type consistent for `this.wrapData`. Since we use it for a falsey check above - kinda thinking we should initialize this as `null` and reset it to that for consistency. That way if it does have a value, we know it will consistently be an object. It's a little confusing now if it should be a JSON object or a string

Code after:
  @tracked wrapTTL = null;
  @tracked wrapData = null;
  @tracked errorMessage = '';
  @tracked showJson = true;

  get startingValue() {
    // must pass the third param called "space" in JSON.stringify to structure object with whitespace
    // otherwise the following codemirror modifier check will pass `this._editor.getValue() !== namedArgs.content` and _setValue will be called.
    // the method _setValue moves the cursor to the beginning of the text field.
    // the effect is that the cursor jumps after the first key input.
    return JSON.stringify({ '': '' }, null, 2);
  }

  get stringifiedWrapData() {
    return this?.wrapData ? stringify([this.wrapData], {}) : this.startingValue;
  }

  @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;