upsell

apps/client/src/components/settings/settings-sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Group, Text, ScrollArea, ActionIcon } from "@mantine/core";
+import { Group, Text, ScrollArea, ActionIcon, Tooltip } from "@mantine/core";
 import {
   IconUser,
   IconSettings,
@@ -42,6 +42,7 @@ interface DataItem {
   isEnterprise?: boolean;
   isAdmin?: boolean;
   isSelfhosted?: boolean;
+  showDisabledInNonEE?: boolean;
 }
 
 interface DataGroup {
@@ -84,6 +85,7 @@ const groupedData: DataGroup[] = [
         isCloud: true,
         isEnterprise: true,
         isAdmin: true,
+        showDisabledInNonEE: true,
       },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
@@ -117,6 +119,12 @@ export default function SettingsSidebar() {
   }, [location.pathname]);
 
   const canShowItem = (item: DataItem) => {
+    // For items with showDisabledInCommunity, always show them but in disabled state
+    if (item.showDisabledInNonEE && item.isEnterprise) {
+      // Check admin permission regardless of license
+      return item.isAdmin ? isAdmin : true;
+    }
+
     if (item.isCloud && item.isEnterprise) {
       if (!(isCloud() || workspace?.hasLicenseKey)) return false;
       return item.isAdmin ? isAdmin : true;
@@ -141,6 +149,13 @@ export default function SettingsSidebar() {
     return true;
   };
 
+  const isItemDisabled = (item: DataItem) => {
+    if (item.showDisabledInNonEE && item.isEnterprise) {
+      return !(isCloud() || workspace?.hasLicenseKey);
+    }
+    return false;
+  };
+
   const menuItems = groupedData.map((group) => {
     if (group.heading === "System" && (!isAdmin || isCloud())) {
       return null;
@@ -185,23 +200,48 @@ export default function SettingsSidebar() {
               break;
           }
 
-          return (
+          const isDisabled = isItemDisabled(item);
+          const linkElement = (
             <Link
-              onMouseEnter={prefetchHandler}
+              onMouseEnter={!isDisabled ? prefetchHandler : undefined}
               className={classes.link}
               data-active={active.startsWith(item.path) || undefined}
+              data-disabled={isDisabled || undefined}
               key={item.label}
-              to={item.path}
-              onClick={() => {
+              to={isDisabled ? "#" : item.path}
+              onClick={(e) => {
+                if (isDisabled) {
+                  e.preventDefault();
+                  return;
+                }
                 if (mobileSidebarOpened) {
                   toggleMobileSidebar();
                 }
               }}
+              style={{
+                opacity: isDisabled ? 0.5 : 1,
+                cursor: isDisabled ? "not-allowed" : "pointer",
+              }}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>
             </Link>
           );
+
+          if (isDisabled) {
+            return (
+              <Tooltip
+                key={item.label}
+                label={t("Available in enterprise edition")}
+                position="right"
+                withArrow
+              >
+                {linkElement}
+              </Tooltip>
+            );
+          }
+
+          return linkElement;
         })}
       </div>
     );