From b2ac6936cfc10479c1732667160934f3bb502612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 10 Apr 2024 10:36:04 +0200
Subject: [PATCH] I9870 - Consolidate modal rendering stack (#344)

* pkp/pkp-lib#9870 Render legacy modals via Vue.js
* pkp/pkp-lib#9870 Update storybook using openSideModal function
---
 .storybook/preview.js                         |   6 +-
 src/components/Container/Page.vue             |   2 -
 src/components/Modal/AjaxModalWrapper.vue     |  66 ++-
 src/components/Modal/Dialog.vue               |  18 +-
 src/components/Modal/ModalManager.vue         |  69 +--
 src/components/Modal/SideModal.mdx            |  40 +-
 src/components/Modal/SideModal.stories.js     | 445 +++++++++---------
 src/components/Modal/SideModal.vue            |  10 +-
 src/components/Modal/SideModalBody.vue        |  16 +-
 ...dyAjax.vue => SideModalBodyLegacyAjax.vue} |   6 +-
 src/composables/useDialog.js                  |  11 -
 src/composables/useDialog.mdx                 |  54 ---
 src/composables/useModal.js                   |  15 +
 src/composables/useModal.mdx                  |  72 +++
 ...eDialog.stories.js => useModal.stories.js} |  10 +-
 src/pages/submissions/AssignEditorsModal.vue  |  23 -
 .../submissions/SubmissionSummaryModal.vue    |  23 +-
 src/pages/submissions/SubmissionsPage.vue     |  26 -
 .../submissions/submissionSummaryStore.js     |   6 +-
 src/pages/submissions/submissionsPageStore.js |  43 +-
 src/stores/modalStore.js                      | 129 ++++-
 21 files changed, 613 insertions(+), 477 deletions(-)
 rename src/components/Modal/{SideModalBodyAjax.vue => SideModalBodyLegacyAjax.vue} (73%)
 delete mode 100644 src/composables/useDialog.js
 delete mode 100644 src/composables/useDialog.mdx
 create mode 100644 src/composables/useModal.js
 create mode 100644 src/composables/useModal.mdx
 rename src/composables/{useDialog.stories.js => useModal.stories.js} (92%)
 delete mode 100644 src/pages/submissions/AssignEditorsModal.vue

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 7029879d6..645534a61 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -22,7 +22,7 @@ import Tab from '@/components/Tabs/Tab.vue';
 import Tabs from '@/components/Tabs/Tabs.vue';
 import FloatingVue from 'floating-vue';
 
-import PkpDialog from '@/components/Modal/Dialog.vue';
+import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import VueScrollTo from 'vue-scrollto';
 
