Update design mgmt navigation to gl-button

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39104

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

@@ -95,11 +95,9 @@ export default {
       :category="buttonCategory"
       :size="buttonSize"
       :class="buttonClass"
-      :disabled="isDeleting || !hasSelectedDesigns"
       :loading="loading"
       :icon="buttonIcon"
-    >
-      <slot></slot>
-    </gl-button>
+      :disabled="isDeleting || !hasSelectedDesigns"
+    />
   </div>
 </template>

app/assets/javascripts/design_management/components/toolbar/pagination.vue → app/assets/javascripts/design_management/components/toolbar/design_navigation.vue

 <script>
 /* global Mousetrap */
 import 'mousetrap';
+import { GlButton, GlButtonGroup } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
-import PaginationButton from './pagination_button.vue';
 import allDesignsMixin from '../../mixins/all_designs';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
-    PaginationButton,
+    GlButton,
+    GlButtonGroup,
   },
   mixins: [allDesignsMixin],
   props: {
@@ -31,12 +32,12 @@ export default {
       });
     },
     previousDesign() {
-      if (!this.designsCount) return null;
+      if (this.currentIndex === 0) return null;
 
       return this.designs[this.currentIndex - 1];
     },
     nextDesign() {
-      if (!this.designsCount) return null;
+      if (this.currentIndex + 1 === this.designsCount) return null;
 
       return this.designs[this.currentIndex + 1];
     },
