Repository: hashicorp/vault
File: ui/app/components/alphabet-edit.js (JavaScript)

Code before:
 * @param {object} model - This is the transform alphabet model.
 * @param {string} mode - Is either show, create or edit.
 */

export default class AlphabetEditComponent extends Component {
  @service flashMessages;
  @service router;

  @tracked errorMessage = '';

  get breadcrumbs() {
    // ideally this is created on the controller in the parent route but this is a generic route and adding breadcrumbs to the controller requires a larger refactor.
    const { backend } = this.args.model;
    return [
      {
        label: backend,
        route: 'vault.cluster.secrets.backend.list-root',
        model: backend,
        query: { tab: 'alphabet' },
      },
      { label: 'Alphabet' },
    ];
  }

  transition(route = 'show') {
    this.displayErrors = '';
    const { backend, id } = this.args.model;
    if (route === 'list') {
      this.router.transitionTo('vault.cluster.secrets.backend.list-root', backend, {
        queryParams: { tab: 'alphabet' },
      });
      return;
    } else {
      this.router.transitionTo('vault.cluster.secrets.backend.show', `alphabet/${id}`);
    }
  }

  @action async createOrUpdate(event) {
    event.preventDefault();

    if (!this.args.model.hasDirtyAttributes) {
      this.flashMessages.info('No changes detected.');
      this.transition();
      return;
    }

    try {
      await this.args.model.save();
      this.flashMessages.success('Alphabet saved.');
      this.transition();
    } catch (e) {

Review comment (suggestion):
@Monkeychip shouldn't this be `this.errorMessage`? If yes, I can commit the change, just wanted to be sure this wasn't intentional. 

Code after:
 * @param {object} model - This is the transform alphabet model.
 * @param {string} mode - Is either show, create or edit.
 */

export default class AlphabetEditComponent extends Component {
  @service flashMessages;
  @service router;

  @tracked errorMessage = '';

  get breadcrumbs() {
    // ideally this is created on the controller in the parent route but this is a generic route and adding breadcrumbs to the controller requires a larger refactor.
    const { backend } = this.args.model;
    return [
      {
        label: backend,
        route: 'vault.cluster.secrets.backend.list-root',
        model: backend,
        query: { tab: 'alphabet' },
      },
      { label: 'Alphabet' },
    ];
  }

  transition(route = 'show') {
    this.errorMessage = '';
    const { backend, id } = this.args.model;
    if (route === 'list') {
      this.router.transitionTo('vault.cluster.secrets.backend.list-root', backend, {
        queryParams: { tab: 'alphabet' },
      });
      return;
    } else {
      this.router.transitionTo('vault.cluster.secrets.backend.show', `alphabet/${id}`);
    }
  }

  @action async createOrUpdate(event) {
    event.preventDefault();

    if (!this.args.model.hasDirtyAttributes) {
      this.flashMessages.info('No changes detected.');
      this.transition();
      return;
    }

    try {
      await this.args.model.save();
      this.flashMessages.success('Alphabet saved.');
      this.transition();
    } catch (e) {