From 41c0f1a686b27da2fa117be2be245ee75a914a09 Mon Sep 17 00:00:00 2001
From: "Laurie T. Malau" <laurie@gitpod.io>
Date: Tue, 25 Oct 2022 13:44:56 +0000
Subject: [PATCH] [usage] Personal usage page

---
 components/dashboard/src/components/UsageView.tsx    | 4 +++-
 components/dashboard/src/settings/settings-menu.ts   | 9 +++++++++
 components/dashboard/src/settings/settings.routes.ts | 1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/src/components/UsageView.tsx b/components/dashboard/src/components/UsageView.tsx
index aa97f63764435d..9e11170f8d729e 100644
--- a/components/dashboard/src/components/UsageView.tsx
+++ b/components/dashboard/src/components/UsageView.tsx
@@ -141,10 +141,12 @@ function UsageView({ attributionId }: UsageViewProps) {
 
     const currentPaginatedResults = usagePage?.usageEntriesList.filter((u) => u.kind === "workspaceinstance") ?? [];
 
+    const headerTitle = attributionId.kind === "team" ? "Team Usage" : "Personal Usage";
+
     return (
         <>
             <Header
-                title="Usage"
+                title={headerTitle}
                 subtitle={`${new Date(startDateOfBillMonth).toLocaleDateString()} - ${new Date(
                     endDateOfBillMonth,
                 ).toLocaleDateString()} (updated every 15 minutes).`}
diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts
index f48247af2894fc..76473f3b3fbcb9 100644
--- a/components/dashboard/src/settings/settings-menu.ts
+++ b/components/dashboard/src/settings/settings-menu.ts
@@ -16,6 +16,7 @@ import {
     settingsPathTeams,
     settingsPathVariables,
     settingsPathSSHKeys,
+    settingsPathUsage,
 } from "./settings.routes";
 
 export default function getSettingsMenu(params: { userBillingMode?: BillingMode }) {
@@ -80,6 +81,14 @@ 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)
                     ? [
diff --git a/components/dashboard/src/settings/settings.routes.ts b/components/dashboard/src/settings/settings.routes.ts
index 7209364ca323db..6559011b21e22c 100644
--- a/components/dashboard/src/settings/settings.routes.ts
+++ b/components/dashboard/src/settings/settings.routes.ts
@@ -11,6 +11,7 @@ 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";