Design updates to design management

ee/app/assets/javascripts/design_management/components/upload/form.vue

@@ -24,10 +24,15 @@ export default {
 </script>
 
 <template>
-  <header class="row-content-block border-top-0 pt-2 pb-2 pl-0 pr-0 d-flex">
-    <div class="ml-auto">
-      <gl-button :disabled="isSaving" variant="primary" @click="openFileUpload">
-        {{ s__('DesignManagement|Upload new designs') }}
+  <header class="row-content-block border-top-0 p-2 d-flex">
+    <div>
+      <gl-button
+        :disabled="isSaving"
+        variant="primary"
+        class="btn-inverted"
+        @click="openFileUpload"
+      >
+        {{ s__('DesignManagement|Upload designs') }}
         <gl-loading-icon v-if="isSaving" inline class="ml-1" />
       </gl-button>
       <input
@@ -36,6 +41,7 @@ export default {
         name="design_file"
         accept="image/*"
         class="hide"
+        multiple
         @change="onFileUploadChange"
       />
     </div>

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

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import _ from 'underscore';
 import createDefaultClient from '~/lib/graphql';
+import allDesigns from './queries/allDesigns.graphql';
 
 Vue.use(VueApollo);
 
@@ -14,31 +15,45 @@ const createMockDesign = id => ({
   __typename: 'Design',
 });
 
-export default new VueApollo({
-  defaultClient: createDefaultClient({
-    defaults: {
-      designs: [
-        createMockDesign(_.uniqueId()),
-        createMockDesign(_.uniqueId()),
-        createMockDesign(_.uniqueId()),
-        createMockDesign(_.uniqueId()),
-        createMockDesign(_.uniqueId()),
-      ],
-    },
-    resolvers: {
-      Mutation: {
-        uploadDesign(ctx, { name }, { cache }) {
-          const design = {
-            ...createMockDesign(_.uniqueId()),
-            name,
-            commentsCount: 0,
-          };
-
-          cache.writeData({ data: design });
-
-          return design;
-        },
+const defaultClient = createDefaultClient({
+  defaults: {
+    designs: [
+      createMockDesign(_.uniqueId()),
+      createMockDesign(_.uniqueId()),
+      createMockDesign(_.uniqueId()),
+      createMockDesign(_.uniqueId()),
+      createMockDesign(_.uniqueId()),
+    ],
+  },
+  resolvers: {
+    Mutation: {
+      uploadDesign(ctx, { name }, { cache }) {
+        const designs = name.map(n => ({
+          ...createMockDesign(_.uniqueId()),
+          name: n,
+          commentsCount: 0,
+        }));
+
+        cache.writeData({ data: designs });
+
+        return designs;
       },
     },
-  }),
+  },
+});
+
+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/pages/index.vue

@@ -35,7 +35,14 @@ export default {
   },
   methods: {
     onUploadDesign(files) {
-      const file = files[0];
+      const optimisticResponse = [...files].map(file => ({
+        __typename: 'Design',
+        id: -1,
+        image: '',
+        name: file.name,
+        commentsCount: 0,
+        updatedAt: new Date().toString(),
+      }));
 
       this.isSaving = true;
 
@@ -43,24 +50,17 @@ export default {
         .mutate({
           mutation: uploadDesignQuery,
           variables: {
-            name: file.name,
+            name: [...files].map(({ name }) => name),
           },
           update: (store, { data: { uploadDesign } }) => {
             const data = store.readQuery({ query: allDesignsQuery });
 
-            data.designs.unshift(uploadDesign);
+            data.designs.unshift(...uploadDesign);
             store.writeQuery({ query: allDesignsQuery, data });
           },
           optimisticResponse: {
             __typename: 'Mutation',
-            uploadDesign: {
-              __typename: 'Design',
-              id: -1,
-              image: '',
-              name: file.name,
-              commentsCount: 0,
-              updatedAt: new Date().toString(),
-            },
+            uploadDesign: optimisticResponse,
           },
         })
         .then(() => {

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

-mutation addDesigns($name: String) {
+mutation addDesigns($name: [String]) {
   uploadDesign(name: $name) @client {
     id
     image

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

@@ -12,7 +12,7 @@ const router = new VueRouter({
     {
       name: 'root',
       path: '/',
-      component: null,
+      component: Home,
       meta: {
         el: 'discussion',
       },

ee/spec/frontend/design_management/components/upload/__snapshots__/form_spec.js.snap

@@ -2,17 +2,16 @@
 
 exports[`Design management upload form component renders loading icon 1`] = `
 <header
-  class="row-content-block border-top-0 pt-2 pb-2 pl-0 pr-0 d-flex"
+  class="row-content-block border-top-0 p-2 d-flex"
 >
-  <div
-    class="ml-auto"
-  >
+  <div>
     <glbutton-stub
+      class="btn-inverted"
       disabled="true"
       variant="primary"
     >
       
-      Upload new designs
+      Upload designs
       
       <glloadingicon-stub
         class="ml-1"
@@ -26,6 +25,7 @@ exports[`Design management upload form component renders loading icon 1`] = `
     <input
       accept="image/*"
       class="hide"
+      multiple="multiple"
       name="design_file"
       type="file"
     />
@@ -35,16 +35,15 @@ exports[`Design management upload form component renders loading icon 1`] = `
 
 exports[`Design management upload form component renders upload design button 1`] = `
 <header
-  class="row-content-block border-top-0 pt-2 pb-2 pl-0 pr-0 d-flex"
+  class="row-content-block border-top-0 p-2 d-flex"
 >
-  <div
-    class="ml-auto"
-  >
+  <div>
     <glbutton-stub
+      class="btn-inverted"
       variant="primary"
     >
       
-      Upload new designs
+      Upload designs
       
       <!---->
     </glbutton-stub>
@@ -52,6 +51,7 @@ exports[`Design management upload form component renders upload design button 1`
     <input
       accept="image/*"
       class="hide"
+      multiple="multiple"
       name="design_file"
       type="file"
     />

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

@@ -66,18 +66,20 @@ describe('Design management index page', () => {
             mutation: uploadDesignQuery,
             update: expect.any(Function),
             variables: {
-              name: 'test',
+              name: ['test'],
             },
             optimisticResponse: {
               __typename: 'Mutation',
-              uploadDesign: {
-                __typename: 'Design',
-                id: -1,
-                image: '',
-                name: 'test',
-                commentsCount: 0,
-                updatedAt: expect.any(String),
-              },
+              uploadDesign: [
+                {
+                  __typename: 'Design',
+                  id: -1,
+                  image: '',
+                  name: 'test',
+                  commentsCount: 0,
+                  updatedAt: expect.any(String),
+                },
+              ],
             },
           });
         });

ee/spec/frontend/design_management/router_spec.js

@@ -40,10 +40,10 @@ describe('Design management router', () => {
   });
 
   describe('root', () => {
-    it('pushes empty component', () => {
+    it('pushes home component', () => {
       router.push('/');
 
-      expect(vm.isEmpty()).toBe(true);
+      expect(vm.find(Designs).exists()).toBe(true);
     });
   });
 

locale/gitlab.pot

@@ -3478,7 +3478,7 @@ msgstr ""
 msgid "DesignManagement|Error uploading a new design. Please try again"
 msgstr ""
 
-msgid "DesignManagement|Upload new designs"
+msgid "DesignManagement|Upload designs"
 msgstr ""
 
 msgid "Designs"