From e2c2632be88fd0b8ed6afb85eb8887b065eead98 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Tue, 30 Apr 2024 11:50:05 +0200
Subject: [PATCH 1/3] Panel notifcations: support themes

---
 .../internals/panel/notification/index.vue    | 45 +++++++++++++------
 panel/src/panel/notification.js               | 26 ++++-------
 panel/src/panel/notification.test.js          |  1 +
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/panel/lab/internals/panel/notification/index.vue b/panel/lab/internals/panel/notification/index.vue
index 2e46b6f1c1..931725e871 100644
--- a/panel/lab/internals/panel/notification/index.vue
+++ b/panel/lab/internals/panel/notification/index.vue
@@ -9,7 +9,7 @@
 				</p>
 				<k-code>{{ $panel.notification.context || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Yay')"
 				/>
@@ -24,7 +24,7 @@
 				</p>
 				<k-code>{{ $panel.notification.details || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -44,7 +44,7 @@
 				</p>
 				<k-code>{{ $panel.notification.icon || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -63,7 +63,7 @@
 				</p>
 				<k-code>{{ $panel.notification.message || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -81,7 +81,7 @@
 				</p>
 				<k-code>{{ $panel.notification.timeout || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -100,7 +100,7 @@
 				</p>
 				<k-code>{{ $panel.notification.type || "&nbsp;" }}</k-code>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
 						$panel.notification.success({
@@ -118,7 +118,7 @@
 				<k-code language="js">window.panel.notification.close();</k-code>
 				<p>Closes the current notification</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Nice one!')"
 				/>
@@ -136,7 +136,7 @@
 				>
 				<p>Used to show a deprecation warning in the console.</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.deprecated('Don`t use this anymore')"
 				/>
@@ -149,7 +149,7 @@
 				>
 				<p>Displays an error notification.</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.error('Something went wrong')"
 				/>
@@ -162,7 +162,7 @@
 				>
 				<p>Displays a fatal error in an iframe overlay for better isolation</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.fatal('Something went wrong')"
 				/>
@@ -174,11 +174,18 @@
 					>window.panel.notification.open(notification);</k-code
 				>
 				<p>Open a custom notification</p>
+				<k-input :value="icon" type="text" @input="icon = $event" />
+				<k-input :value="text" type="text" @input="text = $event" />
+				<k-input :value="theme" type="text" @input="theme = $event" />
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="
-						$panel.notification.open({ type: 'success', message: 'Nice one!' })
+						$panel.notification.open({
+							message: text,
+							icon,
+							theme
+						})
 					"
 				/>
 			</k-text>
@@ -190,7 +197,7 @@
 				>
 				<p>Displays a success notification</p>
 				<k-button
-					icon="alert"
+					icon="megaphone"
 					variant="filled"
 					@click="$panel.notification.success('Nice one!')"
 				/>
@@ -198,3 +205,15 @@
 		</k-lab-example>
 	</k-lab-examples>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			icon: "check",
+			text: "Yay",
+			theme: "positive"
+		};
+	}
+};
+</script>
diff --git a/panel/src/panel/notification.js b/panel/src/panel/notification.js
index 27639f93ef..e487929b81 100644
--- a/panel/src/panel/notification.js
+++ b/panel/src/panel/notification.js
@@ -11,6 +11,7 @@ export const defaults = () => {
 		icon: null,
 		isOpen: false,
 		message: null,
+		theme: null,
 		timeout: null,
 		type: null
 	};
@@ -89,8 +90,7 @@ export default (panel = {}) => {
 			// convert strings to full error objects
 			if (typeof error === "string") {
 				error = {
-					message: error,
-					type: "error"
+					message: error
 				};
 			}
 
@@ -105,16 +105,16 @@ export default (panel = {}) => {
 			if (panel.context === "view") {
 				panel.dialog.open({
 					component: "k-error-dialog",
-					props: error,
-					type: "error"
+					props: error
 				});
 			}
 
 			// show the error notification bar
 			return this.open({
 				message: error.message,
-				type: "error",
-				icon: "alert"
+				icon: "alert",
+				theme: "negative",
+				type: "error"
 			});
 		},
 
@@ -209,23 +209,13 @@ export default (panel = {}) => {
 			}
 
 			return this.open({
-				timeout: 4000,
-				type: "success",
 				icon: "check",
+				theme: "positive",
+				timeout: 4000,
 				...success
 			});
 		},
 
-		/**
-		 * Getter that converts the notification type
-		 * into the matching notification component theme
-		 *
-		 * @returns {String}
-		 */
-		get theme() {
-			return this.type === "error" ? "negative" : "positive";
-		},
-
 		/**
 		 * Holds the timer object
 		 */
diff --git a/panel/src/panel/notification.test.js b/panel/src/panel/notification.test.js
index 44c3814e74..d286073d20 100644
--- a/panel/src/panel/notification.test.js
+++ b/panel/src/panel/notification.test.js
@@ -19,6 +19,7 @@ describe("panel.notification", () => {
 			icon: null,
 			isOpen: false,
 			message: null,
+			theme: null,
 			timeout: null,
 			type: null
 		};

From ca7966d5e927fee1c103883a7a8cbb92f30bea86 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Tue, 30 Apr 2024 12:02:59 +0200
Subject: [PATCH 2/3] Panel notification: improve timeout handling

---
 panel/src/panel/notification.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/panel/src/panel/notification.js b/panel/src/panel/notification.js
index e487929b81..a118491a4f 100644
--- a/panel/src/panel/notification.js
+++ b/panel/src/panel/notification.js
@@ -174,6 +174,11 @@ export default (panel = {}) => {
 				return this.success(notification);
 			}
 
+			// add timeout if not error or fatal notification
+			if (notification.type !== "error" && notification.type !== "fatal") {
+				notification.timeout ??= 4000;
+			}
+
 			// set the new state
 			this.set({
 				// add the current editing context
@@ -211,7 +216,6 @@ export default (panel = {}) => {
 			return this.open({
 				icon: "check",
 				theme: "positive",
-				timeout: 4000,
 				...success
 			});
 		},

From 154a573ed76992ec36b8bfb9d78987e9f4051865 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Tue, 30 Apr 2024 12:06:37 +0200
Subject: [PATCH 3/3] `panel.notification.info(message)`

---
 .../internals/panel/notification/index.vue    | 13 ++++++++++
 panel/src/panel/modal.test.js                 |  2 +-
 panel/src/panel/notification.js               | 26 +++++++++++++++----
 panel/src/panel/notification.test.js          |  8 ++++--
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/panel/lab/internals/panel/notification/index.vue b/panel/lab/internals/panel/notification/index.vue
index 931725e871..4e109f7630 100644
--- a/panel/lab/internals/panel/notification/index.vue
+++ b/panel/lab/internals/panel/notification/index.vue
@@ -55,6 +55,19 @@
 				/>
 			</k-text>
 		</k-lab-example>
+		<k-lab-example label="info" :code="false">
+			<k-text>
+				<k-code language="js"
+					>window.panel.notification.info(notification);</k-code
+				>
+				<p>Displays an info notification</p>
+				<k-button
+					icon="megaphone"
+					variant="filled"
+					@click="$panel.notification.info('Did you know?')"
+				/>
+			</k-text>
+		</k-lab-example>
 		<k-lab-example label="message" :code="false">
 			<k-text>
 				<p>
diff --git a/panel/src/panel/modal.test.js b/panel/src/panel/modal.test.js
index 7a8a50e5e5..f2eb71a252 100644
--- a/panel/src/panel/modal.test.js
+++ b/panel/src/panel/modal.test.js
@@ -147,8 +147,8 @@ describe.concurrent("panel/modal.js", () => {
 			message: "Test"
 		});
 
-		expect(panel.notification.type).toStrictEqual("success");
 		expect(panel.notification.message).toStrictEqual("Test");
+		expect(panel.notification.theme).toStrictEqual("positive");
 	});
 
 	it("should emit panel events after submit", async () => {
diff --git a/panel/src/panel/notification.js b/panel/src/panel/notification.js
index a118491a4f..b99811626b 100644
--- a/panel/src/panel/notification.js
+++ b/panel/src/panel/notification.js
@@ -118,6 +118,26 @@ export default (panel = {}) => {
 			});
 		},
 
+		/**
+		 * Shortcut to create an info
+		 * notification. You can pass a simple
+		 * string or a state object.
+		 *
+		 * @param {Object|String} info
+		 * @returns {Object} The notification state
+		 */
+		info(info = {}) {
+			if (typeof info === "string") {
+				info = { message: info };
+			}
+
+			return this.open({
+				icon: "info",
+				theme: "info",
+				...info
+			});
+		},
+
 		/**
 		 * Checks if the notification is a fatal
 		 * error. Those are displayed in the <k-fatal>
@@ -204,11 +224,7 @@ export default (panel = {}) => {
 		 * @param {Object|String} success
 		 * @returns {Object} The notification state
 		 */
-		success(success) {
-			if (!success) {
-				success = {};
-			}
-
+		success(success = {}) {
 			if (typeof success === "string") {
 				success = { message: success };
 			}
diff --git a/panel/src/panel/notification.test.js b/panel/src/panel/notification.test.js
index d286073d20..d53d91c1a1 100644
--- a/panel/src/panel/notification.test.js
+++ b/panel/src/panel/notification.test.js
@@ -100,12 +100,16 @@ describe("panel.notification", () => {
 		const notification = Notification(panel);
 
 		notification.success("Test");
-
 		expect(notification.theme).toStrictEqual("positive");
 
-		notification.error("Test");
+		notification.info("Test");
+		expect(notification.theme).toStrictEqual("info");
 
+		notification.error("Test");
 		expect(notification.theme).toStrictEqual("negative");
+
+		notification.open({ theme: "love" });
+		expect(notification.theme).toStrictEqual("love");
 	});
 
 	it("should set a timer for success notifications", async () => {