[dashboard] unify usage

components/dashboard/src/Menu.tsx

@@ -111,7 +111,6 @@ export default function Menu() {
         "account",
         "notifications",
         "billing",
-        "usage",
         "plans",
         "teams",
         "orgs",
@@ -206,7 +205,22 @@ export default function Menu() {
         }
         // Team menu
         if (!team) {
-            return [];
+            return [
+                {
+                    title: "Projects",
+                    link: `/projects`,
+                    alternatives: [] as string[],
+                },
+                ...(BillingMode.showUsageBasedBilling(userBillingMode) &&
+                !user?.additionalData?.isMigratedToTeamOnlyAttribution
+                    ? [
+                          {
+                              title: "Usage",
+                              link: "/usage",
+                          },
+                      ]
+                    : []),
+            ];
         }
         const currentUserInTeam = (teamMembers[team.id] || []).find((m) => m.userId === user?.id);
 
@@ -227,7 +241,7 @@ export default function Menu() {
         ) {
             teamSettingsList.push({
                 title: "Usage",
-                link: `/org-usage`,
+                link: `/usage`,
             });
         }
         if (currentUserInTeam?.role === "owner") {
@@ -465,15 +479,6 @@ export default function Menu() {
                                         title: "Settings",
                                         link: "/settings",
                                     },
-                                    ...(BillingMode.showUsageBasedBilling(userBillingMode) &&
-                                    !user?.additionalData?.isMigratedToTeamOnlyAttribution
-                                        ? [
-                                              {
-                                                  title: "Usage",
-                                                  link: "/usage",
-                                              },
-                                          ]
-                                        : []),
                                     {
                                         title: "Docs",
                                         href: "https://www.gitpod.io/docs/",

components/dashboard/src/Usage.tsx

@@ -4,19 +4,25 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext } from "react";
-
+import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import UsageView from "./components/UsageView";
-import { UserContext } from "./user-context";
+import { useCurrentTeam } from "./teams/teams-context";
+import { useCurrentUser } from "./user-context";
 
-function TeamUsage() {
-    const { user } = useContext(UserContext);
+function Usage() {
+    const user = useCurrentUser();
+    const org = useCurrentTeam();
 
     if (!user) {
         return <></>;
     }
 
-    return <UsageView attributionId={{ kind: "user", userId: user.id }} />;
+    let attributionId: AttributionId = { kind: "user", userId: user.id };
+    if (org) {
+        attributionId = { kind: "team", teamId: org.id };
+    }
+
+    return <UsageView attributionId={attributionId} />;
 }
 
-export default TeamUsage;
+export default Usage;

components/dashboard/src/app/AppRoutes.tsx

@@ -65,7 +65,6 @@ const Members = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/Me
 const TeamSettings = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/TeamSettings"));
 const TeamBilling = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/TeamBilling"));
 const SSO = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/SSO"));
-const TeamUsage = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/TeamUsage"));
 const NewProject = React.lazy(() => import(/* webpackPrefetch: true */ "../projects/NewProject"));
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ "../projects/Projects"));
 const Project = React.lazy(() => import(/* webpackPrefetch: true */ "../projects/Project"));
@@ -227,7 +226,6 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                     <Route exact path="/projects" component={Projects} />
                     <Route exact path="/org-settings" component={TeamSettings} />
                     <Route exact path="/org-billing" component={TeamBilling} />
-                    <Route exact path="/org-usage" component={TeamUsage} />
                     <Route exact path="/sso" component={SSO} />
                     <Route exact path={`/projects/:projectSlug`} component={Project} />
                     <Route exact path={`/projects/:projectSlug/events`} component={Events} />