Merge branch 'ph/vueFileRefactorPathLock' into 'master'

Fixed locking folders not working with Vue file refactor

See merge request gitlab-org/gitlab!19070

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', ''))