feat: better feature flags (#2026)

* feat: feature flag upgrade

* fix translations

* refactor

* fix

* fix

apps/client/src/ee/security/components/disable-public-sharing.tsx

@@ -6,21 +6,23 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
 import { notifications } from "@mantine/notifications";
-import useEnterpriseAccess from "@/ee/hooks/use-enterprise-access.tsx";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 export default function DisablePublicSharing() {
   const { t } = useTranslation();
 
   return (
     <Group justify="space-between" wrap="nowrap" gap="xl">
-        <div>
-          <Text size="md">{t("Disable public sharing")}</Text>
-          <Text size="sm" c="dimmed">
-            {t("Prevent members from sharing pages publicly.")}
-          </Text>
-        </div>
+      <div>
+        <Text size="md">{t("Disable public sharing")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Prevent members from sharing pages publicly.")}
+        </Text>
+      </div>
 
-        <DisablePublicSharingToggle />
+      <DisablePublicSharingToggle />
     </Group>
   );
 }
@@ -31,7 +33,8 @@ function DisablePublicSharingToggle() {
   const [checked, setChecked] = useState(
     workspace?.settings?.sharing?.disabled === true,
   );
-  const hasAccess = useEnterpriseAccess();
+  const hasSharingControls = useHasFeature(Feature.SHARING_CONTROLS);
+  const upgradeLabel = useUpgradeLabel();
 
   const applyChange = async (value: boolean) => {
     try {
@@ -72,15 +75,11 @@ function DisablePublicSharingToggle() {
   };
 
   return (
-    <Tooltip
-      label={t("Requires an enterprise license")}
-      disabled={hasAccess}
-      refProp="rootRef"
-    >
+    <Tooltip label={upgradeLabel} disabled={hasSharingControls} refProp="rootRef">
       <Switch
         checked={checked}
         onChange={handleChange}
-        disabled={!hasAccess}
+        disabled={!hasSharingControls}
         aria-label={t("Toggle public sharing")}
       />
     </Tooltip>

apps/client/src/ee/security/components/enforce-mfa.tsx

@@ -1,10 +1,20 @@
-import { Group, Text, Switch, MantineSize, Title } from "@mantine/core";
+import {
+  Group,
+  Text,
+  Switch,
+  MantineSize,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
 import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { Feature } from "@/ee/features.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 export default function EnforceMfa() {
   const { t } = useTranslation();
@@ -33,6 +43,8 @@ export function EnforceMfaToggle({ size, label }: EnforceMfaToggleProps) {
   const { t } = useTranslation();
   const [workspace, setWorkspace] = useAtom(workspaceAtom);
   const [checked, setChecked] = useState(workspace?.enforceMfa);
+  const hasAccess = useHasFeature(Feature.MFA);
+  const upgradeLabel = useUpgradeLabel();
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.checked;
@@ -49,13 +61,16 @@ export function EnforceMfaToggle({ size, label }: EnforceMfaToggleProps) {
   };
 
   return (
-    <Switch
-      size={size}
-      label={label}
-      labelPosition="left"
-      defaultChecked={checked}
-      onChange={handleChange}
-      aria-label={t("Toggle MFA enforcement")}
-    />
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+      <Switch
+        size={size}
+        label={label}
+        labelPosition="left"
+        defaultChecked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+        aria-label={t("Toggle MFA enforcement")}
+      />
+    </Tooltip>
   );
 }

apps/client/src/ee/security/components/enforce-sso.tsx

@@ -1,10 +1,13 @@
-import { Group, Text, Switch, MantineSize } from "@mantine/core";
+import { Group, Text, Switch, MantineSize, Tooltip } from "@mantine/core";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
 import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { Feature } from "@/ee/features.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 export default function EnforceSso() {
   const { t } = useTranslation();
@@ -33,6 +36,8 @@ export function EnforceSsoToggle({ size, label }: EnforceSsoToggleProps) {
   const { t } = useTranslation();
   const [workspace, setWorkspace] = useAtom(workspaceAtom);
   const [checked, setChecked] = useState(workspace?.enforceSso);
+  const hasAccess = useHasFeature(Feature.SSO_CUSTOM);
+  const upgradeLabel = useUpgradeLabel();
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.checked;
@@ -49,13 +54,16 @@ export function EnforceSsoToggle({ size, label }: EnforceSsoToggleProps) {
   };
 
   return (
-    <Switch
-      size={size}
-      label={label}
-      labelPosition="left"
-      defaultChecked={checked}
-      onChange={handleChange}
-      aria-label={t("Toggle sso enforcement")}
-    />
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+      <Switch
+        size={size}
+        label={label}
+        labelPosition="left"
+        defaultChecked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+        aria-label={t("Toggle sso enforcement")}
+      />
+    </Tooltip>
   );
 }

apps/client/src/ee/security/components/space-public-sharing-toggle.tsx

@@ -6,6 +6,9 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ISpace } from "@/features/space/types/space.types.ts";
 import { useUpdateSpaceMutation } from "@/features/space/queries/space-query.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { Feature } from "@/ee/features.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 type SpacePublicSharingToggleProps = {
   space: ISpace;
@@ -17,6 +20,9 @@ export default function SpacePublicSharingToggle({
   const { t } = useTranslation();
   const [workspace] = useAtom(workspaceAtom);
   const workspaceDisabled = workspace?.settings?.sharing?.disabled === true;
+  const hasSharingControls = useHasFeature(Feature.SHARING_CONTROLS);
+  const upgradeLabel = useUpgradeLabel();
+  const isDisabled = !hasSharingControls || workspaceDisabled;
   const [checked, setChecked] = useState(
     space.settings?.sharing?.disabled === true,
   );
@@ -68,14 +74,14 @@ export default function SpacePublicSharingToggle({
         </Text>
       </div>
       <Tooltip
-        label={t("Public sharing is disabled at the workspace level")}
-        disabled={!workspaceDisabled}
+        label={!hasSharingControls ? upgradeLabel : t("Public sharing is disabled at the workspace level")}
+        disabled={!isDisabled}
         refProp="rootRef"
       >
         <Switch
           checked={checked}
           onChange={handleChange}
-          disabled={workspaceDisabled}
+          disabled={isDisabled}
           aria-label={t("Toggle space public sharing")}
         />
       </Tooltip>

apps/client/src/ee/security/components/trash-retention.tsx

@@ -12,13 +12,18 @@ import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
 import { notifications } from "@mantine/notifications";
-import useEnterpriseAccess from "@/ee/hooks/use-enterprise-access.tsx";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 type RetentionUnit = "days" | "months" | "years";
 
 const DEFAULT_RETENTION_DAYS = 30;
 
-function daysToRetention(days: number): { amount: number; unit: RetentionUnit } {
+function daysToRetention(days: number): {
+  amount: number;
+  unit: RetentionUnit;
+} {
   if (days >= 365 && days % 365 === 0) {
     return { amount: days / 365, unit: "years" };
   }
@@ -36,14 +41,19 @@ function retentionToDays(amount: number, unit: RetentionUnit): number {
 
 export default function TrashRetention() {
   const { t } = useTranslation();
-  const hasAccess = useEnterpriseAccess();
+  const hasRetention = useHasFeature(Feature.RETENTION);
+  const upgradeLabel = useUpgradeLabel();
   const [workspace, setWorkspace] = useAtom(workspaceAtom);
 
   const currentDays = workspace?.trashRetentionDays ?? DEFAULT_RETENTION_DAYS;
   const parsed = daysToRetention(currentDays);
 
-  const [retentionAmount, setRetentionAmount] = useState<number | string>(parsed.amount);
-  const [retentionUnit, setRetentionUnit] = useState<RetentionUnit>(parsed.unit);
+  const [retentionAmount, setRetentionAmount] = useState<number | string>(
+    parsed.amount,
+  );
+  const [retentionUnit, setRetentionUnit] = useState<RetentionUnit>(
+    parsed.unit,
+  );
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
@@ -63,14 +73,17 @@ export default function TrashRetention() {
 
     setSaving(true);
     try {
-      const updatedWorkspace = await updateWorkspace({ trashRetentionDays: days });
+      const updatedWorkspace = await updateWorkspace({
+        trashRetentionDays: days,
+      });
       setWorkspace(updatedWorkspace);
       notifications.show({
         message: t("Trash retention updated"),
       });
     } catch (err: any) {
       notifications.show({
-        message: err?.response?.data?.message || t("Failed to update trash retention"),
+        message:
+          err?.response?.data?.message || t("Failed to update trash retention"),
         color: "red",
       });
       const { amount, unit } = daysToRetention(currentDays);
@@ -81,10 +94,11 @@ export default function TrashRetention() {
     }
   };
 
-  const isDirty = retentionToDays(
-    typeof retentionAmount === "number" ? retentionAmount : 1,
-    retentionUnit,
-  ) !== currentDays;
+  const isDirty =
+    retentionToDays(
+      typeof retentionAmount === "number" ? retentionAmount : 1,
+      retentionUnit,
+    ) !== currentDays;
 
   return (
     <div>
@@ -93,10 +107,7 @@ export default function TrashRetention() {
         {t("Pages in trash will be permanently deleted after this period.")}
       </Text>
 
-      <Tooltip
-        label={t("Requires an enterprise license")}
-        disabled={hasAccess}
-      >
+      <Tooltip label={upgradeLabel} disabled={hasRetention}>
         <Group gap="xs" wrap="nowrap" maw={320}>
           <NumberInput
             value={retentionAmount}
@@ -105,7 +116,7 @@ export default function TrashRetention() {
             hideControls
             size="sm"
             w={60}
-            disabled={!hasAccess}
+            disabled={!hasRetention}
           />
           <Select
             data={[
@@ -121,13 +132,13 @@ export default function TrashRetention() {
             }}
             size="sm"
             style={{ flex: 1 }}
-            disabled={!hasAccess}
+            disabled={!hasRetention}
           />
           <Button
             size="sm"
             onClick={handleSave}
             loading={saving}
-            disabled={!hasAccess || !isDirty}
+            disabled={!hasRetention || !isDirty}
           >
             {t("Save")}
           </Button>