refactor: moves resources to pinia store

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

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()

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()

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()

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

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>()]

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()]
       }
     })
   }

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,

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()]
       }
     })
   }

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()]
       }
     })
   }

packages/web-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 }
     )
   }
 }

packages/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 }
     )
   }
 }

packages/web-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)
+    })
   }
 }