From 7e7ca9faf1f8270d54f7731747db0d44c928492c Mon Sep 17 00:00:00 2001
From: Luke Bennett <lbennett@gitlab.com>
Date: Thu, 6 Sep 2018 12:43:14 +0000
Subject: Resolve "Remove usage ping payload from Cohorts, add to Settings"

---
 .../pages/admin/application_settings/index.js      |  5 ++
 .../application_settings/usage_ping_payload.js     | 62 ++++++++++++++++++++++
 .../pages/instance_statistics/cohorts/index.js     |  3 --
 .../instance_statistics/cohorts/usage_ping.js      | 13 -----
 4 files changed, 67 insertions(+), 16 deletions(-)
 create mode 100644 app/assets/javascripts/pages/admin/application_settings/usage_ping_payload.js
 delete mode 100644 app/assets/javascripts/pages/instance_statistics/cohorts/index.js
 delete mode 100644 app/assets/javascripts/pages/instance_statistics/cohorts/usage_ping.js

(limited to 'app/assets/javascripts/pages')

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.')));
-}
-- 
cgit v1.2.1