1 files changed, 13 insertions, 8 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
index 08f6633f424..c017cf0afa2 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -5,7 +5,6 @@ import { __ } from '../../../locale';
 export default class PayloadPreviewer {
   constructor(trigger) {
     this.trigger = trigger;
-    this.container = document.querySelector(trigger.dataset.payloadSelector);
     this.isVisible = false;
     this.isInserted = false;
   }
@@ -23,21 +22,27 @@ export default class PayloadPreviewer {
     });
   }
 
+  getContainer() {
+    return document.querySelector(this.trigger.dataset.payloadSelector);
+  }
+
   requestPayload() {
     if (this.isInserted) return this.showPayload();
 
-    this.spinner.classList.add('d-inline-flex');
+    this.spinner.classList.add('gl-display-inline-flex');
+
+    const container = this.getContainer();
 
     return axios
-      .get(this.container.dataset.endpoint, {
+      .get(container.dataset.endpoint, {
         responseType: 'text',
       })
       .then(({ data }) => {
-        this.spinner.classList.remove('d-inline-flex');
+        this.spinner.classList.remove('gl-display-inline-flex');
         this.insertPayload(data);
       })
       .catch(() => {
-        this.spinner.classList.remove('d-inline-flex');
+        this.spinner.classList.remove('gl-display-inline-flex');
         createFlash({
           message: __('Error fetching payload data.'),
         });
@@ -46,19 +51,19 @@ export default class PayloadPreviewer {
 
   hidePayload() {
     this.isVisible = false;
-    this.container.classList.add('d-none');
+    this.getContainer().classList.add('gl-display-none');
     this.text.textContent = __('Preview payload');
   }
 
   showPayload() {
     this.isVisible = true;
-    this.container.classList.remove('d-none');
+    this.getContainer().classList.remove('gl-display-none');
     this.text.textContent = __('Hide payload');
   }
 
   insertPayload(data) {
     this.isInserted = true;
-    this.container.innerHTML = data;
+    this.getContainer().innerHTML = data;
     this.showPayload();
   }
 }