Fixed design detail pages not opening

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -42,7 +42,7 @@ export default {
 
 <template>
   <router-link
-    :to="{ name: 'design', params: { id } }"
+    :to="{ name: 'design', params: { id: name } }"
     class="card cursor-pointer text-plain js-design-list-item"
   >
     <div class="card-body p-0">

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

@@ -14,7 +14,7 @@ export default {
   mixins: [timeagoMixin],
   props: {
     id: {
-      type: Number,
+      type: String,
       required: true,
     },
     isLoading: {

ee/app/assets/javascripts/design_management/components/toolbar/pagination.vue

@@ -12,7 +12,7 @@ export default {
   mixins: [allDesignsMixin],
   props: {
     id: {
-      type: Number,
+      type: String,
       required: true,
     },
   },
@@ -21,7 +21,7 @@ export default {
       return this.designs.length;
     },
     currentIndex() {
-      return this.designs.findIndex(design => parseInt(design.id, 10) === this.id);
+      return this.designs.findIndex(design => design.filename === this.id);
     },
     paginationText() {
       return sprintf(s__('DesignManagement|%{current_design} of %{designs_count}'), {

ee/app/assets/javascripts/design_management/components/toolbar/pagination_button.vue

@@ -24,7 +24,7 @@ export default {
     designLink() {
       if (!this.design) return {};
 
-      return { name: 'design', params: { id: this.design.id } };
+      return { name: 'design', params: { id: this.design.filename } };
     },
   },
 };

ee/app/assets/javascripts/design_management/graphql.js

@@ -15,9 +15,8 @@ const defaultClient = createDefaultClient({
         variables: { fullPath: projectPath, iid: issueIid },
       });
 
-      return result.project.issue.designs.designs.edges.find(
-        ({ node }) => parseInt(node.id, 10) === id,
-      ).node;
+      return result.project.issue.designs.designs.edges.find(({ node }) => node.filename === id)
+        .node;
     },
   },
 });

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

@@ -12,7 +12,7 @@ export default {
   },
   props: {
     id: {
-      type: Number,
+      type: String,
       required: true,
     },
   },

ee/app/assets/javascripts/design_management/queries/getDesign.graphql

-query getDesign($id: ID!) {
+query getDesign($id: String!) {
   design(id: $id) @client {
     image
     filename

ee/app/assets/javascripts/design_management/router.js

 import $ from 'jquery';
+import _ from 'underscore';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Home from './pages/index.vue';
@@ -39,9 +40,9 @@ const router = new VueRouter({
             from,
             next,
           ) {
-            if (id > 0) next();
+            if (_.isString(id)) next();
           },
-          props: ({ params: { id } }) => ({ id: parseInt(id, 10) }),
+          props: ({ params: { id } }) => ({ id }),
         },
       ],
     },

ee/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap

@@ -7,20 +7,20 @@ exports[`Design management pagination component renders pagination buttons 1`] =
   class="d-flex align-items-center"
 >
   
-  2 of 2
+  0 of 2
   
   <div
     class="btn-group ml-3"
   >
     <paginationbutton-stub
       class="js-previous-design"
-      design="[object Object]"
       iconname="angle-left"
       title="Go to previous design"
     />
      
     <paginationbutton-stub
       class="js-next-design"
+      design="[object Object]"
       iconname="angle-right"
       title="Go to next design"
     />

ee/spec/frontend/design_management/components/toolbar/index_spec.js

@@ -21,7 +21,7 @@ describe('Design management toolbar component', () => {
 
     vm = shallowMount(Toolbar, {
       propsData: {
-        id: 1,
+        id: '1',
         isLoading,
         name: 'test.jpg',
         updatedAt: updatedAt.toString(),

ee/spec/frontend/design_management/components/toolbar/pagination_button_spec.js

@@ -26,7 +26,7 @@ describe('Design management pagination button component', () => {
   });
 
   it('renders router-link', () => {
-    createComponent({ id: 2 });
+    createComponent({ id: '2' });
 
     expect(vm.element).toMatchSnapshot();
   });
@@ -39,11 +39,11 @@ describe('Design management pagination button component', () => {
     });
 
     it('returns design link', () => {
-      createComponent({ id: 2 });
+      createComponent({ id: '2', filename: 'test' });
 
       expect(vm.vm.designLink).toEqual({
         name: 'design',
-        params: { id: 2 },
+        params: { id: 'test' },
       });
     });
   });

ee/spec/frontend/design_management/components/toolbar/pagination_spec.js

@@ -7,7 +7,7 @@ describe('Design management pagination component', () => {
   function createComponent() {
     vm = shallowMount(Pagination, {
       propsData: {
-        id: 2,
+        id: '2',
       },
     });
   }
@@ -26,7 +26,7 @@ describe('Design management pagination component', () => {
 
   it('renders pagination buttons', () => {
     vm.setData({
-      designs: [{ id: 1 }, { id: 2 }],
+      designs: [{ id: '1' }, { id: '2' }],
     });
 
     expect(vm.element).toMatchSnapshot();

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

@@ -14,7 +14,7 @@ describe('Design management design index page', () => {
     };
 
     vm = shallowMount(DesignIndex, {
-      propsData: { id: 1 },
+      propsData: { id: '1' },
       mocks: { $apollo },
     });
   }

ee/spec/frontend/design_management/router_spec.js

@@ -65,7 +65,7 @@ describe('Design management router', () => {
       const detail = vm.find(DesignDetail);
 
       expect(detail.exists()).toBe(true);
-      expect(detail.props('id')).toEqual(1);
+      expect(detail.props('id')).toEqual('1');
     });
   });
 });