Add Fork/Cancel confirmation to "Replace"/"Delete" buttons

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

3 files changed, 61 insertions, 10 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;
diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js
index 3253eebd9b5..cb054a2a197 100644
--- a/app/assets/javascripts/commons/polyfills.js
+++ b/app/assets/javascripts/commons/polyfills.js
@@ -1,6 +1,7 @@
 // ECMAScript polyfills
 import 'core-js/fn/array/find';
 import 'core-js/fn/array/from';
+import 'core-js/fn/array/includes';
 import 'core-js/fn/object/assign';
 import 'core-js/fn/promise';
 import 'core-js/fn/string/code-point-at';
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 02a7df9b2a0..20db2698ba8 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -91,11 +91,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
           fileBlobPermalinkUrl,
         });
 
-        new BlobForkSuggestion(
-          document.querySelector('.js-edit-blob-link-fork-toggler'),
-          document.querySelector('.js-cancel-fork-suggestion'),
-          document.querySelector('.js-file-fork-suggestion-section'),
-        );
+        new BlobForkSuggestion({
+          openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
+          forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
+          cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
+          suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
+          actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
+        });
       }
 
       switch (page) {