open-vault/ui/app/components/diff-version-selector.js

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

/* eslint-disable no-undef */
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { htmlSafe } from '@ember/template';

/**
 * @module DiffVersionSelector
 * DiffVersionSelector component includes a toolbar and diff view between KV 2 versions. It uses the library jsondiffpatch.
 *
 * @example
 * ```js
 * <DiffVersionSelector @model={model}/>
 * ```
 * @param {object} model - model that comes from secret-v2-version
 */

export default class DiffVersionSelector extends Component {
  @tracked leftSideVersionDataSelected = null;
  @tracked leftSideVersionSelected = null;
  @tracked rightSideVersionDataSelected = null;
  @tracked rightSideVersionSelected = null;
  @tracked statesMatch = false;
  @tracked visualDiff = null;
  @service store;

  adapter = this.store.adapterFor('secret-v2-version');

  constructor() {
    super(...arguments);
    this.createVisualDiff();
  }

  get leftSideDataInit() {
    const string = `["${this.args.model.engineId}", "${this.args.model.id}", "${this.args.model.currentVersion}"]`;
    return this.adapter
      .querySecretDataByVersion(string)
      .then((response) => response.data)
      .catch(() => null);
  }
  get rightSideDataInit() {
    const string = `["${this.args.model.engineId}", "${this.args.model.id}", "${this.rightSideVersionInit}"]`;
    return this.adapter
      .querySecretDataByVersion(string)
      .then((response) => response.data)
      .catch(() => null);
  }
  get rightSideVersionInit() {
    // initial value of right side version is one less than the current version
    return this.args.model.currentVersion === 1 ? 0 : this.args.model.currentVersion - 1;
  }

  async createVisualDiff() {
    const diffpatcher = jsondiffpatch.create({});
    const leftSideVersionData = this.leftSideVersionDataSelected || (await this.leftSideDataInit);
    const rightSideVersionData = this.rightSideVersionDataSelected || (await this.rightSideDataInit);
    const delta = diffpatcher.diff(rightSideVersionData, leftSideVersionData);
    if (delta === undefined) {
      this.statesMatch = true;
      // params: value, replacer (all properties included), space (white space and indentation, line break, etc.)
      this.visualDiff = htmlSafe(JSON.stringify(leftSideVersionData, undefined, 2));
    } else {
      this.statesMatch = false;
      this.visualDiff = htmlSafe(jsondiffpatch.formatters.html.format(delta, rightSideVersionData));
    }
  }

  @action
  async selectVersion(selectedVersion, actions, side) {
    const string = `["${this.args.model.engineId}", "${this.args.model.id}", "${selectedVersion}"]`;
    const secretData = await this.adapter.querySecretDataByVersion(string);
    if (side === 'left') {
      this.leftSideVersionDataSelected = secretData.data;
      this.leftSideVersionSelected = selectedVersion;
    }
    if (side === 'right') {
      this.rightSideVersionDataSelected = secretData.data;
      this.rightSideVersionSelected = selectedVersion;
    }
    await this.createVisualDiff();
    // close dropdown menu.
    actions.close();
  }
}