Unify PayloadPreviewer setup

Since we're reusing the logic we can move the setup code into a joint
interface. Then we don't need a separate EE setup file.

app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js

 import PayloadPreviewer from '~/pages/admin/application_settings/payload_previewer';
 
 export default () => {
-  new PayloadPreviewer(
-    document.querySelector('.js-usage-ping-payload-trigger'),
-    document.querySelector('.js-usage-ping-payload'),
-  ).init();
+  Array.from(document.querySelectorAll('.js-payload-preview-trigger')).forEach(trigger => {
+    new PayloadPreviewer(trigger).init();
+  });
 };

app/assets/javascripts/pages/admin/application_settings/metrics_and_profiling/index.js

-import setup from 'ee_else_ce/admin/application_settings/setup_metrics_and_profiling';
+import setup from '~/admin/application_settings/setup_metrics_and_profiling';
 
 document.addEventListener('DOMContentLoaded', setup);

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

@@ -3,9 +3,9 @@ import { __ } from '../../../locale';
 import { deprecatedCreateFlash as flash } from '../../../flash';
 
 export default class PayloadPreviewer {
-  constructor(trigger, container) {
+  constructor(trigger) {
     this.trigger = trigger;
-    this.container = container;
+    this.container = document.querySelector(trigger.dataset.payloadSelector);
     this.isVisible = false;
     this.isInserted = false;
   }

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

@@ -25,7 +25,7 @@
             - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
             %p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
 
-            %button.btn.js-usage-ping-payload-trigger{ type: 'button' }
+            %button.btn.js-payload-preview-trigger{ type: 'button', data: { payload_selector: '.js-usage-ping-payload' } }
               .spinner.js-spinner.d-none
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-usage-ping-payload.js-syntax-highlight.code.highlight.mt-2.d-none{ data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }

ee/app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js

-import PayloadPreviewer from '~/pages/admin/application_settings/payload_previewer';
-import baseSetup from '~/admin/application_settings/setup_metrics_and_profiling';
-
-export default () => {
-  baseSetup();
-
-  new PayloadPreviewer(
-    document.querySelector('.js-seat-link-payload-trigger'),
-    document.querySelector('.js-seat-link-payload'),
-  ).init();
-};

ee/app/views/admin/application_settings/_seat_link_form.html.haml

@@ -16,7 +16,7 @@
             - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: link_path }
             %p.mb-2= s_('%{link_start}Learn more%{link_end} about what information is shared with GitLab Inc.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
-            %button.btn.js-seat-link-payload-trigger{ type: 'button' }
+            %button.btn.js-payload-preview-trigger{ type: 'button', data: { payload_selector: '.js-seat-link-payload' } }
               .spinner.js-spinner.d-none
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-seat-link-payload.js-syntax-highlight.code.highlight.mt-2.d-none{ data: { endpoint: seat_link_payload_admin_application_settings_path(format: :html) } }