1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/milestones/milestone.js b/app/assets/javascripts/milestones/milestone.js
new file mode 100644
index 00000000000..05102f73f92
--- /dev/null
+++ b/app/assets/javascripts/milestones/milestone.js
@@ -0,0 +1,49 @@
+import createFlash from '~/flash';
+import { sanitize } from '~/lib/dompurify';
+import axios from '~/lib/utils/axios_utils';
+import { historyPushState } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
+import { GlTabsBehavior, TAB_SHOWN_EVENT } from '~/tabs';
+
+export default class Milestone {
+  constructor() {
+    this.tabsEl = document.querySelector('.js-milestone-tabs');
+    this.glTabs = new GlTabsBehavior(this.tabsEl);
+    this.loadedTabs = new WeakSet();
+
+    this.bindTabsSwitching();
+    this.loadInitialTab();
+  }
+
+  bindTabsSwitching() {
+    this.tabsEl.addEventListener(TAB_SHOWN_EVENT, (event) => {
+      const tab = event.target;
+      const { activeTabPanel } = event.detail;
+      historyPushState(tab.getAttribute('href'));
+      this.loadTab(tab, activeTabPanel);
+    });
+  }
+
+  loadInitialTab() {
+    const tab = this.tabsEl.querySelector(`a[href="${window.location.hash}"]`);
+    this.glTabs.activateTab(tab || this.glTabs.activeTab);
+  }
+  loadTab(tab, tabPanel) {
+    const { endpoint } = tab.dataset;
+
+    if (endpoint && !this.loadedTabs.has(tab)) {
+      axios
+        .get(endpoint)
+        .then(({ data }) => {
+          // eslint-disable-next-line no-param-reassign
+          tabPanel.innerHTML = sanitize(data.html);
+          this.loadedTabs.add(tab);
+        })
+        .catch(() =>
+          createFlash({
+            message: __('Error loading milestone tab'),
+          }),
+        );
+    }
+  }
+}