refactor: moves resources to pinia store

Removes the resources store module of the files app and implements it as a pinia store instead. All store functionality can be accessed via the new `useResourcesStore` composable.
owncloud · Jan 19, 2024 · 43ee156 · 43ee156
1 parent b48ab68
commit 43ee156
Show file tree

Hide file tree

Showing 231 changed files with 1,934 additions and 3,451 deletions.
diff --git a/changelog/unreleased/change-resources-store b/changelog/unreleased/change-resources-store
@@ -0,0 +1,10 @@
+Change: Resources store to pinia
+
+BREAKING CHANGE for developers: Resources are no longer stored in a vuex store module but in pinia instead. You can access all the store functionality via the new `useResourcesStore` composable.
+
+Technically the former vuex store was only supposed to be used inside the files app. However, it was reachable from the outside as well and was therefore quite frequently used by other apps. So we decided to declare this as a breaking change.
+
+For more details please see the linked PR down below.
+
+https://github.com/owncloud/web/pull/10368
+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
@@ -8,7 +8,6 @@
 import { computed, defineComponent, PropType, unref } from 'vue'
 import { SpaceResource } from '@ownclouders/web-client'
 import { ContextActionMenu } from '@ownclouders/web-pkg'
-import { useStore } from '@ownclouders/web-pkg'
 
 import {
   useSpaceActionsDelete,
@@ -30,10 +29,9 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const store = useStore()
     const filterParams = computed(() => ({ resources: props.items }))
 
-    const { actions: deleteActions } = useSpaceActionsDelete({ store })
+    const { actions: deleteActions } = useSpaceActionsDelete()
     const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription()

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
@@ -24,13 +24,11 @@ import {
 } from '@ownclouders/web-pkg'
 import { computed, defineComponent, inject, unref } from 'vue'
 import { SpaceResource } from '@ownclouders/web-client'
-import { useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'ActionsPanel',
   components: { ActionMenuItem },
   setup() {
-    const store = useStore()
     const resource = inject<SpaceResource>('resource')
     const resources = computed(() => {
       return [unref(resource)]
@@ -39,7 +37,7 @@ export default defineComponent({
       resources: unref(resources)
     }))
 
-    const { actions: deleteActions } = useSpaceActionsDelete({ store })
+    const { actions: deleteActions } = useSpaceActionsDelete()
     const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()

diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -74,7 +74,6 @@ import {
   useSpaceActionsDisable,
   useSpaceActionsRestore,
   useSpaceActionsEditQuota,
-  useStore,
   useConfigStore
 } from '@ownclouders/web-pkg'
 import { buildSpace, SpaceResource } from '@ownclouders/web-client/src/helpers'
@@ -97,7 +96,6 @@ export default defineComponent({
     }
   },
   setup() {
-    const store = useStore()
     const spaces = ref([])
     const clientService = useClientService()
     const { $gettext } = useGettext()
@@ -161,7 +159,7 @@ export default defineComponent({
       selectedSpaces.value.splice(0, selectedSpaces.value.length)
     }
 
-    const { actions: deleteActions } = useSpaceActionsDelete({ store })
+    const { actions: deleteActions } = useSpaceActionsDelete()
     const { actions: disableActions } = useSpaceActionsDisable()
     const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: restoreActions } = useSpaceActionsRestore()

diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -1,10 +1,8 @@
 import { ref } from 'vue'
 import AppTemplate from '../../../src/components/AppTemplate.vue'
 import {
-  createStore,
   defaultComponentMocks,
   defaultPlugins,
-  defaultStoreMockOptions,
   RouteLocation,
   shallowMount
 } from 'web-test-helpers'
@@ -25,8 +23,6 @@ const elSelectors = {
 
 jest.mock('@ownclouders/web-pkg')
 
-afterEach(() => jest.clearAllMocks())
-
 describe('AppTemplate', () => {
   describe('loading is true', () => {
     it('should show app loading spinner component', () => {
@@ -114,9 +110,6 @@ describe('AppTemplate', () => {
   })
 })
 
-const storeOptions = { ...defaultStoreMockOptions }
-const store = createStore(storeOptions)
-
 function getWrapper({ props = {}, isMobileWidth = false } = {}) {
   return {
     wrapper: shallowMount(AppTemplate, {
@@ -129,7 +122,7 @@ function getWrapper({ props = {}, isMobileWidth = false } = {}) {
         ...props
       },
       global: {
-        plugins: [...defaultPlugins(), store],
+        plugins: [...defaultPlugins()],
         provide: { isMobileWidth: ref(isMobileWidth) },
         stubs: {
           OcButton: false

diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/ContextActions.spec.ts
@@ -1,4 +1,4 @@
-import { defaultPlugins, defaultStoreMockOptions, mount } from 'web-test-helpers'
+import { defaultPlugins, mount } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import ContextActions from '../../../../src/components/Groups/ContextActions.vue'
@@ -63,9 +63,7 @@ describe.skip('ContextActions', () => {
 })
 
 function getWrapper() {
-  const storeOptions = { ...defaultStoreMockOptions }
   return {
-    storeOptions,
     wrapper: mount(ContextActions, {
       props: {
         items: [mock<Resource>()]

diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
@@ -1,9 +1,7 @@
 import CreateGroupModal from '../../../../src/components/Groups/CreateGroupModal.vue'
 import {
-  createStore,
   defaultComponentMocks,
   defaultPlugins,
-  defaultStoreMockOptions,
   mockAxiosReject,
   mockAxiosResolve,
   shallowMount
@@ -114,20 +112,17 @@ describe('CreateGroupModal', () => {
 
 function getWrapper() {
   const mocks = defaultComponentMocks()
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
 
   return {
     mocks,
-    storeOptions,
     wrapper: shallowMount(CreateGroupModal, {
       props: {
         modal: mock<Modal>()
       },
       global: {
         mocks,
         provide: mocks,
-        plugins: [...defaultPlugins(), store]
+        plugins: [...defaultPlugins()]
       }
     })
   }

diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
@@ -1,12 +1,5 @@
 import EditPanel from '../../../../../src/components/Groups/SideBar/EditPanel.vue'
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultPlugins,
-  defaultStoreMockOptions,
-  mockAxiosReject,
-  mount
-} from 'web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, mockAxiosReject, mount } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { AxiosResponse } from 'axios'
 
@@ -79,8 +72,6 @@ describe('EditPanel', () => {
 
 function getWrapper() {
   const mocks = defaultComponentMocks()
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
 
   return {
     mocks,
@@ -91,7 +82,7 @@ function getWrapper() {
       global: {
         mocks,
         provide: mocks,
-        plugins: [...defaultPlugins(), store],
+        plugins: [...defaultPlugins()],
         stubs: {
           'oc-text-input': true,
           'avatar-image': true,

diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/ContextActions.spec.ts
@@ -1,11 +1,4 @@
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultPlugins,
-  defaultStoreMockOptions,
-  defaultStubs,
-  mount
-} from 'web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import ContextActions from '../../../../src/components/Spaces/ContextActions.vue'
@@ -55,13 +48,10 @@ describe.skip('ContextActions', () => {
 })
 
 function getWrapper() {
-  const storeOptions = { ...defaultStoreMockOptions }
-  const store = createStore(storeOptions)
   const mocks = {
     ...defaultComponentMocks()
   }
   return {
-    storeOptions,
     mocks,
     wrapper: mount(ContextActions, {
       props: {
@@ -70,7 +60,7 @@ function getWrapper() {
       global: {
         mocks,
         stubs: { ...defaultStubs, 'action-menu-item': true },
-        plugins: [...defaultPlugins(), store]
+        plugins: [...defaultPlugins()]
       }
     })
   }

diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts
@@ -1,11 +1,4 @@
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultPlugins,
-  defaultStoreMockOptions,
-  defaultStubs,
-  mount
-} from 'web-test-helpers'
+import { defaultComponentMocks, defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import ActionsPanel from '../../../../../src/components/Spaces/SideBar/ActionsPanel.vue'
@@ -66,13 +59,10 @@ describe('ActionsPanel', () => {
 })
 
 function getWrapper() {
-  const storeOptions = { ...defaultStoreMockOptions }
-  const store = createStore(storeOptions)
   const mocks = {
     ...defaultComponentMocks()
   }
   return {
-    storeOptions,
     mocks,
     wrapper: mount(ActionsPanel, {
       props: {
@@ -81,7 +71,7 @@ function getWrapper() {
       global: {
         mocks,
         stubs: { ...defaultStubs, 'action-menu-item': true },
-        plugins: [...defaultPlugins(), store]
+        plugins: [...defaultPlugins()]
       }
     })
   }

diff --git a/...eb-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts b/...eb-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
@@ -3,12 +3,7 @@ import { mock } from 'jest-mock-extended'
 import { unref } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
 import { eventBus } from '@ownclouders/web-pkg'
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultStoreMockOptions,
-  getComposableWrapper
-} from 'web-test-helpers'
+import { defaultComponentMocks, getComposableWrapper } from 'web-test-helpers'
 
 describe('useGroupActionsDelete', () => {
   describe('method "isEnabled"', () => {
@@ -69,24 +64,20 @@ function getWrapper({
   setup: (
     instance: ReturnType<typeof useGroupActionsDelete>,
     {
-      storeOptions,
       clientService
     }: {
-      storeOptions: typeof defaultStoreMockOptions
       clientService: ReturnType<typeof defaultComponentMocks>['$clientService']
     }
   ) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
   const mocks = defaultComponentMocks()
   return {
     wrapper: getComposableWrapper(
       () => {
         const instance = useGroupActionsDelete()
-        setup(instance, { storeOptions, clientService: mocks.$clientService })
+        setup(instance, { clientService: mocks.$clientService })
       },
-      { store, mocks, provide: mocks }
+      { mocks, provide: mocks }
     )
   }
 }
diff --git a/.../web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts b/.../web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
@@ -3,13 +3,7 @@ import { mock } from 'jest-mock-extended'
 import { unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
 import { eventBus, useCapabilityStore } from '@ownclouders/web-pkg'
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultStoreMockOptions,
-  getComposableWrapper,
-  writable
-} from 'web-test-helpers'
+import { defaultComponentMocks, getComposableWrapper, writable } from 'web-test-helpers'
 
 describe('useUserActionsDelete', () => {
   describe('method "isEnabled"', () => {
@@ -65,24 +59,20 @@ function getWrapper({
   setup: (
     instance: ReturnType<typeof useUserActionsDelete>,
     {
-      storeOptions,
       clientService
     }: {
-      storeOptions: typeof defaultStoreMockOptions
       clientService: ReturnType<typeof defaultComponentMocks>['$clientService']
     }
   ) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
   const mocks = defaultComponentMocks()
   return {
     wrapper: getComposableWrapper(
       () => {
         const instance = useUserActionsDelete()
-        setup(instance, { storeOptions, clientService: mocks.$clientService })
+        setup(instance, { clientService: mocks.$clientService })
       },
-      { store, mocks, provide: mocks }
+      { mocks, provide: mocks }
     )
   }
 }
diff --git a/...b-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts b/...b-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts
@@ -2,12 +2,7 @@ import { useUserActionsEditLogin } from '../../../../../src/composables/actions/
 import { mock } from 'jest-mock-extended'
 import { unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
-import {
-  createStore,
-  defaultStoreMockOptions,
-  getComposableWrapper,
-  writable
-} from 'web-test-helpers'
+import { getComposableWrapper, writable } from 'web-test-helpers'
 import { useCapabilityStore, useModals } from '@ownclouders/web-pkg'
 
 describe('useUserActionsEditLogin', () => {
@@ -50,25 +45,12 @@ describe('useUserActionsEditLogin', () => {
 function getWrapper({
   setup
 }: {
-  setup: (
-    instance: ReturnType<typeof useUserActionsEditLogin>,
-    {
-      storeOptions
-    }: {
-      storeOptions: typeof defaultStoreMockOptions
-    }
-  ) => void
+  setup: (instance: ReturnType<typeof useUserActionsEditLogin>) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
-
   return {
-    wrapper: getComposableWrapper(
-      () => {
-        const instance = useUserActionsEditLogin()
-        setup(instance, { storeOptions })
-      },
-      { store }
-    )
+    wrapper: getComposableWrapper(() => {
+      const instance = useUserActionsEditLogin()
+      setup(instance)
+    })
   }
 }