web(feat): Add support for actions when clicking notifications (immic…

…h-app#966) * feat(web): Add button to close notification popups * feat(web): Add support for actions on notification click * feat(web): Open CLI docs when clicking asset upload count message * test(web): Add action field to notification-card tests * chore(web): Formatting * feat(web): Allow HTML in notification message * feat(web): Do not use link element in file upload count notification * feat(web): Prevent notification discard button from triggering action * feat(web): Add noop action support for notifications * chore(web): Remove unused function argument
EPP100 · Nov 17, 2022 · afae5fd · afae5fd
1 parent 70cd313
commit afae5fd
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 15 deletions.
diff --git a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
@@ -15,7 +15,8 @@ describe('NotificationCard component', () => {
 				id: 1234,
 				message: 'Notification message',
 				timeout: 1000,
-				type: NotificationType.Info
+				type: NotificationType.Info,
+				action: { type: 'discard' }
 			}
 		});
 
@@ -29,7 +30,8 @@ describe('NotificationCard component', () => {
 				id: 1234,
 				message: 'Notification message',
 				timeout: 1000,
-				type: NotificationType.Info
+				type: NotificationType.Info,
+				action: { type: 'discard' }
 			}
 		});
 

diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -2,6 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte';
 	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+	import WindowClose from 'svelte-material-icons/WindowClose.svelte';
 
 	import {
 		ImmichNotification,
@@ -51,26 +52,42 @@
 	let removeNotificationTimeout: NodeJS.Timeout | undefined = undefined;
 
 	onMount(() => {
-		removeNotificationTimeout = setTimeout(() => {
-			notificationController.removeNotificationById(notificationInfo.id);
-		}, notificationInfo.timeout);
-
+		removeNotificationTimeout = setTimeout(discard, notificationInfo.timeout);
 		return () => clearTimeout(removeNotificationTimeout);
 	});
+
+	const discard = () => {
+		notificationController.removeNotificationById(notificationInfo.id);
+	};
+
+	const handleClick = () => {
+		const action = notificationInfo.action;
+		if (action.type == 'discard') {
+			discard();
+		} else if (action.type == 'link') {
+			window.open(action.target);
+		}
+	};
 </script>
 
 <div
 	transition:fade={{ duration: 250 }}
 	style:background-color={backgroundColor()}
 	style:border={borderStyle()}
-	class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4"
+	class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4 hover:cursor-pointer"
+	on:click={handleClick}
 >
-	<div class="flex gap-2 place-items-center">
-		<svelte:component this={icon} color={primaryColor()} size="20" />
-		<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
-			{notificationInfo.type.toString()}
-		</h2>
+	<div class="flex justify-between">
+		<div class="flex gap-2 place-items-center">
+			<svelte:component this={icon} color={primaryColor()} size="20" />
+			<h2 style:color={primaryColor()} class="font-medium" data-testid="title">
+				{notificationInfo.type.toString()}
+			</h2>
+		</div>
+		<button on:click|stopPropagation={discard}>
+			<svelte:component this={WindowClose} size="20" />
+		</button>
 	</div>
 
-	<p class="text-sm pl-[28px] pr-[16px]" data-testid="message">{notificationInfo.message}</p>
+	<p class="text-sm pl-[28px] pr-[16px]" data-testid="message">{@html notificationInfo.message}</p>
 </div>
diff --git a/web/src/lib/components/shared-components/notification/notification.ts b/web/src/lib/components/shared-components/notification/notification.ts
@@ -9,9 +9,15 @@ export class ImmichNotification {
 	id = new Date().getTime();
 	type!: NotificationType;
 	message!: string;
+	action!: NotificationAction;
 	timeout = 3000;
 }
 
+type DiscardAction = { type: 'discard' };
+type NoopAction = { type: 'noop' };
+type LinkAction = { type: 'link'; target: string };
+export type NotificationAction = DiscardAction | NoopAction | LinkAction;
+
 export class ImmichNotificationDto {
 	/**
 	 * Notification type
@@ -28,7 +34,13 @@ export class ImmichNotificationDto {
 	 * Timeout in miliseconds
 	 */
 	timeout?: number;
+
+	/**
+	 * The action to take when the notification is clicked
+	 */
+	action?: NotificationAction;
 }
+
 function createNotificationList() {
 	const notificationList = writable<ImmichNotification[]>([]);
 
@@ -37,6 +49,7 @@ function createNotificationList() {
 		newNotification.message = notificationInfo.message;
 		newNotification.type = notificationInfo.type;
 		newNotification.timeout = notificationInfo.timeout || 3000;
+		newNotification.action = notificationInfo.action || { type: 'discard' };
 
 		notificationList.update((currentList) => [...currentList, newNotification]);
 	};

diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
@@ -44,8 +44,9 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
 				notificationController.show({
 					type: NotificationType.Error,
 					message: `Cannot upload more than 50 files at a time - you are uploading ${files.length} files. 
-          Please use the CLI tool if you need to upload more than 50 files.`,
-					timeout: 5000
+          Please check out <u>the bulk upload documentation</u> if you need to upload more than 50 files.`,
+					timeout: 10000,
+					action: { type: 'link', target: 'https://immich.app/docs/usage/bulk-upload' }
 				});
 
 				return;