[usage] Enable usage view with feature flag

Author: svenefftinge

components/dashboard/src/Menu.tsx

@@ -27,6 +27,7 @@ import { PaymentContext } from "./payment-context";
 import FeedbackFormModal from "./feedback-form/FeedbackModal";
 import { inResource, isGitpodIo } from "./utils";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
+import { FeatureFlagContext } from "./contexts/FeatureFlagContext";
 
 interface Entry {
     title: string;
@@ -36,6 +37,7 @@ interface Entry {
 
 export default function Menu() {
     const { user, userBillingMode, refreshUserBillingMode } = useContext(UserContext);
+    const { showUsageView } = useContext(FeatureFlagContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
@@ -199,7 +201,7 @@ export default function Menu() {
                     link: `/t/${team.slug}/members`,
                 },
             ];
-            if (teamBillingMode && teamBillingMode.mode === "usage-based") {
+            if (showUsageView || (teamBillingMode && teamBillingMode.mode === "usage-based")) {
                 teamSettingsList.push({
                     title: "Usage",
                     link: `/t/${team.slug}/usage`,
@@ -221,12 +223,12 @@ export default function Menu() {
             title: "Projects",
             link: "/projects",
         });
-        // if (userBillingMode?.mode === "usage-based") {
-        //     userMenu.push({
-        //         title: "Usage",
-        //         link: "/usage",
-        //     });
-        // }
+        if (showUsageView) {
+            userMenu.push({
+                title: "Usage",
+                link: "/usage",
+            });
+        }
         userMenu.push({
             title: "Settings",
             link: "/settings",

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -18,9 +18,11 @@ interface FeatureFlagConfig {
 const FeatureFlagContext = createContext<{
     showWorkspaceClassesUI: boolean;
     showPersistentVolumeClaimUI: boolean;
+    showUsageView: boolean;
 }>({
     showWorkspaceClassesUI: false,
     showPersistentVolumeClaimUI: false,
+    showUsageView: false,
 });
 
 const FeatureFlagContextProvider: React.FC = ({ children }) => {
@@ -31,15 +33,16 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const team = getCurrentTeam(location, teams);
     const [showWorkspaceClassesUI, setShowWorkspaceClassesUI] = useState<boolean>(false);
     const [showPersistentVolumeClaimUI, setShowPersistentVolumeClaimUI] = useState<boolean>(false);
-
-    const featureFlags: FeatureFlagConfig = {
-        workspace_classes: { defaultValue: true, setter: setShowWorkspaceClassesUI },
-        persistent_volume_claim: { defaultValue: true, setter: setShowPersistentVolumeClaimUI },
-    };
+    const [showUsageView, setShowUsageView] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) return;
         (async () => {
+            const featureFlags: FeatureFlagConfig = {
+                workspace_classes: { defaultValue: true, setter: setShowWorkspaceClassesUI },
+                persistent_volume_claim: { defaultValue: true, setter: setShowPersistentVolumeClaimUI },
+                usage_view: { defaultValue: true, setter: setShowUsageView },
+            };
             for (const [flagName, config] of Object.entries(featureFlags)) {
                 const flagValue = await getExperimentsClient().getValueAsync(flagName, config.defaultValue, {
                     user,
@@ -54,7 +57,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     }, [user, teams, team, project]);
 
     return (
-        <FeatureFlagContext.Provider value={{ showWorkspaceClassesUI, showPersistentVolumeClaimUI }}>
+        <FeatureFlagContext.Provider value={{ showWorkspaceClassesUI, showPersistentVolumeClaimUI, showUsageView }}>
             {children}
         </FeatureFlagContext.Provider>
     );