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

Code before:
import Component from '@glimmer/component';
import { service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { stringify } from 'core/helpers/stringify';
import errorMessage from 'vault/utils/error-message';

/**
 * @module ToolsWrap
 * ToolsWrap components are components that sys/wrapping/wrap functionality.
 *
 * @example
 * <Tools::Wrap />
 */

export default class ToolsWrap extends Component {
  @service store;
  @service flashMessages;

  @tracked buttonDisabled = false;
  @tracked token = '';
  @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) {

Review comment (refactor):
Getters are useful for computing return values. we're just returning a static string here so this can just be a variable.

On that note - If it's only used in the getter below, we probably don't need a variable and can just reference this string below. 

Another option is to initialize `this.wrapData = {}`. This would remove the need for the ternary (I'm not worried about preserving the line break) and we could just consistently returned the stringified object. Since `stringify` is a [helper](https://guides.emberjs.com/v5.8.0/components/helper-functions/), it can actually be called directly in the template if you want to go that route instead. https://github.com/hashicorp/vault/blob/4617af328b09fdcfb83a173bc130b994c542300b/ui/app/components/tools/unwrap.hbs#L22

Code after:
import Component from '@glimmer/component';
import { service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { stringify } from 'core/helpers/stringify';
import errorMessage from 'vault/utils/error-message';

/**
 * @module ToolsWrap
 * ToolsWrap components are components that sys/wrapping/wrap functionality.
 *
 * @example
 * <Tools::Wrap />
 */

export default class ToolsWrap extends Component {
  @service store;
  @service flashMessages;

  @tracked hasLintingErrors = false;
  @tracked token = '';
  @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;