From 286fd40f22306340536d7fa65f4bedab0f57595f Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 7 Oct 2024 20:00:42 +0800
Subject: [PATCH] pkp/pkp-lib#10444 Add isDismissible prop to the Dialog
 component, and add the X button when there are no actions in the props

---
 src/components/Modal/Dialog.stories.js | 44 ++++++++++++++++++++++++++
 src/components/Modal/Dialog.vue        | 31 ++++++++++++++++--
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index a848f95f2..f594966c1 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -100,6 +100,50 @@ export const WithBodyComponent = {
 	},
 };
 
+export const NonDismissible = {
+	args: {
+		buttonName: 'Show non-dismissible modal',
+		name: 'non-dismissible-modal',
+		title: 'Non-Dismissible Modal',
+		message:
+			'Clicking outside will not close this modal. Use the "Cancel" button to close it.',
+		actions: [
+			{
+				label: 'Cancel',
+				callback: (close) => close(),
+			},
+		],
+		isDismissible: false,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show non-dismissible modal'));
+	},
+};
+
+export const NoActionButtons = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'no-actions-modal',
+		title: 'Non Action Buttons Modal',
+		message:
+			'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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+		actions: [],
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show modal'));
+	},
+};
+
 export const DialogComplex = {
 	args: {
 		buttonName: 'Full Example',
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index d5b2921c2..010871027 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" @close="onClose">
+		<HLDialog class="modal" @close="onClose('default')">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -28,6 +28,20 @@
 						leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 					>
 						<DialogPanel data-cy="dialog" :class="styles">
+							<button
+								v-if="noActions"
+								class="absolute right-3 top-3 cursor-pointer bg-transparent"
+								@click="onClose"
+							>
+								<Icon
+									class="h-6 w-6 text-negative"
+									icon="Cancel"
+									:aria-hidden="true"
+								/>
+								<span class="-screenReader">
+									{{ t('common.close') }}
+								</span>
+							</button>
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
 									v-if="title"
@@ -117,6 +131,11 @@ const props = defineProps({
 		validator: (value) =>
 			['default', 'primary', 'negative', 'success'].includes(value),
 	},
+	/** Defines if clicking outside the modal should close it */
+	isDismissible: {
+		type: Boolean,
+		default: () => true,
+	},
 });
 
 const styles = computed(() => ({
@@ -144,14 +163,22 @@ const iconStyles = computed(() => ({
 	'bg-negative': props.modalStyle === 'negative',
 }));
 
+const noActions = computed(() => !props.actions?.length);
+
 const emit = defineEmits(['close']);
 
 const isLoading = ref(false);
 
-function onClose() {
+function onClose(evtType) {
+	// Prevent closing the modal on outside click or "Esc" key if isDismissible is false
+	if (!props.isDismissible && evtType === 'default') {
+		return;
+	}
+
 	if (props.close) {
 		props.close();
 	}
+
 	emit('close');
 }