[usage] More useful notification

Author: Laurie T. Malau

components/dashboard/src/AppNotifications.tsx

@@ -54,7 +54,7 @@ export function AppNotifications() {
                 showIcon={true}
                 className="flex rounded mb-2 w-full"
             >
-                <span>{topNotification}</span>
+                <div>{topNotification}</div>
             </Alert>
         </div>
     );

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

@@ -2254,10 +2254,22 @@ 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);
+                let teamOrUser;
+                switch (limit.attributionId.kind) {
+                    case "user": {
+                        teamOrUser = await this.userDB.findUserById(limit.attributionId.userId);
+                        break;
+                    }
+                    case "team": {
+                        teamOrUser = await this.teamDB.findTeamById(limit.attributionId.teamId);
+                        break;
+                    }
+                }
+
                 if (limit.reached) {
-                    result.unshift("The usage limit is reached.");
+                    result.unshift(`The usage limit for ${teamOrUser?.name} is reached.`);
                 } else if (limit.almostReached) {
-                    result.unshift("The usage limit is almost reached.");
+                    result.unshift(`The usage limit for ${teamOrUser?.name} is almost reached.`);
                 }
             }
         } catch (error) {