Add Fork/Cancel confirmation to "Replace"/"Delete" buttons30637-replace-delete-buttons-get-fork-cancel-confirmation

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/30637

1 files changed, 53 insertions, 5 deletions

diff --git a/app/assets/javascripts/blob/blob_fork_suggestion.js b/app/assets/javascripts/blob/blob_fork_suggestion.js
index aa9a4e1c99a..3baf81905fe 100644
--- a/app/assets/javascripts/blob/blob_fork_suggestion.js
+++ b/app/assets/javascripts/blob/blob_fork_suggestion.js
@@ -1,15 +1,63 @@
-function BlobForkSuggestion(openButton, cancelButton, suggestionSection) {
-  if (openButton) {
-    openButton.addEventListener('click', () => {
+const defaults = {
+  // Buttons that will show the `suggestionSections`
+  // has `data-fork-path`, and `data-action`
+  openButtons: [],
+  // Update the href(from `openButton` -> `data-fork-path`)
+  // whenever a `openButton` is clicked
+  forkButtons: [],
+  // Buttons to hide the `suggestionSections`
+  cancelButtons: [],
+  // Section to show/hide
+  suggestionSections: [],
+  // Pieces of text that need updating depending on the action, `edit`, `replace`, `delete`
+  actionTextPieces: [],
+};
+
+class BlobForkSuggestion {
+  constructor(options) {
+    this.elementMap = Object.assign({}, defaults, options);
+    this.onClickWrapper = this.onClick.bind(this);
+
+    document.addEventListener('click', this.onClickWrapper);
+  }
+
+  showSuggestionSection(forkPath, action = 'edit') {
+    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
       suggestionSection.classList.remove('hidden');
     });
+
+    [].forEach.call(this.elementMap.forkButtons, (forkButton) => {
+      forkButton.setAttribute('href', forkPath);
+    });
+
+    [].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => {
+      // eslint-disable-next-line no-param-reassign
+      actionTextPiece.textContent = action;
+    });
   }
 
-  if (cancelButton) {
-    cancelButton.addEventListener('click', () => {
+  hideSuggestionSection() {
+    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
       suggestionSection.classList.add('hidden');
     });
   }
+
+  onClick(e) {
+    const el = e.target;
+
+    if ([].includes.call(this.elementMap.openButtons, el)) {
+      const { forkPath, action } = el.dataset;
+      this.showSuggestionSection(forkPath, action);
+    }
+
+    if ([].includes.call(this.elementMap.cancelButtons, el)) {
+      this.hideSuggestionSection();
+    }
+  }
+
+  destroy() {
+    document.removeEventListener('click', this.onClickWrapper);
+  }
 }
 
 export default BlobForkSuggestion;