Commit 7d2e2bd3 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '30637-replace-delete-buttons-get-fork-cancel-confirmation' into 'master'

Add Fork/Cancel confirmation to "Replace"/"Delete" buttons

Closes #30637

See merge request !10602
parents 4b379615 36387ce1
function BlobForkSuggestion(openButton, cancelButton, suggestionSection) { const defaults = {
if (openButton) { // Buttons that will show the `suggestionSections`
openButton.addEventListener('click', () => { // has `data-fork-path`, and `data-action`
openButtons: [],
// Update the href(from `openButton` -> `data-fork-path`)
// whenever a `openButton` is clicked
forkButtons: [],
// Buttons to hide the `suggestionSections`
cancelButtons: [],
// Section to show/hide
suggestionSections: [],
// Pieces of text that need updating depending on the action, `edit`, `replace`, `delete`
actionTextPieces: [],
};
class BlobForkSuggestion {
constructor(options) {
this.elementMap = Object.assign({}, defaults, options);
this.onClickWrapper = this.onClick.bind(this);
document.addEventListener('click', this.onClickWrapper);
}
showSuggestionSection(forkPath, action = 'edit') {
[].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
suggestionSection.classList.remove('hidden'); suggestionSection.classList.remove('hidden');
}); });
[].forEach.call(this.elementMap.forkButtons, (forkButton) => {
forkButton.setAttribute('href', forkPath);
});
[].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => {
// eslint-disable-next-line no-param-reassign
actionTextPiece.textContent = action;
});
} }
if (cancelButton) { hideSuggestionSection() {
cancelButton.addEventListener('click', () => { [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
suggestionSection.classList.add('hidden'); suggestionSection.classList.add('hidden');
}); });
} }
onClick(e) {
const el = e.target;
if ([].includes.call(this.elementMap.openButtons, el)) {
const { forkPath, action } = el.dataset;
this.showSuggestionSection(forkPath, action);
}
if ([].includes.call(this.elementMap.cancelButtons, el)) {
this.hideSuggestionSection();
}
}
destroy() {
document.removeEventListener('click', this.onClickWrapper);
}
} }
export default BlobForkSuggestion; export default BlobForkSuggestion;
// ECMAScript polyfills // ECMAScript polyfills
import 'core-js/fn/array/find'; import 'core-js/fn/array/find';
import 'core-js/fn/array/from'; import 'core-js/fn/array/from';
import 'core-js/fn/array/includes';
import 'core-js/fn/object/assign'; import 'core-js/fn/object/assign';
import 'core-js/fn/promise'; import 'core-js/fn/promise';
import 'core-js/fn/string/code-point-at'; import 'core-js/fn/string/code-point-at';
......
...@@ -91,11 +91,13 @@ const ShortcutsBlob = require('./shortcuts_blob'); ...@@ -91,11 +91,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
fileBlobPermalinkUrl, fileBlobPermalinkUrl,
}); });
new BlobForkSuggestion( new BlobForkSuggestion({
document.querySelector('.js-edit-blob-link-fork-toggler'), openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
document.querySelector('.js-cancel-fork-suggestion'), forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
document.querySelector('.js-file-fork-suggestion-section'), cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
); suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
});
} }
switch (page) { switch (page) {
......
...@@ -14,15 +14,6 @@ module BlobHelper ...@@ -14,15 +14,6 @@ module BlobHelper
options[:link_opts]) options[:link_opts])
end end
def fork_path(project = @project, ref = @ref, path = @path, options = {})
continue_params = {
to: edit_path,
notice: edit_in_new_fork_notice,
notice_now: edit_in_new_fork_notice_now
}
namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
end
def edit_blob_link(project = @project, ref = @ref, path = @path, options = {}) def edit_blob_link(project = @project, ref = @ref, path = @path, options = {})
blob = options.delete(:blob) blob = options.delete(:blob)
blob ||= project.repository.blob_at(ref, path) rescue nil blob ||= project.repository.blob_at(ref, path) rescue nil
...@@ -37,7 +28,16 @@ module BlobHelper ...@@ -37,7 +28,16 @@ module BlobHelper
elsif !current_user || (current_user && can_modify_blob?(blob, project, ref)) elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
link_to 'Edit', edit_path(project, ref, path, options), class: "#{common_classes} btn-sm" link_to 'Edit', edit_path(project, ref, path, options), class: "#{common_classes} btn-sm"
elsif current_user && can?(current_user, :fork_project, project) elsif current_user && can?(current_user, :fork_project, project)
button_tag 'Edit', class: "#{common_classes} js-edit-blob-link-fork-toggler" continue_params = {
to: edit_path,
notice: edit_in_new_fork_notice,
notice_now: edit_in_new_fork_notice_now
}
fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
button_tag 'Edit',
class: "#{common_classes} js-edit-blob-link-fork-toggler",
data: { action: 'edit', fork_path: fork_path }
end end
end end
...@@ -48,12 +48,14 @@ module BlobHelper ...@@ -48,12 +48,14 @@ module BlobHelper
return unless blob return unless blob
common_classes = "btn btn-#{btn_class}"
if !on_top_of_branch?(project, ref) if !on_top_of_branch?(project, ref)
button_tag label, class: "btn btn-#{btn_class} disabled has-tooltip", title: "You can only #{action} files when you are on a branch", data: { container: 'body' } button_tag label, class: "#{common_classes} disabled has-tooltip", title: "You can only #{action} files when you are on a branch", data: { container: 'body' }
elsif blob.lfs_pointer? elsif blob.lfs_pointer?
button_tag label, class: "btn btn-#{btn_class} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' } button_tag label, class: "#{common_classes} disabled has-tooltip", title: "It is not possible to #{action} files that are stored in LFS using the web interface", data: { container: 'body' }
elsif can_modify_blob?(blob, project, ref) elsif can_modify_blob?(blob, project, ref)
button_tag label, class: "btn btn-#{btn_class}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal' button_tag label, class: "#{common_classes}", 'data-target' => "#modal-#{modal_type}-blob", 'data-toggle' => 'modal'
elsif can?(current_user, :fork_project, project) elsif can?(current_user, :fork_project, project)
continue_params = { continue_params = {
to: request.fullpath, to: request.fullpath,
...@@ -62,7 +64,9 @@ module BlobHelper ...@@ -62,7 +64,9 @@ module BlobHelper
} }
fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params) fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
link_to label, fork_path, class: "btn btn-#{btn_class}", method: :post button_tag label,
class: "#{common_classes} js-edit-blob-link-fork-toggler",
data: { action: action, fork_path: fork_path }
end end
end end
......
...@@ -38,10 +38,15 @@ ...@@ -38,10 +38,15 @@
- if current_user - if current_user
= replace_blob_link = replace_blob_link
= delete_blob_link = delete_blob_link
- if current_user - if current_user
.js-file-fork-suggestion-section.file-fork-suggestion.hidden .js-file-fork-suggestion-section.file-fork-suggestion.hidden
%span.file-fork-suggestion-note %span.file-fork-suggestion-note
You don't have permission to edit this file. Try forking this project to edit the file. You're not allowed to
= link_to 'Fork', fork_path, method: :post, class: 'btn btn-grouped btn-inverted btn-new' %span.js-file-fork-suggestion-section-action
%button.js-cancel-fork-suggestion.btn.btn-grouped{ type: 'button' } edit
files in this project directly. Please fork this project,
make your changes there, and submit a merge request.
= link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button btn btn-grouped btn-inverted btn-new'
%button.js-cancel-fork-suggestion-button.btn.btn-grouped{ type: 'button' }
Cancel Cancel
...@@ -117,6 +117,8 @@ Feature: Project Source Browse Files ...@@ -117,6 +117,8 @@ Feature: Project Source Browse Files
And I click on ".gitignore" file in repo And I click on ".gitignore" file in repo
And I see the ".gitignore" And I see the ".gitignore"
And I click on "Replace" And I click on "Replace"
Then I should see a Fork/Cancel combo
And I click button "Fork"
Then I should see a notice about a new fork having been created Then I should see a notice about a new fork having been created
When I click on "Replace" When I click on "Replace"
And I replace it with a text file And I replace it with a text file
...@@ -265,6 +267,8 @@ Feature: Project Source Browse Files ...@@ -265,6 +267,8 @@ Feature: Project Source Browse Files
And I click on ".gitignore" file in repo And I click on ".gitignore" file in repo
And I see the ".gitignore" And I see the ".gitignore"
And I click on "Delete" And I click on "Delete"
Then I should see a Fork/Cancel combo
And I click button "Fork"
Then I should see a notice about a new fork having been created Then I should see a notice about a new fork having been created
When I click on "Delete" When I click on "Delete"
And I fill the commit message And I fill the commit message
......
...@@ -377,7 +377,6 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps ...@@ -377,7 +377,6 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
step 'I should see a Fork/Cancel combo' do step 'I should see a Fork/Cancel combo' do
expect(page).to have_link 'Fork' expect(page).to have_link 'Fork'
expect(page).to have_button 'Cancel' expect(page).to have_button 'Cancel'
expect(page).to have_content 'You don\'t have permission to edit this file. Try forking this project to edit the file.'
end end
step 'I should see a notice about a new fork having been created' do step 'I should see a notice about a new fork having been created' do
......
import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
describe('BlobForkSuggestion', () => {
let blobForkSuggestion;
const openButtons = [document.createElement('div')];
const forkButtons = [document.createElement('a')];
const cancelButtons = [document.createElement('div')];
const suggestionSections = [document.createElement('div')];
const actionTextPieces = [document.createElement('div')];
beforeEach(() => {
blobForkSuggestion = new BlobForkSuggestion({
openButtons,
forkButtons,
cancelButtons,
suggestionSections,
actionTextPieces,
});
});
afterEach(() => {
blobForkSuggestion.destroy();
});
it('showSuggestionSection', () => {
blobForkSuggestion.showSuggestionSection('/foo', 'foo');
expect(suggestionSections[0].classList.contains('hidden')).toEqual(false);
expect(forkButtons[0].getAttribute('href')).toEqual('/foo');
expect(actionTextPieces[0].textContent).toEqual('foo');
});
it('hideSuggestionSection', () => {
blobForkSuggestion.hideSuggestionSection();
expect(suggestionSections[0].classList.contains('hidden')).toEqual(true);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment