[dashboard] usage in avatar menu

Author: svenefftinge

components/dashboard/src/Menu.tsx

@@ -42,6 +42,7 @@ export default function Menu() {
     const team = getCurrentTeam(location, teams);
     const { setCurrency, setIsStudent, setIsChargebeeCustomer } = useContext(PaymentContext);
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
+    const [userBillingMode, setUserBillingMode] = useState<BillingMode | undefined>(undefined);
     const { project, setProject } = useContext(ProjectContext);
     const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false);
 
@@ -51,6 +52,7 @@ export default function Menu() {
         getGitpodService()
             .server.getUserProjects()
             .then((projects) => setHasIndividualProjects(projects.length > 0));
+        getGitpodService().server.getBillingModeForUser().then(setUserBillingMode);
     }, []);
 
     const match = useRouteMatch<{ segment1?: string; segment2?: string; segment3?: string }>(
@@ -449,6 +451,14 @@ export default function Menu() {
                                         title: "Settings",
                                         link: "/settings",
                                     },
+                                    ...(BillingMode.showUsageBasedBilling(userBillingMode)
+                                        ? [
+                                              {
+                                                  title: "Usage",
+                                                  link: "/usage",
+                                              },
+                                          ]
+                                        : []),
                                     {
                                         title: "Docs",
                                         href: "https://www.gitpod.io/docs/",

components/dashboard/src/settings/settings-menu.ts

@@ -16,7 +16,6 @@ import {
     settingsPathTeams,
     settingsPathVariables,
     settingsPathSSHKeys,
-    settingsPathUsage,
 } from "./settings.routes";
 
 export default function getSettingsMenu(params: { userBillingMode?: BillingMode }) {
@@ -81,14 +80,6 @@ function renderBillingMenuEntries(billingMode?: BillingMode) {
                     title: "Billing",
                     link: [settingsPathBilling],
                 },
-                ...(BillingMode.showUsageBasedBilling(billingMode)
-                    ? [
-                          {
-                              title: "Usage",
-                              link: [settingsPathUsage],
-                          },
-                      ]
-                    : []),
                 // We need to allow access to "Team Plans" here, at least for owners.
                 ...(BillingMode.showTeamSubscriptionUI(billingMode)
                     ? [

components/dashboard/src/settings/settings.routes.ts

@@ -11,7 +11,6 @@ export const settingsPathAccount = "/account";
 export const settingsPathIntegrations = "/integrations";
 export const settingsPathNotifications = "/notifications";
 export const settingsPathBilling = "/billing";
-export const settingsPathUsage = "/usage";
 export const settingsPathPlans = "/plans";
 export const settingsPathPreferences = "/preferences";