Fixed locking folders not working with Vue file refactor

Allows for the path that we send to toggle the locking of folders
to be reactive based on the Vue Router route

app/assets/javascripts/pages/projects/show/index.js

@@ -48,7 +48,7 @@ document.addEventListener('DOMContentLoaded', () => {
   leaveByUrl('project');
 
   if (document.getElementById('js-tree-list')) {
-    import('~/repository')
+    import('ee_else_ce/repository')
       .then(m => m.default())
       .catch(e => {
         throw e;

app/assets/javascripts/pages/projects/tree/show/index.js

@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
   GpgBadges.fetch();
 
   if (document.getElementById('js-tree-list')) {
-    import('~/repository')
+    import('ee_else_ce/repository')
       .then(m => m.default())
       .catch(e => {
         throw e;

app/assets/javascripts/repository/index.js

@@ -9,8 +9,10 @@ import { parseBoolean } from '../lib/utils/common_utils';
 
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
-  const { projectPath, projectShortPath, ref, fullName } = el.dataset;
+  const { dataset } = el;
+  const { projectPath, projectShortPath, ref, fullName } = dataset;
   const router = createRouter(projectPath, ref);
+  const hideOnRootEls = document.querySelectorAll('.js-hide-on-root');
 
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
@@ -35,6 +37,7 @@ export default function setupVueRepositoryList() {
     document
       .querySelectorAll('.js-hide-on-navigation')
       .forEach(elem => elem.classList.toggle('hidden', !isRoot));
+    hideOnRootEls.forEach(elem => elem.classList.toggle('hidden', isRoot));
   });
 
   const breadcrumbEl = document.getElementById('js-repo-breadcrumb');
@@ -88,7 +91,8 @@ export default function setupVueRepositoryList() {
     },
   });
 
-  return new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el,
     router,
     apolloProvider,
@@ -96,4 +100,6 @@ export default function setupVueRepositoryList() {
       return h(App);
     },
   });
+
+  return { router, data: dataset };
 }

app/helpers/tree_helper.rb

@@ -186,6 +186,15 @@ module TreeHelper
 
     attrs
   end
+
+  def vue_file_list_data(project, ref)
+    {
+      project_path: project.full_path,
+      project_short_path: project.path,
+      ref: ref,
+      full_name: project.name_with_namespace
+    }
+  end
 end
 
 TreeHelper.prepend_if_ee('::EE::TreeHelper')

app/views/projects/_files.html.haml

@@ -19,7 +19,7 @@
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout)
 
   - if vue_file_list_enabled?
-    #js-tree-list{ data: { project_path: @project.full_path, project_short_path: @project.path, ref: ref, full_name: @project.name_with_namespace } }
+    #js-tree-list{ data: vue_file_list_data(project, ref) }
     - if can_edit_tree?
       = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
       = render 'projects/blob/new_dir'

ee/app/assets/javascripts/pages/projects/tree/show/index.js

@@ -3,10 +3,9 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 import initPathLocks from 'ee/path_locks';
 
 document.addEventListener('DOMContentLoaded', () => {
-  if (parseBoolean(document.querySelector('.js-tree-content').dataset.pathLocksAvailable)) {
-    initPathLocks(
-      document.querySelector('.js-tree-content').dataset.pathLocksToggle,
-      document.querySelector('.js-tree-content').dataset.pathLocksPath,
-    );
+  const treeContent = document.querySelector('.js-tree-content');
+
+  if (treeContent && parseBoolean(treeContent.dataset.pathLocksAvailable)) {
+    initPathLocks(treeContent.dataset.pathLocksToggle, treeContent.dataset.pathLocksPath);
   }
 });

ee/app/assets/javascripts/repository/index.js

+import initTree from '~/repository';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+
+export default () => {
+  const { router, data } = initTree();
+
+  if (data.pathLocksAvailable) {
+    const toggleBtn = document.querySelector('.js-path-lock');
+
+    toggleBtn.addEventListener('click', e => {
+      e.preventDefault();
+
+      toggleBtn.setAttribute('disabled', 'disabled');
+
+      axios
+        .post(data.pathLocksToggle, {
+          path: router.currentRoute.params.pathMatch.replace(/^\//, ''),
+        })
+        .then(() => window.location.reload())
+        .catch(() => {
+          toggleBtn.removeAttribute('disabled');
+          createFlash(__('An error occurred while initializing path locks'));
+        });
+    });
+  }
+};

ee/app/helpers/ee/lock_helper.rb

@@ -5,7 +5,9 @@ module EE
     def lock_file_link(project = @project, path = @path, html_options: {})
       return unless project.feature_available?(:file_locks)
       return unless current_user
-      return if path.blank?
+      # Always render the link if `vue_file_list` is enabled, the link will be hidden
+      # by the vue app if the path was blank
+      return if path.blank? && !vue_file_list_enabled?
 
       path_lock = project.find_path_lock(path, downstream: true)
 

ee/app/helpers/ee/tree_helper.rb

@@ -12,5 +12,13 @@ module EE
         "path-locks-path" => path
       })
     end
+
+    override :vue_file_list_data
+    def vue_file_list_data(project, ref)
+      super.merge({
+        path_locks_available: project.feature_available?(:file_locks).to_s,
+        path_locks_toggle: toggle_project_path_locks_path(project)
+      })
+    end
   end
 end

ee/app/views/projects/tree/_lock_link.html.haml

-= lock_file_link(html_options: { class: 'btn path-lock' })
+= lock_file_link(html_options: { class: "btn path-lock js-path-lock js-hide-on-root #{'hidden' if vue_file_list_enabled?}" })

ee/spec/features/projects/path_locks_spec.rb

@@ -8,7 +8,6 @@ describe 'Path Locks', :js do
   let(:tree_path) { project_tree_path(project, project.repository.root_ref) }
 
   before do
-    stub_feature_flags(vue_file_list: false)
     allow(project).to receive(:feature_available?).with(:file_locks) { true }
 
     project.add_maintainer(user)
@@ -25,11 +24,7 @@ describe 'Path Locks', :js do
     end
     click_link "Lock"
 
-    expect(page).to have_selector('.fa-lock')
-
-    visit tree_path
-
-    expect(page).to have_selector('.fa-lock')
+    expect(page).to have_link('Unlock')
   end
 
   it 'Locking files' do
@@ -44,12 +39,6 @@ describe 'Path Locks', :js do
 
       expect(page).to have_link('Unlock')
     end
-
-    visit tree_path
-
-    within page_tree do
-      expect(page).to have_selector('.fa-lock')
-    end
   end
 
   it 'Unlocking files' do

spec/views/projects/tree/_tree_header.html.haml_spec.rb

@@ -8,6 +8,8 @@ describe 'projects/tree/_tree_header' do
   let(:repository) { project.repository }
 
   before do
+    stub_feature_flags(vue_file_list: false)
+
     assign(:project, project)
     assign(:repository, repository)
     assign(:id, File.join('master', ''))