[usage] More useful notification

Author: Laurie T. Malau

components/dashboard/src/AppNotifications.tsx

@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from "react";
 import Alert from "./components/Alert";
-import { getGitpodService } from "./service/service";
+import { getGitpodService, gitpodHostUrl } from "./service/service";
 
 const KEY_APP_NOTIFICATIONS = "gitpod-app-notifications";
 
@@ -36,6 +36,7 @@ export function AppNotifications() {
     };
 
     const topNotification = notifications[0];
+
     if (topNotification === undefined) {
         return null;
     }
@@ -54,7 +55,18 @@ export function AppNotifications() {
                 showIcon={true}
                 className="flex rounded mb-2 w-full"
             >
-                <span>{topNotification}</span>
+                <span>{topNotification}</span> Manage
+                <a
+                    className="gp-link hover:text-gray-600"
+                    href={
+                        notifications.length > 1
+                            ? `${gitpodHostUrl}t/${notifications[notifications.length - 1]}/billing`
+                            : `${gitpodHostUrl}billing`
+                    }
+                >
+                    {" "}
+                    billing.
+                </a>
             </Alert>
         </div>
     );

components/server/ee/src/workspace/gitpod-server-impl.ts

@@ -2254,10 +2254,28 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
             const billingMode = await this.billingModes.getBillingModeForUser(user, new Date());
             if (billingMode.mode === "usage-based") {
                 const limit = await this.billingService.checkUsageLimitReached(user);
-                if (limit.reached) {
-                    result.unshift("The usage limit is reached.");
-                } else if (limit.almostReached) {
-                    result.unshift("The usage limit is almost reached.");
+                let teamOrUser;
+                switch (limit.attributionId.kind) {
+                    case "user": {
+                        if (limit.reached) {
+                            result.unshift(`You have reached your usage limit.`);
+                        } else if (limit.almostReached) {
+                            result.unshift(`You have almost reached your usage limit.`);
+                        }
+                        break;
+                    }
+                    case "team": {
+                        teamOrUser = await this.teamDB.findTeamById(limit.attributionId.teamId);
+                        if (teamOrUser) {
+                            result.push(teamOrUser?.slug);
+                            if (limit.reached) {
+                                result.unshift(`Your team ${teamOrUser?.name} has reached its usage limit.`);
+                            } else if (limit.almostReached) {
+                                result.unshift(`Your team ${teamOrUser?.name} has almost reached its usage limit.`);
+                            }
+                        }
+                        break;
+                    }
                 }
             }
         } catch (error) {