fix(settings): Reactive UI updates for app group limitations

The "Limit app usage to groups" functionality previously required a page
refresh to display changes when adding or removing group limitations.
This occurred due to store synchronization issues between the Pinia and
Vuex stores used by different components.

Signed-off-by: nfebe <[email protected]>

Author: nfebe

apps/settings/src/mixins/AppManagement.js

@@ -166,21 +166,35 @@ export default {
 		},
 		addGroupLimitation(groupArray) {
 			if (this.app?.app_api) {
-				return // not supported for app_api apps
+				return
 			}
 			const group = groupArray.pop()
 			const groups = this.app.groups.concat([]).concat([group.id])
+
+			if (this.store && this.store.updateAppGroups) {
+				this.store.updateAppGroups(this.app.id, groups)
+			}
+
 			this.$store.dispatch('enableApp', { appId: this.app.id, groups })
 		},
 		removeGroupLimitation(group) {
 			if (this.app?.app_api) {
-				return // not supported for app_api apps
+				return
 			}
 			const currentGroups = this.app.groups.concat([])
 			const index = currentGroups.indexOf(group.id)
 			if (index > -1) {
 				currentGroups.splice(index, 1)
 			}
+
+			if (this.store && this.store.updateAppGroups) {
+				this.store.updateAppGroups(this.app.id, currentGroups)
+			}
+
+			if (currentGroups.length === 0) {
+				this.groupCheckedAppsData = false
+			}
+
 			this.$store.dispatch('enableApp', { appId: this.app.id, groups: currentGroups })
 		},
 		forceEnable(appId) {

apps/settings/src/store/apps-store.ts

@@ -81,5 +81,12 @@ export const useAppsStore = defineStore('settings-apps', {
 		getAppById(appId: string): IAppstoreApp | null {
 			return this.apps.find(({ id }) => id === appId) ?? null
 		},
+
+		updateAppGroups(appId: string, groups: string[]) {
+			const app = this.apps.find(({ id }) => id === appId)
+			if (app) {
+				app.groups = [...groups]
+			}
+		},
 	},
 })

apps/settings/src/store/apps.js

@@ -72,7 +72,7 @@ const mutations = {
 	enableApp(state, { appId, groups }) {
 		const app = state.apps.find((app) => app.id === appId)
 		app.active = true
-		app.groups = groups
+		Vue.set(app, 'groups', [...groups])
 		if (app.id === 'app_api') {
 			state.appApiEnabled = true
 		}
@@ -183,13 +183,23 @@ const actions = {
 		return api.requireAdmin().then(() => {
 			context.commit('startLoading', apps)
 			context.commit('startLoading', 'install')
+
+			const previousState = {}
+			apps.forEach((_appId) => {
+				const app = context.state.apps.find((app) => app.id === _appId)
+				if (app) {
+					previousState[_appId] = {
+						active: app.active,
+						groups: [...(app.groups || [])],
+					}
+					context.commit('enableApp', { appId: _appId, groups })
+				}
+			})
+
 			return api.post(generateUrl('settings/apps/enable'), { appIds: apps, groups })
 				.then((response) => {
 					context.commit('stopLoading', apps)
 					context.commit('stopLoading', 'install')
-					apps.forEach((_appId) => {
-						context.commit('enableApp', { appId: _appId, groups })
-					})
 
 					// check for server health
 					return axios.get(generateUrl('apps/files/'))
@@ -225,6 +235,19 @@ const actions = {
 				.catch((error) => {
 					context.commit('stopLoading', apps)
 					context.commit('stopLoading', 'install')
+
+					apps.forEach((_appId) => {
+						if (previousState[_appId]) {
+							context.commit('enableApp', {
+								appId: _appId,
+								groups: previousState[_appId].groups,
+							})
+							if (!previousState[_appId].active) {
+								context.commit('disableApp', _appId)
+							}
+						}
+					})
+
 					context.commit('setError', {
 						appId: apps,
 						error: error.response.data.data.message,