Merge branch 'pkp:main' into issue-4976-ojs-3_5-feature-revisions-pro…

…cess-salman

src/components/Modal/Modal.vue

@@ -259,9 +259,108 @@ export default {
 	}
 }
 
+/**
+ * Isolate all of the styles for a popup modal
+ *
+ * As part of UX changes, our designer is encouraging us to move to
+ * the side-panel style of modal. Ideally, popup modals will only
+ * be used for simple Dialogs. Until then, these styles will need
+ * to remain to support existing uses of the pop-up modal.
+ */
+.modal--popup {
+	.modal__panel {
+		font-size: @font-sml;
+		line-height: @line-sml;
+	}
+	.modal__header {
+		display: flex;
+		align-items: center;
+		min-height: 3rem;
+	}
+	.modal__title {
+		margin: 0;
+		min-width: 1px;
+		padding: 0.5rem 1rem;
+		font-size: @font-base;
+		white-space: nowrap;
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+	}
+	.modal__closeButton {
+		margin-inline-start: auto; // fix position when no title exists
+		margin-inline-end: 0.5rem;
+		border: none;
+		font-size: @font-lead;
+		line-height: 1;
+		width: 2rem;
+		height: 2rem;
+		text-align: center;
+		background: transparent;
+		cursor: pointer;
+	}
+	.modal__closeButton:focus-visible {
+		outline: 0;
+		border-radius: @radius;
+		border: 1px solid @primary;
+	}
+	.modal__closeButton__left,
+	.modal__closeButton__right {
+		display: none;
+	}
+	.modal__content {
+		padding: 1rem;
+		> p:first-child {
+			margin-top: 0;
+		}
+		> p:last-child {
+			margin-bottom: 0;
+		}
+	}
+	.modal__footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		padding: 1rem;
+		* + .pkpButton {
+			margin-inline-start: 0.5rem;
+		}
+	}
+	// Forms in popupmodals
+	.pkpForm {
+		margin: -1rem;
+	}
+	.pkpFormLocales {
+		border-top: @bg-border-light;
+	}
+	.pkpFormGroup {
+		padding-inline-start: 1rem;
+		padding-inline-end: 1rem;
+	}
+	// Tabs in popup modals
+	.pkpTabs {
+		margin-inline-start: -1rem;
+		margin-inline-end: -1rem;
+	}
+	.pkpTabs {
+		.pkpTabs {
+			margin-inline-start: -2rem;
+			margin-inline-end: -2rem;
+		}
+	}
+	.pkpTabs__buttons {
+		padding-inline-start: 1rem;
+		padding-inline-end: 1rem;
+	}
+	.pkpTab {
+		border-left: none;
+		border-right: none;
+		border-bottom: none;
+	}
+}
+
 // Override collapsed padding when a popup
 // modal is nested inside of a section
-.panelSection .pkpFormGroup {
+.panelSection .modal--popup .pkpFormGroup {
 	padding: 2rem 1rem;
 }
 </style>

src/composables/useSubmission.js

@@ -233,6 +233,13 @@ export function useSubmission() {
 			.map((assignment) => assignment.userId);
 	}
 
+	function isDecisionAvailable(submission, decisionId) {
+		const stage = getActiveStage(submission);
+		return stage?.availableEditorialDecisions?.some(
+			(decision) => decision.id === decisionId,
+		);
+	}
+
 	return {
 		getSubmissionById,
 		getActiveStage,
@@ -256,5 +263,6 @@ export function useSubmission() {
 		getReviewMethodIcons,
 		InProgressReviewAssignmentStatuses,
 		getRecommendOnlyUserIdsForStage,
+		isDecisionAvailable,
 	};
 }

src/pages/workflow/components/action/WorkflowActionChangeDecision.vue

@@ -1,12 +1,18 @@
 <template>
 	<div>
-		<PkpButton v-if="!isActionsShowed" class="" is-link @click="showActions">
+		<PkpButton
+			v-if="!isActionsShowed && showChangeDecision"
+			class=""
+			is-link
+			@click="showActions"
+		>
 			{{ t('editor.submission.workflowDecision.changeDecision') }}
 		</PkpButton>
 		<div v-else class="flex flex-col space-y-3">
-			<WorkflowActionButton
-				v-for="(actionProps, index) in actionButtonsProps"
-				v-bind="actionProps"
+			<component
+				:is="workflowStore.Components[item.component] || item.component"
+				v-for="(item, index) in items"
+				v-bind="item.props"
 				:key="`${index}`"
 			/>
 		</div>
@@ -16,12 +22,16 @@
 <script setup>
 import {ref} from 'vue';
 import PkpButton from '@/components/Button/Button.vue';
-import WorkflowActionButton from '@/pages/workflow/components/action/WorkflowActionButton.vue';
-
-defineProps({actionButtonsProps: {type: Array, required: true}});
+import {useWorkflowStore} from '../../workflowStore';
+defineProps({
+	showChangeDecision: {type: Boolean, required: true, default: false},
+	items: {type: Array, required: true},
+});
 
 const isActionsShowed = ref(false);
 
+const workflowStore = useWorkflowStore();
+
 function showActions() {
 	isActionsShowed.value = true;
 }