Resolve "Remove usage ping payload from Cohorts, add to Settings"

4 files changed, 67 insertions, 16 deletions

diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js
index 47bd70537f1..069f8ce55d0 100644
--- a/app/assets/javascripts/pages/admin/application_settings/index.js
+++ b/app/assets/javascripts/pages/admin/application_settings/index.js
@@ -1,8 +1,13 @@
 import initSettingsPanels from '~/settings_panels';
 import projectSelect from '~/project_select';
+import UsagePingPayload from './usage_ping_payload';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
   initSettingsPanels();
   projectSelect();
+  new UsagePingPayload(
+    document.querySelector('.js-usage-ping-payload-trigger'),
+    document.querySelector('.js-usage-ping-payload'),
+  ).init();
 });
diff --git a/app/assets/javascripts/pages/admin/application_settings/usage_ping_payload.js b/app/assets/javascripts/pages/admin/application_settings/usage_ping_payload.js
new file mode 100644
index 00000000000..9a1bc46bf4a
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/usage_ping_payload.js
@@ -0,0 +1,62 @@
+import axios from '../../../lib/utils/axios_utils';
+import { __ } from '../../../locale';
+import flash from '../../../flash';
+
+export default class UsagePingPayload {
+  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');
+
+    return axios
+      .get(this.container.dataset.endpoint, {
+        responseType: 'text',
+      })
+      .then(({ data }) => {
+        this.spinner.classList.remove('d-inline');
+        this.insertPayload(data);
+      })
+      .catch(() => {
+        this.spinner.classList.remove('d-inline');
+        flash(__('Error fetching usage ping 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();
+  }
+}
diff --git a/app/assets/javascripts/pages/instance_statistics/cohorts/index.js b/app/assets/javascripts/pages/instance_statistics/cohorts/index.js
deleted file mode 100644
index 2d5020dbef4..00000000000
--- a/app/assets/javascripts/pages/instance_statistics/cohorts/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import initUsagePing from './usage_ping';
-
-document.addEventListener('DOMContentLoaded', initUsagePing);
diff --git a/app/assets/javascripts/pages/instance_statistics/cohorts/usage_ping.js b/app/assets/javascripts/pages/instance_statistics/cohorts/usage_ping.js
deleted file mode 100644
index 914a9661c27..00000000000
--- a/app/assets/javascripts/pages/instance_statistics/cohorts/usage_ping.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import axios from '../../../lib/utils/axios_utils';
-import { __ } from '../../../locale';
-import flash from '../../../flash';
-
-export default function UsagePing() {
-  const el = document.querySelector('.usage-data');
-
-  axios.get(el.dataset.endpoint, {
-    responseType: 'text',
-  }).then(({ data }) => {
-    el.innerHTML = data;
-  }).catch(() => flash(__('Error fetching usage ping data.')));
-}