Hook up design management backend to frontend

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

@@ -21,7 +21,7 @@ export default {
         :id="design.id"
         :comments-count="design.commentsCount"
         :image="design.image"
-        :name="design.name"
+        :name="design.filename"
         :updated-at="design.updatedAt"
       />
     </li>

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

@@ -10,12 +10,13 @@ export default {
   },
   props: {
     id: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     commentsCount: {
       type: Number,
-      required: true,
+      required: false,
+      default: 0,
     },
     image: {
       type: String,
@@ -27,7 +28,8 @@ export default {
     },
     updatedAt: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   computed: {
@@ -49,7 +51,7 @@ export default {
     <div class="card-footer d-flex w-100">
       <div class="d-flex flex-column str-truncated-100">
         <span class="bold str-truncated-100">{{ name }}</span>
-        <span class="str-truncated-100">
+        <span v-if="updatedAt" class="str-truncated-100">
           {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" />
         </span>
       </div>

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

@@ -29,7 +29,7 @@ export default {
     updatedAt: {
       type: String,
       required: false,
-      default: '',
+      default: null,
     },
     updatedBy: {
       type: Object,
@@ -61,7 +61,7 @@ export default {
       <gl-loading-icon v-if="isLoading" size="md" class="mt-2 mb-2" />
       <template v-else>
         <h2 class="m-0">{{ name }}</h2>
-        <small class="text-secondary">{{ updatedText }}</small>
+        <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
       </template>
     </div>
     <pagination :id="id" class="ml-auto" />

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

@@ -2,35 +2,26 @@
 import { s__, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import PaginationButton from './pagination_button.vue';
-import allDesignsQuery from '../../queries/allDesigns.graphql';
+import allDesignsMixin from '../../mixins/all_designs';
 
 export default {
-  apollo: {
-    designs: {
-      query: allDesignsQuery,
-    },
-  },
   components: {
     Icon,
     PaginationButton,
   },
+  mixins: [allDesignsMixin],
   props: {
     id: {
       type: Number,
       required: true,
     },
   },
-  data() {
-    return {
-      designs: [],
-    };
-  },
   computed: {
     designsCount() {
       return this.designs.length;
     },
     currentIndex() {
-      return this.designs.findIndex(design => design.id === this.id);
+      return this.designs.findIndex(design => parseInt(design.id, 10) === this.id);
     },
     paginationText() {
       return sprintf(s__('DesignManagement|%{current_design} of %{designs_count}'), {

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

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import _ from 'underscore';
 import createDefaultClient from '~/lib/graphql';
+import appDataQuery from './queries/appData.graphql';
 import allDesigns from './queries/allDesigns.graphql';
 
 Vue.use(VueApollo);
 
-const createMockDesign = id => ({
-  id: Number(id),
-  image: 'http://via.placeholder.com/1000',
-  name: 'test.jpg',
-  commentsCount: 2,
-  updatedAt: new Date().toString(),
-  updatedBy: {
-    name: 'Test Name',
-    __typename: 'Author',
-  },
-  __typename: 'Design',
-});
-
-const designsStore = [
-  createMockDesign(_.uniqueId()),
-  createMockDesign(_.uniqueId()),
-  createMockDesign(_.uniqueId()),
-  createMockDesign(_.uniqueId()),
-  createMockDesign(_.uniqueId()),
-];
-
 const defaultClient = createDefaultClient({
   Query: {
-    design(ctx, { id }) {
-      return designsStore.find(design => design.id === id);
-    },
-  },
-  Mutation: {
-    uploadDesign(ctx, { files }, { cache }) {
-      const previousDesigns = cache.readQuery({ query: allDesigns });
-      const designs = Array.from(files).map(n => ({
-        ...createMockDesign(_.uniqueId()),
-        name: n.name,
-        commentsCount: 0,
-      }));
-      const data = {
-        designs: designs.concat(previousDesigns.designs),
-      };
-
-      designsStore.unshift(...designs);
-
-      cache.writeQuery({ query: allDesigns, data });
+    design(ctx, { id }, { cache }) {
+      const { projectPath, issueIid } = cache.readQuery({ query: appDataQuery });
+      const result = cache.readQuery({
+        query: allDesigns,
+        variables: { fullPath: projectPath, iid: issueIid },
+      });
 
-      return designs;
-    },
+      return {
+        ...result.project.issue.designs.designs.edges.find(
+          ({ node }) => parseInt(node.id, 10) === id,
+        ).node,
+        // TODO: Remove this once backend exposes raw images
+        image: 'http://via.placeholder.com/1000',
+      };
     },
-});
-
-defaultClient.cache.writeData({
-  data: {
-    designs: designsStore,
   },
 });
 
-defaultClient
-  .watchQuery({
-    query: allDesigns,
-  })
-  .subscribe(({ data: { designs } }) => {
-    const badge = document.querySelector('.js-designs-count');
-
-    if (badge) {
-      badge.textContent = designs.length;
-    }
-  });
-
 export default new VueApollo({
   defaultClient,
 });

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

@@ -3,9 +3,11 @@ import Vue from 'vue';
 import router from './router';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
+import allDesigns from './queries/allDesigns.graphql';
 
 export default () => {
   const el = document.getElementById('js-design-management');
+  const badge = document.querySelector('.js-designs-count');
   const { issueIid, projectPath } = el.dataset;
 
   $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
@@ -23,6 +25,20 @@ export default () => {
     },
   });
 
+  apolloProvider.clients.defaultClient
+    .watchQuery({
+      query: allDesigns,
+      variables: {
+        fullPath: projectPath,
+        iid: issueIid,
+      },
+    })
+    .subscribe(({ data }) => {
+      if (badge) {
+        badge.textContent = data.project.issue.designs.designs.length;
+      }
+    });
+
   return new Vue({
     el,
     router,

ee/app/assets/javascripts/design_management/mixins/all_designs.js

+import appDataQuery from '../queries/appData.graphql';
+import allDesignsQuery from '../queries/allDesigns.graphql';
+
+export default {
+  apollo: {
+    appData: {
+      query: appDataQuery,
+      manual: true,
+      result({ data: { projectPath, issueIid } }) {
+        this.projectPath = projectPath;
+        this.issueIid = issueIid;
+      },
+    },
+    designs: {
+      query: allDesignsQuery,
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          iid: this.issueIid,
+        };
+      },
+      update: data =>
+        data.project.issue.designs.designs.edges.map(({ node }) => ({
+          ...node,
+          // TODO: Remove this once backend exposes raw images
+          image: 'http://via.placeholder.com/1000',
+        })),
+      error() {
+        this.error = true;
+      },
+    },
+  },
+  data() {
+    return {
+      designs: [],
+      error: false,
+      projectPath: '',
+      issueIid: null,
+    };
+  },
+};

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

@@ -50,10 +50,10 @@ export default {
     <toolbar
       :id="id"
       :is-loading="isLoading"
-      :name="design.name"
+      :name="design.filename"
       :updated-at="design.updatedAt"
       :updated-by="design.updatedBy"
     />
-    <design-image :is-loading="isLoading" :image="design.image" :name="design.name" />
+    <design-image :is-loading="isLoading" :image="design.image" :name="design.filename" />
   </div>
 </template>

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

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
+import _ from 'underscore';
 import createFlash from '~/flash';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import DesignList from '../components/list/index.vue';
 import UploadForm from '../components/upload/form.vue';
 import EmptyState from '../components/empty_state.vue';
 import allDesignsQuery from '../queries/allDesigns.graphql';
-import uploadDesignQuery from '../queries/uploadDesign.graphql';
-import appDataQuery from '../queries/appData.graphql';
+import uploadDesignMutation from '../queries/uploadDesign.graphql';
 import permissionsQuery from '../queries/permissions.graphql';
+import allDesignsMixin from '../mixins/all_designs';
+
+const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
 
 export default {
   components: {
@@ -17,21 +20,8 @@ export default {
     UploadForm,
     EmptyState,
   },
+  mixins: [allDesignsMixin],
   apollo: {
-    appData: {
-      query: appDataQuery,
-      manual: true,
-      result({ data: { projectPath, issueIid } }) {
-        this.projectPath = projectPath;
-        this.issueIid = issueIid;
-      },
-    },
-    designs: {
-      query: allDesignsQuery,
-      error() {
-        this.error = true;
-      },
-    },
     permissions: {
       query: permissionsQuery,
       variables() {
@@ -45,14 +35,10 @@ export default {
   },
   data() {
     return {
-      designs: [],
       permissions: {
         createDesign: false,
       },
-      error: false,
       isSaving: false,
-      projectPath: '',
-      issueIid: null,
     };
   },
   computed: {
@@ -73,33 +59,81 @@ export default {
     onUploadDesign(files) {
       if (!this.canCreateDesign) return null;
 
+      if (files.length >= MAXIMUM_FILE_UPLOAD_LIMIT) {
+        createFlash(
+          sprintf(
+            s__(
+              'DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again.',
+            ),
+            {
+              upload_limit: MAXIMUM_FILE_UPLOAD_LIMIT,
+            },
+          ),
+        );
+
+        return null;
+      }
+
       const optimisticResponse = Array.from(files).map(file => ({
         __typename: 'Design',
-        id: -1,
+        id: -_.uniqueId(),
         image: '',
-        name: file.name,
-        commentsCount: 0,
-        updatedAt: new Date().toString(),
+        filename: file.name,
       }));
 
       this.isSaving = true;
 
       return this.$apollo
         .mutate({
-          mutation: uploadDesignQuery,
+          mutation: uploadDesignMutation,
           variables: {
             files,
+            projectPath: this.projectPath,
+            iid: this.issueIid,
+          },
+          update: (store, { data: { designManagementUpload } }) => {
+            const data = store.readQuery({
+              query: allDesignsQuery,
+              variables: { fullPath: this.projectPath, iid: this.issueIid },
+            });
+            const newDesigns = data.project.issue.designs.designs.edges.reduce((acc, design) => {
+              if (!acc.find(d => d.filename === design.node.filename)) {
+                acc.push(design.node);
+              }
+
+              return acc;
+            }, designManagementUpload.designs);
+            const newQueryData = {
+              project: {
+                __typename: 'Project',
+                issue: {
+                  __typename: 'Issue',
+                  designs: {
+                    __typename: 'DesignCollection',
+                    designs: {
+                      __typename: 'DesignConnection',
+                      edges: newDesigns.map(design => ({
+                        __typename: 'DesignEdge',
+                        node: design,
+                      })),
+                    },
+                  },
                 },
-          // update: (store, { data: { uploadDesign } }) => {
-          //   const data = store.readQuery({ query: allDesignsQuery });
-          //   console.log(data, uploadDesign);
+              },
+            };
 
-          //   data.designs.unshift(...uploadDesign);
-          //   store.writeQuery({ query: allDesignsQuery, data });
-          // },
+            store.writeQuery({
+              query: allDesignsQuery,
+              variables: { fullPath: this.projectPath, iid: this.issueIid },
+              data: newQueryData,
+            });
+          },
           optimisticResponse: {
             __typename: 'Mutation',
-            uploadDesign: optimisticResponse,
+            designManagementUpload: {
+              __typename: 'DesignManagementUploadPayload',
+              designs: optimisticResponse,
+            },
           },
         })
         .then(() => {

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

-query allDesigns {
-  designs @client {
-    id
-    image
-    name
-    updatedAt
-    commentsCount
+#import "./designListFragment.graphql"
+
+query allDesigns($fullPath: ID!, $iid: ID!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
+      designs {
+        designs {
+          edges {
+            node {
+              ...DesignListItem
+            }
+          }
+        }
+      }
+    }
   }
 }

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

+fragment DesignListItem on Design {
+  id
+  filename
+}

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

 query getDesign($id: ID!) {
   design(id: $id) @client {
     image
-    name
-    updatedAt
-    updatedBy {
-      name
-    }
+    filename
   }
 }

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

-mutation addDesigns($files: [Upload!]!) {
-  uploadDesign(files: $files) @client {
-    id
-    image
-    name
-    updatedAt
-    commentsCount
+#import "./designListFragment.graphql"
+
+mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
+  designManagementUpload(input: { projectPath: $projectPath, iid: $iid, files: $files }) {
+    designs {
+      ...DesignListItem
+    }
   }
 }

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

@@ -39,7 +39,7 @@ const router = new VueRouter({
             from,
             next,
           ) {
-            if (id !== -1) next();
+            if (id > 0) next();
           },
           props: ({ params: { id } }) => ({ id: parseInt(id, 10) }),
         },

ee/spec/features/projects/issues/design_management/user_paginates_designs_spec.rb

@@ -5,6 +5,9 @@ describe 'User paginates issue designs', :js do
   let(:issue) { create(:issue, project: project) }
 
   before do
+    create(:design, issue: issue, filename: 'world.png')
+    create(:design, issue: issue, filename: 'dk.png')
+
     stub_licensed_features(design_management: true)
 
     visit project_issue_path(project, issue)
@@ -20,7 +23,7 @@ describe 'User paginates issue designs', :js do
     expect(find('.js-previous-design')[:disabled]).to eq('true')
 
     page.within(find('.js-design-header')) do
-      expect(page).to have_content('1 of 5')
+      expect(page).to have_content('1 of 2')
     end
 
     find('.js-next-design').click
@@ -28,7 +31,7 @@ describe 'User paginates issue designs', :js do
     expect(find('.js-previous-design')[:disabled]).not_to eq('true')
 
     page.within(find('.js-design-header')) do
-      expect(page).to have_content('2 of 5')
+      expect(page).to have_content('2 of 2')
     end
   end
 end

ee/spec/features/projects/issues/design_management/user_uploads_designs_spec.rb

@@ -23,11 +23,10 @@ describe 'User uploads new design', :js do
     it 'uploads design' do
       attach_file(:design_file, logo_fixture, make_visible: true)
 
-      expect(page).to have_selector('.js-design-list-item', count: 6)
+      expect(page).to have_selector('.js-design-list-item', count: 1)
 
       within first('#designs-tab .card') do
         expect(page).to have_content('dk.png')
-        expect(page).to have_content('Updated just now')
       end
     end
   end

ee/spec/features/projects/issues/design_management/user_views_design_spec.rb

@@ -5,6 +5,8 @@ describe 'User views issue designs', :js do
   let(:issue) { create(:issue, project: project) }
 
   before do
+    create(:design, issue: issue, filename: 'world.png')
+
     stub_licensed_features(design_management: true)
 
     visit project_issue_path(project, issue)
@@ -18,8 +20,7 @@ describe 'User views issue designs', :js do
     find('.js-design-list-item', match: :first).click
 
     page.within(find('.js-design-header')) do
-      expect(page).to have_content('test.jpg')
-      expect(page).to have_content('Test Name')
+      expect(page).to have_content('world.png')
     end
 
     expect(page).to have_selector('.js-design-image')

ee/spec/features/projects/issues/design_management/user_views_designs_spec.rb

@@ -5,6 +5,8 @@ describe 'User views issue designs', :js do
   let(:issue) { create(:issue, project: project) }
 
   before do
+    create(:design, issue: issue, filename: 'world.png')
+
     stub_licensed_features(design_management: true)
 
     visit project_issue_path(project, issue)
@@ -15,6 +17,6 @@ describe 'User views issue designs', :js do
   end
 
   it 'fetches list of designs' do
-    expect(page).to have_selector('.js-design-list-item', count: 5)
+    expect(page).to have_selector('.js-design-list-item', count: 1)
   end
 end

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

@@ -3,7 +3,7 @@ import List from 'ee/design_management/components/list/index.vue';
 
 const createMockDesign = id => ({
   id,
-  name: 'test',
+  filename: 'test',
   image: 'test',
   commentsCount: 2,
   updatedAt: '01-01-2019',

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

@@ -7,7 +7,6 @@ exports[`Design management design index page renders design index 1`] = `
   <toolbar-stub
     id="1"
     name="test.jpg"
-    updatedat=""
     updatedby="[object Object]"
   />
    
@@ -26,7 +25,6 @@ exports[`Design management design index page sets loading state 1`] = `
     id="1"
     isloading="true"
     name=""
-    updatedat=""
     updatedby="[object Object]"
   />
    

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

@@ -30,7 +30,7 @@ describe('Design management design index page', () => {
 
     vm.setData({
       design: {
-        name: 'test.jpg',
+        filename: 'test.jpg',
         image: 'test.jpg',
         updatedAt: '01-01-2019',
         updatedBy: {

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

@@ -95,20 +95,24 @@ describe('Design management index page', () => {
             mutation: uploadDesignQuery,
             variables: {
               files: [{ name: 'test' }],
+              projectPath: '',
+              iid: null,
             },
+            update: expect.anything(),
             optimisticResponse: {
               __typename: 'Mutation',
-              uploadDesign: [
+              designManagementUpload: {
+                __typename: 'DesignManagementUploadPayload',
+                designs: [
                   {
                     __typename: 'Design',
-                  id: -1,
+                    id: expect.anything(),
                     image: '',
-                  name: 'test',
-                  commentsCount: 0,
-                  updatedAt: expect.any(String),
+                    filename: 'test',
                   },
                 ],
               },
+            },
           });
         });
     });

locale/gitlab.pot

@@ -3898,6 +3898,9 @@ msgstr ""
 msgid "DesignManagement|Go to previous design"
 msgstr ""
 
+msgid "DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again."
+msgstr ""
+
 msgid "DesignManagement|The one place for your designs"
 msgstr ""