From 96dcc25c9d9064faaf69608ff6d1386ab088af5e Mon Sep 17 00:00:00 2001
From: Siddhant Khare <siddhant@gitpod.io>
Date: Tue, 1 Oct 2024 19:23:16 +0530
Subject: [PATCH] Updated App notification (#20254)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* New App notification

* Introduce `<GITPOD_FLEX_INTRODUCTION>`

* Update Copy for App Notification

---------

Co-authored-by: Filip Troníček <filip@gitpod.io>
---
 components/dashboard/src/AppNotifications.tsx | 48 +++++++++++++++++++
 components/dashboard/src/components/Alert.tsx |  2 +-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/src/AppNotifications.tsx b/components/dashboard/src/AppNotifications.tsx
index 391a3ed3632da7..ada72293696127 100644
--- a/components/dashboard/src/AppNotifications.tsx
+++ b/components/dashboard/src/AppNotifications.tsx
@@ -64,6 +64,50 @@ const UPDATED_PRIVACY_POLICY = (updateUser: (user: Partial<UserProtocol>) => Pro
     } as Notification;
 };
 
+const GITPOD_FLEX_INTRODUCTION_COACHMARK_KEY = "gitpod_flex_introduction";
+const GITPOD_FLEX_INTRODUCTION = (updateUser: (user: Partial<UserProtocol>) => Promise<User>) => {
+    return {
+        id: GITPOD_FLEX_INTRODUCTION_COACHMARK_KEY,
+        type: "info",
+        preventDismiss: true,
+        onClose: async () => {
+            let dismissSuccess = false;
+            try {
+                const updatedUser = await updateUser({
+                    additionalData: {
+                        profile: {
+                            coachmarksDismissals: {
+                                [GITPOD_FLEX_INTRODUCTION_COACHMARK_KEY]: new Date().toISOString(),
+                            },
+                        },
+                    },
+                });
+                dismissSuccess = !!updatedUser;
+            } catch (err) {
+                dismissSuccess = false;
+            } finally {
+                trackEvent("coachmark_dismissed", {
+                    name: "gitpod-flex-introduction",
+                    success: dismissSuccess,
+                });
+            }
+        },
+        message: (
+            <span className="text-md">
+                <b>Introducing Gitpod Flex:</b> self-host for free in 3 min or run locally using Gitpod Desktop |{" "}
+                <a
+                    className="text-kumquat-ripe font-bold"
+                    href="https://app.gitpod.io"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Try now
+                </a>
+            </span>
+        ),
+    } as Notification;
+};
+
 const INVALID_BILLING_ADDRESS = (stripePortalUrl: string | undefined) => {
     return {
         id: "invalid-billing-address",
@@ -115,6 +159,10 @@ export function AppNotifications() {
                         notifications.push(notification);
                     }
                 }
+
+                if (isGitpodIo() && !user?.profile?.coachmarksDismissals[GITPOD_FLEX_INTRODUCTION_COACHMARK_KEY]) {
+                    notifications.push(GITPOD_FLEX_INTRODUCTION((u: Partial<UserProtocol>) => mutateAsync(u)));
+                }
             }
 
             if (!ignore) {
diff --git a/components/dashboard/src/components/Alert.tsx b/components/dashboard/src/components/Alert.tsx
index cbed2fdc247625..6aa664722e1ead 100644
--- a/components/dashboard/src/components/Alert.tsx
+++ b/components/dashboard/src/components/Alert.tsx
@@ -66,7 +66,7 @@ const infoMap: Record<AlertType, AlertInfo> = {
         bgCls: "bg-gray-100 dark:bg-gray-700",
         txtCls: "text-gray-500 dark:text-gray-300",
         icon: <InfoSvg className="w-4 h-4"></InfoSvg>,
-        iconColor: "text-gray-400",
+        iconColor: "text-gray-400 dark:text-gray-300",
     },
     message: {
         bgCls: "bg-blue-50 dark:bg-blue-800",