Minor refactor tree_helper logic

Minor clean up modal logic

Minor update to use the v-model attribute
for the gl-modal.

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

@@ -15,8 +15,12 @@ export default {
   components: {
     GlModal,
   },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   props: {
-    isVisible: {
+    visible: {
       type: Boolean,
       required: false,
       default: false,
@@ -46,23 +50,18 @@ export default {
       };
     },
   },
-  methods: {
-    handleHide() {
-      this.$emit('hide');
-    },
-  },
   i18n,
 };
 </script>
 <template>
   <gl-modal
+    :visible="visible"
     data-qa-selector="confirm_fork_modal"
-    :visible="isVisible"
     :modal-id="modalId"
     :title="$options.i18n.title"
     :action-primary="btnActions.primary"
     :action-cancel="btnActions.cancel"
-    @hide="handleHide"
+    @change="$emit('change', $event)"
   >
     <p>{{ $options.i18n.message }}</p>
   </gl-modal>

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

@@ -293,10 +293,9 @@ export default {
     </gl-modal>
     <confirm-fork-modal
       v-if="showWebIdeButton || showEditButton"
-      :is-visible="showForkModal"
+      v-model="showForkModal"
       :modal-id="forkModalId"
       :fork-path="forkPath"
-      @hide="showForkModal = false"
     />
   </div>
 </template>

app/helpers/tree_helper.rb

@@ -179,9 +179,7 @@ module TreeHelper
     if show_edit_button?({ blob: blob })
       fork_path = fork_and_edit_path(project, ref, path)
       fork_modal_id = "modal-confirm-fork-edit"
-    end
-
-    if show_web_ide_button?
+    elsif show_web_ide_button?
       fork_path = ide_fork_and_edit_path(project, ref, path)
       fork_modal_id = "modal-confirm-fork-webide"
     end

app/views/shared/_web_ide_button.html.haml

@@ -2,4 +2,4 @@
 - button_data = web_ide_button_data({ blob: blob })
 - fork_options = fork_modal_options(@project, @ref, @path, blob)
 
-.d-inline-block{ data: { options: button_data.merge(fork_options).to_json }, id: "js-#{type}-web-ide-link" }
+.gl-display-inline-block{ data: { options: button_data.merge(fork_options).to_json }, id: "js-#{type}-web-ide-link" }

spec/frontend/vue_shared/components/confirm_fork_modal_spec.js

@@ -25,7 +25,7 @@ describe('vue_shared/components/confirm_fork_modal', () => {
     wrapper.destroy();
   });
 
-  describe('isVisible = false', () => {
+  describe('visible = false', () => {
     beforeEach(() => {
       wrapper = createComponent();
     });
@@ -60,21 +60,21 @@ describe('vue_shared/components/confirm_fork_modal', () => {
     });
   });
 
-  describe('isVisible = true', () => {
+  describe('visible = true', () => {
     beforeEach(() => {
-      wrapper = createComponent({ isVisible: true });
+      wrapper = createComponent({ visible: true });
     });
 
     it('sets the visible prop to `true`', () => {
       expect(findModalProp('visible')).toBe(true);
     });
 
-    it('emits the `hide` event if the modal is hidden', () => {
-      expect(wrapper.emitted('hide')).toBeUndefined();
+    it('emits the `change` event if the modal is hidden', () => {
+      expect(wrapper.emitted('change')).toBeUndefined();
 
-      findModal().vm.$emit('hide');
+      findModal().vm.$emit('change', false);
 
-      expect(wrapper.emitted('hide')).toHaveLength(1);
+      expect(wrapper.emitted('change')).toEqual([[false]]);
     });
   });
 });

spec/frontend/vue_shared/components/web_ide_link_spec.js

@@ -272,7 +272,7 @@ describe('Web IDE link component', () => {
 
       expect(findForkConfirmModal().exists()).toBe(true);
       expect(findForkConfirmModal().props()).toEqual({
-        isVisible: false,
+        visible: false,
         forkPath,
         modalId: props.forkModalId,
       });
@@ -284,7 +284,7 @@ describe('Web IDE link component', () => {
       await findActionsButton().trigger('click');
 
       expect(findForkConfirmModal().props()).toEqual({
-        isVisible: true,
+        visible: true,
         forkPath,
         modalId: props.forkModalId,
       });