I10969 (#542) Adjustment to address various issues after dependency update

* pkp/pkp-lib#10969 Fix reactivity madness

* pkp/pkp-lib#10969 Address breaking change in vue3, where inject in pinia stores does not provide current component provides

* pkp/pkp-lib#10969 Defeated another infinite loop

* pkp/pkp-lib#10969 Back to have toolbar dynamic based on attachers

* pkp/pkp-lib#10969 Refined

Author: jardakotesovec

src/components/Composer/Composer.vue

@@ -553,10 +553,18 @@ export default {
 			searchPhrase: '',
 			searchResults: [],
 			showSearchResultCount: 10,
-			toolbar: 'bold italic superscript subscript | link',
 		};
 	},
 	computed: {
+		toolbar() {
+			let baseToolbar = 'bold italic superscript subscript | link ';
+
+			if (this.attachers?.length) {
+				baseToolbar += '| pkpAttachFiles';
+			}
+
+			return baseToolbar;
+		},
 		/**
 		 * A getter and setter to allow v-model on a prop
 		 */
@@ -579,8 +587,6 @@ export default {
 			}
 			let self = this;
 
-			self.toolbar += ' | pkpAttachFiles';
-
 			return {
 				setup: function (editor) {
 					editor.ui.registry.addButton('pkpAttachFiles', {

src/components/SideNav/SideNav.vue

@@ -92,9 +92,9 @@ if (reviewAssignmentMenuItem) {
 }
 
 // helper to attach count to the menu item
-function enrichMenuItemWithCounts(page, itemsCount) {
+function enrichMenuItemWithCounts(menuItems, page, itemsCount) {
 	if (itemsCount.value) {
-		const menuItem = menuItems.value.find((item) => item.key === page);
+		const menuItem = menuItems.find((item) => item.key === page);
 		if (menuItem) {
 			const menuItemsEnriched = menuItem.items.map((item) => ({
 				...item,
@@ -105,14 +105,21 @@ function enrichMenuItemWithCounts(page, itemsCount) {
 			menuItem.items = menuItemsEnriched;
 		}
 	}
+	return menuItems;
 }
 
 const menuItemsEnriched = computed(() => {
-	enrichMenuItemWithCounts('dashboards', dashboardCount);
-	enrichMenuItemWithCounts('mySubmissions', mySubmissionsCount);
-	enrichMenuItemWithCounts('reviewAssignments', reviewAssignmentCount);
+	const menuItemsCopy = JSON.parse(JSON.stringify(menuItems.value));
 
-	return menuItems.value;
+	enrichMenuItemWithCounts(menuItemsCopy, 'dashboards', dashboardCount);
+	enrichMenuItemWithCounts(menuItemsCopy, 'mySubmissions', mySubmissionsCount);
+	enrichMenuItemWithCounts(
+		menuItemsCopy,
+		'reviewAssignments',
+		reviewAssignmentCount,
+	);
+
+	return menuItemsCopy;
 });
 
 function convertLinksToArray(links, level = 1, parentKey = '') {
@@ -179,6 +186,7 @@ const {sideMenuProps} = useSideMenu(menuItemsEnriched, {
 watch(
 	() => props.links,
 	(newLinks) => {
+		console.log('SideNav watch');
 		menuItems.value = convertLinksToArray(newLinks);
 	},
 );

src/composables/useDataChanged.js

@@ -1,17 +1,23 @@
-import {inject, onUnmounted} from 'vue';
+import {onUnmounted} from 'vue';
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
+
 export function useDataChanged(callback) {
 	if (callback) {
-		const registerDataChangeCallback = inject('registerDataChangeCallback');
+		const registerDataChangeCallback = injectFromCurrentInstance(
+			'registerDataChangeCallback',
+		);
 		registerDataChangeCallback(callback);
 
-		const unRegisterDataChangeCallback = inject('unRegisterDataChangeCallback');
+		const unRegisterDataChangeCallback = injectFromCurrentInstance(
+			'unRegisterDataChangeCallback',
+		);
 
 		onUnmounted(() => {
 			unRegisterDataChangeCallback(callback);
 		});
 	}
 
-	const triggerDataChange = inject('triggerDataChange');
+	const triggerDataChange = injectFromCurrentInstance('triggerDataChange');
 
 	return {triggerDataChange};
 }

src/composables/useFetch.js

@@ -1,8 +1,8 @@
-import {ref, unref, inject} from 'vue';
+import {ref, unref} from 'vue';
 import {ofetch, createFetch} from 'ofetch';
 import {useModalStore} from '@/stores/modalStore';
 import {useProgressStore} from '@/stores/progressStore';
-
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
 import {useDebounceFn} from '@vueuse/core';
 
 let ofetchInstance = ofetch;
@@ -98,7 +98,7 @@ export function useFetch(url, options = {}) {
 
 	let lastRequestController = null;
 
-	const modalLevel = inject('modalLevel');
+	const modalLevel = injectFromCurrentInstance('modalLevel');
 	const screenName = modalLevel?.value ? `modal_${modalLevel.value}` : 'base';
 	const progressStore = useProgressStore();
 

src/managers/ReviewerManager/modals/workflowLogResponseModalStore.js

@@ -1,11 +1,13 @@
-import {inject} from 'vue';
-import {defineComponentStore} from '@/utils/defineComponentStore';
+import {
+	defineComponentStore,
+	injectFromCurrentInstance,
+} from '@/utils/defineComponentStore';
 import {useForm} from '@/composables/useForm';
 
 export const useWorkflowLogResponseModalStore = defineComponentStore(
 	'workflowLogResponseModal',
 	(props) => {
-		const closeModal = inject('closeModal');
+		const closeModal = injectFromCurrentInstance('closeModal');
 		const {set: updateForm, form} = useForm(props.logResponseForm);
 
 		function formSuccess() {

src/pages/workflow/modals/workflowChangeSubmissionLanguageModalStore.js

@@ -1,5 +1,8 @@
-import {inject, ref, computed, watch} from 'vue';
-import {defineComponentStore} from '@/utils/defineComponentStore';
+import {ref, computed, watch} from 'vue';
+import {
+	defineComponentStore,
+	injectFromCurrentInstance,
+} from '@/utils/defineComponentStore';
 import {useUrl} from '@/composables/useUrl';
 import {useFetch} from '@/composables/useFetch';
 import {useForm} from '@/composables/useForm';
@@ -62,7 +65,7 @@ export const useWorkflowChangeSubmissionLanguageModalStore =
 		// Get publication props
 		getData();
 
-		const closeModal = inject('closeModal');
+		const closeModal = injectFromCurrentInstance('closeModal');
 
 		/**
 		 * Functions

src/pages/workflow/workflowStore.js

@@ -1,4 +1,5 @@
-import {computed, inject} from 'vue';
+import {computed} from 'vue';
+import {injectFromCurrentInstance} from '@/utils/defineComponentStore';
 
 import {defineComponentStore} from '@/utils/defineComponentStore';
 import {
@@ -33,7 +34,7 @@ export const useWorkflowStore = defineComponentStore(
 		/**
 		 * Action to close the workflow from inside
 		 * */
-		const closeWorkflowModal = inject('closeModal');
+		const closeWorkflowModal = injectFromCurrentInstance('closeModal');
 
 		/**
 		 * Submission & Publication

src/utils/defineComponentStore.js

@@ -1,12 +1,40 @@
 import {defineStore, getActivePinia} from 'pinia';
-import {onMounted, onBeforeUnmount, provide, inject} from 'vue';
+import {
+	onMounted,
+	onBeforeUnmount,
+	provide,
+	inject,
+	getCurrentInstance,
+} from 'vue';
 
 let storesMap = {};
 
 export function getComponentStoreByName(storeName) {
 	return storesMap[storeName].useStore();
 }
 
+/**
+ * This is replacement for `inject` method offered from vue, to be used inside pinia "component stores"
+ * Component stores follow component life cycle for great convinience, but this is not common
+ * use case. Pinia stores are mostly used as global stores independent from components.
+ *
+ * With recent change in vue (https://github.com/vuejs/core/issues/11488),
+ * inject used within pinia defaults to injecting from root app component provides, instead
+ * of current instance. Therefore using custom implementation to get current instance provides.
+ *
+ *
+ */
+export function injectFromCurrentInstance(name) {
+	const instance = getCurrentInstance();
+	const provides = instance
+		? instance.parent == null
+			? instance.vnode.appContext && instance.vnode.appContext.provides
+			: instance.parent.provides
+		: void 0;
+
+	return provides?.[name];
+}
+
 export function defineComponentStore(
 	_storeName,
 	setupFn,