Resolve "Design view: Download single issue design image"

changelogs/unreleased/34377-design-view-download-single-issue-design-image.yml

+---
+title: 'Resolve Design view: Download single issue design image'
+merge_request: 20703
+author:
+type: added

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

@@ -2,6 +2,7 @@
 import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { GlButton } from '@gitlab/ui';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
 import permissionsQuery from '../../graphql/queries/permissions.query.graphql';
@@ -12,6 +13,7 @@ export default {
     Icon,
     Pagination,
     DeleteButton,
+    GlButton,
   },
   mixins: [timeagoMixin],
   props: {
@@ -23,7 +25,7 @@ export default {
       type: Boolean,
       required: true,
     },
-    name: {
+    filename: {
       type: String,
       required: false,
       default: '',
@@ -42,6 +44,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    image: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -99,10 +105,13 @@ export default {
       <icon :size="18" name="close" />
     </router-link>
     <div class="overflow-hidden d-flex align-items-center">
-      <h2 class="m-0 str-truncated-100">{{ name }}</h2>
+      <h2 class="m-0 str-truncated-100">{{ filename }}</h2>
       <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
     </div>
     <pagination :id="id" class="ml-auto flex-shrink-0" />
+    <gl-button :href="image" class="mr-2">
+      <icon :size="18" name="download" />
+    </gl-button>
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
       :is-deleting="isDeleting"

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

@@ -200,10 +200,8 @@ export default {
             <toolbar
               :id="id"
               :is-deleting="loading"
-              :name="design.filename"
-              :updated-at="design.updatedAt"
-              :updated-by="design.updatedBy"
               :is-latest-version="isLatestVersion"
+              v-bind="design"
               @delete="mutate()"
             />
           </template>

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

@@ -35,6 +35,16 @@ exports[`Design management toolbar component renders design and updated data 1`]
     id="1"
   />
    
+  <glbutton-stub
+    class="mr-2"
+    href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
+  >
+    <icon-stub
+      name="download"
+      size="18"
+    />
+  </glbutton-stub>
+   
   <deletebutton-stub
     buttonclass=""
     buttonvariant="danger"

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

@@ -2,6 +2,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import Toolbar from 'ee/design_management/components/toolbar/index.vue';
 import DeleteButton from 'ee/design_management/components/delete_button.vue';
+import { GlButton } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -34,11 +35,12 @@ describe('Design management toolbar component', () => {
         isLatestVersion: true,
         isLoading,
         isDeleting: false,
-        name: 'test.jpg',
+        filename: 'test.jpg',
         updatedAt: updatedAt.toString(),
         updatedBy: {
           name: 'Test Name',
         },
+        image: '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
         ...props,
       },
       stubs: {
@@ -110,4 +112,10 @@ describe('Design management toolbar component', () => {
       expect(wrapper.emitted().delete).toBeTruthy();
     });
   });
+
+  it('renders download button with correct link', () => {
+    expect(wrapper.find(GlButton).attributes('href')).toBe(
+      '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
+    );
+  });
 });