From 54522bd05dd93b28c34e14e188749ea49262f621 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 11 Feb 2022 13:28:28 +0100
Subject: [PATCH 1/2] Add the graph client to the client service

---
 .../enhancement-graph-client-service           |  5 +++++
 .../src/mixins/spaces/actions/delete.js        |  4 +++-
 .../src/mixins/spaces/actions/disable.js       |  4 +++-
 .../mixins/spaces/actions/editDescription.js   |  4 +++-
 .../src/mixins/spaces/actions/rename.js        |  4 +++-
 .../src/mixins/spaces/actions/restore.js       |  4 +++-
 .../web-app-files/src/views/spaces/Project.vue | 10 ++++++----
 .../src/views/spaces/Projects.vue              | 13 ++++++++-----
 packages/web-client/src/index.ts               |  2 +-
 packages/web-pkg/src/services/client.ts        | 18 ++++++++++++++++++
 10 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-graph-client-service

diff --git a/changelog/unreleased/enhancement-graph-client-service b/changelog/unreleased/enhancement-graph-client-service
new file mode 100644
index 00000000000..45030748662
--- /dev/null
+++ b/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
diff --git a/packages/web-app-files/src/mixins/spaces/actions/delete.js b/packages/web-app-files/src/mixins/spaces/actions/delete.js
index 831aa7155e2..bc7dd016d94 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/delete.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/delete.js
@@ -1,4 +1,5 @@
 import { mapActions } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
@@ -54,7 +55,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'
diff --git a/packages/web-app-files/src/mixins/spaces/actions/disable.js b/packages/web-app-files/src/mixins/spaces/actions/disable.js
index 6e73095b9b6..c443e50bb55 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/disable.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/disable.js
@@ -1,4 +1,5 @@
 import { mapActions } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
@@ -54,7 +55,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()
diff --git a/packages/web-app-files/src/mixins/spaces/actions/editDescription.js b/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
index 6962c3c2eed..338b7aaa30b 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
@@ -1,4 +1,5 @@
 import { mapActions } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
@@ -49,7 +50,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()
diff --git a/packages/web-app-files/src/mixins/spaces/actions/rename.js b/packages/web-app-files/src/mixins/spaces/actions/rename.js
index d95cfd65bfc..8b25a57c707 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/rename.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/rename.js
@@ -1,4 +1,5 @@
 import { mapActions } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
