hide usage page when self-hosted

Author: nicktrn

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -66,13 +66,15 @@ export function OrganizationSettingsSideMenu({
           <div className="mb-1">
             <SideMenuHeader title="Organization" />
           </div>
-          <SideMenuItem
-            name="Usage"
-            icon={ChartBarIcon}
-            activeIconColor="text-indigo-500"
-            to={v3UsagePath(organization)}
-            data-action="usage"
-          />
+          {isManagedCloud && (
+            <SideMenuItem
+              name="Usage"
+              icon={ChartBarIcon}
+              activeIconColor="text-indigo-500"
+              to={v3UsagePath(organization)}
+              data-action="usage"
+            />
+          )}
           {isManagedCloud && (
             <SideMenuItem
               name="Billing"

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -87,6 +87,7 @@ import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { V4Badge } from "../V4Badge";
+import { useFeatures } from "~/hooks/useFeatures";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -342,6 +343,7 @@ function ProjectSelector({
   const currentPlan = useCurrentPlan();
   const [isOrgMenuOpen, setOrgMenuOpen] = useState(false);
   const navigation = useNavigation();
+  const { isManagedCloud } = useFeatures();
 
   let plan: string | undefined = undefined;
   if (currentPlan?.v3Subscription?.isPaying === false) {
@@ -410,16 +412,18 @@ function ProjectSelector({
               <CogIcon className="size-4 text-text-dimmed" />
               <span className="text-text-bright">Settings</span>
             </LinkButton>
-            <LinkButton
-              variant="secondary/small"
-              to={v3UsagePath(organization)}
-              fullWidth
-              iconSpacing="gap-1.5"
-              className="group-hover/button:border-charcoal-500"
-            >
-              <ChartBarIcon className="size-4 text-text-dimmed" />
-              <span className="text-text-bright">Usage</span>
-            </LinkButton>
+            {isManagedCloud && (
+              <LinkButton
+                variant="secondary/small"
+                to={v3UsagePath(organization)}
+                fullWidth
+                iconSpacing="gap-1.5"
+                className="group-hover/button:border-charcoal-500"
+              >
+                <ChartBarIcon className="size-4 text-text-dimmed" />
+                <span className="text-text-bright">Usage</span>
+              </LinkButton>
+            )}
           </div>
         </div>
         <div className="flex flex-col gap-1 p-1">