Repository: hashicorp/vault
File: ui/lib/core/addon/components/form-field.js (JavaScript)

Code before:
    this.setAndBroadcast(`${valueToSet}`);
  }
  @action
  codemirrorUpdated(isString, value, codemirror) {
    codemirror.performLint();
    const hasErrors = codemirror.state.lint.marked.length > 0;
    const valToSet = isString ? value : JSON.parse(value);

    if (!hasErrors) {
      this.args.model.set(this.valuePath, valToSet);
      this.onChange(this.valuePath, valToSet);
    }
  }
  @action
  toggleTextShow() {
    const value = !this.showToggleTextInput;
    this.showToggleTextInput = value;
    if (!value) {
      this.setAndBroadcast(null);
    }
  }
  @action
  toggleButton() {
    this.toggleInput = !this.toggleInput;
    this.setAndBroadcast(this.toggleInput);
  }
  @action
  handleKeyUp(maybeEvent) {
    const value = typeof maybeEvent === 'object' ? maybeEvent.target.value : maybeEvent;
    if (!this.args.onKeyUp) {
      return;
    }
    this.args.onKeyUp(this.valuePath, value);
  }
  @action
  onChangeWithEvent(event) {
    const prop = event.target.type === 'checkbox' ? 'checked' : 'value';
    this.setAndBroadcast(event.target[prop]);
  }

  @action
  handleChecklist(event) {
    let updatedValue = this.args.model[this.valuePath];
    if (event.target.checked) {
      updatedValue = addToArray(updatedValue, event.target.value);
    } else {
      updatedValue = removeFromArray(updatedValue, event.target.value);
    }
    this.setAndBroadcast(updatedValue);
  }
}

Review comment (refactor):
we could combine these actions and make them reusable for both toggles. But if consolidating seems harder to follow then how you have it is just fine! Potato potato 🥔 
```js
// update HBS actions like
@onChange={{fn this.toggleButton "toggleInput"}}
@onChange={{fn this.toggleButton "showToggleTextInput"}}

@action
toggleButton(toggleItem) {
 this[toggleItem] = !this[toggleItem];
 if (toggleItem === 'showToggleTextInput' && !this.showToggleTextInput) {
  this.setAndBroadcast(null);
 }
 if (toggleItem === 'toggleInput') {
  this.setAndBroadcast(this.toggleInput);
 }
}

Code after:
    this.setAndBroadcast(`${valueToSet}`);
  }
  @action
  codemirrorUpdated(isString, value, codemirror) {
    codemirror.performLint();
    const hasErrors = codemirror.state.lint.marked.length > 0;
    const valToSet = isString ? value : JSON.parse(value);

    if (!hasErrors) {
      this.args.model.set(this.valuePath, valToSet);
      this.onChange(this.valuePath, valToSet);
    }
  }
  @action
  toggleTextShow() {
    const value = !this.showToggleTextInput;
    this.showToggleTextInput = value;
    if (!value) {
      this.setAndBroadcast(null);
    }
  }
  @action
  toggleButton() {
    this.toggleInputEnabled = !this.toggleInputEnabled;
    this.setAndBroadcast(this.toggleInputEnabled);
  }
  @action
  handleKeyUp(maybeEvent) {
    const value = typeof maybeEvent === 'object' ? maybeEvent.target.value : maybeEvent;
    if (!this.args.onKeyUp) {
      return;
    }
    this.args.onKeyUp(this.valuePath, value);
  }
  @action
  onChangeWithEvent(event) {
    const prop = event.target.type === 'checkbox' ? 'checked' : 'value';
    this.setAndBroadcast(event.target[prop]);
  }

  @action
  handleChecklist(event) {
    let updatedValue = this.args.model[this.valuePath];
    if (event.target.checked) {
      updatedValue = addToArray(updatedValue, event.target.value);
    } else {
      updatedValue = removeFromArray(updatedValue, event.target.value);
    }
    this.setAndBroadcast(updatedValue);
  }
}