pkp/pkp-lib#7495 Improvements&Fixes to pass end2tests for new workflow

src/components/Form/fields/FieldSelectIssue.vue

@@ -35,7 +35,7 @@
 					v-if="button"
 					v-bind="button"
 					class="pkpFormField--selectIssue__button"
-					@click="emitGlobal(button.event)"
+					@click="selectIssue"
 				>
 					{{ button.label }}
 				</PkpButton>
@@ -111,15 +111,8 @@ export default {
 		 */
 		button() {
 			let button = null;
-			if (this.publicationStatus === pkp.const.STATUS_SCHEDULED) {
+			if (this.publicationStatus !== pkp.const.STATUS_PUBLISHED) {
 				button = {
-					event: 'unpublish:publication',
-					isWarnable: true,
-					label: this.unscheduleLabel,
-				};
-			} else if (this.publicationStatus !== pkp.const.STATUS_PUBLISHED) {
-				button = {
-					event: 'schedule:publication',
 					label: this.value ? this.changeIssueLabel : this.assignLabel,
 				};
 			}
@@ -162,6 +155,23 @@ export default {
 		},
 	},
 	methods: {
+		async selectIssue() {
+			// workaround to avoid circular dependencies in storybook
+			// There is chain if imports, and some of them imported form
+			// which seems to be causing circular dependency
+			const {useSubmissionSummaryStore} = await import(
+				'@/pages/dashboard/SubmissionSummaryModal/submissionSummaryStore.js'
+			);
+
+			const summaryStore = useSubmissionSummaryStore();
+
+			summaryStore.workflowAssignToIssue({}, (finishedData) => {
+				if (finishedData.data.issueId) {
+					this.currentValue = finishedData.data.issueId;
+				}
+			});
+		},
+
 		/**
 		 * Emit a global event
 		 *

src/components/Modal/Dialog.vue

@@ -28,6 +28,7 @@
 						leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 					>
 						<DialogPanel
+							data-cy="dialog"
 							class="modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8"
 						>
 							<div class="flex min-h-12 items-center">

src/components/Modal/ModalManager.vue

@@ -1,6 +1,9 @@
 <template>
 	<SideModal
 		:key="sideModal1?.modalId"
+		:data-cy="
+			activeModalId === sideModal1?.modalId ? 'active-modal' : undefined
+		"
 		close-label="Close"
 		:open="sideModal1?.opened || false"
 		:modal-level="1"
@@ -15,7 +18,11 @@
 		></PkpDialog>
 
 		<SideModal
+			:key="sideModal2?.modalId"
 			close-label="Close"
+			:data-cy="
+				activeModalId === sideModal2?.modalId ? 'active-modal' : undefined
+			"
 			:modal-level="2"
 			:open="sideModal2?.opened || false"
 			@close="(returnData) => close(sideModal2?.modalId, returnData)"
@@ -32,6 +39,9 @@
 				@close="closeDialog"
 			></PkpDialog>
 			<SideModal
+				:data-cy="
+					activeModalId === sideModal3?.modalId ? 'active-modal' : undefined
+				"
 				close-label="Close"
 				:modal-level="3"
 				:open="sideModal3?.opened || false"
@@ -74,6 +84,18 @@ const {
 	dialogLevel,
 } = storeToRefs(useModalStore());
 
+const activeModalId = computed(() => {
+	if (sideModal3.value?.opened) {
+		return sideModal3.value.modalId;
+	} else if (sideModal2.value?.opened) {
+		return sideModal2.value.modalId;
+	} else if (sideModal1.value?.opened) {
+		return sideModal1.value.modalId;
+	}
+
+	return null;
+});
+
 // Component can be either string or vue component
 const component1 = computed(() => {
 	if (!sideModal1.value?.component) {

src/components/Modal/SideModalBody.vue

@@ -20,7 +20,7 @@
 							/>
 						</button>
 					</div>
-					<div class="ml-8 mr-8 flex-grow">
+					<div class="ml-8 mr-8 flex-grow" data-cy="sidemodal-header">
 						<div class="flex">
 							<div class="flex-grow">
 								<!-- @slot Small text above title, might be useful for example to display submission Id-->

src/components/SideNav/SideNav.vue

@@ -176,7 +176,10 @@ const {sideMenuProps} = useSideMenu(menuItemsEnriched, {
 	expandedKeys: getExpandedKeys(menuItems.value),
 });
 
-watch(props.links, (newLinks) => {
-	menuItems.value = convertLinksToArray(newLinks);
-});
+watch(
+	() => props.links,
+	(newLinks) => {
+		menuItems.value = convertLinksToArray(newLinks);
+	},
+);
 </script>

src/composables/useCurrentUser.js

@@ -1,22 +1,18 @@
-import {computed} from 'vue';
+export const EditorialRoles = [
+	pkp.const.ROLE_ID_SITE_ADMIN,
+	pkp.const.ROLE_ID_MANAGER,
+	pkp.const.ROLE_ID_SUB_EDITOR,
+	pkp.const.ROLE_ID_ASSISTANT,
+];
 
 export function useCurrentUser() {
-	const isSiteAdmin = computed(
-		() =>
-			!!pkp.currentUser.roles.find(
-				(role) => role === pkp.const.ROLE_ID_SITE_ADMIN,
-			),
-	);
-	const isManager = computed(
-		() =>
-			!!pkp.currentUser.roles.find(
-				(role) => role === pkp.const.ROLE_ID_MANAGER,
-			),
-	);
-
 	function hasCurrentUserAtLeastOneRole(roles = []) {
 		return roles.some((role) => pkp.currentUser.roles.includes(role));
 	}
 
-	return {isSiteAdmin, isManager, hasCurrentUserAtLeastOneRole};
+	function getCurrentUserId() {
+		return pkp.currentUser.id;
+	}
+
+	return {hasCurrentUserAtLeastOneRole, getCurrentUserId};
 }

src/composables/useParticipant.js

@@ -6,13 +6,6 @@ export function useParticipant() {
 			pkp.const.ROLE_ID_ASSISTANT,
 		];
 	}
-	function hasParticipantAtLeastOneRole(participant, roleIds = []) {
-		return participant.groups.some((group) => roleIds.includes(group.roleId));
-	}
-
-	function getFirstGroupWithFollowingRoles(participant, roleIds = []) {
-		return participant.groups.find((group) => roleIds.includes(group.roleId));
-	}
 
 	function getUserAvatarInitialsFromName(fullName) {
 		const fullNameParts = fullName.split(' ');
@@ -31,7 +24,5 @@ export function useParticipant() {
 	return {
 		getUserAvatarInitialsFromName,
 		getEditorRoleIds,
-		hasParticipantAtLeastOneRole,
-		getFirstGroupWithFollowingRoles,
 	};
 }

src/composables/useSubmission.js

@@ -1,5 +1,4 @@
 import {useLocalize} from './useLocalize';
-
 const {t, tk} = useLocalize();
 
 export const ExtendedStages = {

src/managers/ContributorManager/ContributorManager.vue

@@ -1,5 +1,6 @@
 <template>
 	<ContributorsListPanel
+		data-cy="contributor-manager"
 		v-bind="contributorManagerStore.contributorsListPanelProps"
 		class="pkpWorkflow__contributors"
 	></ContributorsListPanel>
@@ -12,6 +13,7 @@ const props = defineProps({
 	submission: {type: Object, required: true},
 	publication: {type: Object, required: true},
 	contributorForm: {type: Object, required: true},
+	canEditPublication: {type: Boolean, required: true},
 });
 
 const contributorManagerStore = useContributorManagerStore(props);

src/managers/ContributorManager/contributorManagerStore.js

@@ -23,8 +23,7 @@ export const useContributorManagerStore = defineComponentStore(
 
 		const contributorsListPanelProps = computed(() => {
 			return {
-				// TODO
-				canEditPublication: true,
+				canEditPublication: props.canEditPublication,
 				form: form.value,
 				id: 'contributors',
 				items: props.publication.authors,

src/managers/GalleyManager/GalleyManager.vue

@@ -1,5 +1,5 @@
 <template>
-	<PkpTable>
+	<PkpTable data-cy="galley-manager">
 		<template #label>{{ t('submission.layout.galleys') }}</template>
 		<template #top-controls>
 			<component
@@ -28,7 +28,7 @@
 				></component>
 			</TableRow>
 		</TableBody>
-		<template #bottom-controls>
+		<template v-if="galleyManagerStore.bottomActions.length" #bottom-controls>
 			<div class="space-x-y flex">
 				<component
 					:is="Components[action.component] || action.component"
@@ -69,6 +69,7 @@ const Components = {
 const props = defineProps({
 	publication: {type: Object, required: true},
 	submission: {type: Object, required: true},
+	canEditPublication: {type: Boolean, required: true},
 });
 
 const {t} = useLocalize();

src/managers/GalleyManager/galleyManagerStore.js

@@ -104,10 +104,21 @@ export const useGalleyManagerStore = defineComponentStore(
 		 * Actions
 		 */
 		const _galleyActionsFns = useGalleyManagerActions();
+		function getActionArgs() {
+			return {
+				canEditPublication: props.canEditPublication,
+			};
+		}
 
-		const itemActions = computed(() => _galleyActionsFns.getItemActions());
-		const bottomActions = computed(() => _galleyActionsFns.getBottomActions());
-		const topItems = computed(() => _galleyActionsFns.getTopItems());
+		const itemActions = computed(() =>
+			_galleyActionsFns.getItemActions(getActionArgs()),
+		);
+		const bottomActions = computed(() =>
+			_galleyActionsFns.getBottomActions(getActionArgs()),
+		);
+		const topItems = computed(() =>
+			_galleyActionsFns.getTopItems(getActionArgs()),
+		);
 
 		const {triggerDataChange} = useDataChanged();
 

src/managers/GalleyManager/useGalleyManagerActions.js

@@ -12,9 +12,13 @@ export const Actions = {
 export function useGalleyManagerActions() {
 	const {t} = useLocalize();
 
-	function getBottomActions() {
+	function getBottomActions({canEditPublication}) {
 		const actions = [];
 
+		if (!canEditPublication) {
+			return [];
+		}
+
 		actions.push({
 			component: 'GalleyManagerActionButton',
 			props: {label: t('grid.action.addGalley'), action: Actions.GALLEY_ADD},
@@ -24,16 +28,30 @@ export function useGalleyManagerActions() {
 		return actions;
 	}
 
-	function getTopItems() {
+	function getTopItems({canEditPublication}) {
 		const actions = [];
+		if (!canEditPublication) {
+			return [];
+		}
+
 		actions.push({component: 'GalleyManagerSortButton'});
 
 		return actions;
 	}
 
-	function getItemActions() {
+	function getItemActions({canEditPublication}) {
 		const actions = [];
 
+		if (!canEditPublication) {
+			return [
+				{
+					label: t('common.view'),
+					name: Actions.GALLEY_EDIT,
+					icon: 'View',
+				},
+			];
+		}
+
 		actions.push({
 			label: t('common.edit'),
 			name: Actions.GALLEY_EDIT,

src/managers/ParticipantManager/ParticipantManager.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="border border-light">
+	<div class="border border-light" data-cy="participant-manager">
 		<div class="flex items-center justify-between bg-default p-5">
 			<h3 class="text-2xl-bold uppercase text-heading">
 				{{ t('editor.submission.stageParticipants') }}
@@ -42,7 +42,7 @@
 					<div>
 						<DropdownActions
 							:actions="participantManagerStore.itemActions"
-							:label="t('common.moreActions')"
+							:label="`${participant.fullName} ${t('common.moreActions')}`"
 							:display-as-ellipsis="true"
 							@action="
 								(actionName) =>

src/managers/ParticipantManager/useParticipantManagerActions.js

@@ -119,7 +119,7 @@ export function useParticipantManagerActions() {
 		);
 	}
 
-	function participantLoginAs({participant}) {
+	function participantLoginAs({participant, submission}) {
 		const {openDialog} = useModal();
 
 		openDialog({
@@ -134,8 +134,20 @@ export function useParticipantManagerActions() {
 				{
 					label: t('common.ok'),
 					callback: (close) => {
+						let redirectUrl = '';
+						if (participant.roleId === pkp.const.ROLE_ID_AUTHOR) {
+							const {pageUrl: authorRedirectUrl} = useUrl(
+								`dashboard/mySubmissions?workflowSubmissionId=${submission.id}`,
+							);
+							redirectUrl = authorRedirectUrl.value;
+						} else {
+							const {pageUrl: editorialRedirectUrl} = useUrl(
+								`dashboard/editorial?workflowSubmissionId=${submission.id}`,
+							);
+							redirectUrl = editorialRedirectUrl.value;
+						}
 						const {redirectToPage} = useUrl(
-							`login/signInAsUser/${participant.id}`,
+							`login/signInAsUser/${participant.id}?redirectUrl=${encodeURIComponent(redirectUrl)}`,
 						);
 						redirectToPage();
 					},