app/assets/javascripts/pages/admin/application_settings/payload_previewer.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';

export default class PayloadPreviewer {
  constructor(trigger) {
    this.trigger = trigger;
    this.isVisible = false;
    this.isInserted = false;
  }

  init() {
    this.spinner = this.trigger.querySelector('.js-spinner');
    this.text = this.trigger.querySelector('.js-text');

    this.trigger.addEventListener('click', (event) => {
      event.preventDefault();

      if (this.isVisible) return this.hidePayload();

      return this.requestPayload();
    });
  }

  getContainer() {
    return document.querySelector(this.trigger.dataset.payloadSelector);
  }

  requestPayload() {
    if (this.isInserted) return this.showPayload();

    this.spinner.classList.add('gl-display-inline');

    const container = this.getContainer();

    return axios
      .get(container.dataset.endpoint, {
        responseType: 'text',
      })
      .then(({ data }) => {
        this.spinner.classList.remove('gl-display-inline');
        this.insertPayload(data);
      })
      .catch(() => {
        this.spinner.classList.remove('gl-display-inline');
        createFlash({
          message: __('Error fetching payload data.'),
        });
      });
  }

  hidePayload() {
    this.isVisible = false;
    this.getContainer().classList.add('gl-display-none');
    this.text.textContent = __('Preview payload');
  }

  showPayload() {
    this.isVisible = true;
    this.getContainer().classList.remove('gl-display-none');
    this.text.textContent = __('Hide payload');
  }

  insertPayload(data) {
    this.isInserted = true;
    this.getContainer().innerHTML = data;
    this.showPayload();
  }
}