Handle locking the directory
What does this MR do and why?
This MR is a part of a bigger effort that aims to consolidate various tiny Vue apps in the header area of tree and blob view into one common Vue application.
Note: There's a potential for refactor, but that part will be handled in the following issues within &13018. The MRs for #497051 (closed) goal is to move everything as is.
I started work in !173576 (closed), but the changes were extensive. I want to have a little piece merged first to make sure the other MR is easier to review and there's less potential for errors (which I have already made re-implementing logic that was in Ruby
This MR adds:
- calling the mutation after user confirms locking/unlocking of the file
- adjusting the Lock button state, when user navigates to different directory
- reloading the page to mark locked items in the tree viewer (as before)
- fixing the preexisting issue of the button state and tooltip not properly updated after going to another directory
- all changes are behind a
common_repository_blob_header_app=trueURL param - elements are being moved in batches, what you're reviewing may not yet look like the old version
- breaking the work into smaller parts means that feature tests won't pass, due to missing UI elements. We will take care of the feature tests in the last step, after all other MRs are merged
- please make sure you give it a go and thoroughly test all the buttons
The breakdown of #497051 (closed) MRs:
| step | status |
|---|---|
| introduce ff & move first batch of controls, move web ide button for tree header, recreate projects/tree/lock_link in Vue | |
| move code buttons (desktop & mobile) for tree header | |
| move contents of app/views/projects/blob/_breadcrumb.html.haml | |
| recreate projects/tree/lock_link in Vue | |
turn on feature tests for when the ff is true
|
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- Prepare common Vue app for Repository and Blob header area
- MR that introduced the UI
- MR that introduced the logic behind lock types and UI changes
- Previous Ruby version of the button
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After |
|---|---|
| Screen_Recording_2024-12-13_at_16.38.12 | Screen_Recording_2024-12-13_at_16.31.16 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
Use this diff to default on the new Vue repository & blob header:
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index f351adfa1dcb..b9d28eaed317 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -15,29 +15,24 @@
- compare_path = project_compare_index_path(@project, from: @repository&.root_ref, to: @ref)
#tree-holder.tree-holder.clearfix.js-per-page.gl-mt-5{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
- - if params[:common_repository_blob_header_app] == 'true'
- #js-repository-blob-header-app{ data: {
- project_id: @project.id,
- ref: ref,
- ref_type: @ref_type.to_s,
- breadcrumbs: breadcrumb_data_attributes,
- project_root_path: project_path(@project),
- project_path: project.full_path,
- compare_path: compare_path,
- web_ide_button_options: web_ide_button_data.merge(fork_options).to_json,
- web_ide_button_default_branch: @project.default_branch_or_main,
- ssh_url: ssh_enabled? ? ssh_clone_url_to_repo(@project) : '',
- http_url: http_enabled? ? http_clone_url_to_repo(@project) : '',
- xcode_url: show_xcode_link?(@project) ? xcode_uri_to_repo(@project) : '',
- kerberos_url: alternative_kerberos_url? ? project.kerberos_url_to_repo : '',
- download_links: download_links,
- download_artifacts: download_artifacts,
- escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref)
- } }
-
- - else
- .nav-block.gl-flex.gl-flex-col.sm:gl-flex-row.gl-items-stretch
- = render 'projects/tree/tree_header', tree: @tree
+ #js-repository-blob-header-app{ data: {
+ project_id: @project.id,
+ ref: ref,
+ ref_type: @ref_type.to_s,
+ breadcrumbs: breadcrumb_data_attributes,
+ project_root_path: project_path(@project),
+ project_path: project.full_path,
+ compare_path: compare_path,
+ web_ide_button_options: web_ide_button_data.merge(fork_options).to_json,
+ web_ide_button_default_branch: @project.default_branch_or_main,
+ ssh_url: ssh_enabled? ? ssh_clone_url_to_repo(@project) : '',
+ http_url: http_enabled? ? http_clone_url_to_repo(@project) : '',
+ xcode_url: show_xcode_link?(@project) ? xcode_uri_to_repo(@project) : '',
+ kerberos_url: alternative_kerberos_url? ? project.kerberos_url_to_repo : '',
+ download_links: download_links,
+ download_artifacts: download_artifacts,
+ escaped_ref: ActionDispatch::Journey::Router::Utils.escape_path(ref)
+ } }
- if project.forked?
#js-fork-info{ data: vue_fork_divergence_data(project, ref) }
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 00dc9adcf3e6..ee9d2fe73e1a 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -6,10 +6,7 @@
- if blob.rich_viewer && blob.extension != 'geojson'
- add_page_startup_api_call local_assigns.fetch(:viewer_url) { url_for(safe_params.merge(viewer: blob.rich_viewer.type, format: :json)) }
-- if params[:common_repository_blob_header_app] == 'true'
- #js-repository-blob-header-app{ data: vue_blob_header_app_data(project, blob, ref) }
-- else
- = render "projects/blob/breadcrumb", blob: blob
+#js-repository-blob-header-app{ data: vue_blob_header_app_data(project, blob, ref) }
- if project.forked?
#js-fork-info{ data: vue_fork_divergence_data(project, ref) }- Go to Project overview or Code / Repository and go into one of the folders of your project.
- Make sure you have three levels deep directories that you can lock to see all types of locks:
- exact lock means that particular directory is locked
- upstream lock means the parent directory is locked
- downstream lock means the child directory is locked
- Lock one of the directories, make sure the page reloads and items on the tree list show a lock icon next to their names
- Navigate to a child directory. Make sure the tooltip of the lock button indicates the upper folder you've just locked in the previous step.
- Go back to parent folder, check the changed tooltip. Unlock the directory. Make sure tree list items no longer have the lock icons.
- Navigate to a child directory again. Make sure it's possible to lock now.
Related to #497051 (closed)
Edited by Paulina Sedlak-Jakubowska