From 21f9097f2129a098ef6d234c57ff62dee524de3a Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Thu, 10 Mar 2022 09:54:49 +0100 Subject: [PATCH] Move laodSpaceTask from Sidebar to FileShares-panel --- .../components/SideBar/Shares/FileShares.vue | 62 ++++++++++--------- .../src/components/SideBar/SideBar.vue | 37 ++--------- .../SideBar/Shares/FileShares.spec.js | 23 ++++--- .../unit/components/SideBar/SideBar.spec.js | 60 +----------------- 4 files changed, 53 insertions(+), 129 deletions(-) diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue index 206c0c8a447..c4b8f7911a8 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue +++ b/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', diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue index 5e5afcf40a8..3d1ced36e80 100644 --- a/packages/web-app-files/src/components/SideBar/SideBar.vue +++ b/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', diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js index 3f0d1e584ad..c16e1c1bd18 100644 --- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js +++ b/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 + } } } }) diff --git a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js index 328aedc2938..360b3b240e7 100644 --- a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js +++ b/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