feat: better feature flags (#2026)

* feat: feature flag upgrade

* fix translations

* refactor

* fix

* fix

apps/client/src/ee/api-key/components/restrict-api-to-admins.tsx

@@ -5,12 +5,14 @@ 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 {
   ResponsiveSettingsRow,
   ResponsiveSettingsContent,
   ResponsiveSettingsControl,
 } from "@/components/ui/responsive-settings-row";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
 
 export default function RestrictApiToAdmins() {
   const { t } = useTranslation();
@@ -18,7 +20,8 @@ export default function RestrictApiToAdmins() {
   const [checked, setChecked] = useState(
     workspace?.settings?.api?.restrictToAdmins === true,
   );
-  const hasAccess = useEnterpriseAccess();
+  const hasAccess = useHasFeature(Feature.API_KEYS);
+  const upgradeLabel = useUpgradeLabel();
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.checked;
@@ -51,7 +54,7 @@ export default function RestrictApiToAdmins() {
 
       <ResponsiveSettingsControl>
         <Tooltip
-          label={t("Requires an enterprise license")}
+          label={upgradeLabel}
           disabled={hasAccess}
           refProp="rootRef"
         >

apps/client/src/ee/api-key/pages/user-api-keys.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Anchor, Alert, Button, Group, Space, Text } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
 import { getAppName, getAppUrl } from "@/lib/config";
 import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
@@ -58,11 +58,12 @@ export default function UserApiKeys() {
       <SettingsTitle title={t("API keys")} />
 
       <Text size="sm" c="dimmed" mb="md">
-        {t("View the")}{" "}
-        <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm">
-          {t("API documentation")}
-        </Anchor>{" "}
-        {t("for usage details.")}
+        <Trans
+          i18nKey="View the <anchor>API documentation</anchor> for usage details."
+          components={{
+            anchor: <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm" />,
+          }}
+        />
       </Text>
 
       {mcpEnabled && canCreate && (

apps/client/src/ee/api-key/pages/workspace-api-keys.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Anchor, Button, Divider, Group, Space, Text } from "@mantine/core";
 import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
 import { getAppName } from "@/lib/config";
 import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
@@ -56,12 +56,12 @@ export default function WorkspaceApiKeys() {
       <SettingsTitle title={t("API management")} />
 
       <Text size="sm" c="dimmed" mb="md">
-        {t("Manage API keys for all users in the workspace.")}{" "}
-        {t("View the")}{" "}
-        <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm">
-          {t("API documentation")}
-        </Anchor>{" "}
-        {t("for usage details.")}
+        <Trans
+          i18nKey="Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details."
+          components={{
+            anchor: <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm" />,
+          }}
+        />
       </Text>
 
       <RestrictApiToAdmins />