Merge pull request #6425 from owncloud/graph-client-service

Add the graph client to the client service

changelog/unreleased/enhancement-graph-client-service

@@ -0,0 +1,5 @@
+Enhancement: Add the graph client to the client service
+
+This way, the client for the graph API can easily be fetched when needed.
+
+https://github.com/owncloud/web/pull/6425

packages/web-app-files/src/mixins/spaces/actions/delete.js

@@ -1,7 +1,10 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
+    ...mapGetters(['configuration', 'getToken']),
+
     $_delete_items() {
       return [
         {
@@ -54,7 +57,8 @@ export default {
     },
 
     $_delete_deleteSpace(id) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .deleteDrive(id, '', {
           headers: {
             Purge: 'T'

packages/web-app-files/src/mixins/spaces/actions/disable.js

@@ -1,7 +1,10 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
+    ...mapGetters(['configuration', 'getToken']),
+
     $_disable_items() {
       return [
         {
@@ -54,7 +57,8 @@ export default {
     },
 
     $_disable_disableSpace(id) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .deleteDrive(id)
         .then(() => {
           this.hideModal()

packages/web-app-files/src/mixins/spaces/actions/editDescription.js

@@ -1,7 +1,10 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
+    ...mapGetters(['configuration', 'getToken']),
+
     $_editDescription_items() {
       return [
         {
@@ -49,7 +52,8 @@ export default {
     },
 
     $_editDescription_editDescriptionSpace(id, description) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .updateDrive(id, { description }, {})
         .then(() => {
           this.hideModal()

packages/web-app-files/src/mixins/spaces/actions/rename.js

@@ -1,7 +1,10 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
+    ...mapGetters(['configuration', 'getToken']),
+
     $_rename_items() {
       return [
         {
@@ -56,7 +59,8 @@ export default {
     },
 
     $_rename_renameSpace(id, name) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .updateDrive(id, { name }, {})
         .then(() => {
           this.hideModal()

packages/web-app-files/src/mixins/spaces/actions/restore.js

@@ -1,7 +1,10 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
+    ...mapGetters(['configuration', 'getToken']),
+
     $_restore_items() {
       return [
         {
@@ -54,7 +57,8 @@ export default {
     },
 
     $_restore_restoreSpace(id) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .updateDrive(
           id,
           {},

packages/web-app-files/src/views/spaces/Project.vue

@@ -72,7 +72,6 @@ import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListLoader from '../../components/FilesList/ListLoader.vue'
 import { computed, ref, unref } from '@vue/composition-api'
-import { client } from 'web-client'
 import { useTask } from 'vue-concurrency'
 import { useStore, useRouter, useRouteQuery } from 'web-pkg/src/composables'
 import marked from 'marked'
@@ -90,7 +89,7 @@ import MixinFileActions from '../../mixins/fileActions'
 import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-
+import { clientService } from 'web-pkg/src/services'
 const visibilityObserver = new VisibilityObserver()
 
 export default {
@@ -113,7 +112,10 @@ export default {
     const space = ref({})
     const markdownContent = ref('')
     const imageContent = ref('')
-    const { graph } = client(store.getters.configuration.server, store.getters.getToken)
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
 
     const storeItems = computed(() => store.getters['Files/activeFiles'] || [])
     const fields = computed(() => {
@@ -135,7 +137,7 @@ export default {
     })
 
     const loadSpaceTask = useTask(function* () {
-      const response = yield graph.drives.getDrive(spaceId)
+      const response = yield graphClient.drives.getDrive(spaceId)
       space.value = response.data || {}
     })
     const loadReadmeTask = useTask(function* (signal, ref) {

packages/web-app-files/src/views/spaces/Projects.vue

@@ -133,7 +133,6 @@
 <script>
 import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../../components/FilesList/ListLoader.vue'
-import { client } from 'web-client'
 import { ref } from '@vue/composition-api'
 import { useStore } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
@@ -147,6 +146,7 @@ import Restore from '../../mixins/spaces/actions/restore'
 import EditDescription from '../../mixins/spaces/actions/editDescription'
 import ShowDetails from '../../mixins/spaces/actions/showDetails'
 import { buildWebDavSpacesPath } from '../../helpers/resources'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   components: {
@@ -158,10 +158,13 @@ export default {
     const store = useStore()
     const spaces = ref([])
     const imageContentObject = ref({})
-    const { graph } = client(store.getters.configuration.server, store.getters.getToken)
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
 
     const loadSpacesTask = useTask(function* () {
-      const response = yield graph.drives.listMyDrives()
+      const response = yield graphClient.drives.listMyDrives()
       spaces.value = (response.data?.value || [])
         .filter((drive) => drive.driveType === 'project')
         .sort((a, b) => a.name.localeCompare(b.name))
@@ -203,7 +206,7 @@ export default {
 
     return {
       spaces,
-      graph,
+      graphClient,
       loadSpacesTask,
       loadImagesTask,
       loadResourcesTask,
@@ -272,7 +275,7 @@ export default {
     addNewSpace(name) {
       this.$refs.createNewSpaceButton.$el.blur()
 
-      return this.graph.drives
+      return this.graphClient.drives
         .createDrive({ name }, {})
         .then(() => {
           this.hideModal()

packages/web-app-files/tests/unit/mixins/spaces/delete.spec.js

@@ -3,6 +3,7 @@ import { createStore } from 'vuex-extensions'
 import { mount, createLocalVue } from '@vue/test-utils'
 import Delete from '@files/src/mixins/spaces/actions/delete.js'
 import { createLocationSpaces } from '../../../../src/router'
+import mockAxios from 'jest-mock-axios'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -13,7 +14,7 @@ describe('delete', () => {
     mixins: [Delete]
   }
 
-  function getWrapper(deleteSpacePromise) {
+  function getWrapper() {
     return mount(Component, {
       localVue,
       mocks: {
@@ -23,31 +24,30 @@ describe('delete', () => {
             return { href: r.name }
           }
         },
-        graph: {
-          drives: {
-            deleteDrive: jest.fn(() => {
-              return deleteSpacePromise
-            })
-          }
-        },
         $gettext: jest.fn()
       },
       store: createStore(Vuex.Store, {
         actions: {
           createModal: jest.fn(),
           hideModal: jest.fn(),
           showMessage: jest.fn()
+        },
+        getters: {
+          configuration: () => ({
+            server: 'https://example.com'
+          }),
+          getToken: () => 'token'
         }
       })
     })
   }
 
   describe('method "$_delete_trigger"', () => {
     it('should trigger the delete modal window', async () => {
-      const deletePromise = new Promise((resolve) => {
-        return resolve()
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
       })
-      const wrapper = getWrapper(deletePromise)
+      const wrapper = getWrapper()
       const spyCreateModalStub = jest.spyOn(wrapper.vm, 'createModal')
       await wrapper.vm.$_delete_trigger({ spaces: [{ id: 1 }] })
 
@@ -57,23 +57,21 @@ describe('delete', () => {
 
   describe('method "$_delete_deleteSpace"', () => {
     it('should hide the modal on success', async () => {
-      const deletePromise = new Promise((resolve) => {
-        return resolve()
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
       })
-
-      const wrapper = getWrapper(deletePromise)
+      const wrapper = getWrapper()
       const hideModalStub = jest.spyOn(wrapper.vm, 'hideModal')
       await wrapper.vm.$_delete_deleteSpace(1)
 
       expect(hideModalStub).toHaveBeenCalledTimes(1)
     })
 
     it('should show message on error', async () => {
-      const deletePromise = new Promise((resolve, reject) => {
-        return reject(new Error())
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.reject(new Error())
       })
-
-      const wrapper = getWrapper(deletePromise)
+      const wrapper = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.$_delete_deleteSpace(1)
 

packages/web-app-files/tests/unit/mixins/spaces/rename.spec.js

@@ -3,6 +3,7 @@ import { createStore } from 'vuex-extensions'
 import { mount, createLocalVue } from '@vue/test-utils'
 import rename from '@files/src/mixins/spaces/actions/rename.js'
 import { createLocationSpaces } from '../../../../src/router'
+import mockAxios from 'jest-mock-axios'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -13,7 +14,7 @@ describe('rename', () => {
     mixins: [rename]
   }
 
-  function getWrapper(renameSpacePromise) {
+  function getWrapper() {
     return mount(Component, {
       localVue,
       mocks: {
@@ -23,13 +24,6 @@ describe('rename', () => {
             return { href: r.name }
           }
         },
-        graph: {
-          drives: {
-            updateDrive: jest.fn(() => {
-              return renameSpacePromise
-            })
-          }
-        },
         $gettext: jest.fn()
       },
       store: createStore(Vuex.Store, {
@@ -38,17 +32,23 @@ describe('rename', () => {
           hideModal: jest.fn(),
           showMessage: jest.fn(),
           setModalInputErrorMessage: jest.fn()
+        },
+        getters: {
+          configuration: () => ({
+            server: 'https://example.com'
+          }),
+          getToken: () => 'token'
         }
       })
     })
   }
 
   describe('method "$_rename_trigger"', () => {
     it('should trigger the rename modal window', async () => {
-      const renamePromise = new Promise((resolve) => {
-        return resolve()
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
       })
-      const wrapper = getWrapper(renamePromise)
+      const wrapper = getWrapper()
       const spyCreateModalStub = jest.spyOn(wrapper.vm, 'createModal')
       await wrapper.vm.$_rename_trigger({ spaces: [{ id: 1, name: 'renamed space' }] })
 
@@ -58,10 +58,10 @@ describe('rename', () => {
 
   describe('method "$_rename_checkName"', () => {
     it('should throw an error with an empty space name', async () => {
-      const renamePromise = new Promise((resolve) => {
-        return resolve()
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
       })
-      const wrapper = getWrapper(renamePromise)
+      const wrapper = getWrapper()
       const spyInputErrorMessageStub = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
       await wrapper.vm.$_rename_checkName('')
 
@@ -71,23 +71,23 @@ describe('rename', () => {
 
   describe('method "$_rename_renameSpace"', () => {
     it('should hide the modal on success', async () => {
-      const renamePromise = new Promise((resolve) => {
-        return resolve()
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve()
       })
 
-      const wrapper = getWrapper(renamePromise)
+      const wrapper = getWrapper()
       const hideModalStub = jest.spyOn(wrapper.vm, 'hideModal')
       await wrapper.vm.$_rename_renameSpace(1, 'renamed space')
 
       expect(hideModalStub).toHaveBeenCalledTimes(1)
     })
 
     it('should show message on error', async () => {
-      const renamePromise = new Promise((resolve, reject) => {
-        return reject(new Error())
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.reject(new Error())
       })
 
-      const wrapper = getWrapper(renamePromise)
+      const wrapper = getWrapper()
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       await wrapper.vm.$_rename_renameSpace(1, 'renamed space')