Merge branch '118604-design-view-left-right-keyboard-arrows-through-designs' into 'master'

Resolve "Design View: Left/Right keyboard arrows through Designs"

See merge request gitlab-org/gitlab!22870

changelogs/unreleased/118604-design-view-left-right-keyboard-arrows-through-designs.yml

+---
+title: 'Resolve Design View: Left/Right keyboard arrows through Designs'
+merge_request: 22870
+author:
+type: added

doc/user/project/issues/design_management.md

@@ -71,6 +71,8 @@ Designs cannot be added if the issue has been moved, or its
 ## Viewing designs
 
 Images on the Design Management page can be enlarged by clicking on them.
+You can navigate through designs by clicking on the navigation buttons on the
+top-right corner or with <kbd>Left</kbd>/<kbd>Right</kbd> keyboard buttons.
 
 The number of comments on a design — if any — is listed to the right
 of the design filename. Clicking on this number enlarges the design

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

 <script>
+/* global Mousetrap */
+import 'mousetrap';
 import { s__, sprintf } from '~/locale';
 import PaginationButton from './pagination_button.vue';
 import allDesignsMixin from '../../mixins/all_designs';
@@ -38,6 +40,24 @@ export default {
       return this.designs[this.currentIndex + 1];
     },
   },
+  mounted() {
+    Mousetrap.bind('left', () => this.navigateToDesign(this.previousDesign));
+    Mousetrap.bind('right', () => this.navigateToDesign(this.nextDesign));
+  },
+  beforeDestroy() {
+    Mousetrap.unbind(['left', 'right'], this.navigateToDesign);
+  },
+  methods: {
+    navigateToDesign(design) {
+      if (design) {
+        this.$router.push({
+          name: 'design',
+          params: { id: design.filename },
+          query: this.$route.query,
+        });
+      }
+    },
+  },
 };
 </script>
 

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

+/* global Mousetrap */
+import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
 import Pagination from 'ee/design_management/components/toolbar/pagination.vue';
 
+const push = jest.fn();
+const $router = {
+  push,
+};
+
+const $route = {
+  path: '/designs/design-2',
+  query: {},
+};
+
 describe('Design management pagination component', () => {
   let wrapper;
 
@@ -9,6 +21,10 @@ describe('Design management pagination component', () => {
       propsData: {
         id: '2',
       },
+      mocks: {
+        $router,
+        $route,
+      },
     });
   }
 
@@ -33,4 +49,30 @@ describe('Design management pagination component', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
   });
+
+  describe('keyboard buttons navigation', () => {
+    beforeEach(() => {
+      wrapper.setData({
+        designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }],
+      });
+    });
+
+    it('routes to previous design on Left button', () => {
+      Mousetrap.trigger('left');
+      expect(push).toHaveBeenCalledWith({
+        name: 'design',
+        params: { id: '1' },
+        query: {},
+      });
+    });
+
+    it('routes to next design on Right button', () => {
+      Mousetrap.trigger('right');
+      expect(push).toHaveBeenCalledWith({
+        name: 'design',
+        params: { id: '3' },
+        query: {},
+      });
+    });
+  });
 });