Merge pull request #10316 from owncloud/spaces-to-pinia

refactor: move spaces to pinia store
owncloud · Jan 12, 2024 · d223ede · d223ede
2 parents eb8854b + 4e17e14
commit d223ede
Show file tree

Hide file tree

Showing 105 changed files with 1,174 additions and 989 deletions.
diff --git a/changelog/unreleased/change-spaces-store b/changelog/unreleased/change-spaces-store
@@ -0,0 +1,8 @@
+Change: Spaces store to pinia
+
+BREAKING CHANGE for developers: Spaces are no longer stored in a vuex store but in pinia instead. You can access all the store functionality via the new `useSpacesStore` composable.
+
+For more details please see the linked PR down below.
+
+https://github.com/owncloud/web/pull/10316
+https://github.com/owncloud/web/issues/10210
diff --git a/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue b/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
@@ -34,11 +34,11 @@ export default defineComponent({
     const filterParams = computed(() => ({ resources: props.items }))
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
-    const { actions: disableActions } = useSpaceActionsDisable({ store })
+    const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
-    const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
-    const { actions: renameActions } = useSpaceActionsRename({ store })
-    const { actions: restoreActions } = useSpaceActionsRestore({ store })
+    const { actions: editDescriptionActions } = useSpaceActionsEditDescription()
+    const { actions: renameActions } = useSpaceActionsRename()
+    const { actions: restoreActions } = useSpaceActionsRestore()
     const { actions: showDetailsActions } = useActionsShowDetails()
 
     const menuItemsPrimaryActions = computed(() =>

diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
@@ -40,11 +40,11 @@ export default defineComponent({
     }))
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
-    const { actions: disableActions } = useSpaceActionsDisable({ store })
-    const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
+    const { actions: disableActions } = useSpaceActionsDisable()
+    const { actions: editDescriptionActions } = useSpaceActionsEditDescription()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
-    const { actions: renameActions } = useSpaceActionsRename({ store })
-    const { actions: restoreActions } = useSpaceActionsRestore({ store })
+    const { actions: renameActions } = useSpaceActionsRename()
+    const { actions: restoreActions } = useSpaceActionsRestore()
 
     const actions = computed(() => {
       return [

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -163,9 +163,9 @@ export default defineComponent({
     }
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
-    const { actions: disableActions } = useSpaceActionsDisable({ store })
+    const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
-    const { actions: restoreActions } = useSpaceActionsRestore({ store })
+    const { actions: restoreActions } = useSpaceActionsRestore()
 
     const batchActions = computed((): SpaceAction[] => {
       return [

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
@@ -164,7 +164,8 @@ import {
   SideBarPanel,
   SideBarPanelContext,
   useUserStore,
-  useMessages
+  useMessages,
+  useSpacesStore
 } from '@ownclouders/web-pkg'
 import {
   computed,
@@ -203,6 +204,7 @@ export default defineComponent({
     const clientService = useClientService()
     const configurationManager = useConfigurationManager()
     const userStore = useUserStore()
+    const spacesStore = useSpacesStore()
 
     const currentPageQuery = useRouteQuery('page', '1')
     const currentPage = computed(() => {
@@ -542,7 +544,7 @@ export default defineComponent({
 
       if (editUser.id === userStore.user.id) {
         // Load current user quota
-        store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
+        spacesStore.updateSpaceField({
           id: editUser.drive.id,
           field: 'spaceQuota',
           value: updateDriveResponse.data.quota

diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -5,7 +5,8 @@ import {
   eventBus,
   useAppDefaults,
   useConfigurationManager,
-  useMessages
+  useMessages,
+  useSpacesStore
 } from '@ownclouders/web-pkg'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { mockAxiosResolve, mockAxiosReject } from 'web-test-helpers/src/mocks'
@@ -232,7 +233,7 @@ describe('Users view', () => {
         })
       )
 
-      const { wrapper, storeOptions } = getMountedWrapper({ clientService })
+      const { wrapper } = getMountedWrapper({ clientService })
 
       const busStub = jest.spyOn(eventBus, 'publish')
 
@@ -249,9 +250,8 @@ describe('Users view', () => {
       expect(updatedUser.memberOf[0].id).toEqual('1')
 
       expect(busStub).toHaveBeenCalled()
-      expect(
-        storeOptions.modules.runtime.modules.spaces.mutations.UPDATE_SPACE_FIELD
-      ).toHaveBeenCalled()
+      const spacesStore = useSpacesStore()
+      expect(spacesStore.updateSpaceField).toHaveBeenCalled()
     })
 
     it('should show message on error', async () => {

diff --git a/packages/web-app-files/src/HandleUpload.ts b/packages/web-app-files/src/HandleUpload.ts
@@ -10,7 +10,7 @@ import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { Resource, SpaceResource } from '@ownclouders/web-client/src'
 import { urlJoin } from '@ownclouders/web-client/src/utils'
 import { ResourceConflict } from './helpers/resource'
-import { MessageStore, UserStore, locationPublicLink } from '@ownclouders/web-pkg'
+import { MessageStore, SpacesStore, UserStore, locationPublicLink } from '@ownclouders/web-pkg'
 import { locationSpacesGeneric, UppyService, UppyResource } from '@ownclouders/web-pkg'
 import { isPersonalSpaceResource, isShareSpaceResource } from '@ownclouders/web-client/src/helpers'
 import { ClientService, queryItemAsString } from '@ownclouders/web-pkg'
@@ -23,6 +23,7 @@ export interface HandleUploadOptions {
   store: Store<any>
   userStore: UserStore
   messageStore: MessageStore
+  spacesStore: SpacesStore
   uppyService: UppyService
   id?: string
   space?: SpaceResource
@@ -53,6 +54,7 @@ export class HandleUpload extends BasePlugin {
   store: Store<any>
   userStore: UserStore
   messageStore: MessageStore
+  spacesStore: SpacesStore
   uppyService: UppyService
   quotaCheckEnabled: boolean
   directoryTreeCreateEnabled: boolean
@@ -72,6 +74,7 @@ export class HandleUpload extends BasePlugin {
     this.store = opts.store
     this.userStore = opts.userStore
     this.messageStore = opts.messageStore
+    this.spacesStore = opts.spacesStore
     this.uppyService = opts.uppyService
 
     this.quotaCheckEnabled = opts.quotaCheckEnabled ?? true
@@ -89,10 +92,6 @@ export class HandleUpload extends BasePlugin {
     return this.store.getters['Files/files']
   }
 
-  get spaces(): SpaceResource[] {
-    return this.store.getters['runtime/spaces/spaces']
-  }
-
   removeFilesFromUpload(filesToUpload: UppyResource[]) {
     for (const file of filesToUpload) {
       this.uppy.removeFile(file.id)
@@ -206,7 +205,9 @@ export class HandleUpload extends BasePlugin {
       }
 
       if (uppyResource.meta.routeName === locationSpacesGeneric.name) {
-        targetUploadSpace = this.spaces.find((space) => space.id === uppyResource.meta.spaceId)
+        targetUploadSpace = this.spacesStore.spaces.find(
+          ({ id }) => id === uppyResource.meta.spaceId
+        )
       }
 
       if (

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -193,6 +193,7 @@ import {
   useFileActions,
   useFileActionsCreateNewShortcut,
   useMessages,
+  useSpacesStore,
   useUserStore
 } from '@ownclouders/web-pkg'
 import { useActiveLocation } from '@ownclouders/web-pkg'
@@ -266,6 +267,7 @@ export default defineComponent({
     const clientService = useClientService()
     const store = useStore()
     const userStore = useUserStore()
+    const spacesStore = useSpacesStore()
     const messageStore = useMessages()
     const route = useRoute()
     const language = useGettext()
@@ -283,6 +285,7 @@ export default defineComponent({
         space: props.space,
         store,
         userStore,
+        spacesStore,
         messageStore,
         uppyService
       })
@@ -376,12 +379,14 @@ export default defineComponent({
 
         const { spaceId, currentFolder, currentFolderId, driveType } = file.meta
         if (unref(hasSpaces) && !isPublicSpaceResource(props.space)) {
-          const spaces = store.getters['runtime/spaces/spaces']
-          const isOwnSpace = spaces.find((space) => space.id === spaceId)?.isOwner(userStore.user)
+          const isOwnSpace = spacesStore.spaces
+            .find(({ id }) => id === spaceId)
+            ?.isOwner(userStore.user)
+
           if (driveType === 'project' || isOwnSpace) {
             const client = clientService.graphAuthenticated
-            const driveResponse = await client.drives.getDrive(spaceId.toString())
-            store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
+            const driveResponse = await client.drives.getDrive(spaceId)
+            spacesStore.updateSpaceField({
               id: driveResponse.data.id,
               field: 'spaceQuota',
               value: driveResponse.data.quota
@@ -456,7 +461,6 @@ export default defineComponent({
     ...mapGetters(['capabilities', 'configuration', 'newFileHandlers']),
     ...mapGetters('Files', ['files', 'selectedFiles', 'clipboardResources']),
     ...mapGetters('runtime/ancestorMetaData', ['ancestorMetaData']),
-    ...mapGetters('runtime/spaces', ['spaces']),
 
     showPasteHereButton() {
       return this.clipboardResources && this.clipboardResources.length !== 0

diff --git a/packages/web-app-files/src/components/AppBar/CreateSpace.vue b/packages/web-app-files/src/components/AppBar/CreateSpace.vue
@@ -21,7 +21,8 @@ import {
   useCreateSpace,
   useSpaceHelpers,
   useStore,
-  useMessages
+  useMessages,
+  useSpacesStore
 } from '@ownclouders/web-pkg'
 
 export default defineComponent({
@@ -32,12 +33,13 @@ export default defineComponent({
     const { createSpace } = useCreateSpace()
     const { checkSpaceNameModalInput } = useSpaceHelpers()
     const { dispatchModal } = useModals()
+    const spacesStore = useSpacesStore()
 
     const addNewSpace = async (name: string) => {
       try {
         const createdSpace = await createSpace(name)
         store.commit('Files/UPSERT_RESOURCE', createdSpace)
-        store.commit('runtime/spaces/UPSERT_SPACE', createdSpace)
+        spacesStore.upsertSpace(createdSpace)
         showMessage({ title: $gettext('Space was created successfully') })
       } catch (error) {
         console.error(error)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -33,19 +33,22 @@ import {
   useAbility,
   useEmbedMode,
   useFileActionsCreateLink,
+  useSpacesStore,
   useStore
 } from '@ownclouders/web-pkg'
-import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { Resource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 
 export default {
   setup() {
     const store = useStore()
     const ability = useAbility()
     const language = useGettext()
     const { isLocationPicker, postMessage } = useEmbedMode()
+    const spacesStore = useSpacesStore()
+    const { currentSpace: space } = storeToRefs(spacesStore)
 
-    const space = computed<SpaceResource>(() => store.getters['runtime/spaces/currentSpace'])
     const selectedFiles = computed<Resource[]>(() => {
       if (isLocationPicker.value) {
         return [store.getters['Files/currentFolder']]

diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -56,15 +56,14 @@ export default defineComponent({
     })
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
-    const { actions: disableActions } = useSpaceActionsDisable({ store })
+    const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: duplicateActions } = useSpaceActionsDuplicate({ store })
-    const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
+    const { actions: editDescriptionActions } = useSpaceActionsEditDescription()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editReadmeContentActions } = useSpaceActionsEditReadmeContent()
-    const { actions: renameActions } = useSpaceActionsRename({ store })
-    const { actions: restoreActions } = useSpaceActionsRestore({ store })
+    const { actions: renameActions } = useSpaceActionsRename()
+    const { actions: restoreActions } = useSpaceActionsRestore()
     const { actions: uploadImageActions, uploadImageSpace } = useSpaceActionsUploadImage({
-      store,
       spaceImageInput
     })
     const { actions: downloadArchiveActions } = useFileActionsDownloadArchive({ store })

diff --git a/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/...src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -157,7 +157,8 @@ import {
   useConfigurationManager,
   useStore,
   useUserStore,
-  useMessages
+  useMessages,
+  useSpacesStore
 } from '@ownclouders/web-pkg'
 
 import { computed, defineComponent, inject, ref, unref, watch, onMounted } from 'vue'
@@ -201,6 +202,9 @@ export default defineComponent({
     const store = useStore()
     const userStore = useUserStore()
     const clientService = useClientService()
+    const spacesStore = useSpacesStore()
+    const { addSpaceMember } = spacesStore
+    const { spaceMembers } = storeToRefs(spacesStore)
 
     const { user } = storeToRefs(userStore)
 
@@ -267,6 +271,8 @@ export default defineComponent({
       hasRoleCustomPermissions: useCapabilityFilesSharingAllowCustomPermissions(store),
       minSearchLength: useCapabilityFilesSharingSearchMinLength(store),
       isRunningOnEos: computed(() => store.getters.configuration?.options?.runningOnEos),
+      spaceMembers,
+      addSpaceMember,
       user,
       clientService,
       saving,
@@ -298,7 +304,6 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapGetters('runtime/spaces', ['spaceMembers']),
     ...mapGetters(['configuration']),
 
     $_announcementWhenCollaboratorAdded() {
@@ -354,7 +359,6 @@ export default defineComponent({
 
   methods: {
     ...mapActions('Files', ['addShare']),
-    ...mapActions('runtime/spaces', ['addSpaceMember']),
 
     async fetchRecipients(query) {
       try {

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -141,6 +141,7 @@ import {
   useCapabilityFilesSharingResharingDefault,
   useMessages,
   useModals,
+  useSpacesStore,
   useUserStore
 } from '@ownclouders/web-pkg'
 import { extractDomSelector } from '@ownclouders/web-client/src/helpers/resource'
@@ -191,6 +192,7 @@ export default defineComponent({
     const clientService = useClientService()
     const { $gettext } = useGettext()
     const { dispatchModal } = useModals()
+    const { changeSpaceMember } = useSpacesStore()
 
     const { user } = storeToRefs(userStore)
 
@@ -235,6 +237,7 @@ export default defineComponent({
     return {
       hasResharing: useCapabilityFilesSharingResharing(),
       resharingDefault: useCapabilityFilesSharingResharingDefault(),
+      changeSpaceMember,
       user,
       clientService,
       sharedParentDir,
@@ -418,7 +421,6 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['changeShare']),
-    ...mapActions('runtime/spaces', ['changeSpaceMember']),
 
     removeShare() {
       this.$emit('onDelete', this.share)