diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-20 21:38:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-20 21:38:24 +0300 |
commit | 983a0bba5d2a042c4a3bbb22432ec192c7501d82 (patch) | |
tree | b153cd387c14ba23bd5a07514c7c01fddf6a78a0 /app/assets/javascripts/pages/admin/application_settings/payload_previewer.js | |
parent | a2bddee2cdb38673df0e004d5b32d9f77797de64 (diff) |
Add latest changes from gitlab-org/gitlab@12-10-stable-ee
Diffstat (limited to 'app/assets/javascripts/pages/admin/application_settings/payload_previewer.js')
-rw-r--r-- | app/assets/javascripts/pages/admin/application_settings/payload_previewer.js | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js new file mode 100644 index 00000000000..413045d960e --- /dev/null +++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js @@ -0,0 +1,62 @@ +import axios from '../../../lib/utils/axios_utils'; +import { __ } from '../../../locale'; +import flash from '../../../flash'; + +export default class PayloadPreviewer { + constructor(trigger, container) { + this.trigger = trigger; + this.container = container; + 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(); + }); + } + + requestPayload() { + if (this.isInserted) return this.showPayload(); + + this.spinner.classList.add('d-inline-flex'); + + return axios + .get(this.container.dataset.endpoint, { + responseType: 'text', + }) + .then(({ data }) => { + this.spinner.classList.remove('d-inline-flex'); + this.insertPayload(data); + }) + .catch(() => { + this.spinner.classList.remove('d-inline-flex'); + flash(__('Error fetching payload data.')); + }); + } + + hidePayload() { + this.isVisible = false; + this.container.classList.add('d-none'); + this.text.textContent = __('Preview payload'); + } + + showPayload() { + this.isVisible = true; + this.container.classList.remove('d-none'); + this.text.textContent = __('Hide payload'); + } + + insertPayload(data) { + this.isInserted = true; + this.container.innerHTML = data; + this.showPayload(); + } +} |