@@ -116,9 +116,9 @@ const preview = {
 		/** Globally Available Dialog */
 		(story) => ({
 			setup() {},
-			components: {story, PkpDialog},
+			components: {story, ModalManager},
 			template: `<div>			
-				<PkpDialog></PkpDialog>
+				<ModalManager></ModalManager>
 				<story />
 			</div>`,
 		}),
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index d762f98a8..c15ecff97 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -1,6 +1,5 @@
 <script type="text/javascript">
 import Container from '@/components/Container/Container.vue';
-import PkpDialog from '@/components/Modal/Dialog.vue';
 import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
@@ -9,7 +8,6 @@ import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissio
 export default {
 	name: 'Page',
 	components: {
-		PkpDialog,
 		PkpAnnouncer,
 		ModalManager,
 		ReviewerSubmissionPage,
diff --git a/src/components/Modal/AjaxModalWrapper.vue b/src/components/Modal/AjaxModalWrapper.vue
index f7ef84edf..50a751d5c 100644
--- a/src/components/Modal/AjaxModalWrapper.vue
+++ b/src/components/Modal/AjaxModalWrapper.vue
@@ -2,10 +2,18 @@
 	<div ref="contentDiv" @click="catchInsideClick"></div>
 </template>
 <script setup>
-import {ref, onMounted, inject, defineProps} from 'vue';
+/**
+ * Component to mimick part of AjaxModalHandler which fetches the html content from given url
+ * and presents it to the user
+ */
+import {ref, onMounted, inject, defineProps, onBeforeUnmount} from 'vue';
 import {useFetch} from '@/composables/useFetch';
 
 const {options} = defineProps({
+	/**
+	 * Following the object used within AjaxModalHandler
+	 * Particularly important is `url` and `modalHandler`
+	 */
 	options: {
 		type: Object,
 		default: () => {},
@@ -16,11 +24,13 @@ const contentDiv = ref(null);
 // eslint-disable-next-line no-unused-vars
 const pkp = window.pkp;
 
+// Fetches html content from legacy endpoints
 const {data: modalData, fetch: fetchAssignParticipantPage} = useFetch(
 	options.url,
 );
 
-const closeModal = inject('closeModal');
+// Legacy modal has mechanism where it needs to check with form whether it can close
+// Mimicking this behaviour
 const registerCloseCallback = inject('registerCloseCallback');
 registerCloseCallback(() => {
 	// eslint-disable-next-line no-unused-vars
@@ -50,35 +60,53 @@ function catchInsideClick(e) {
 	}
 }
 
-function passToBridge(jQueryEvent) {
-	// If we have an event bridge configured then re-trigger
-	// the event on the target object.
-	if (options.eventBridge) {
-		$('[id^="' + options.eventBridge + '"]').trigger(
-			jQueryEvent.type,
-			jQueryEvent.data,
-		);
+/** The wrapping div element for modal is still created by legacy modal handler, but its not mounted
+ * only used to keep the legacy event communication going from inside modal to the outside (often its grid component)
+ *
+ */
+function passToHandlerElement(...args) {
+	if (options.modalHandler) {
+		options.modalHandler.getHtmlElement().trigger(...args);
 	}
+
+	return;
 }
 
 onMounted(async () => {
 	await fetchAssignParticipantPage();
 	if (modalData.value) {
-		// TODO CONSIDER REMOVE BINDS ON UNMOUNT
 		$(contentDiv.value).html(modalData.value.content);
-		$(contentDiv.value).bind('formSubmitted', closeModal);
-		$(contentDiv.value).bind('formCanceled', closeModal);
-		$(contentDiv.value).bind('ajaxHtmlError', closeModal);
-		$(contentDiv.value).bind('modalFinished', closeModal);
+		$(contentDiv.value).bind('formSubmitted', passToHandlerElement);
+		$(contentDiv.value).bind('wizardClose', passToHandlerElement);
+		$(contentDiv.value).bind('wizardCancel', passToHandlerElement);
+
+		$(contentDiv.value).bind('formCanceled', passToHandlerElement);
+		$(contentDiv.value).bind('ajaxHtmlError', passToHandlerElement);
+		$(contentDiv.value).bind('modalFinished', passToHandlerElement);
 
 		// Publish some otherwise private events triggered
 		// by nested widgets so that they can be handled by
 		// the element that opened the modal.
 
-		$(contentDiv.value).bind('redirectRequested', passToBridge);
-		$(contentDiv.value).bind('dataChanged', passToBridge);
-		$(contentDiv.value).bind('updateHeader', passToBridge);
-		$(contentDiv.value).bind('gridRefreshRequested', passToBridge);
+		$(contentDiv.value).bind('redirectRequested', passToHandlerElement);
+		$(contentDiv.value).bind('dataChanged', passToHandlerElement);
+		$(contentDiv.value).bind('updateHeader', passToHandlerElement);
+		$(contentDiv.value).bind('gridRefreshRequested', passToHandlerElement);
 	}
 });
+
+onBeforeUnmount(() => {
+	$(contentDiv.value).unbind('formSubmitted', passToHandlerElement);
+	$(contentDiv.value).unbind('wizardClose', passToHandlerElement);
+	$(contentDiv.value).unbind('wizardCancel', passToHandlerElement);
+
+	$(contentDiv.value).unbind('formCanceled', passToHandlerElement);
+	$(contentDiv.value).unbind('ajaxHtmlError', passToHandlerElement);
+	$(contentDiv.value).unbind('modalFinished', passToHandlerElement);
+
+	$(contentDiv.value).unbind('redirectRequested', passToHandlerElement);
+	$(contentDiv.value).unbind('dataChanged', passToHandlerElement);
+	$(contentDiv.value).unbind('updateHeader', passToHandlerElement);
+	$(contentDiv.value).unbind('gridRefreshRequested', passToHandlerElement);
+});
 </script>
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index acb28f5e0..8246acda6 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
 	<TransitionRoot as="template" :show="opened">
-		<HLDialog class="modal" :class="'modal--popup'" @close="onClose">
+		<HLDialog class="modal" @close="onClose">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -81,7 +81,7 @@
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted} from 'vue';
+import {ref, computed, onMounted, onUnmounted, watch} from 'vue';
 import {storeToRefs} from 'pinia';
 
 import {
@@ -106,11 +106,17 @@ const opened = computed(
 
 const isLoading = ref(false);
 
-function onClose() {
-	if (dialogProps.value.close) {
-		dialogProps.value.close();
+// resetting state after close
+// this is not ideal approach, but given how little state the dialog has
+// its less complex than splitting dialog into two components to have proper life cycle
+// as we do with SideModal and SideModalBody
+watch(opened, (prevOpened, nextOpened) => {
+	if (prevOpened === true && nextOpened === false) {
+		isLoading.value = false;
 	}
-	isLoading.value = false;
+});
+
+function onClose() {
 	closeDialog();
 }
 
diff --git a/src/components/Modal/ModalManager.vue b/src/components/Modal/ModalManager.vue
index b7890a8c3..b28aee6eb 100644
--- a/src/components/Modal/ModalManager.vue
+++ b/src/components/Modal/ModalManager.vue
@@ -1,45 +1,56 @@
 <template>
-	<SideModal close-label="Close" :open="isOpened" @close="close">
-		<SideModalBodyAjax :options="options" />
-		<SideModal close-label="Close" :open="isOpened2" @close="close2">
-			<SideModalBodyAjax :options="options2" />
+	<SideModal
+		close-label="Close"
+		:open="sideModal1?.opened || false"
+		:modal-level="1"
+		@close="() => close(sideModal1?.modalId)"
+	>
+		<component :is="component1" v-bind="sideModal1?.props" />
+		<SideModal
+			close-label="Close"
+			:modal-level="2"
+			:open="sideModal2?.opened || false"
+			@close="() => close(sideModal2?.modalId)"
+		>
+			<component :is="component2" v-bind="sideModal2?.props" />
 		</SideModal>
 	</SideModal>
 	<PkpDialog></PkpDialog>
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {computed} from 'vue';
+import {useModalStore} from '@/stores/modalStore';
+import {storeToRefs} from 'pinia';
 import SideModal from '@/components/Modal/SideModal.vue';
-import SideModalBodyAjax from '@/components/Modal/SideModalBodyAjax.vue';
+import LegacyAjax from '@/components/Modal/SideModalBodyLegacyAjax.vue';
 import PkpDialog from '@/components/Modal/Dialog.vue';
 
-const isOpened = ref(false);
-const isOpened2 = ref(false);
+const LegacyModals = {LegacyAjax};
 
-const options = ref(null);
-const options2 = ref(null);
+const modalStore = useModalStore();
+const {sideModal1, sideModal2} = storeToRefs(useModalStore());
 
-function close() {
-	isOpened.value = false;
-	options.value = null;
-}
-
-function close2() {
-	isOpened2.value = false;
-	options2.value = null;
-}
-
-// 			pkp.eventBus.$emit('open-tab', tab);
+// Component can be either string or actual vue component
+const component1 = computed(() => {
+	if (!sideModal1.value?.component) {
+		return null;
+	}
+	return typeof sideModal1.value.component === 'string'
+		? LegacyModals[sideModal1.value.component]
+		: sideModal1.value.component;
+});
 
-/** POC, its disabled for now, it will handle legacy modals in future to improve their accessibility */
-pkp.eventBus.$on('open-modal-vue', (_options) => {
-	if (options.value) {
-		options2.value = _options;
-		isOpened2.value = true;
-		return;
+const component2 = computed(() => {
+	if (!sideModal2.value?.component) {
+		return null;
 	}
-	options.value = _options;
-	isOpened.value = true;
+	return typeof sideModal2.value.component === 'string'
+		? LegacyModals[sideModal2.value.component]
+		: sideModal2.value.component;
 });
+
+function close(modalId) {
+	modalStore.closeSideModal(true, modalId);
+}
 </script>
diff --git a/src/components/Modal/SideModal.mdx b/src/components/Modal/SideModal.mdx
index 0b5457ce3..19a37ed05 100644
--- a/src/components/Modal/SideModal.mdx
+++ b/src/components/Modal/SideModal.mdx
@@ -19,9 +19,7 @@ To correctly handle accessibility (title, description) and focus management - [h
 
 ## Usage
 
-Important to keep in mind that if you need to nest these modals, its necessary to define them inside each other, which ensures they correctly handle mouse/keyboard events.
-
-We recommend to define modals as individual component files, rather than inline them, that ensures that the `setup` function and any other component life cycle event are triggered as modal is opened/closed. Therefore its easier to control when for example to fetch data from API. Note that in stories the `SideModalBody` is inlined inside `SideModal`, so its easier to see the source code of examples.
+We recommend to define modals as individual component files, rather than inline them, that ensures that the `setup` function and any other component life cycle event are triggered as modal is opened/closed. Therefore its easier to control when for example to fetch data from API. We might introduce option to define inline modals for basic use cases in future
 
 ### Defining Modal Component
 
@@ -55,29 +53,27 @@ We recommend to define modals as individual component files, rather than inline
 </script>
 ```
 
-### Controlling Modal Component
+### Opening SideModal
 
-```html
-/** SubmissionModal.vue */
-<template>
-	<PkpButton @click="isModalOpened = true">Open Modal</PkpButton>
-	<SideModal :open="isModalOpened" @close="closeModal">
-		<SubmissionModal />
-	</SideModal>
-</template>
-<script setup>
-	import {ref} from 'vue';
+To open SideModal, use `openSideModal` function from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. This ensures that the SideModal is displayed correctly even if the SideModals are nested.
 
-	const isModalOpened = ref(true);
-	function closeModal() {
-		isModalOpened.value = false;
-	}
-</script>
-```
+### Closing SideModal
 
-## SideModal Props
+To close the modal from the inside of the modal, there is `closeModal` slot prop available. Full example is in SideModalWithTabs story.
 
-<ArgTypes />
+```html
+<SideModalBody>
+	<template #title>Title</template>
+	<template #default="{closeModal}">
+		<div class="p-4">
+			<div class="bg-secondary p-4">
+				content
+				<PkpButton class="mt-4" @click="closeModal()">Close</PkpButton>
+			</div>
+		</div>
+	</template>
+</SideModalBody>
+```
 
 ## SideModalBody Slots
 
diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js
index 3aa7ac09c..bf01fd646 100644
--- a/src/components/Modal/SideModal.stories.js
+++ b/src/components/Modal/SideModal.stories.js
@@ -1,6 +1,7 @@
 import {within, userEvent} from '@storybook/test';
 import {ref} from 'vue';
 import SideModal from './SideModal.vue';
+import {useModal} from '@/composables/useModal.js';
 import SideModalBody from './SideModalBody.vue';
 import SideModalLayout2Columns from './SideModalLayout2Columns.vue';
 import PkpForm from '@/components/Form/Form.vue';
@@ -16,44 +17,45 @@ export default {
 	component: SideModal,
 };
 
+const SideModalBase = {
+	components: {SideModalBody},
+	template: `
+		<SideModalBody>
+			<template #pre-title>325</template>
+			<template #title>Title</template>
+			<template #description>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+			</template>
+			<template #post-description>
+				Additional info, check SubmissionSummaryModal.vue for good example
+			</template>
+			<template #actions>
+				<PkpButton element="a" href="https://www.google.com">
+					View submission in detail
+				</PkpButton>
+			</template>
+
+			<div class="p-4">
+				<div class="bg-secondary p-4">CONTENT</div>
+			</div>
+		</SideModalBody>
+	`,
+};
+
 export const Base = {
 	render: (args) => ({
-		components: {SideModal, SideModalBody},
+		components: {SideModal, SideModalBase},
 		setup() {
-			const isModalOpened = ref(false);
-			function closeModal() {
-				isModalOpened.value = false;
+			const {openSideModal} = useModal();
+			function openModal() {
+				openSideModal(SideModalBase, {});
 			}
-			return {isModalOpened, closeModal};
+			return {openModal};
 		},
 		template: `
-			<PkpButton  @click="isModalOpened = true">
+			<PkpButton  @click="openModal">
 				Open Modal
 			</PkpButton>
-			<SideModal
-				:open="isModalOpened"
-				@close="closeModal"
-			>
-				<SideModalBody>
-					<template #pre-title>325</template>
-					<template #title>Title</template>
-					<template #description>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-					</template>
-					<template #post-description>
-						Additional info, check SubmissionSummaryModal.vue for good example
-					</template>
-					<template #actions>
-						<PkpButton element="a" href="https://www.google.com">
-							View submission in detail
-						</PkpButton>
-					</template>
-
-					<div class="p-4">
-						<div class="bg-secondary p-4">CONTENT</div>
-					</div>
-				</SideModalBody>
-			</SideModal>
 		`,
 	}),
 	decorators: [
@@ -72,76 +74,81 @@ export const Base = {
 	},
 };
 
+const SideModalTwoColumns = {
+	components: {SideModal, SideModalBody, SideModalLayout2Columns},
+	setup() {
+		const metadata = [
+			{name: 'Type', value: 'Article'},
+			{
+				name: 'Abstract',
+				value:
+					'Nam id quam mollis, porta dui vel, accumsan sem. Sed commodo felis tristique justo pulvinar lacinia. Etiam pulvinar tortor et dui malesuada fringilla. Nullam leo risus, luctus ut sem ut, dignissim luctus quam. Nulla vel varius urna. Cras eget odio tellus. Proin eu nisi vehicula nulla laculis lobortis.',
+			},
+		];
+		const generalInformation = [
+			{name: 'Editors request', value: 'dd-mm-yyyy'},
+			{
+				name: 'Response due date',
+				value: 'dd-mm-yyy',
+			},
+		];
+		return {metadata, generalInformation};
+	},
+	template: `
+		<SideModalBody>
+			<template #pre-title>970</template>
+			<template #title><span class="underline">Round 1 Review submitted by you for</span></template>
+			<template #description>
+				Is blended e-learning as measured by an achievement test and self-assessment better than traditional classroom learning for vocational high school students?
+			</template>
+
+			<SideModalLayout2Columns>
+				<template #left>
+					<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+					aliquip ex ea commodo consequat.
+					</p>
+				</template>
+				<template #right1>
+					<div class="text-xl-bold">Article Metadata</div>
+					<div v-for="item in metadata" class="mt-4">
+						<div class="text-lg-bold">{{ item.name }}:</div>
+						<div class="text-base-normal mt-1">{{item.value}}</div>
+					</div>
+
+				</template>
+				<template #right2>
+					<div class="text-xl-bold">General Inforation</div>
+					<div v-for="item in generalInformation" class="mt-4">
+						<div class="text-lg-bold">{{ item.name }}:</div>
+						<div class="text-base-normal mt-1">{{item.value}}</div>
+					</div>
+				</template>
+
+
+			</SideModalLayout2Columns>				
+		</SideModalBody>
+	`,
+};
+
 export const TwoColumnsLayout = {
 	render: (args) => ({
-		components: {SideModal, SideModalBody, SideModalLayout2Columns},
+		components: {SideModalTwoColumns},
 		setup() {
-			const isModalOpened = ref(false);
-			function closeModal() {
-				isModalOpened.value = false;
+			const {openSideModal} = useModal();
+
+			function openModal() {
+				openSideModal(SideModalTwoColumns);
 			}
-			const metadata = [
-				{name: 'Type', value: 'Article'},
-				{
-					name: 'Abstract',
-					value:
-						'Nam id quam mollis, porta dui vel, accumsan sem. Sed commodo felis tristique justo pulvinar lacinia. Etiam pulvinar tortor et dui malesuada fringilla. Nullam leo risus, luctus ut sem ut, dignissim luctus quam. Nulla vel varius urna. Cras eget odio tellus. Proin eu nisi vehicula nulla laculis lobortis.',
-				},
-			];
-			const generalInformation = [
-				{name: 'Editors request', value: 'dd-mm-yyyy'},
-				{
-					name: 'Response due date',
-					value: 'dd-mm-yyy',
-				},
-			];
-
-			return {isModalOpened, closeModal, metadata, generalInformation};
+
+			return {openModal};
 		},
 		template: `
-			<PkpButton  @click="isModalOpened = true">
+			<PkpButton  @click="openModal">
 				Open Modal
 			</PkpButton>
-			<SideModal
-				:open="isModalOpened"
-				@close="closeModal"
-			>
-				<SideModalBody>
-					<template #pre-title>970</template>
-					<template #title><span class="underline">Round 1 Review submitted by you for</span></template>
-					<template #description>
-						Is blended e-learning as measured by an achievement test and self-assessment better than traditional classroom learning for vocational high school students?
-					</template>
-
-					<SideModalLayout2Columns>
-						<template #left>
-							<p>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-							eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-							minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-							aliquip ex ea commodo consequat.
-							</p>
-						</template>
-						<template #right1>
-							<div class="text-xl-bold">Article Metadata</div>
-							<div v-for="item in metadata" class="mt-4">
-								<div class="text-lg-bold">{{ item.name }}:</div>
-								<div class="text-base-normal mt-1">{{item.value}}</div>
-							</div>
-
-						</template>
-						<template #right2>
-							<div class="text-xl-bold">General Inforation</div>
-							<div v-for="item in generalInformation" class="mt-4">
-								<div class="text-lg-bold">{{ item.name }}:</div>
-								<div class="text-base-normal mt-1">{{item.value}}</div>
-							</div>
-						</template>
-
-
-					</SideModalLayout2Columns>				
-				</SideModalBody>
-			</SideModal>
 		`,
 	}),
 	decorators: [
@@ -149,7 +156,6 @@ export const TwoColumnsLayout = {
 			template: '<div style="height: 700px"><story/></div>',
 		}),
 	],
-
 	args: {},
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
@@ -159,46 +165,51 @@ export const TwoColumnsLayout = {
 		await user.click(canvas.getByText('Open Modal'));
 	},
 };
+
+const SideModalWithForm = {
+	components: {SideModalBody, PkpForm},
+	setup() {
+		const form = ref({
+			...cloneDeep(FormMock),
+			action: 'https://httpbin.org',
+			method: 'GET',
+		});
+
+		return {form};
+	},
+	template: `
+		<SideModalBody>
+			<template #title>
+				Title
+			</template>
+			<template #description>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+			</template>
+			<div class="p-4">
+				<div class="bg-secondary">
+					<PkpForm v-bind="form" @set="setForm" @success="formSuccess" />
+				</div> 
+			</div>
+		</SideModalBody>
+
+	`,
+};
+
 export const WithForm = {
 	render: (args) => ({
-		components: {SideModal, SideModalBody, PkpForm},
+		components: {},
 		setup() {
-			const isModalOpened = ref(false);
-			function closeModal() {
-				isModalOpened.value = false;
+			const {openSideModal} = useModal();
+			function openModal() {
+				openSideModal(SideModalWithForm);
 			}
 
-			const form = ref({
-				...cloneDeep(FormMock),
-				action: 'https://httpbin.org',
-				method: 'GET',
-			});
-
-			return {isModalOpened, closeModal, form};
+			return {openModal};
 		},
 		template: `
-			<PkpButton @click="isModalOpened = true">
+			<PkpButton @click="openModal">
 				Modal with Form
 			</PkpButton>
-			<SideModal
-				:open="isModalOpened"
-				@close="closeModal"
-
-			>
-				<SideModalBody>
-					<template #title>
-						Title
-					</template>
-					<template #description>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-					</template>
-					<div class="p-4">
-						<div class="bg-secondary">
-							<PkpForm v-bind="form" @set="setForm" @success="formSuccess" />
-						</div> 
-					</div>
-				</SideModalBody>
-			</SideModal>
 		`,
 	}),
 	play: async ({canvasElement}) => {
@@ -228,66 +239,67 @@ export const WithForm = {
 	args: {},
 };
 
+const SideModalWithTabs = {
+	components: {SideModalBody, Tab, Tabs},
+	setup() {},
+	template: `
+		<SideModalBody>
+			<template #title>
+				Title
+			</template>
+			<template #description>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+			</template>
+			<template #default="{closeModal}">
+				<div class="p-4">
+					<div class="bg-secondary p-4">
+					<p>
+						Avoid complex interactions in modals whenever possible. Deeply nested
+						tabs like this are often a sign that a single modal is trying to do too
+						much. If there is more than one task that can be completed in a modal,
+						it is usually better to use a different UI pattern.
+					</p>
+					<Tabs class="mt-4">
+						<Tab id="one" label="First Tab">
+							<Tabs>
+								<Tab id="nestedone" label="First nested">
+									Lorem ipsum dolor sit amet
+								</Tab>
+								<Tab id="nestedtwo" label="Second nested">
+									Amet sit dolor ipsum Lorem
+								</Tab>
+								<Tab id="nestedthree" label="Third nested">
+									Dolor ipsum sit lorem amet
+								</Tab>
+							</Tabs>
+						</Tab>
+						<Tab id="two" label="Second Tab">This is the second tab.</Tab>
+						<Tab id="three" label="Third Tab">This is the third tab.</Tab>
+					</Tabs>
+					<div class="flex justify-end">
+						<PkpButton class="mt-4" @click="closeModal()">Close</PkpButton>
+					</div>		
+					</div> 
+				</div>
+</template>
+		</SideModalBody>
+	`,
+};
+
 export const WithTabs = {
 	render: (args) => ({
-		components: {SideModal, SideModalBody, Tab, Tabs},
+		components: {},
 		setup() {
-			const isModalOpened = ref(false);
-			function closeModal() {
-				isModalOpened.value = false;
+			const {openSideModal} = useModal();
+			function openModal() {
+				openSideModal(SideModalWithTabs);
 			}
-			return {isModalOpened, closeModal};
+			return {openModal};
 		},
 		template: `
-			<PkpButton  @click="isModalOpened = true">
+			<PkpButton  @click="openModal">
 				Modal with Tabs
 			</PkpButton>
-			<SideModal
-				:open="isModalOpened"
-				@close="closeModal"
-
-			>
-				<SideModalBody>
-					<template #title>
-						Title
-					</template>
-					<template #description>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-					</template>
-					<div class="p-4">
-						<div class="bg-secondary p-4">
-						<p>
-							Avoid complex interactions in modals whenever possible. Deeply nested
-							tabs like this are often a sign that a single modal is trying to do too
-							much. If there is more than one task that can be completed in a modal,
-							it is usually better to use a different UI pattern.
-						</p>
-						<Tabs class="mt-4">
-							<Tab id="one" label="First Tab">
-								<Tabs>
-									<Tab id="nestedone" label="First nested">
-										Lorem ipsum dolor sit amet
-									</Tab>
-									<Tab id="nestedtwo" label="Second nested">
-										Amet sit dolor ipsum Lorem
-									</Tab>
-									<Tab id="nestedthree" label="Third nested">
-										Dolor ipsum sit lorem amet
-									</Tab>
-								</Tabs>
-							</Tab>
-							<Tab id="two" label="Second Tab">This is the second tab.</Tab>
-							<Tab id="three" label="Third Tab">This is the third tab.</Tab>
-						</Tabs>
-						<div class="flex justify-end">
-							<PkpButton class="mt-4" @click="isModalOpened = false">Close</PkpButton>
-						</div>		
-
-						</div> 
-
-					</div>
-				</SideModalBody>
-			</SideModal>
 		`,
 	}),
 	decorators: [
@@ -305,50 +317,60 @@ export const WithTabs = {
 	},
 };
 
+const SideModalNested2 = {
+	components: {SideModalBody},
+	template: `
+		<SideModalBody>
+			<template #title>Second Level Side Modal</template>
+			<div class="p-4">
+				<div class="p-4 bg-secondary">
+					Content
+				</div>
+			</div>
+		</SideModalBody>
+
+	`,
+};
+
+const SideModalNested1 = {
+	components: {SideModalBody, SideModalNested2},
+
+	setup() {
+		const {openSideModal} = useModal();
+		function openModal() {
+			openSideModal(SideModalNested2);
+		}
+		return {openModal};
+	},
+	template: `
+		<SideModalBody>
+			<template #title>First Level Side Modal</template>
+			<div class="p-4">
+				<div class="p-4 bg-secondary">
+					<PkpButton @click="openModal">Open Second Modal</PkpButton>
+				</div>
+			</div>
+		</SideModalBody>
+
+	`,
+};
+
 export const NestedModal = {
 	render: (args) => ({
-		components: {SideModal, SideModalBody},
+		components: {SideModalNested1},
 		setup() {
-			const isModalOpened = ref(false);
-			function closeModal() {
-				isModalOpened.value = false;
-			}
+			const {openSideModal} = useModal();
 
-			const isModalOpened2 = ref(false);
-			function closeModal2() {
-				isModalOpened2.value = false;
+			function openModal() {
+				openSideModal(SideModalNested1);
 			}
-
-			return {isModalOpened, closeModal, isModalOpened2, closeModal2};
+			return {openModal};
 		},
 		template: `
-			<PkpButton  @click="isModalOpened = true">
+			<PkpButton  @click="openModal">
 				Nested modal
 			</PkpButton>
-			<SideModal
-				:open="isModalOpened"
-				@close="closeModal"
-
-			>
-				<SideModalBody>
-					<template #title>First Level Side Modal</template>
-					<div class="p-4">
-						<div class="p-4 bg-secondary">
-							<PkpButton @click="isModalOpened2 = true">Open Second Modal</PkpButton>
-						</div>
-					</div>
-					<SideModal :open="isModalOpened2" @close="closeModal2">
-						<SideModalBody>
-							<template #title>Second Level Side Modal</template>
-							<div class="p-4">
-								<div class="p-4 bg-secondary">
-									Content
-								</div>
-							</div>
-						</SideModalBody>
-					</SideModal>
-				</SideModalBody>
-			</SideModal>
+	
 		`,
 	}),
 	decorators: [
@@ -361,7 +383,6 @@ export const NestedModal = {
 		// Get parent element, as modals are in canvasElement sibling element
 		const canvas = within(canvasElement.parentElement);
 		const user = userEvent.setup();
-		console.log(canvasElement);
 
 		await user.click(canvas.getByText('Nested modal'));
 		await user.click(await canvas.findByText('Open Second Modal'));
diff --git a/src/components/Modal/SideModal.vue b/src/components/Modal/SideModal.vue
index b25fccf8d..ad471f676 100644
--- a/src/components/Modal/SideModal.vue
+++ b/src/components/Modal/SideModal.vue
@@ -46,11 +46,16 @@ import {
 	TransitionChild,
 } from '@headlessui/vue';
 
-defineProps({
+const props = defineProps({
 	open: {
 		type: Boolean,
 		required: true,
 	},
+	modalLevel: {
+		type: Number,
+		required: false,
+		default: 0,
+	},
 });
 
 const emit = defineEmits(['close']);
@@ -60,7 +65,7 @@ function registerCloseCallback(callback) {
 	closeCallbacks.value.push(callback);
 }
 
-function handleClose() {
+function handleClose(event) {
 	let canClose = true;
 	closeCallbacks.value.forEach((callback) => (canClose = callback()));
 	if (canClose) {
@@ -72,4 +77,5 @@ function handleClose() {
 
 provide('closeModal', handleClose);
 provide('registerCloseCallback', registerCloseCallback);
+provide('modalLevel', ref(props.modalLevel));
 </script>
diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
index 40176a653..f98490cbc 100644
--- a/src/components/Modal/SideModalBody.vue
+++ b/src/components/Modal/SideModalBody.vue
@@ -53,34 +53,24 @@
 </template>
 
 <script setup>
-import {inject, onUnmounted, computed, ref} from 'vue';
+import {inject, computed} from 'vue';
 import {DialogPanel, DialogTitle, DialogDescription} from '@headlessui/vue';
 import Icon from '@/components/Icon/Icon.vue';
 import PkpDialog from '@/components/Modal/Dialog.vue';
 
 import {useLocalize} from '@/composables/useLocalize';
-import {useModalStore} from '@/stores/modalStore';
 
 const {t} = useLocalize();
 
-const modalStore = useModalStore();
-
 /** Handle styling for nested SideModals */
-const myLevel = ref(0);
-modalStore.increaseModalLevel();
-myLevel.value = modalStore.modalLevel;
-
 const levelClasses = computed(() => {
-	if (myLevel.value === 2) {
+	if (modalLevel.value === 2) {
 		return 'max-w-4xl';
 	}
 
 	return 'max-w-5xl';
 });
 
-onUnmounted(() => {
-	modalStore.decreaseModalLevel();
-});
-
 const closeModal = inject('closeModal');
+const modalLevel = inject('modalLevel');
 </script>
diff --git a/src/components/Modal/SideModalBodyAjax.vue b/src/components/Modal/SideModalBodyLegacyAjax.vue
similarity index 73%
rename from src/components/Modal/SideModalBodyAjax.vue
rename to src/components/Modal/SideModalBodyLegacyAjax.vue
index 604a6c09b..08560fbf0 100644
--- a/src/components/Modal/SideModalBodyAjax.vue
+++ b/src/components/Modal/SideModalBodyLegacyAjax.vue
@@ -1,9 +1,9 @@
 <template>
-	<SideModalBody :secondary="true">
-		<template #header><h1 class="text-4xl-bold">Assign editors</h1></template>
+	<SideModalBody>
+		<template #title>{{ options.title }}</template>
 		<div class="p-4">
 			<div class="bg-secondary p-4">
-				<AjaxModalWrapper :options="options" />
+				<AjaxModalWrapper :key="options.url" :options="options" />
 			</div>
 		</div>
 	</SideModalBody>
diff --git a/src/composables/useDialog.js b/src/composables/useDialog.js
deleted file mode 100644
index f6f017ea0..000000000
--- a/src/composables/useDialog.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {useModalStore} from '@/stores/modalStore';
-
-export function useDialog() {
-	const modalStore = useModalStore();
-
-	function openDialog(props) {
-		modalStore.openDialog(props);
-	}
-
-	return {openDialog};
-}
diff --git a/src/composables/useDialog.mdx b/src/composables/useDialog.mdx
deleted file mode 100644
index 93f575dea..000000000
--- a/src/composables/useDialog.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
-
-import * as UseDialogStories from './useDialog.stories.js';
-
-<Meta of={UseDialogStories} />
-
-# useDialog
-
-# Usage
-
-Dialogs provide a quick way to show a simple confirmation prompt. Import `useDialog` composable and use the openDialog() method to create a dialog.
-
-```html
-<template>
-	<PkpButton @click="openWarningDialog">Open Dialog</PkpButton>
-</template>
-
-<script setup>
-	import {useDialog} from '@/composables/useDialog';
-
-	const {openDialog} = useDialog();
-
-	function openWarningDialog() {
-		openDialog({
-			name: 'example',
-			title: 'Submit Article',
-			message: 'Are you sure you want to submit this article?',
-			actions: [
-				{
-					label: 'Yes',
-					isPrimary: true,
-					callback: (close) => {
-						// user has confirmed
-						close();
-					},
-				},
-				{
-					label: 'No',
-					isWarnable: true,
-					callback: (close) => {
-						// user has cancelled. close the modal
-						close();
-					},
-				},
-			],
-			close: () => {
-				// dialog has been closed
-			},
-		});
-	}
-</script>
-```
-
-<Stories />
diff --git a/src/composables/useModal.js b/src/composables/useModal.js
new file mode 100644
index 000000000..2fb67e2b5
--- /dev/null
+++ b/src/composables/useModal.js
@@ -0,0 +1,15 @@
+import {useModalStore} from '@/stores/modalStore';
+
+export function useModal() {
+	const modalStore = useModalStore();
+
+	function openDialog(props) {
+		modalStore.openDialog(props);
+	}
+
+	function openSideModal(component, props) {
+		modalStore.openSideModal(component, props);
+	}
+
+	return {openDialog, openSideModal};
+}
diff --git a/src/composables/useModal.mdx b/src/composables/useModal.mdx
new file mode 100644
index 000000000..a5e494b25
--- /dev/null
+++ b/src/composables/useModal.mdx
@@ -0,0 +1,72 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as useModalStories from './useModal.stories.js';
+
+<Meta of={useModalStories} />
+
+# useModal
+
+## openDialog
+
+Dialogs provide a quick way to show a simple confirmation prompt. Import `useModal` composable and use the openDialog() method to create a dialog.
+
+```html
+<template>
+	<PkpButton @click="openWarningDialog">Open Dialog</PkpButton>
+</template>
+
+<script setup>
+	import {useModal} from '@/composables/useModal';
+
+	const {openDialog} = useModal();
+
+	function openWarningDialog() {
+		openDialog({
+			name: 'example',
+			title: 'Submit Article',
+			message: 'Are you sure you want to submit this article?',
+			actions: [
+				{
+					label: 'Yes',
+					isPrimary: true,
+					callback: (close) => {
+						// user has confirmed
+						close();
+					},
+				},
+				{
+					label: 'No',
+					isWarnable: true,
+					callback: (close) => {
+						// user has cancelled. close the modal
+						close();
+					},
+				},
+			],
+			close: () => {
+				// dialog has been closed
+			},
+		});
+	}
+</script>
+```
+
+## openSideModal
+
+SideModal should be created as separate component, follow examples from [SideModal](../?path=/docs/components-sidemodal--docs) component, where `openSideModal()` is also used to control the SideModals.
+
+Once you have the SideModal component created just pass the component as first argument and its props as second argument.
+
+Alternatively its possible to pass component name if its globally registered.
+
+```javascript
+
+<script setup>
+	import SummaryModal from '@/pages/submissions/summaryModal.vue'
+	const {openSideModal} = useModal();
+	function openModal() {
+		openSideModal(SummaryModal, {someProp: 5});
+	}
+</script>
+
+```
diff --git a/src/composables/useDialog.stories.js b/src/composables/useModal.stories.js
similarity index 92%
rename from src/composables/useDialog.stories.js
rename to src/composables/useModal.stories.js
index ca08c2813..aaba9ca85 100644
--- a/src/composables/useDialog.stories.js
+++ b/src/composables/useModal.stories.js
@@ -1,14 +1,14 @@
 import {within, userEvent} from '@storybook/test';
 
-import {useDialog} from './useDialog';
+import {useModal} from './useModal';
 import PkpButton from '@/components/Button/Button.vue';
 
 export default {
-	title: 'composables/useDialog',
+	title: 'composables/useModal',
 	render: (args) => ({
 		components: {PkpButton},
 		setup() {
-			const {openDialog} = useDialog();
+			const {openDialog} = useModal();
 
 			return {openDialog, args};
 		},
@@ -18,7 +18,7 @@ export default {
 	}),
 };
 
-export const BasicExample = {
+export const DialogBasic = {
 	args: {
 		buttonName: 'Basic Example',
 		name: 'basic',
@@ -54,7 +54,7 @@ export const BasicExample = {
 	],
 };
 
-export const FullExample = {
+export const DialogComplex = {
 	args: {
 		buttonName: 'Full Example',
 
diff --git a/src/pages/submissions/AssignEditorsModal.vue b/src/pages/submissions/AssignEditorsModal.vue
deleted file mode 100644
index 3f8f7b01f..000000000
--- a/src/pages/submissions/AssignEditorsModal.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-	<SideModalBody>
-		<template #title>Assign editors</template>
-		<div class="p-4">
-			<div class="bg-secondary p-4">
-				<AjaxModalWrapper :options="{url: contentUrl}" />
-			</div>
-		</div>
-	</SideModalBody>
-</template>
-<script setup>
-import SideModalBody from '@/components/Modal/SideModalBody.vue';
-import {useSubmissionsPageStore} from '@/pages/submissions/submissionsPageStore.js';
-import AjaxModalWrapper from '@/components/Modal/AjaxModalWrapper.vue';
-
-const submissionsPageStore = useSubmissionsPageStore();
-
-const {selectedSubmission: submission} = submissionsPageStore;
-
-const contentUrl = submissionsPageStore.assignParticipantUrl
-	.replace('__id__', submission.id)
-	.replace('__stageId__', submission.stageId);
-</script>
diff --git a/src/pages/submissions/SubmissionSummaryModal.vue b/src/pages/submissions/SubmissionSummaryModal.vue
index bafd73bbf..8be2e6060 100644
--- a/src/pages/submissions/SubmissionSummaryModal.vue
+++ b/src/pages/submissions/SubmissionSummaryModal.vue
@@ -92,7 +92,12 @@
 					<div>
 						<PkpButton
 							is-link="true"
-							@click="summaryStore.openAssignParticipantModal"
+							@click="
+								() =>
+									dashboardStore.openAssignParticipantModal(
+										props.selectedSubmission,
+									)
+							"
 						>
 							Assign Editors
 						</PkpButton>
@@ -100,13 +105,6 @@
 				</div>
 			</div>
 		</div>
-		<SideModal
-			close-label="Close"
-			:open="summaryStore.isModalOpenedAssignParticipant"
-			@close="summaryStore.closeAssignParticipantModal"
-		>
-			<AssignEditorsModal />
-		</SideModal>
 	</SideModalBody>
 </template>
 
@@ -115,14 +113,17 @@ import {storeToRefs} from 'pinia';
 import PkpButton from '@/components/Button/Button.vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import StageBubble from '@/components/StageBubble/StageBubble.vue';
-import SideModal from '@/components/Modal/SideModal.vue';
-import AssignEditorsModal from '@/pages/submissions/AssignEditorsModal.vue';
+
+import {useSubmissionsPageStore} from './submissionsPageStore';
 
 import {useSubmissionSummaryStore} from '@/pages/submissions/submissionSummaryStore';
 
 const pkp = window.pkp;
 
-const summaryStore = useSubmissionSummaryStore();
+const props = defineProps({selectedSubmission: {type: Object, required: true}});
+
+const summaryStore = useSubmissionSummaryStore(props);
+const dashboardStore = useSubmissionsPageStore(props);
 
 const {submission} = storeToRefs(summaryStore);
 </script>
diff --git a/src/pages/submissions/SubmissionsPage.vue b/src/pages/submissions/SubmissionsPage.vue
index b0d349bd2..3efa0d6a5 100644
--- a/src/pages/submissions/SubmissionsPage.vue
+++ b/src/pages/submissions/SubmissionsPage.vue
@@ -50,40 +50,14 @@
 			</div>
 		</div>
 	</div>
-	<!-- Side Modals -->
-	<SideModal
-		:open="store.isModalOpenedSummary"
-		@close="store.closeSummaryModal"
-	>
-		<SubmissionSummaryModal :summary-submission="store.summarySubmission" />
-	</SideModal>
-	<SideModal
-		:open="store.isModalOpenedFilters"
-		@close="store.closeFiltersModal"
-	>
-		<SubmissionsFiltersModal
-			:filters-form-initial="store.filtersForm"
-			@update-filters-form="store.updateFiltersForm"
-		/>
-	</SideModal>
-	<SideModal
-		:open="store.isModalOpenedAssignParticipant"
-		@close="store.closeAssignParticipantModal"
-	>
-		<AssignEditorsModal />
-	</SideModal>
 </template>
 <script setup>
 import PkpButton from '@/components/Button/Button.vue';
 import ActiveFilters from './ActiveFilters.vue';
 import SubmissionsTable from '@/pages/submissions/submissionsTable/SubmissionsTable.vue';
 import DashboardViews from '@/pages/submissions/DashboardViews.vue';
-import SubmissionSummaryModal from '@/pages/submissions/SubmissionSummaryModal.vue';
-import SubmissionsFiltersModal from '@/pages/submissions/SubmissionsFiltersModal.vue';
-import AssignEditorsModal from '@/pages/submissions/AssignEditorsModal.vue';
 import Search from '@/components/Search/Search.vue';
 
-import SideModal from '@/components/Modal/SideModal.vue';
 import {useSubmissionsPageStore} from './submissionsPageStore';
 
 const props = defineProps({
diff --git a/src/pages/submissions/submissionSummaryStore.js b/src/pages/submissions/submissionSummaryStore.js
index 4a68b2b0e..4d58c3e1c 100644
--- a/src/pages/submissions/submissionSummaryStore.js
+++ b/src/pages/submissions/submissionSummaryStore.js
@@ -1,15 +1,11 @@
 import {ref} from 'vue';
-import {useSubmissionsPageStore} from './submissionsPageStore';
 
 import {defineComponentStore} from '@/utils/defineComponentStore';
 
 export const useSubmissionSummaryStore = defineComponentStore(
 	'submissionSummary',
 	(initValues) => {
-		const submissionsPageStore = useSubmissionsPageStore();
-
-		const {selectedSubmission: submission} = submissionsPageStore;
-
+		const submission = initValues.selectedSubmission;
 		/**
 		 * Assign Participant Modal
 		 */
diff --git a/src/pages/submissions/submissionsPageStore.js b/src/pages/submissions/submissionsPageStore.js
index adbbb8608..8baa4fa1d 100644
--- a/src/pages/submissions/submissionsPageStore.js
+++ b/src/pages/submissions/submissionsPageStore.js
@@ -1,14 +1,19 @@
 import {computed, ref, watch} from 'vue';
+
 import {useFetchPaginated} from '@/composables/useFetchPaginated';
 import {useFiltersForm} from '@/composables/useFiltersForm';
 import {useSorting} from '@/composables/useSorting';
 import {useLocalize} from '@/composables/useLocalize';
+import {useModal} from '@/composables/useModal';
 import {useAnnouncer} from '@/composables/useAnnouncer';
 import {useApiUrl} from '@/composables/useApiUrl';
 
 import {useUrlSearchParams} from '@vueuse/core';
 import {defineComponentStore} from '@/utils/defineComponentStore';
 
+import SubmissionsFiltersModal from '@/pages/submissions/SubmissionsFiltersModal.vue';
+import SubmissionSummaryModal from '@/pages/submissions/SubmissionSummaryModal.vue';
+
 // TODO add actual translation strings
 const TitleTranslations = {
 	EDITORIAL_DASHBOARD: 'Dashboards',
@@ -25,6 +30,11 @@ const TitleIcons = {
 export const useSubmissionsPageStore = defineComponentStore(
 	'submissionsPage',
 	(pageInitConfig) => {
+		/**
+		 * ModalStore
+		 */
+		const {openSideModal} = useModal();
+
 		/**
 		 * Translation
 		 */
@@ -168,12 +178,9 @@ export const useSubmissionsPageStore = defineComponentStore(
 		 */
 		const isModalOpenedSummary = ref(false);
 		function openSummaryModal(submission) {
-			selectedSubmission.value = submission;
-			isModalOpenedSummary.value = true;
-		}
-		function closeSummaryModal() {
-			isModalOpenedSummary.value = false;
-			selectedSubmission.value = null;
+			openSideModal(SubmissionSummaryModal, {
+				selectedSubmission: submission,
+			});
 		}
 
 		/**
@@ -181,10 +188,10 @@ export const useSubmissionsPageStore = defineComponentStore(
 		 */
 		const isModalOpenedFilters = ref(false);
 		function openFiltersModal() {
-			isModalOpenedFilters.value = true;
-		}
-		function closeFiltersModal() {
-			isModalOpenedFilters.value = false;
+			openSideModal(SubmissionsFiltersModal, {
+				filtersFormInitial: filtersForm,
+				onUpdateFiltersForm: updateFiltersForm,
+			});
 		}
 
 		/**
@@ -194,12 +201,13 @@ export const useSubmissionsPageStore = defineComponentStore(
 		const isModalOpenedAssignParticipant = ref(false);
 
 		function openAssignParticipantModal(submission) {
-			selectedSubmission.value = submission;
-			isModalOpenedAssignParticipant.value = true;
-		}
-		function closeAssignParticipantModal() {
-			selectedSubmission.value = null;
-			isModalOpenedAssignParticipant.value = false;
+			const url = assignParticipantUrl.value
+				.replace('__id__', submission.id)
+				.replace('__stageId__', submission.stageId);
+
+			openSideModal('LegacyAjax', {
+				options: {url},
+			});
 		}
 
 		/**
@@ -267,18 +275,15 @@ export const useSubmissionsPageStore = defineComponentStore(
 			// Summary submission Modal
 			isModalOpenedSummary,
 			openSummaryModal,
-			closeSummaryModal,
 
 			// Filters Modal
 			isModalOpenedFilters,
 			openFiltersModal,
-			closeFiltersModal,
 
 			// AssignParticipant Modal
 			assignParticipantUrl,
 			isModalOpenedAssignParticipant,
 			openAssignParticipantModal,
-			closeAssignParticipantModal,
 		};
 	},
 );
diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js
index edeb8fd37..4caef80c8 100644
--- a/src/stores/modalStore.js
+++ b/src/stores/modalStore.js
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia';
-import {ref} from 'vue';
+import {ref, markRaw} from 'vue';
 import {t} from '@/utils/i18n';
 export const useModalStore = defineStore('modal', () => {
 	/**
@@ -26,7 +26,10 @@ export const useModalStore = defineStore('modal', () => {
 		dialogProps.value = _dialogProps;
 		dialogOpened.value = true;
 	}
-	function closeDialog() {
+	function closeDialog(triggerLegacyCloseHandler = true) {
+		if (triggerLegacyCloseHandler && dialogProps.value.closeLegacyHandler) {
+			dialogProps.value.closeLegacyHandler();
+		}
 		dialogProps.value = {};
 		dialogOpened.value = false;
 	}
@@ -51,17 +54,119 @@ export const useModalStore = defineStore('modal', () => {
 	/**
 	 * Side Modal Level
 	 *
-	 * To recognise how many side modals is opened to adjust styling
 	 */
-	const modalLevel = ref(0);
-	function increaseModalLevel() {
-		modalLevel.value++;
+
+	// object structure: { modalId, props, opened, component}
+	const sideModal1 = ref(null);
+
+	// object structure: { modalId, props, opened, component}
+	const sideModal2 = ref(null);
+
+	// creating unique modalId to ensure correct modal is being closed
+	let modalIdCounter = 1;
+
+	function openSideModal(_component, props = {}, _modalId = null) {
+		modalIdCounter++;
+		let component = null;
+		if (typeof _component !== 'string') {
+			// avoid making vue component object reactive which would be unnecessary performance hit
+			component = markRaw(_component);
+		} else {
+			component = _component;
+		}
+
+		// modalId is either calculated internally or its comming from the legacy handler if its legacy modal
+		const modalId = _modalId ? _modalId : modalIdCounter;
+
+		const opts = {
+			modalId,
+			opened: true,
+			component,
+			props,
+		};
+
+		// At this point we support two levels of side modals
+		//
+		// toBeClosed is used for edge case when modal close is delayed in 'onFormSuccess_' in ModalHandler to indicate
+		// form was successfully submitted. This does not work well in scenario when follow-up modal is immediatelly opened and
+		// is supposed to replace it (selecting issue & confirm publishing article modals)
+		if (!sideModal1.value?.opened || sideModal1.value?.toBeClosed) {
+			sideModal1.value = opts;
+		} else if (!sideModal2.value?.opened || sideModal2.value?.toBeClosed) {
+			sideModal2.value = opts;
+		}
 	}
 
-	function decreaseModalLevel() {
-		modalLevel.value--;
+	function closeSideModal(triggerLegacyCloseHandler = true, _modalId) {
+		let modalToClose = null;
+		if (sideModal1?.value?.modalId === _modalId) {
+			modalToClose = sideModal1;
+		}
+
+		if (sideModal2?.value?.modalId === _modalId) {
+			modalToClose = sideModal2;
+		}
+
+		modalToClose.value.opened = false;
+
+		// To keep the side modal animation nice, it needs to keep the component&props around for bit longer
+		setTimeout(() => {
+			if (!modalToClose.value.opened) {
+				modalToClose.value = null;
+			}
+		}, 300);
+
+		// When closing legacy modal its always important to do legacy handler clean up.
+		// Therefore it depends if the close request is coming from the legacy handler, in such
+		// case the clean up will be done as part of that.
+		// Or whether close is triggered by clicking on close button or outside of the modal, which needs
+		// to trigger handler modalClose explicitelly
+		if (
+			triggerLegacyCloseHandler &&
+			modalToClose.value?.props?.options?.modalHandler
+		) {
+			modalToClose.value?.props?.options?.modalHandler.modalClose();
+		}
 	}
 
+	// Listener for open modal requests coming from legacy handler.
+	pkp.eventBus.$on('open-modal-vue', (_args) => {
+		openSideModal(
+			_args.component,
+			{
+				options: _args.options,
+			},
+			_args.modalId,
+		);
+	});
+
+	// For special case when the closing modal is delayed, but we know it will be closed.
+	// Therefore any quick subsequent modal open should replace this one rather than creating second level
+	pkp.eventBus.$on('close-modal-vue-soon', (_args) => {
+		const modalId = _args.modalId;
+		if (sideModal1.value?.modalId === modalId) {
+			sideModal1.value.toBeClosed = true;
+		}
+		if (sideModal2.value?.modalId === modalId) {
+			sideModal2.value.toBeClosed = true;
+		}
+	});
+
+	// Listener for close modal requests coming from legacy handler.
+	pkp.eventBus.$on('close-modal-vue', (_args) => {
+		closeSideModal(false, _args.modalId);
+	});
+
+	// Listener for open dialog modals coming from legacy handler.
+	pkp.eventBus.$on('open-dialog-vue', (_args) => {
+		openDialog(_args.dialogProps);
+	});
+
+	// Listener for close dialog modals coming from legacy handler.
+	pkp.eventBus.$on('close-dialog-vue', (_args) => {
+		closeDialog(false);
+	});
+
 	return {
 		/** dialog level */
 		decreaseDialogLevel,
@@ -73,9 +178,9 @@ export const useModalStore = defineStore('modal', () => {
 		openDialogNetworkError,
 		openDialog,
 		closeDialog,
-		/** side modal level */
-		modalLevel,
-		increaseModalLevel,
-		decreaseModalLevel,
+		openSideModal,
+		closeSideModal,
+		sideModal1,
+		sideModal2,
 	};
 });