Fixed new blob and directory form actions in Vue file listing refactor

Updates the form actions to correctly reflect the new routes

app/assets/javascripts/repository/components/breadcrumbs.vue

@@ -124,7 +124,7 @@ export default {
           },
           {
             attrs: {
-              href: this.newBlobPath,
+              href: `${this.newBlobPath}${this.currentPath}`,
               class: 'qa-new-file-option',
             },
             text: __('New file'),

app/assets/javascripts/repository/index.js

@@ -7,6 +7,7 @@ import TreeActionLink from './components/tree_action_link.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
 import apolloProvider from './graphql';
 import { setTitle } from './utils/title';
+import { updateFormAction } from './utils/dom';
 import { parseBoolean } from '../lib/utils/common_utils';
 import { webIDEUrl } from '../lib/utils/url_utility';
 import { __ } from '../locale';
@@ -42,8 +43,15 @@ export default function setupVueRepositoryList() {
       forkNewBlobPath,
       forkNewDirectoryPath,
       forkUploadBlobPath,
+      uploadPath,
+      newDirPath,
     } = breadcrumbEl.dataset;
 
+    router.afterEach(({ params: { pathMatch = '/' } }) => {
+      updateFormAction('.js-upload-blob-form', uploadPath, pathMatch);
+      updateFormAction('.js-create-dir-form', newDirPath, pathMatch);
+    });
+
     // eslint-disable-next-line no-new
     new Vue({
       el: breadcrumbEl,

app/assets/javascripts/repository/utils/dom.js

-// eslint-disable-next-line import/prefer-default-export
 export const updateElementsVisibility = (selector, isVisible) => {
   document.querySelectorAll(selector).forEach(elem => elem.classList.toggle('hidden', !isVisible));
 };
+
+export const updateFormAction = (selector, basePath, path) => {
+  const form = document.querySelector(selector);
+
+  if (form) {
+    form.action = `${basePath}${path}`;
+  }
+};

app/helpers/tree_helper.rb

@@ -158,7 +158,9 @@ module TreeHelper
   def breadcrumb_data_attributes
     attrs = {
       can_collaborate: can_collaborate_with_project?(@project).to_s,
-      new_blob_path: project_new_blob_path(@project, @id),
+      new_blob_path: project_new_blob_path(@project, @ref),
+      upload_path: project_create_blob_path(@project, @ref),
+      new_dir_path: project_create_dir_path(@project, @ref),
       new_branch_path: new_project_branch_path(@project),
       new_tag_path: new_project_tag_path(@project),
       can_edit_tree: can_edit_tree?.to_s

spec/frontend/repository/utils/dom_spec.js

 import { setHTMLFixture } from '../../helpers/fixtures';
-import { updateElementsVisibility } from '~/repository/utils/dom';
+import { updateElementsVisibility, updateFormAction } from '~/repository/utils/dom';
 
 describe('updateElementsVisibility', () => {
   it('adds hidden class', () => {
@@ -18,3 +18,13 @@ describe('updateElementsVisibility', () => {
     expect(document.querySelector('.js-test').classList).not.toContain('hidden');
   });
 });
+
+describe('updateFormAction', () => {
+  it('updates form action', () => {
+    setHTMLFixture('<form class="js-test" action="/"></form>');
+
+    updateFormAction('.js-test', '/gitlab/create', '/test');
+
+    expect(document.querySelector('.js-test').action).toBe('http://localhost/gitlab/create/test');
+  });
+});