Add vue js fork confirmation modal

Replaces the haml modal with a vue js implementation
and removes the dependence on jquery.

Changelog: changed

app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue

+<script>
+import { GlModal } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  name: 'ConfirmForkModal',
+  components: {
+    GlModal,
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    modalId: {
+      type: String,
+      required: true,
+    },
+    forkPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    btnActions() {
+      return {
+        cancel: { text: __('Cancel') },
+        primary: {
+          text: __('Fork project'),
+          attributes: {
+            type: 'submit',
+            href: this.forkPath,
+            variant: 'confirm',
+            'data-qa-selector': 'fork_project_button',
+            'data-method': 'post',
+          },
+        },
+      };
+    },
+  },
+  methods: {
+    handleHide() {
+      this.$emit('hide');
+    },
+  },
+  i18n: {
+    title: __('Fork project?'),
+    message: __(
+      'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
+    ),
+  },
+};
+</script>
+<template>
+  <!-- v-bind="$attrs" -->
+  <gl-modal
+    :visible="isVisible"
+    :modal-id="modalId"
+    :title="$options.i18n.title"
+    :action-primary="btnActions.primary"
+    :action-cancel="btnActions.cancel"
+    @hide="handleHide"
+  >
+    <p>{{ $options.i18n.message }}</p>
+  </gl-modal>
+</template>

app/assets/javascripts/vue_shared/components/web_ide_link.vue

 <script>
-import $ from 'jquery';
 import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
 
 const KEY_EDIT = 'edit';
 const KEY_WEB_IDE = 'webide';
@@ -16,6 +16,7 @@ export default {
     GlModal,
     GlSprintf,
     GlLink,
+    ConfirmForkModal,
   },
   i18n: {
     modal: {
@@ -103,11 +104,22 @@ export default {
       required: false,
       default: false,
     },
+    forkPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    forkModalId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       selection: KEY_WEB_IDE,
       showEnableGitpodModal: false,
+      isForkModalOpen: false,
     };
   },
   computed: {
@@ -128,7 +140,7 @@ export default {
                 return;
               }
 
-              this.showJQueryModal('#modal-confirm-fork-edit');
+              this.showForkModal(true);
             },
           }
         : { href: this.editUrl };
@@ -171,7 +183,7 @@ export default {
                 return;
               }
 
-              this.showJQueryModal('#modal-confirm-fork-webide');
+              this.showForkModal(true);
             },
           }
         : { href: this.webIdeUrl };
@@ -247,8 +259,8 @@ export default {
     select(key) {
       this.selection = key;
     },
-    showJQueryModal(id) {
-      $(id).modal('show');
+    showForkModal(isOpen) {
+      this.isForkModalOpen = isOpen;
     },
     showModal(dataKey) {
       this[dataKey] = true;
@@ -271,6 +283,7 @@ export default {
       :value="selection"
       @input="select"
     />
+
     <gl-modal
       v-if="computedShowGitpodButton && !gitpodEnabled"
       v-model="showEnableGitpodModal"
@@ -282,5 +295,12 @@ export default {
         </template>
       </gl-sprintf>
     </gl-modal>
+    <confirm-fork-modal
+      v-if="showWebIdeButton"
+      :is-visible="isForkModalOpen"
+      :modal-id="forkModalId"
+      :fork-path="forkPath"
+      @hide="showForkModal(false)"
+    />
   </div>
 </template>

app/helpers/tree_helper.rb

@@ -175,6 +175,18 @@ module TreeHelper
     }
   end
 
+  def fork_modal_options(project, ref, path, blob)
+    if show_web_ide_button?
+      return { fork_path: ide_fork_and_edit_path(project, ref, path), fork_modal_id: "modal-confirm-fork-webide" }
+    end
+
+    if show_edit_button?({ blob: blob })
+      return { fork_path: fork_and_edit_path(project, ref, path), fork_modal_id: "modal-confirm-fork-edit" }
+    end
+
+    {}
+  end
+
   def web_ide_button_data(options = {})
     {
       project_path: project_to_use.full_path,

app/views/shared/_web_ide_button.html.haml

 - type = blob ? 'blob' : 'tree'
+- button_data = web_ide_button_data({ blob: blob })
+- fork_options = fork_modal_options(@project, @ref, @path, blob)
 
-.d-inline-block{ data: { options: web_ide_button_data({ blob: blob }).to_json }, id: "js-#{type}-web-ide-link" }
-
-- if show_edit_button?({ blob: blob })
-  = render 'shared/confirm_fork_modal', fork_path: fork_and_edit_path(@project, @ref, @path), type: 'edit'
-- if show_web_ide_button?
-  = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path), type: 'webide'
+.d-inline-block{ data: { options: button_data.merge(fork_options).to_json }, id: "js-#{type}-web-ide-link" }