Merge branch '214470-allow-multiple-screenshots-to-be-uploaded-in-copy-paste' into 'master'

Resolve "Allow multiple screenshots to be uploaded in copy paste"

See merge request gitlab-org/gitlab!30152

doc/user/project/issues/design_management.md

@@ -86,6 +86,7 @@ Copy-and-pasting has some limitations:
 
 - You can paste only one image at a time. When copy/pasting multiple files, only the first one will be uploaded.
 - All images will be converted to `png` format under the hood, so when you want to copy/paste `gif` file, it will result in broken animation.
+- If you are pasting a screenshot from the clipboard, it will be renamed to `design_<timestamp>.png`
 - Copy/pasting designs is not supported on Internet Explorer.
 
 Designs with the same filename as an existing uploaded design will create a new version

ee/app/assets/javascripts/design_management/pages/index.vue

@@ -230,7 +230,10 @@ export default {
           return;
         }
         event.preventDefault();
-        const filename = getFilename(event) || 'image.png';
+        let filename = getFilename(event);
+        if (!filename || filename === 'image.png') {
+          filename = `design_${Date.now()}.png`;
+        }
         const newFile = new File([files[0]], filename);
         this.onUploadDesign([newFile]);
       }

ee/changelogs/unreleased/214470-allow-multiple-screenshots-to-be-uploaded-in-copy-paste.yml

+---
+title: Resolve Allow multiple screenshots to be uploaded in copy paste
+merge_request: 30152
+author:
+type: changed

ee/spec/frontend/design_management/pages/index_spec.js

@@ -505,6 +505,20 @@ describe('Design management index page', () => {
       ]);
     });
 
+    it('renames a design if it has an image.png filename', () => {
+      event.clipboardData = {
+        files: [{ name: 'image.png', type: 'image/png' }],
+        getData: () => 'image.png',
+      };
+
+      document.dispatchEvent(event);
+
+      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledTimes(1);
+      expect(wrapper.vm.onUploadDesign).toHaveBeenCalledWith([
+        new File([{ name: 'image.png' }], `design_${Date.now()}.png`),
+      ]);
+    });
+
     it('does not call onUploadDesign with invalid paste', () => {
       event.clipboardData = {
         items: [{ type: 'text/plain' }, { type: 'text' }],