Move laodSpaceTask from Sidebar to FileShares-panel

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -70,7 +70,7 @@ import { ShareTypes } from '../../../helpers/share'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import { useTask } from 'vue-concurrency'
-import { buildSpaceShare } from '../../../helpers/resources'
+import { buildSpace, buildSpaceShare } from '../../../helpers/resources'
 import { sortSpaceMembers } from '../../../helpers/space'
 
 export default {
@@ -82,28 +82,32 @@ export default {
     InviteCollaboratorForm,
     CollaboratorListItem
   },
-  inject: {
-    currentSpace: {
-      default: null
-    }
-  },
   setup() {
     const store = useStore()
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
 
-    const loadSpaceMembersTask = useTask(function* (signal, ref) {
-      const graphClient = clientService.graphAuthenticated(
-        store.getters.configuration.server,
-        store.getters.getToken
-      )
+    const loadSpaceTask = useTask(function* (signal, ref, spaceId) {
+      const graphResponse = yield graphClient.drives.getDrive(spaceId)
+
+      if (!graphResponse.data) {
+        return
+      }
+
+      ref.currentSpace = buildSpace(graphResponse.data)
+    })
 
+    const loadSpaceMembersTask = useTask(function* (signal, ref) {
       const promises = []
       const spaceShares = []
 
-      for (const role of Object.keys(ref.space.spaceRoles)) {
-        for (const userId of ref.space.spaceRoles[role]) {
+      for (const role of Object.keys(ref.currentSpace.spaceRoles)) {
+        for (const userId of ref.currentSpace.spaceRoles[role]) {
           promises.push(
             graphClient.users.getUser(userId).then((resolved) => {
-              spaceShares.push(buildSpaceShare({ ...resolved.data, role }, ref.space.id))
+              spaceShares.push(buildSpaceShare({ ...resolved.data, role }, ref.currentSpace.id))
             })
           )
         }
@@ -114,12 +118,13 @@ export default {
       })
     })
 
-    return { loadSpaceMembersTask }
+    return { loadSpaceTask, loadSpaceMembersTask }
   },
   data() {
     return {
       currentShare: null,
       showShareesList: true,
+      currentSpace: null,
       spaceMembers: []
     }
   },
@@ -261,14 +266,15 @@ export default {
 
       return null
     },
-    space() {
-      return this.currentSpace?.value
-    },
     currentUserIsMemberOfSpace() {
-      return this.space?.spaceMemberIds.includes(this.user.uuid)
+      return this.currentSpace?.spaceMemberIds.includes(this.user.uuid)
     },
     showSpaceMembers() {
-      return this.space && this.currentUserIsMemberOfSpace
+      return (
+        this.currentSpace &&
+        this.highlightedFile.type !== 'space' &&
+        this.currentUserIsMemberOfSpace
+      )
     }
   },
   watch: {
@@ -280,17 +286,17 @@ export default {
         }
       },
       immediate: true
-    },
-    space: {
-      handler: function () {
-        if (this.showSpaceMembers) {
-          this.loadSpaceMembersTask.perform(this)
-        }
-      },
-      immediate: true
     }
   },
+  async mounted() {
+    if (this.$route.params.spaceId) {
+      await this.loadSpaceTask.perform(this, this.$route.params.spaceId)
 
+      if (this.showSpaceMembers) {
+        this.loadSpaceMembersTask.perform(this)
+      }
+    }
+  },
   methods: {
     ...mapActions('Files', [
       'loadCurrentFileOutgoingShares',

packages/web-app-files/src/components/SideBar/SideBar.vue

@@ -91,19 +91,16 @@ import { mapGetters, mapState, mapActions } from 'vuex'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { DavProperties } from 'web-pkg/src/constants'
 
-import { buildResource, buildSpace } from '../../helpers/resources'
+import { buildResource } from '../../helpers/resources'
 import {
   isLocationCommonActive,
   isLocationPublicActive,
   isLocationSharesActive
 } from '../../router'
-import { computed, ref } from '@vue/composition-api'
+import { computed } from '@vue/composition-api'
 
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
-import { useTask } from 'vue-concurrency'
-import { clientService } from 'web-pkg/src/services'
-import { useStore } from 'web-pkg/src/composables'
 
 let visibilityObserver
 let hiddenObserver
@@ -113,32 +110,10 @@ export default {
 
   provide() {
     return {
-      displayedItem: computed(() => this.selectedFile),
-      currentSpace: computed(() => this.currentSpace)
+      displayedItem: computed(() => this.selectedFile)
     }
   },
 
-  setup() {
-    const currentSpace = ref(null)
-    const store = useStore()
-
-    const loadSpaceTask = useTask(function* (signal, ref, spaceId) {
-      const graphClient = clientService.graphAuthenticated(
-        store.getters.configuration.server,
-        store.getters.getToken
-      )
-      const graphResponse = yield graphClient.drives.getDrive(spaceId)
-
-      if (!graphResponse.data) {
-        return
-      }
-
-      currentSpace.value = buildSpace(graphResponse.data)
-    })
-
-    return { currentSpace, loadSpaceTask }
-  },
-
   data() {
     return {
       focused: undefined,
@@ -270,15 +245,11 @@ export default {
     }
     this.$nextTick(this.initVisibilityObserver)
   },
+
   beforeDestroy() {
     visibilityObserver.disconnect()
     hiddenObserver.disconnect()
   },
-  mounted() {
-    if (this.$route.params.spaceId && !this.highlightedFileIsSpace) {
-      this.loadSpaceTask.perform(this, this.$route.params.spaceId)
-    }
-  },
   methods: {
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',

packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js

@@ -6,7 +6,6 @@ import DesignSystem from 'owncloud-design-system'
 import Users from '@/__fixtures__/users'
 import Collaborators from '@/__fixtures__/collaborators'
 import mockAxios from 'jest-mock-axios'
-import { buildSpace } from '../../../../../src/helpers/resources'
 import { spaceRoleManager } from '../../../../../src/helpers/share'
 import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
 
@@ -123,27 +122,29 @@ describe('FileShares', () => {
         id: '1',
         root: { permissions: [{ roles: ['manager'], grantedTo: [{ user: { id: 1 } }] }] }
       }
+      mockAxios.request.mockImplementationOnce(() => {
+        return Promise.resolve({
+          data: spaceMock
+        })
+      })
       mockAxios.request.mockImplementationOnce(() => {
         return Promise.resolve({
           data: { role: spaceRoleManager.name }
         })
       })
 
-      const wrapper = getShallowMountedWrapper({
-        user,
-        space: buildSpace(spaceMock)
-      })
+      const wrapper = getShallowMountedWrapper({ user })
 
+      await wrapper.vm.loadSpaceTask.last
       await wrapper.vm.loadSpaceMembersTask.last
       expect(wrapper.vm.spaceMembers.length).toBe(1)
       expect(wrapper.find('#space-collaborators-list').exists()).toBeTruthy()
     })
-    it('does not load space members if no space is given', async () => {
+    it('does not load space members if no space is given', () => {
       const wrapper = getShallowMountedWrapper({
         user
       })
 
-      await wrapper.vm.loadSpaceMembersTask.last
       expect(wrapper.vm.spaceMembers.length).toBe(0)
     })
   })
@@ -280,9 +281,11 @@ function getShallowMountedWrapper(data, loading = false) {
       'oc-icon': true,
       'oc-spinner': true
     },
-    provide: {
-      currentSpace: {
-        value: data.space
+    mocks: {
+      $route: {
+        params: {
+          spaceId: 1
+        }
       }
     }
   })

packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js

@@ -10,7 +10,6 @@ import { buildResource, renameResource } from '@files/src/helpers/resources'
 
 import SideBar from '@files/src/components/SideBar/SideBar.vue'
 import { createLocationSpaces } from '../../../../src/router'
-import mockAxios from 'jest-mock-axios'
 
 jest.mock('web-pkg/src/observer')
 jest.mock('@files/src/helpers/resources', () => {
@@ -166,58 +165,13 @@ describe('SideBar', () => {
       })
     })
   })
-
-  describe('current space', () => {
-    beforeEach(() => {
-      buildResource.mockImplementation((item) => item)
-    })
-    afterEach(() => {
-      jest.clearAllMocks()
-      mockAxios.reset()
-    })
-    it('fetches the current space if a space id is given', async () => {
-      const spaceId = 1
-      mockAxios.request.mockImplementationOnce(() => {
-        return Promise.resolve({
-          data: { id: spaceId }
-        })
-      })
-
-      const mockFileInfo = jest.fn()
-      mockFileInfo.mockReturnValueOnce(Files['/'][1])
-
-      const wrapper = createWrapper({
-        item: simpleOwnFolder,
-        selectedItems: [simpleOwnFolder],
-        mocks: { $client: { files: { fileInfo: mockFileInfo } } },
-        spaceId
-      })
-
-      await wrapper.vm.loadSpaceTask.last
-      expect(wrapper.vm.currentSpace.id).toBe(spaceId)
-    })
-    it('does not fetch the current space if no space id is given', async () => {
-      const mockFileInfo = jest.fn()
-      mockFileInfo.mockReturnValueOnce(Files['/'][1])
-
-      const wrapper = createWrapper({
-        item: simpleOwnFolder,
-        selectedItems: [simpleOwnFolder],
-        mocks: { $client: { files: { fileInfo: mockFileInfo } } }
-      })
-
-      await wrapper.vm.loadSpaceTask.last
-      expect(wrapper.vm.currentSpace).toBeNull()
-    })
-  })
 })
 
 function createWrapper({
   item,
   selectedItems,
   mocks,
-  currentRouteName = 'files-spaces-personal-home',
-  spaceId = undefined
+  currentRouteName = 'files-spaces-personal-home'
 }) {
   const localVue = createLocalVue()
   localVue.use(Vuex)
@@ -226,7 +180,6 @@ function createWrapper({
     translations: 'does-not-matter.json',
     silent: true
   })
-
   return shallowMount(SideBar, {
     store: new Vuex.Store({
       getters: {
@@ -238,11 +191,7 @@ function createWrapper({
             api_enabled: true,
             public: { enabled: true }
           }
-        }),
-        getToken: jest.fn(() => 'GFwHKXdsMgoFwt'),
-        configuration: jest.fn(() => ({
-          server: 'http://example.com/'
-        }))
+        })
       },
       modules: {
         apps: {
@@ -288,11 +237,6 @@ function createWrapper({
           resolve: (r) => {
             return { href: r.name }
           }
-        },
-        $route: {
-          params: {
-            spaceId
-          }
         }
       },
       mocks