@@ -65,19 +66,21 @@ export default {
 <template>
   <div v-if="designsCount" class="d-flex align-items-center">
     {{ paginationText }}
-    <div class="btn-group gl-ml-3">
-      <pagination-button
-        :design="previousDesign"
+    <gl-button-group class="ml-3 mr-3">
+      <gl-button
+        :disabled="!previousDesign"
         :title="s__('DesignManagement|Go to previous design')"
-        icon-name="angle-left"
+        icon="angle-left"
         class="js-previous-design"
+        @click="navigateToDesign(previousDesign)"
       />
-      <pagination-button
-        :design="nextDesign"
+      <gl-button
+        :disabled="!nextDesign"
         :title="s__('DesignManagement|Go to next design')"
-        icon-name="angle-right"
+        icon="angle-right"
         class="js-next-design"
+        @click="navigateToDesign(nextDesign)"
       />
-    </div>
+    </gl-button-group>
   </div>
 </template>

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

@@ -2,17 +2,17 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import Pagination from './pagination.vue';
+import DesignNavigation from './design_navigation.vue';
 import DeleteButton from '../delete_button.vue';
 import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
+    GlButton,
     GlIcon,
-    Pagination,
+    DesignNavigation,
     DeleteButton,
-    GlButton,
   },
   mixins: [timeagoMixin],
   props: {
@@ -111,19 +111,16 @@ export default {
         <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
       </div>
     </div>
-
-    <div class="gl-display-flex gl-align-items-center">
-      <pagination :id="id" class="gl-mr-3 gl-flex-shrink-0" />
-      <gl-button :href="image" icon="download" />
-      <delete-button
-        v-if="isLatestVersion && canDeleteDesign"
-        class="gl-ml-3"
-        :is-deleting="isDeleting"
-        button-variant="warning"
-        button-icon="archive"
-        button-category="secondary"
-        @deleteSelectedDesigns="$emit('delete')"
-      />
-    </div>
+    <design-navigation :id="id" class="ml-auto flex-shrink-0" />
+    <gl-button :href="image" icon="download" />
+    <delete-button
+      v-if="isLatestVersion && canDeleteDesign"
+      class="gl-ml-3"
+      :is-deleting="isDeleting"
+      button-variant="warning"
+      button-icon="archive"
+      button-category="secondary"
+      @deleteSelectedDesigns="$emit('delete')"
+    />
   </header>
 </template>

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

-<script>
-import Icon from '~/vue_shared/components/icon.vue';
-import { DESIGN_ROUTE_NAME } from '../../router/constants';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    design: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    iconName: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    designLink() {
-      if (!this.design) return {};
-
-      return {
-        name: DESIGN_ROUTE_NAME,
-        params: { id: this.design.filename },
-        query: this.$route.query,
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <router-link
-    :to="designLink"
-    :disabled="!design"
-    :class="{ disabled: !design }"
-    :aria-label="title"
-    class="btn btn-default"
-  >
-    <icon :name="iconName" />
-  </router-link>
-</template>

changelogs/unreleased/230477-design-pagination-2.yml

+---
+title: Update design mgmt navigation to use gl-button
+merge_request: 39104
+author:
+type: changed

spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap → spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap

@@ -2,28 +2,34 @@
 
 exports[`Design management pagination component hides components when designs are empty 1`] = `<!---->`;
 
-exports[`Design management pagination component renders pagination buttons 1`] = `
+exports[`Design management pagination component renders navigation buttons 1`] = `
 <div
   class="d-flex align-items-center"
 >
   
   0 of 2
   
-  <div
-    class="btn-group gl-ml-3"
+  <gl-button-group-stub
+    class="ml-3 mr-3"
   >
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-previous-design"
-      iconname="angle-left"
+      disabled="true"
+      icon="angle-left"
+      size="medium"
       title="Go to previous design"
+      variant="default"
     />
      
-    <pagination-button-stub
+    <gl-button-stub
+      category="primary"
       class="js-next-design"
-      design="[object Object]"
-      iconname="angle-right"
+      icon="angle-right"
+      size="medium"
       title="Go to next design"
+      variant="default"
     />
-  </div>
+  </gl-button-group-stub>
 </div>
 `;

spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -35,31 +35,27 @@ exports[`Design management toolbar component renders design and updated data 1`]
     </div>
   </div>
    
-  <div
-    class="gl-display-flex gl-align-items-center"
-  >
-    <pagination-stub
-      class="gl-mr-3 gl-flex-shrink-0"
-      id="1"
-    />
-     
-    <gl-button-stub
-      category="primary"
-      href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
-      icon="download"
-      size="medium"
-      variant="default"
-    />
-     
-    <delete-button-stub
-      buttoncategory="secondary"
-      buttonclass=""
-      buttonicon="archive"
-      buttonsize="medium"
-      buttonvariant="warning"
-      class="gl-ml-3"
-      hasselecteddesigns="true"
-    />
-  </div>
+  <design-navigation-stub
+    class="ml-auto flex-shrink-0"
+    id="1"
+  />
+   
+  <gl-button-stub
+    category="primary"
+    href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
+    icon="download"
+    size="medium"
+    variant="default"
+  />
+   
+  <delete-button-stub
+    buttoncategory="secondary"
+    buttonclass=""
+    buttonicon="archive"
+    buttonsize="medium"
+    buttonvariant="warning"
+    class="gl-ml-3"
+    hasselecteddesigns="true"
+  />
 </header>
 `;

spec/frontend/design_management/components/toolbar/__snapshots__/pagination_button_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Design management pagination button component disables button when no design is passed 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default disabled"
-  disabled="true"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;
-
-exports[`Design management pagination button component renders router-link 1`] = `
-<router-link-stub
-  aria-label="Test title"
-  class="btn btn-default"
-  to="[object Object]"
->
-  <icon-stub
-    name="angle-right"
-    size="16"
-  />
-</router-link-stub>
-`;

spec/frontend/design_management/components/toolbar/pagination_spec.js → spec/frontend/design_management/components/toolbar/design_navigation_spec.js

 /* global Mousetrap */
 import 'mousetrap';
 import { shallowMount } from '@vue/test-utils';
-import Pagination from '~/design_management/components/toolbar/pagination.vue';
+import DesignNavigation from '~/design_management/components/toolbar/design_navigation.vue';
 import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 
 const push = jest.fn();
@@ -18,7 +18,7 @@ describe('Design management pagination component', () => {
   let wrapper;
 
   function createComponent() {
-    wrapper = shallowMount(Pagination, {
+    wrapper = shallowMount(DesignNavigation, {
       propsData: {
         id: '2',
       },
@@ -41,7 +41,7 @@ describe('Design management pagination component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders pagination buttons', () => {
+  it('renders navigation buttons', () => {
     wrapper.setData({
       designs: [{ id: '1' }, { id: '2' }],
     });

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

-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
-import PaginationButton from '~/design_management/components/toolbar/pagination_button.vue';
-import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
-
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
-
-describe('Design management pagination button component', () => {
-  let wrapper;
-
-  function createComponent(design = null) {
-    wrapper = shallowMount(PaginationButton, {
-      localVue,
-      router,
-      propsData: {
-        design,
-        title: 'Test title',
-        iconName: 'angle-right',
-      },
-      stubs: ['router-link'],
-    });
-  }
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('disables button when no design is passed', () => {
-    createComponent();
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('renders router-link', () => {
-    createComponent({ id: '2' });
-
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('designLink', () => {
-    it('returns empty link when design is null', () => {
-      createComponent();
-
-      expect(wrapper.vm.designLink).toEqual({});
-    });
-
-    it('returns design link', () => {
-      createComponent({ id: '2', filename: 'test' });
-
-      wrapper.vm.$router.replace('/root/test-project/issues/1/designs/test?version=1');
-
-      expect(wrapper.vm.designLink).toEqual({
-        name: DESIGN_ROUTE_NAME,
-        params: { id: 'test' },
-        query: { version: '1' },
-      });
-    });
-  });
-});