Fix broken references when previewing SP payload

Changelog: fixed

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();
   }
 }

app/views/admin/application_settings/_usage.html.haml

@@ -28,8 +28,8 @@
 
             %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
               .gl-spinner.js-spinner.gl-display-none.gl-mr-2
-              .js-text.d-inline= _('Preview payload')
-            %pre.service-data-payload-container.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
+              .js-text.gl-display-inline= _('Preview payload')
+            %pre.service-data-payload-container.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
           - else
             = _('Service ping is disabled in your configuration file, and cannot be enabled through this form.')
             - deactivating_service_ping_path = help_page_path('development/service_ping/index.md', anchor: 'disable-service-ping-using-the-configuration-file')

spec/features/admin/admin_settings_spec.rb

@@ -528,7 +528,7 @@ RSpec.describe 'Admin updates settings' do
         expect(find_field('Allow access to members of the following group').value).to be_nil
       end
 
-      it 'loads usage ping payload on click', :js do
+      it 'loads togglable usage ping payload on click', :js do
         stub_usage_data_connections
         stub_database_flavor_check
 
@@ -544,6 +544,10 @@ RSpec.describe 'Admin updates settings' do
           expect(page).to have_selector '.js-service-ping-payload'
           expect(page).to have_button 'Hide payload'
           expect(page).to have_content expected_payload_content
+
+          click_button('Hide payload')
+
+          expect(page).not_to have_content expected_payload_content
         end
       end
     end