Merge branch '229588-pasting-an-image-into-a-comment-also-uploads-design' into 'master'

Resolve "Pasting an image into a comment also uploads design"

See merge request gitlab-org/gitlab!37171

app/assets/javascripts/design_management_new/pages/index.vue

@@ -246,28 +246,28 @@ export default {
         this.onUploadDesign([newFile]);
       }
     },
-    toggleOnPasteListener(route) {
-      if (route === DESIGNS_ROUTE_NAME) {
+    toggleOnPasteListener() {
       document.addEventListener('paste', this.onDesignPaste);
-      } else {
+    },
+    toggleOffPasteListener() {
       document.removeEventListener('paste', this.onDesignPaste);
-      }
     },
   },
   beforeRouteUpdate(to, from, next) {
-    this.toggleOnPasteListener(to.name);
     this.selectedDesigns = [];
     next();
   },
-  beforeRouteLeave(to, from, next) {
-    this.toggleOnPasteListener(to.name);
-    next();
-  },
 };
 </script>
 
 <template>
-  <div data-testid="designs-root" class="gl-mt-5">
+  <div
+    data-testid="designs-root"
+    class="gl-mt-5"
+    :class="{ 'designs-root': !isDesignListEmpty }"
+    @mouseenter="toggleOnPasteListener"
+    @mouseleave="toggleOffPasteListener"
+  >
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
       <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full">
         <div>

app/assets/stylesheets/components/design_management/design_list_item.scss

+.designs-root {
+  border: 2px dashed transparent;
+  transition: border $gl-transition-duration-medium $general-hover-transition-curve;
+
+  &:hover {
+    border-color: $gray-100;
+  }
+}
+
 .design-list-item {
   height: 280px;
   text-decoration: none;

changelogs/unreleased/229588-pasting-an-image-into-a-comment-also-uploads-design.yml

+---
+title: Resolve Pasting an image into a comment also uploads design
+merge_request: 37171
+author:
+type: fixed

spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
 <div
-  class="gl-mt-5"
+  class="gl-mt-5 designs-root"
   data-testid="designs-root"
 >
   <!---->
@@ -87,7 +87,7 @@ exports[`Design management index page designs does not render toolbar when there
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
 <div
-  class="gl-mt-5"
+  class="gl-mt-5 designs-root"
   data-testid="designs-root"
 >
   <header