Merge branch '332734-fix-errors-and-drag-drop-in-uploadblobmodal-component' into 'master'

Fix errors and drag&drop in UploadBlobModal component

See merge request gitlab-org/gitlab!71082

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

@@ -220,6 +220,7 @@ export default {
         class="gl-h-200! gl-mb-4"
         single-file-selection
         :valid-file-mimetypes="$options.validFileMimetypes"
+        :is-file-valid="() => true"
         @change="setFile"
       >
         <div

app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue

@@ -45,7 +45,7 @@ export default {
   data() {
     return {
       dragCounter: 0,
-      isDragDataValid: false,
+      isDragDataValid: true,
     };
   },
   computed: {

spec/features/projects/files/user_uploads_files_spec.rb

@@ -19,13 +19,15 @@ RSpec.describe 'Projects > Files > User uploads files' do
       wait_for_requests
     end
 
-    include_examples 'it uploads and commits a new text file'
+    [true, false].each do |value|
+      include_examples 'it uploads and commits a new text file', drop: value
 
-    include_examples 'it uploads and commits a new image file'
+      include_examples 'it uploads and commits a new image file', drop: value
 
-    include_examples 'it uploads and commits a new pdf file'
+      include_examples 'it uploads and commits a new pdf file', drop: value
 
-    include_examples 'it uploads a file to a sub-directory'
+      include_examples 'it uploads a file to a sub-directory', drop: value
+    end
   end
 
   context 'when a user does not have write access' do
@@ -35,6 +37,8 @@ RSpec.describe 'Projects > Files > User uploads files' do
       visit(project_tree_path(project2))
     end
 
-    include_examples 'it uploads and commits a new file to a forked project'
+    [true, false].each do |value|
+      include_examples 'it uploads and commits a new file to a forked project', drop: value
+    end
   end
 end

spec/features/projects/show/user_uploads_files_spec.rb

@@ -21,13 +21,15 @@ RSpec.describe 'Projects > Show > User uploads files' do
       wait_for_requests
     end
 
-    include_examples 'it uploads and commits a new text file'
+    [true, false].each do |value|
+      include_examples 'it uploads and commits a new text file', drop: value
 
-    include_examples 'it uploads and commits a new image file'
+      include_examples 'it uploads and commits a new image file', drop: value
 
-    include_examples 'it uploads and commits a new pdf file'
+      include_examples 'it uploads and commits a new pdf file', drop: value
 
-    include_examples 'it uploads a file to a sub-directory'
+      include_examples 'it uploads a file to a sub-directory', drop: value
+    end
   end
 
   context 'when a user does not have write access' do
@@ -37,7 +39,9 @@ RSpec.describe 'Projects > Show > User uploads files' do
       visit(project_path(project2))
     end
 
-    include_examples 'it uploads and commits a new file to a forked project'
+    [true, false].each do |value|
+      include_examples 'it uploads and commits a new file to a forked project', drop: value
+    end
   end
 
   context 'when in the empty_repo_upload experiment' do
@@ -50,13 +54,17 @@ RSpec.describe 'Projects > Show > User uploads files' do
     context 'with an empty repo' do
       let(:project) { create(:project, :empty_repo, creator: user) }
 
-      include_examples 'uploads and commits a new text file via "upload file" button'
+      [true, false].each do |value|
+        include_examples 'uploads and commits a new text file via "upload file" button', drop: value
+      end
     end
 
     context 'with a nonempty repo' do
       let(:project) { create(:project, :repository, creator: user) }
 
-      include_examples 'uploads and commits a new text file via "upload file" button'
+      [true, false].each do |value|
+        include_examples 'uploads and commits a new text file via "upload file" button', drop: value
+      end
     end
   end
 end

spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap

@@ -45,6 +45,7 @@ exports[`Upload dropzone component correctly overrides description and drop mess
     >
       <div
         class="mw-50 gl-text-center"
+        style="display: none;"
       >
         <h3
           class=""
@@ -61,7 +62,6 @@ exports[`Upload dropzone component correctly overrides description and drop mess
        
       <div
         class="mw-50 gl-text-center"
-        style="display: none;"
       >
         <h3
           class=""
@@ -146,7 +146,6 @@ exports[`Upload dropzone component when dragging renders correct template when d
        
       <div
         class="mw-50 gl-text-center"
-        style=""
       >
         <h3
           class=""
@@ -231,7 +230,6 @@ exports[`Upload dropzone component when dragging renders correct template when d
        
       <div
         class="mw-50 gl-text-center"
-        style=""
       >
         <h3
           class=""
@@ -299,6 +297,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
     >
       <div
         class="mw-50 gl-text-center"
+        style=""
       >
         <h3
           class=""
@@ -383,6 +382,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
     >
       <div
         class="mw-50 gl-text-center"
+        style=""
       >
         <h3
           class=""
@@ -467,6 +467,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
     >
       <div
         class="mw-50 gl-text-center"
+        style=""
       >
         <h3
           class=""
@@ -551,6 +552,7 @@ exports[`Upload dropzone component when no slot provided renders default dropzon
     >
       <div
         class="mw-50 gl-text-center"
+        style="display: none;"
       >
         <h3
           class=""
@@ -567,7 +569,6 @@ exports[`Upload dropzone component when no slot provided renders default dropzon
        
       <div
         class="mw-50 gl-text-center"
-        style="display: none;"
       >
         <h3
           class=""
@@ -603,6 +604,7 @@ exports[`Upload dropzone component when slot provided renders dropzone with slot
     >
       <div
         class="mw-50 gl-text-center"
+        style="display: none;"
       >
         <h3
           class=""
@@ -619,7 +621,6 @@ exports[`Upload dropzone component when slot provided renders dropzone with slot
        
       <div
         class="mw-50 gl-text-center"
-        style="display: none;"
       >
         <h3
           class=""

spec/support/shared_examples/features/project_upload_files_shared_examples.rb

 # frozen_string_literal: true
 
-RSpec.shared_examples 'it uploads and commits a new text file' do
+RSpec.shared_examples 'it uploads and commits a new text file' do |drop: false|
   it 'uploads and commits a new text file', :js do
     find('.add-to-tree').click
 
@@ -10,7 +10,11 @@ RSpec.shared_examples 'it uploads and commits a new text file' do
       wait_for_requests
     end
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    end
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -32,7 +36,7 @@ RSpec.shared_examples 'it uploads and commits a new text file' do
   end
 end
 
-RSpec.shared_examples 'it uploads and commits a new image file' do
+RSpec.shared_examples 'it uploads and commits a new image file' do |drop: false|
   it 'uploads and commits a new image file', :js do
     find('.add-to-tree').click
 
@@ -42,7 +46,11 @@ RSpec.shared_examples 'it uploads and commits a new image file' do
       wait_for_requests
     end
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'), make_visible: true)
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'logo_sample.svg'), make_visible: true)
+    end
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -58,7 +66,7 @@ RSpec.shared_examples 'it uploads and commits a new image file' do
   end
 end
 
-RSpec.shared_examples 'it uploads and commits a new pdf file' do
+RSpec.shared_examples 'it uploads and commits a new pdf file' do |drop: false|
   it 'uploads and commits a new pdf file', :js do
     find('.add-to-tree').click
 
@@ -68,7 +76,11 @@ RSpec.shared_examples 'it uploads and commits a new pdf file' do
       wait_for_requests
     end
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'git-cheat-sheet.pdf'), make_visible: true)
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'git-cheat-sheet.pdf'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'git-cheat-sheet.pdf'), make_visible: true)
+    end
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -84,7 +96,7 @@ RSpec.shared_examples 'it uploads and commits a new pdf file' do
   end
 end
 
-RSpec.shared_examples 'it uploads and commits a new file to a forked project' do
+RSpec.shared_examples 'it uploads and commits a new file to a forked project' do |drop: false|
   let(:fork_message) do
     "You're not allowed to make changes to this project directly. "\
     "A fork of this project has been created that you can make changes in, so you can submit a merge request."
@@ -100,7 +112,12 @@ RSpec.shared_examples 'it uploads and commits a new file to a forked project' do
 
     find('.add-to-tree').click
     click_link('Upload file')
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    end
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -123,7 +140,7 @@ RSpec.shared_examples 'it uploads and commits a new file to a forked project' do
   end
 end
 
-RSpec.shared_examples 'it uploads a file to a sub-directory' do
+RSpec.shared_examples 'it uploads a file to a sub-directory' do |drop: false|
   it 'uploads a file to a sub-directory', :js do
     click_link 'files'
 
@@ -133,7 +150,12 @@ RSpec.shared_examples 'it uploads a file to a sub-directory' do
 
     find('.add-to-tree').click
     click_link('Upload file')
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    end
 
     page.within('#modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')
@@ -150,11 +172,15 @@ RSpec.shared_examples 'it uploads a file to a sub-directory' do
   end
 end
 
-RSpec.shared_examples 'uploads and commits a new text file via "upload file" button' do
+RSpec.shared_examples 'uploads and commits a new text file via "upload file" button' do |drop: false|
   it 'uploads and commits a new text file via "upload file" button', :js do
     find('[data-testid="upload-file-button"]').click
 
-    attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    if drop
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+    else
+      attach_file('upload_file', File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'), make_visible: true)
+    end
 
     page.within('#details-modal-upload-blob') do
       fill_in(:commit_message, with: 'New commit message')