@@ -56,7 +57,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()
diff --git a/packages/web-app-files/src/mixins/spaces/actions/restore.js b/packages/web-app-files/src/mixins/spaces/actions/restore.js
index 20554a46663..2e54e9e3fee 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/restore.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/restore.js
@@ -1,4 +1,5 @@
 import { mapActions } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
 
 export default {
   computed: {
@@ -54,7 +55,8 @@ export default {
     },
 
     $_restore_restoreSpace(id) {
-      return this.graph.drives
+      const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
+      return graphClient.drives
         .updateDrive(
           id,
           {},
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 27c8f269694..72950833dae 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/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) {
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 2325d3e4c7d..0d7cd5670a0 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/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()
diff --git a/packages/web-client/src/index.ts b/packages/web-client/src/index.ts
index 4a5b7f42adf..eb99d411c9e 100644
--- a/packages/web-client/src/index.ts
+++ b/packages/web-client/src/index.ts
@@ -7,7 +7,7 @@ import {
   CollectionOfDrives
 } from './generated'
 
-interface Graph {
+export interface Graph {
   drives: {
     listMyDrives: () => Promise<AxiosResponse<CollectionOfDrives>>
     getDrive: (id: string) => AxiosPromise<Drive>
diff --git a/packages/web-pkg/src/services/client.ts b/packages/web-pkg/src/services/client.ts
index 86d315b547e..7b2bfd2fe57 100644
--- a/packages/web-pkg/src/services/client.ts
+++ b/packages/web-pkg/src/services/client.ts
@@ -1,4 +1,5 @@
 import { HttpClient } from '../http'
+import { client, Graph } from 'web-client'
 
 export type OwnCloudSdk = any
 
@@ -10,6 +11,11 @@ export class ClientService {
 
   private httpUnAuthenticatedClient: HttpClient
 
+  private graphAuthenticatedClient: {
+    token: string
+    instance: Graph
+  }
+
   public httpAuthenticated(token: string): HttpClient {
     if (!this.httpAuthenticatedClient || this.httpAuthenticatedClient.token !== token) {
       this.httpAuthenticatedClient = {
@@ -26,6 +32,18 @@ export class ClientService {
     return this.httpAuthenticatedClient.instance
   }
 
+  public graphAuthenticated(serverUrl: string, token: string): Graph {
+    if (!this.graphAuthenticatedClient || this.graphAuthenticatedClient.token !== token) {
+      const { graph } = client(serverUrl, token)
+      this.graphAuthenticatedClient = {
+        token,
+        instance: graph
+      }
+    }
+
+    return this.graphAuthenticatedClient.instance
+  }
+
   public get httpUnAuthenticated(): HttpClient {
     if (!this.httpUnAuthenticatedClient) {
       this.httpUnAuthenticatedClient = new HttpClient({

From a659c3cd53ce1f7ea4f6a41d539304c35cf3dfad Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 11 Feb 2022 13:53:25 +0100
Subject: [PATCH 2/2] Fix unit tests

---
 .../src/mixins/spaces/actions/delete.js       |  4 +-
 .../src/mixins/spaces/actions/disable.js      |  4 +-
 .../mixins/spaces/actions/editDescription.js  |  4 +-
 .../src/mixins/spaces/actions/rename.js       |  4 +-
 .../src/mixins/spaces/actions/restore.js      |  4 +-
 .../tests/unit/mixins/spaces/delete.spec.js   | 36 ++++++++---------
 .../tests/unit/mixins/spaces/rename.spec.js   | 40 +++++++++----------
 7 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/packages/web-app-files/src/mixins/spaces/actions/delete.js b/packages/web-app-files/src/mixins/spaces/actions/delete.js
index bc7dd016d94..77327304029 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/delete.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/delete.js
@@ -1,8 +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 [
         {
diff --git a/packages/web-app-files/src/mixins/spaces/actions/disable.js b/packages/web-app-files/src/mixins/spaces/actions/disable.js
index c443e50bb55..1ef9d085d35 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/disable.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/disable.js
@@ -1,8 +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 [
         {
diff --git a/packages/web-app-files/src/mixins/spaces/actions/editDescription.js b/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
index 338b7aaa30b..c0cd8a250b0 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/editDescription.js
@@ -1,8 +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 [
         {
diff --git a/packages/web-app-files/src/mixins/spaces/actions/rename.js b/packages/web-app-files/src/mixins/spaces/actions/rename.js
index 8b25a57c707..3d1599d991b 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/rename.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/rename.js
@@ -1,8 +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 [
         {
diff --git a/packages/web-app-files/src/mixins/spaces/actions/restore.js b/packages/web-app-files/src/mixins/spaces/actions/restore.js
index 2e54e9e3fee..1245f2d5f01 100644
--- a/packages/web-app-files/src/mixins/spaces/actions/restore.js
+++ b/packages/web-app-files/src/mixins/spaces/actions/restore.js
@@ -1,8 +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 [
         {
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/delete.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/delete.spec.js
index 20d1be6a18b..c06d0ac5f58 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/delete.spec.js
+++ b/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,13 +24,6 @@ describe('delete', () => {
             return { href: r.name }
           }
         },
-        graph: {
-          drives: {
-            deleteDrive: jest.fn(() => {
-              return deleteSpacePromise
-            })
-          }
-        },
         $gettext: jest.fn()
       },
       store: createStore(Vuex.Store, {
@@ -37,6 +31,12 @@ describe('delete', () => {
           createModal: jest.fn(),
           hideModal: jest.fn(),
           showMessage: jest.fn()
+        },
+        getters: {
+          configuration: () => ({
+            server: 'https://example.com'
+          }),
+          getToken: () => 'token'
         }
       })
     })
@@ -44,10 +44,10 @@ describe('delete', () => {
 
   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,11 +57,10 @@ 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)
 
@@ -69,11 +68,10 @@ describe('delete', () => {
     })
 
     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)
 
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/rename.spec.js b/packages/web-app-files/tests/unit/mixins/spaces/rename.spec.js
index b097ec58dae..526ba5e97d3 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/rename.spec.js
+++ b/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,6 +32,12 @@ describe('rename', () => {
           hideModal: jest.fn(),
           showMessage: jest.fn(),
           setModalInputErrorMessage: jest.fn()
+        },
+        getters: {
+          configuration: () => ({
+            server: 'https://example.com'
+          }),
+          getToken: () => 'token'
         }
       })
     })
@@ -45,10 +45,10 @@ describe('rename', () => {
 
   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,11 +71,11 @@ 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')
 
@@ -83,11 +83,11 @@ describe('rename', () => {
     })
 
     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')