Use the correct design permissions from GraphQL response

Cache some project data in the apollo store

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

@@ -5,6 +5,8 @@ import App from './components/app.vue';
 import apolloProvider from './graphql';
 
 export default () => {
+  const el = document.getElementById('js-design-management');
+
   $('.js-issue-tabs').on('shown.bs.tab', ({ target: { id } }) => {
     if (id === 'designs' && router.currentRoute.name === 'root') {
       router.push('/designs');
@@ -13,8 +15,15 @@ export default () => {
     }
   });
 
+  apolloProvider.clients.defaultClient.cache.writeData({
+    data: {
+      projectFullPath: el.dataset.projectPath,
+      issueIid: el.dataset.issueIid,
+    },
+  });
+
   return new Vue({
-    el: document.getElementById('js-design-management'),
+    el,
     router,
     apolloProvider,
     render(createElement) {

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

@@ -6,7 +6,8 @@ import DesignList from '../components/list/index.vue';
 import UploadForm from '../components/upload/form.vue';
 import allDesignsQuery from '../queries/allDesigns.graphql';
 import uploadDesignQuery from '../queries/uploadDesign.graphql';
-import canUploadDesignPermission from '../queries/canUploadDesignPermission.graphql';
+import appDataQuery from '../queries/appData.graphql';
+import permissionsQuery from '../queries/permissions.graphql';
 
 export default {
   components: {
@@ -15,32 +16,52 @@ export default {
     UploadForm,
   },
   apollo: {
+    appData: {
+      query: appDataQuery,
+      manual: true,
+      result({ data: { projectFullPath, issueIid } }) {
+        this.projectFullPath = projectFullPath;
+        this.issueIid = issueIid;
+      },
+    },
     designs: {
       query: allDesignsQuery,
       error() {
         this.error = true;
       },
     },
-    canUploadDesign: {
-      query: canUploadDesignPermission,
+    permissions: {
+      query: permissionsQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+          iid: this.issueIid,
+        };
+      },
+      update: data => data.project.issue.userPermissions,
     },
   },
   data() {
     return {
       designs: [],
-      canUploadDesign: false,
+      permissions: {},
       error: false,
       isSaving: false,
+      projectFullPath: '',
+      issueIid: null,
     };
   },
   computed: {
     isLoading() {
-      return this.$apollo.queries.designs.loading;
+      return this.$apollo.queries.designs.loading && this.$apollo.queries.permissions.loading;
+    },
+    canCreateDesign() {
+      return this.permissions.createDesign;
     },
   },
   methods: {
     onUploadDesign(files) {
-      if (!this.canUploadDesign) return null;
+      if (!this.canCreateDesign) return null;
 
       const optimisticResponse = [...files].map(file => ({
         __typename: 'Design',
@@ -88,8 +109,8 @@ export default {
 <template>
   <div>
     <upload-form
-      v-if="canUploadDesign"
-      :can-upload-design="canUploadDesign"
+      v-if="canCreateDesign"
+      :can-upload-design="canCreateDesign"
       :is-saving="isSaving"
       @upload="onUploadDesign"
     />

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

+query projectFullPath {
+  projectFullPath @client
+  issueIid @client
+}

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

-query canUploadDesign {
-  canUploadDesign @client
-}

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

+query permissions($fullPath: ID!, $iid: ID!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
+      userPermissions {
+        createDesign
+      }
+    }
+  }
+}

ee/app/views/projects/issues/_discussion.html.haml

@@ -12,6 +12,6 @@
     #discussion-tab.tab-pane.show.active{ role: 'tabpanel', 'aria-labelledby': 'discussion' }
       = render_ce 'projects/issues/discussion'
     #designs-tab.tab-pane{ role: 'tabpanel', 'aria-labelledby': 'designs' }
-      #js-design-management
+      #js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid } }
 - else
   = render_ce 'projects/issues/discussion'