[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;
     }
@@ -45,6 +46,25 @@ export function AppNotifications() {
         setNotifications([]);
     };
 
+    const getManageBilling = () => {
+        let href;
+        if (notifications.length === 1) {
+            href = `${gitpodHostUrl}billing`;
+        } else if (notifications.length === 2) {
+            href = `${gitpodHostUrl}t/${notifications[notifications.length - 1]}/billing`;
+        }
+        return (
+            <span>
+                {" "}
+                Manage
+                <a className="gp-link hover:text-gray-600" href={href}>
+                    {" "}
+                    billing.
+                </a>
+            </span>
+        );
+    };
+
     return (
         <div className="app-container pt-2">
             <Alert
@@ -55,6 +75,7 @@ export function AppNotifications() {
                 className="flex rounded mb-2 w-full"
             >
                 <span>{topNotification}</span>
+                {getManageBilling()}
             </Alert>
         </div>
     );

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

@@ -2254,10 +2254,31 @@ 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 reached 80% or more of your usage limit.`);
+                        }
+                        break;
+                    }
+                    case "team": {
+                        teamOrUser = await this.teamDB.findTeamById(limit.attributionId.teamId);
+                        if (teamOrUser) {
+                            if (limit.reached) {
+                                result.push(teamOrUser?.slug);
+                                result.unshift(`Your team '${teamOrUser?.name}' has reached its usage limit.`);
+                            } else if (limit.almostReached) {
+                                result.push(teamOrUser?.slug);
+                                result.unshift(
+                                    `Your team '${teamOrUser?.name}' has reached 80% or more of its usage limit.`,
+                                );
+                            }
+                        }
+                        break;
+                    }
                 }
             }
         } catch (error) {