owncloud · JammingBen · Jan 9, 2024 · Jan 8, 2024
diff --git a/changelog/unreleased/change-message-handling b/changelog/unreleased/change-message-handling
@@ -0,0 +1,8 @@
+Change: Message handling to pinia
+
+BREAKING CHANGE for developers: Messages are no longer stored in a vuex store but in pinia instead. This means to display a message in the UI, you need to use the new `useMessages` composable.
+
+For more details please see the linked PR down below.
+
+https://github.com/owncloud/web/pull/10309
+https://github.com/owncloud/web/issues/10210
diff --git a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
@@ -65,7 +65,7 @@ export default defineComponent({
 
     const logoInput: VNodeRef = ref(null)
 
-    const { actions: resetLogoActions } = useGeneralActionsResetLogo({ store })
+    const { actions: resetLogoActions } = useGeneralActionsResetLogo()
     const { actions: uploadLogoActions, uploadImage } = useGeneralActionsUploadLogo({
       imageInput: logoInput
     })

diff --git a/packages/web-app-admin-settings/src/components/Groups/ContextActions.vue b/packages/web-app-admin-settings/src/components/Groups/ContextActions.vue
@@ -24,7 +24,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
     const { actions: showDetailsActions } = useActionsShowDetails()
-    const { actions: deleteActions } = useGroupActionsDelete({ store })
+    const { actions: deleteActions } = useGroupActionsDelete()
     const { actions: editActions } = useGroupActionsEdit()
 
     const menuItemsPrimaryActions = computed(() =>

diff --git a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
@@ -17,7 +17,7 @@
 import { useGettext } from 'vue3-gettext'
 import { computed, defineComponent, ref, PropType, unref, watch } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { MaybeRef, Modal, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
+import { MaybeRef, Modal, useClientService, useEventBus, useMessages } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
@@ -27,7 +27,7 @@ export default defineComponent({
   emits: ['confirm', 'update:confirmDisabled'],
   setup(props, { emit, expose }) {
     const { $gettext } = useGettext()
-    const store = useStore()
+    const { showMessage, showErrorMessage } = useMessages()
     const eventBus = useEventBus()
     const clientService = useClientService()
 
@@ -61,15 +61,13 @@ export default defineComponent({
       try {
         const client = clientService.graphAuthenticated
         const response = await client.groups.createGroup(unref(group))
-        store.dispatch('showMessage', {
-          title: $gettext('Group was created successfully')
-        })
+        showMessage({ title: $gettext('Group was created successfully') })
         eventBus.publish('app.admin-settings.groups.add', { ...response?.data, members: [] })
       } catch (error) {
         console.error(error)
-        store.dispatch('showErrorMessage', {
+        showErrorMessage({
           title: $gettext('Failed to create group'),
-          error
+          errors: [error]
         })
       }
     }

diff --git a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
@@ -12,11 +12,11 @@ import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import GroupSelect from './GroupSelect.vue'
 import {
-  useStore,
   useEventBus,
   useClientService,
   useConfigurationManager,
-  Modal
+  Modal,
+  useMessages
 } from '@ownclouders/web-pkg'
 
 export default defineComponent({
@@ -35,7 +35,7 @@ export default defineComponent({
   },
   emits: ['update:confirmDisabled'],
   setup(props, { emit, expose }) {
-    const store = useStore()
+    const { showMessage, showErrorMessage } = useMessages()
     const clientService = useClientService()
     const configurationManager = useConfigurationManager()
     const eventBus = useEventBus()
@@ -75,7 +75,7 @@ export default defineComponent({
           'Group assignments already added',
           props.users.length * unref(selectedOptions).length
         )
-        store.dispatch('showMessage', { title })
+        showMessage({ title })
         return
       }
 
@@ -95,7 +95,7 @@ export default defineComponent({
                 { groupAssignmentCount: succeeded.length.toString() },
                 true
               )
-        store.dispatch('showMessage', { title })
+        showMessage({ title })
       }
 
       const failed = results.filter((r) => r.status === 'rejected')
@@ -114,7 +114,7 @@ export default defineComponent({
                 { groupAssignmentCount: failed.length.toString() },
                 true
               )
-        store.dispatch('showErrorMessage', {
+        showErrorMessage({
           title,
           errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
         })

diff --git a/packages/web-app-admin-settings/src/components/Users/ContextActions.vue b/packages/web-app-admin-settings/src/components/Users/ContextActions.vue
@@ -33,7 +33,7 @@ export default defineComponent({
     const { actions: showDetailsActions } = useActionsShowDetails()
     const { actions: editQuotaActions } = useUserActionsEditQuota()
     const { actions: userEditActions } = useUserActionsEdit()
-    const { actions: userDeleteActions } = useUserActionsDelete({ store })
+    const { actions: userDeleteActions } = useUserActionsDelete()
 
     const menuItemsPrimaryActions = computed(() =>
       [...unref(userEditActions), ...unref(userDeleteActions)].filter((item) =>

diff --git a/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue b/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
@@ -47,14 +47,14 @@
 import { useGettext } from 'vue3-gettext'
 import { computed, defineComponent, ref, unref, PropType, watch } from 'vue'
 import * as EmailValidator from 'email-validator'
-import { Modal, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
+import { Modal, useClientService, useEventBus, useMessages } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'CreateUserModal',
   props: { modal: { type: Object as PropType<Modal>, required: true } },
   emits: ['confirm', 'update:confirmDisabled'],
   setup(props, { emit, expose }) {
-    const store = useStore()
+    const { showMessage, showErrorMessage } = useMessages()
     const eventBus = useEventBus()
     const clientService = useClientService()
     const { $gettext } = useGettext()
@@ -111,15 +111,13 @@ export default defineComponent({
         const { data } = await client.users.createUser(unref(user))
         const { id: createdUserId } = data
         const { data: createdUser } = await client.users.getUser(createdUserId)
-        store.dispatch('showMessage', {
-          title: $gettext('User was created successfully')
-        })
+        showMessage({ title: $gettext('User was created successfully') })
         eventBus.publish('app.admin-settings.users.add', createdUser)
       } catch (error) {
         console.error(error)
-        store.dispatch('showErrorMessage', {
+        showErrorMessage({
           title: $gettext('Failed to create user'),
-          error
+          errors: [error]
         })
       }
     }

diff --git a/packages/web-app-admin-settings/src/components/Users/LoginModal.vue b/packages/web-app-admin-settings/src/components/Users/LoginModal.vue
@@ -17,7 +17,13 @@
 import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { User } from '@ownclouders/web-client/src/generated'
-import { useClientService, useStore, useEventBus, useUserStore, Modal } from '@ownclouders/web-pkg'
+import {
+  useClientService,
+  useEventBus,
+  useUserStore,
+  Modal,
+  useMessages
+} from '@ownclouders/web-pkg'
 
 type LoginOption = {
   label: string
@@ -35,7 +41,7 @@ export default defineComponent({
   },
   emits: ['update:confirmDisabled'],
   setup(props, { emit, expose }) {
-    const store = useStore()
+    const { showMessage, showErrorMessage } = useMessages()
     const clientService = useClientService()
     const eventBus = useEventBus()
     const { $gettext, $ngettext } = useGettext()
@@ -93,7 +99,7 @@ export default defineComponent({
                 { userCount: succeeded.length.toString() },
                 true
               )
-        store.dispatch('showMessage', { title })
+        showMessage({ title })
       }
 
       const failed = results.filter((r) => r.status === 'rejected')
@@ -112,7 +118,7 @@ export default defineComponent({
                 { userCount: failed.length.toString() },
                 true
               )
-        store.dispatch('showErrorMessage', {
+        showErrorMessage({
           title,
           errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
         })

diff --git a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
@@ -11,7 +11,7 @@ import { defineComponent, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import GroupSelect from './GroupSelect.vue'
-import { useStore, useEventBus, useClientService, Modal } from '@ownclouders/web-pkg'
+import { useEventBus, useClientService, Modal, useMessages } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'RemoveFromGroupsModal',
@@ -29,7 +29,7 @@ export default defineComponent({
   },
   emits: ['update:confirmDisabled'],
   setup(props, { emit, expose }) {
-    const store = useStore()
+    const { showMessage, showErrorMessage } = useMessages()
     const clientService = useClientService()
     const eventBus = useEventBus()
     const { $gettext, $ngettext } = useGettext()
@@ -68,7 +68,7 @@ export default defineComponent({
           'Group assignments already removed',
           props.users.length * unref(selectedOptions).length
         )
-        store.dispatch('showMessage', { title })
+        showMessage({ title })
         return
       }
 
@@ -88,7 +88,7 @@ export default defineComponent({
                 { groupAssignmentCount: succeeded.length.toString() },
                 true
               )
-        store.dispatch('showMessage', { title })
+        showMessage({ title })
       }
 
       const failed = results.filter((r) => r.status === 'rejected')
@@ -107,7 +107,7 @@ export default defineComponent({
                 { groupAssignmentCount: failed.length.toString() },
                 true
               )
-        store.dispatch('showErrorMessage', {
+        showErrorMessage({
           title,
           errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
         })

diff --git a/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts b/...ages/web-app-admin-settings/src/composables/actions/general/useGeneralActionsResetLogo.ts
@@ -1,11 +1,10 @@
-import { Store } from 'vuex'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { useAbility, useClientService, useRouter, useStore } from '@ownclouders/web-pkg'
+import { useAbility, useClientService, useMessages, useRouter } from '@ownclouders/web-pkg'
 import { Action } from '@ownclouders/web-pkg'
 
-export const useGeneralActionsResetLogo = ({ store }: { store?: Store<any> }) => {
-  store = store || useStore()
+export const useGeneralActionsResetLogo = () => {
+  const { showMessage, showErrorMessage } = useMessages()
   const { $gettext } = useGettext()
   const ability = useAbility()
   const clientService = useClientService()
@@ -15,17 +14,15 @@ export const useGeneralActionsResetLogo = ({ store }: { store?: Store<any> }) =>
     try {
       const httpClient = clientService.httpAuthenticated
       await httpClient.delete('/branding/logo')
-      store.dispatch('showMessage', {
-        title: $gettext('Logo was reset successfully. Reloading page...')
-      })
+      showMessage({ title: $gettext('Logo was reset successfully. Reloading page...') })
       setTimeout(() => {
         router.go(0)
       }, 1000)
     } catch (e) {
       console.error(e)
-      store.dispatch('showErrorMessage', {
+      showErrorMessage({
         title: $gettext('Failed to reset logo'),
-        error: e
+        errors: [e]
       })
     }
   }

diff --git a/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts b/...ges/web-app-admin-settings/src/composables/actions/general/useGeneralActionsUploadLogo.ts
@@ -1,18 +1,11 @@
-import { Store } from 'vuex'
 import { supportedLogoMimeTypes } from '../../../defaults'
 import { computed, VNodeRef, unref } from 'vue'
-import { Action } from '@ownclouders/web-pkg'
-import { useAbility, useClientService, useRouter, useStore } from '@ownclouders/web-pkg'
+import { Action, useMessages } from '@ownclouders/web-pkg'
+import { useAbility, useClientService, useRouter } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
-export const useGeneralActionsUploadLogo = ({
-  store,
-  imageInput
-}: {
-  store?: Store<any>
-  imageInput: VNodeRef
-}) => {
-  store = store || useStore()
+export const useGeneralActionsUploadLogo = ({ imageInput }: { imageInput: VNodeRef }) => {
+  const { showMessage, showErrorMessage } = useMessages()
   const { $gettext } = useGettext()
   const ability = useAbility()
   const clientService = useClientService()
@@ -26,9 +19,7 @@ export const useGeneralActionsUploadLogo = ({
     }
 
     if (!supportedLogoMimeTypes.includes(file.type)) {
-      return store.dispatch('showErrorMessage', {
-        title: $gettext('The file type is unsupported')
-      })
+      return showErrorMessage({ title: $gettext('The file type is unsupported') })
     }
 
     try {
@@ -40,17 +31,15 @@ export const useGeneralActionsUploadLogo = ({
           'Content-Type': 'multipart/form-data'
         }
       })
-      store.dispatch('showMessage', {
-        title: $gettext('Logo was uploaded successfully')
-      })
+      showMessage({ title: $gettext('Logo was uploaded successfully') })
       setTimeout(() => {
         router.go(0)
       }, 1000)
     } catch (e) {
       console.error(e)
-      store.dispatch('showErrorMessage', {
+      showErrorMessage({
         title: $gettext('Failed to upload logo'),
-        error: e
+        errors: [e]
       })
     }
   }

diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts
@@ -1,13 +1,12 @@
 import { computed } from 'vue'
-import { Store } from 'vuex'
-import { eventBus, useModals } from '@ownclouders/web-pkg'
-import { useClientService, useStore } from '@ownclouders/web-pkg'
+import { eventBus, useMessages, useModals } from '@ownclouders/web-pkg'
+import { useClientService } from '@ownclouders/web-pkg'
 import { GroupAction, GroupActionOptions } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { Group } from '@ownclouders/web-client/src/generated'
 
-export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
-  store = store || useStore()
+export const useGroupActionsDelete = () => {
+  const { showMessage, showErrorMessage } = useMessages()
   const { $gettext, $ngettext } = useGettext()
   const clientService = useClientService()
   const { dispatchModal } = useModals()
@@ -29,7 +28,7 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
               { groupCount: succeeded.length.toString() },
               true
             )
-      store.dispatch('showMessage', { title })
+      showMessage({ title })
     }
 
     const failed = results.filter((r) => r.status === 'rejected')
@@ -46,7 +45,7 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
               { groupCount: failed.length.toString() },
               true
             )
-      store.dispatch('showErrorMessage', {
+      showErrorMessage({
         title,
         errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
       })