Update frontend specs

Adds additional tests for the new vue
js modal.

Minor test fixes

Fix broken jest tests

Minor rebase cleanup and some fixes
for broken tests.

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

@@ -29,7 +29,6 @@ export default {
         primary: {
           text: __('Fork project'),
           attributes: {
-            type: 'submit',
             href: this.forkPath,
             variant: 'confirm',
             'data-qa-selector': 'fork_project_button',
@@ -54,6 +53,7 @@ export default {
 </script>
 <template>
   <gl-modal
+    data-qa-selector="confirm_fork_modal"
     :visible="isVisible"
     :modal-id="modalId"
     :title="$options.i18n.title"

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

@@ -119,7 +119,7 @@ export default {
     return {
       selection: KEY_WEB_IDE,
       showEnableGitpodModal: false,
-      isForkModalOpen: false,
+      showForkModal: false,
     };
   },
   computed: {
@@ -140,7 +140,7 @@ export default {
                 return;
               }
 
-              this.showForkModal(true);
+              this.showModal('showForkModal');
             },
           }
         : { href: this.editUrl };
@@ -183,7 +183,7 @@ export default {
                 return;
               }
 
-              this.showForkModal(true);
+              this.showModal('showForkModal');
             },
           }
         : { href: this.webIdeUrl };
@@ -259,16 +259,12 @@ export default {
     select(key) {
       this.selection = key;
     },
-    showForkModal(isOpen) {
-      this.isForkModalOpen = isOpen;
-    },
     showModal(dataKey) {
       this[dataKey] = true;
     },
   },
 };
 </script>
-
 <template>
   <div class="gl-sm-ml-3">
     <actions-button
@@ -283,7 +279,6 @@ export default {
       :value="selection"
       @input="select"
     />
-
     <gl-modal
       v-if="computedShowGitpodButton && !gitpodEnabled"
       v-model="showEnableGitpodModal"
@@ -297,10 +292,10 @@ export default {
     </gl-modal>
     <confirm-fork-modal
       v-if="showWebIdeButton || showEditButton"
-      :is-visible="isForkModalOpen"
+      :is-visible="showForkModal"
       :modal-id="forkModalId"
       :fork-path="forkPath"
-      @hide="showForkModal(false)"
+      @hide="showForkModal = false"
     />
   </div>
 </template>

app/helpers/tree_helper.rb

@@ -177,14 +177,19 @@ module TreeHelper
 
   def fork_modal_options(project, ref, path, blob)
     if show_edit_button?({ blob: blob })
-      return { fork_path: fork_and_edit_path(project, ref, path), fork_modal_id: "modal-confirm-fork-edit" }
+      fork_path = fork_and_edit_path(project, ref, path)
+      fork_modal_id = "modal-confirm-fork-edit"
     end
 
     if show_web_ide_button?
-      return { fork_path: ide_fork_and_edit_path(project, ref, path), fork_modal_id: "modal-confirm-fork-webide" }
+      fork_path = ide_fork_and_edit_path(project, ref, path)
+      fork_modal_id = "modal-confirm-fork-webide"
     end
 
-    {}
+    {
+      fork_path: fork_path,
+      fork_modal_id: fork_modal_id
+    }
   end
 
   def web_ide_button_data(options = {})

locale/gitlab.pot

@@ -41453,9 +41453,6 @@ msgstr ""
 msgid "You cannot write to this read-only GitLab instance."
 msgstr ""
 
-msgid "You can’t %{tag_start}edit%{tag_end} files directly in this project. Fork this project and submit a merge request with your changes."
-msgstr ""
-
 msgid "You can’t edit files directly in this project. Fork this project and submit a merge request with your changes."
 msgstr ""
 

qa/qa/page/project/web_ide/edit.rb

@@ -68,7 +68,7 @@ module QA
             element :delete_button
           end
 
-          view 'app/views/shared/_confirm_fork_modal.html.haml' do
+          view 'app/assets/javascripts/vue_shared/components/confirm_fork_modal.vue' do
             element :fork_project_button
             element :confirm_fork_modal
           end

spec/frontend/vue_shared/components/web_ide_link_spec.js

@@ -4,6 +4,7 @@ import { nextTick } from 'vue';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
+import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
 
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
@@ -13,6 +14,7 @@ const TEST_WEB_IDE_URL = '/-/ide/project/gitlab-test/test/edit/main/-/';
 const TEST_GITPOD_URL = 'https://gitpod.test/';
 const TEST_USER_PREFERENCES_GITPOD_PATH = '/-/profile/preferences#user_gitpod_enabled';
 const TEST_USER_PROFILE_ENABLE_GITPOD_PATH = '/-/profile?user%5Bgitpod_enabled%5D=true';
+const forkPath = '/some/fork/path';
 
 const ACTION_EDIT = {
   href: TEST_EDIT_URL,
@@ -74,6 +76,7 @@ describe('Web IDE link component', () => {
         editUrl: TEST_EDIT_URL,
         webIdeUrl: TEST_WEB_IDE_URL,
         gitpodUrl: TEST_GITPOD_URL,
+        forkPath,
         ...props,
       },
       stubs: {
@@ -96,6 +99,7 @@ describe('Web IDE link component', () => {
   const findActionsButton = () => wrapper.find(ActionsButton);
   const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
   const findModal = () => wrapper.findComponent(GlModal);
+  const findForkConfirmModal = () => wrapper.findComponent(ConfirmForkModal);
 
   it.each([
     {
@@ -231,16 +235,28 @@ describe('Web IDE link component', () => {
   });
 
   describe('edit actions', () => {
-    it.each([
+    const testActions = [
       {
-        props: { showWebIdeButton: true, showEditButton: false },
+        props: {
+          showWebIdeButton: true,
+          showEditButton: false,
+          forkPath,
+          forkModalId: 'edit-modal',
+        },
         expectedEventPayload: 'ide',
       },
       {
-        props: { showWebIdeButton: false, showEditButton: true },
+        props: {
+          showWebIdeButton: false,
+          showEditButton: true,
+          forkPath,
+          forkModalId: 'webide-modal',
+        },
         expectedEventPayload: 'simple',
       },
-    ])(
+    ];
+
+    it.each(testActions)(
       'emits the correct event when an action handler is called',
       async ({ props, expectedEventPayload }) => {
         createComponent({ ...props, needsToFork: true, disableForkModal: true });
@@ -250,6 +266,29 @@ describe('Web IDE link component', () => {
         expect(wrapper.emitted('edit')).toEqual([[expectedEventPayload]]);
       },
     );
+
+    it.each(testActions)('renders the fork confirmation modal', async ({ props }) => {
+      createComponent({ ...props, needsToFork: true });
+
+      expect(findForkConfirmModal().exists()).toBe(true);
+      expect(findForkConfirmModal().props()).toEqual({
+        isVisible: false,
+        forkPath,
+        modalId: props.forkModalId,
+      });
+    });
+
+    it.each(testActions)('opens the modal when the button is clicked', async ({ props }) => {
+      createComponent({ ...props, needsToFork: true }, mountExtended);
+
+      await findActionsButton().trigger('click');
+
+      expect(findForkConfirmModal().props()).toEqual({
+        isVisible: true,
+        forkPath,
+        modalId: props.forkModalId,
+      });
+    });
   });
 
   describe('when Gitpod is not enabled', () => {