Merge branch '214271-reuse-payload-previwer-start' into 'master'

Refactor PayloadPreviewer to avoid CE/EE split

See merge request gitlab-org/gitlab!40508

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

+- payload_class = 'js-usage-ping-payload'
+
 = form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
@@ -25,10 +27,10 @@
             - 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: ".#{payload_class}" } }
               .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) } }
+            %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
           - else
             = _('The usage ping is disabled, and cannot be configured through this form.')
             - deactivating_usage_ping_path = help_page_path('development/telemetry/usage_ping', anchor: 'disable-usage-ping')

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

+- payload_class = 'js-seat-link-payload'
+
 = form_for @application_setting, url: metrics_and_profiling_admin_application_settings_path(anchor: 'js-seat-link-settings'), html: { class: 'fieldset-form' } do |f|
   = form_errors(@application_setting)
 
@@ -16,10 +18,10 @@
             - 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: ".#{payload_class}" } }
               .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) } }
+            %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: seat_link_payload_admin_application_settings_path(format: :html) } }
           - else
             = _('Seat Link is disabled, and cannot be configured through this form.')
             - link_path = help_page_path('subscriptions/index', anchor: 'disable-seat-link')