New Gitpod Classic notification (#20714)

* Add Gitpod Classic sunset notification

* copy text update

Author: Siddhant-K-code

components/dashboard/src/AppNotifications.tsx

@@ -131,6 +131,21 @@ const INVALID_BILLING_ADDRESS = (stripePortalUrl: string | undefined) => {
     } as Notification;
 };
 
+const GITPOD_CLASSIC_SUNSET = {
+    id: "gitpod-classic-sunset",
+    type: "info" as AlertType,
+    preventDismiss: true, // This makes it so users can't dismiss the notification
+    message: (
+        <span className="text-md">
+            <b>Gitpod Classic is sunsetting fall 2025.</b>{" "}
+            <a className="text-kumquat-base font-bold" href="https://app.gitpod.io" target="_blank" rel="noreferrer">
+                Try the new Gitpod
+            </a>{" "}
+            now (hosted compute coming soon)
+        </span>
+    ),
+} as Notification;
+
 export function AppNotifications() {
     const [topNotification, setTopNotification] = useState<Notification | undefined>(undefined);
     const { user, loading } = useUserLoader();
@@ -145,6 +160,10 @@ export function AppNotifications() {
         const updateNotifications = async () => {
             const notifications = [];
             if (!loading) {
+                if (isGitpodIo()) {
+                    notifications.push(GITPOD_CLASSIC_SUNSET);
+                }
+
                 if (
                     isGitpodIo() &&
                     (!user?.profile?.acceptedPrivacyPolicyDate ||
@@ -197,7 +216,7 @@ export function AppNotifications() {
         <div className="app-container pt-2">
             <Alert
                 type={topNotification.type}
-                closable={true}
+                closable={topNotification.id !== "gitpod-classic-sunset"} // Only show close button if it's not the sunset notification
                 onClose={() => {
                     if (!topNotification.preventDismiss) {
                         dismissNotification();

components/dashboard/src/Login.tsx

@@ -330,6 +330,14 @@ const RightProductDescriptionPanel = () => {
                         Automated, standardized development environments hosted by us in Gitpod’s infrastructure. Users
                         who joined before October 1, 2024 on non-Enterprise plans are considered Gitpod Classic users.
                     </p>
+
+                    <p className="text-pk-content-secondary mb-2">
+                        Gitpod Classic is sunsetting fall 2025.{" "}
+                        <a className="gp-link font-bold" href="https://app.gitpod.io" target="_blank" rel="noreferrer">
+                            Try the new Gitpod
+                        </a>{" "}
+                        now (hosted compute coming soon).
+                    </p>
                 </div>
                 <img src={GitpodClassicCard} alt="Gitpod Classic" className="w-full" />
             </div>