<% let content = format!(
@@ -25,7 +25,7 @@
<%- content %>
<% if notification.dismissible {%>
-
+
close
diff --git a/pgml-dashboard/src/components/notifications/mod.rs b/pgml-dashboard/src/components/notifications/mod.rs
index c69e4a533..9cb25f355 100644
--- a/pgml-dashboard/src/components/notifications/mod.rs
+++ b/pgml-dashboard/src/components/notifications/mod.rs
@@ -3,3 +3,6 @@
// src/components/notifications/marketing
pub mod marketing;
+
+// src/components/notifications/product
+pub mod product;
diff --git a/pgml-dashboard/src/components/notifications/product/mod.rs b/pgml-dashboard/src/components/notifications/product/mod.rs
new file mode 100644
index 000000000..f5c36ca2a
--- /dev/null
+++ b/pgml-dashboard/src/components/notifications/product/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/notifications/product/product_banner
+pub mod product_banner;
+pub use product_banner::ProductBanner;
diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/mod.rs b/pgml-dashboard/src/components/notifications/product/product_banner/mod.rs
new file mode 100644
index 000000000..6a0a7716f
--- /dev/null
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/mod.rs
@@ -0,0 +1,56 @@
+use crate::Notification;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "notifications/product/product_banner/template.html")]
+pub struct ProductBanner {
+ pub notification: Option
,
+ pub location_id: String,
+ pub url: String,
+}
+
+impl ProductBanner {
+ pub fn from_notification(notification: Option<&Notification>) -> ProductBanner {
+ let mut location_id = format!("product-banner");
+ let mut url = format!("/dashboard/notifications/product/remove_banner");
+ if notification.is_some() {
+ let notification = notification.clone().unwrap();
+ location_id.push_str(&format!("-{}", notification.level.to_string()));
+ url.push_str(&format!("?id={}", notification.id));
+
+ if notification.deployment.is_some() {
+ let deployment = notification.deployment.clone().unwrap();
+ location_id.push_str(&format!("-{}", deployment));
+ url.push_str(&format!("&deployment_id={}", deployment));
+ }
+ }
+
+ match notification {
+ Some(notification) => {
+ return ProductBanner {
+ notification: Some(notification.clone()),
+ location_id,
+ url,
+ }
+ }
+ None => {
+ return ProductBanner {
+ notification: None,
+ location_id,
+ url,
+ }
+ }
+ }
+ }
+
+ pub fn get_location_id(&self) -> String {
+ self.location_id.clone()
+ }
+
+ pub fn get_url(&self) -> String {
+ self.url.clone()
+ }
+}
+
+component!(ProductBanner);
diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss
new file mode 100644
index 000000000..c7d6d3752
--- /dev/null
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner.scss
@@ -0,0 +1,17 @@
+div[data-controller="notifications-product-product-banner"] {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+
+ .product1, .product2, .product3 {
+ background-color: #{$gray-600};
+ margin: 2px 0px;
+ }
+
+ .close {
+ color: #{$gray-100};
+ }
+
+ .more-info {
+ color: #{$gray-100}
+ }
+}
diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/product_banner_controller.js b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner_controller.js
new file mode 100644
index 000000000..074774988
--- /dev/null
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/product_banner_controller.js
@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+ static targets = [];
+ static outlets = [];
+
+ initialize() {
+ console.log("Initialized notifications-product-product-banner");
+ }
+
+ connect() {}
+
+ disconnect() {}
+}
\ No newline at end of file
diff --git a/pgml-dashboard/src/components/notifications/product/product_banner/template.html b/pgml-dashboard/src/components/notifications/product/product_banner/template.html
new file mode 100644
index 000000000..cd9e6d634
--- /dev/null
+++ b/pgml-dashboard/src/components/notifications/product/product_banner/template.html
@@ -0,0 +1,52 @@
+<%
+ use crate::NotificationLevel;
+%>
+
+
+ <% if notification.is_some() {%>
+ <% let notification = notification.unwrap(); %>
+
+ <%
+ let border_color = {
+ if notification.level == NotificationLevel::ProductHigh {
+ "red-gradient-border-card"
+ } else if notification.level == NotificationLevel::ProductMedium {
+ "orange-gradient-border-card"
+ } else {
+ "green-gradient-border-card"
+ }
+ };
+ %>
+
+
+
+ <% let content = format!(
+ r#"
+ <{} class="{} flex-grow-1 d-flex flex-column flex-md-row justify-content-center align-items-center row-gap-0 column-gap-3 fw-semibold overflow-hidden">
+
+
+ "#,
+ if notification.link.is_some() { format!(r#"a href="{}" data-turbo="false" "#, notification.link.clone().unwrap()) } else { "div".to_string() },
+ if notification.link.is_some() { "btn btn-tertiary p-0 goto-arrow-hover-trigger" } else { "" },
+ notification.message,
+ if notification.link.is_some() { r#"
arrow_forward"# } else { "" },
+ if notification.link.is_some() { "a" } else { "div" },
+ ); %>
+
+ <%- content %>
+
+ <% if notification.dismissible {%>
+
+
+ close
+
+
+ <% } %>
+
+
+
+
+ <% } %>
+