Merge branch 'fix-vue-order-in-components-design_management' into 'master'

Fix component option order in design_management

See merge request gitlab-org/gitlab!51361

app/assets/javascripts/design_management/components/design_destroyer.vue

@@ -8,12 +8,6 @@ export default {
   components: {
     ApolloMutation,
   },
-  props: {
-    filenames: {
-      type: Array,
-      required: true,
-    },
-  },
   inject: {
     projectPath: {
       default: '',
@@ -23,6 +17,12 @@ export default {
       defaut: '',
     },
   },
+  props: {
+    filenames: {
+      type: Array,
+      required: true,
+    },
+  },
   computed: {
     projectQueryBody() {
       return {

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -21,6 +21,14 @@ export default {
     DesignTodoButton,
   },
   mixins: [glFeatureFlagsMixin()],
+  inject: {
+    projectPath: {
+      default: '',
+    },
+    issueIid: {
+      default: '',
+    },
+  },
   props: {
     design: {
       type: Object,
@@ -41,14 +49,6 @@ export default {
       discussionWithOpenForm: '',
     };
   },
-  inject: {
-    projectPath: {
-      default: '',
-    },
-    issueIid: {
-      default: '',
-    },
-  },
   computed: {
     discussions() {
       return extractDiscussions(this.design.discussions);

app/assets/javascripts/design_management/components/design_todo_button.vue

@@ -13,12 +13,6 @@ export default {
     TodoButton,
   },
   mixins: [allVersionsMixin],
-  props: {
-    design: {
-      type: Object,
-      required: true,
-    },
-  },
   inject: {
     projectPath: {
       default: '',
@@ -27,6 +21,12 @@ export default {
       default: '',
     },
   },
+  props: {
+    design: {
+      type: Object,
+      required: true,
+    },
+  },
   data() {
     return {
       todoLoading: false,

app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -18,6 +18,14 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
+  inject: {
+    projectPath: {
+      default: '',
+    },
+    issueIid: {
+      default: '',
+    },
+  },
   props: {
     id: {
       type: String,
@@ -58,14 +66,6 @@ export default {
       },
     };
   },
-  inject: {
-    projectPath: {
-      default: '',
-    },
-    issueIid: {
-      default: '',
-    },
-  },
   apollo: {
     permissions: {
       query: permissionsQuery,

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

@@ -57,6 +57,27 @@ export default {
     DesignSidebar,
   },
   mixins: [allVersionsMixin, glFeatureFlagsMixin()],
+  beforeRouteUpdate(to, from, next) {
+    // reset scale when the active design changes
+    this.scale = DEFAULT_SCALE;
+    next();
+  },
+  beforeRouteEnter(to, from, next) {
+    const pageEl = getPageLayoutElement();
+    if (pageEl) {
+      pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+    }
+
+    next();
+  },
+  beforeRouteLeave(to, from, next) {
+    const pageEl = getPageLayoutElement();
+    if (pageEl) {
+      pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+    }
+
+    next();
+  },
   props: {
     id: {
       type: String,
@@ -161,11 +182,6 @@ export default {
   beforeDestroy() {
     Mousetrap.unbind('esc', this.closeDesign);
   },
-  beforeRouteUpdate(to, from, next) {
-    // reset scale when the active design changes
-    this.scale = DEFAULT_SCALE;
-    next();
-  },
   methods: {
     addImageDiffNoteToStore(store, { data: { createImageDiffNote } }) {
       updateStoreAfterAddImageDiffNote(
@@ -296,22 +312,6 @@ export default {
       this.resolvedDiscussionsExpanded = !this.resolvedDiscussionsExpanded;
     },
   },
-  beforeRouteEnter(to, from, next) {
-    const pageEl = getPageLayoutElement();
-    if (pageEl) {
-      pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
-    }
-
-    next();
-  },
-  beforeRouteLeave(to, from, next) {
-    const pageEl = getPageLayoutElement();
-    if (pageEl) {
-      pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
-    }
-
-    next();
-  },
   createImageDiffNoteMutation,
   DESIGNS_ROUTE_NAME,
 };

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

@@ -72,6 +72,10 @@ export default {
       update: (data) => data.project.issue.userPermissions,
     },
   },
+  beforeRouteUpdate(to, from, next) {
+    this.selectedDesigns = [];
+    next();
+  },
   data() {
     return {
       permissions: {
@@ -324,10 +328,6 @@ export default {
       this.reorderedDesigns = designs;
     },
   },
-  beforeRouteUpdate(to, from, next) {
-    this.selectedDesigns = [];
-    next();
-  },
   dragOptions: {
     animation: 200,
     ghostClass: 'gl-visibility-hidden',