Merge branch 'ntepluhina-stop-reusing-design' into 'master'

Stop reusing design component on route change

See merge request gitlab-org/gitlab!32447

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

@@ -156,6 +156,9 @@ export default {
   },
   mounted() {
     Mousetrap.bind('esc', this.closeDesign);
+    this.trackEvent();
+    // We need to reset the active discussion when opening a new design
+    this.updateActiveDiscussion();
   },
   beforeDestroy() {
     Mousetrap.unbind('esc', this.closeDesign);
@@ -279,23 +282,6 @@ export default {
       });
     },
   },
-  beforeRouteEnter(to, from, next) {
-    next(vm => {
-      vm.trackEvent();
-    });
-  },
-  beforeRouteUpdate(to, from, next) {
-    this.trackEvent();
-    this.closeCommentForm();
-    // We need to reset the active discussion when opening a new design
-    this.updateActiveDiscussion();
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    // We need to reset the active discussion when moving to design list view
-    this.updateActiveDiscussion();
-    next();
-  },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
 };

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

@@ -318,6 +318,6 @@ export default {
         </li>
       </ol>
     </div>
-    <router-view />
+    <router-view :key="$route.fullPath" />
   </div>
 </template>

spec/frontend/design_management/router_spec.js

@@ -33,6 +33,7 @@ function factory(routeArg) {
           design: { loading: true },
           permissions: { loading: true },
         },
+        mutate: jest.fn(),
       },
     },
   });