feat: better feature flags (#2026)

* feat: feature flag upgrade * fix translations * refactor * fix * fix
2026-05-16 14:14:06 +08:00 · 2026-03-15 22:05:32 +00:00
parent 236a63dadc
commit d7a5fda53c
54 changed files with 585 additions and 394 deletions
@@ -7,7 +7,8 @@ import CommentEditor from "@/features/comment/components/comment-editor";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
 import CommentActions from "@/features/comment/components/comment-actions";
 import CommentMenu from "@/features/comment/components/comment-menu";
-import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 import ResolveComment from "@/ee/comment/components/resolve-comment";
 import { useHover } from "@mantine/hooks";
 import {
@@ -44,7 +45,7 @@ function CommentListItem({
  const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
  const resolveCommentMutation = useResolveCommentMutation();
  const [currentUser] = useAtom(currentUserAtom);
-  const isCloudEE = useIsCloudEE();
+  const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
  const createdAtAgo = useTimeAgo(comment.createdAt);

  useEffect(() => {
@@ -81,7 +82,7 @@ function CommentListItem({
  }

  async function handleResolveComment() {
-    if (!isCloudEE) return;
+    if (!canResolve) return;
    
    try {
      const isResolved = comment.resolvedAt != null;
@@ -137,7 +138,7 @@ function CommentListItem({
            </Text>

            <div style={{ visibility: hovered ? "visible" : "hidden" }}>
-              {!comment.parentCommentId && canComment && isCloudEE && (
+              {!comment.parentCommentId && canComment && canResolve && (
                <ResolveComment
                  editor={editor}
                  commentId={comment.id}
@@ -1,8 +1,16 @@
 import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import { IconDots, IconEdit, IconTrash, IconCircleCheck, IconCircleCheckFilled } from "@tabler/icons-react";
+import {
+  IconDots,
+  IconEdit,
+  IconTrash,
+  IconCircleCheck,
+  IconCircleCheckFilled,
+} from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
-import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";

 type CommentMenuProps = {
  onEditComment: () => void;
@@ -13,16 +21,17 @@ type CommentMenuProps = {
  isParentComment?: boolean;
 };

-function CommentMenu({ 
-  onEditComment, 
-  onDeleteComment, 
+function CommentMenu({
+  onEditComment,
+  onDeleteComment,
  onResolveComment,
  canEdit = true,
  isResolved = false,
-  isParentComment = false
+  isParentComment = false,
 }: CommentMenuProps) {
  const { t } = useTranslation();
-  const isCloudEE = useIsCloudEE();
+  const canResolve = useHasFeature(Feature.COMMENT_RESOLUTION);
+  const upgradeLabel = useUpgradeLabel();

  //@ts-ignore
  const openDeleteModal = () =>
@@ -44,33 +53,34 @@ function CommentMenu({

      <Menu.Dropdown>
        {canEdit && (
-          <Menu.Item onClick={onEditComment} leftSection={<IconEdit size={14} />}>
+          <Menu.Item
+            onClick={onEditComment}
+            leftSection={<IconEdit size={14} />}
+          >
            {t("Edit comment")}
          </Menu.Item>
        )}
-        {isParentComment && (
-          isCloudEE ? (
-            <Menu.Item 
-              onClick={onResolveComment} 
+        {isParentComment &&
+          (canResolve ? (
+            <Menu.Item
+              onClick={onResolveComment}
              leftSection={
-                isResolved ? 
-                  <IconCircleCheckFilled size={14} /> : 
+                isResolved ? (
+                  <IconCircleCheckFilled size={14} />
+                ) : (
                  <IconCircleCheck size={14} />
+                )
              }
            >
              {isResolved ? t("Re-open comment") : t("Resolve comment")}
            </Menu.Item>
          ) : (
-            <Tooltip label={t("Available in enterprise edition")} position="left">
-              <Menu.Item 
-                disabled
-                leftSection={<IconCircleCheck size={14} />}
-              >
+            <Tooltip label={upgradeLabel} position="left">
+              <Menu.Item disabled leftSection={<IconCircleCheck size={14} />}>
                {t("Resolve comment")}
              </Menu.Item>
            </Tooltip>
-          )
-        )}
+          ))}
        <Menu.Item
          leftSection={<IconTrash size={14} />}
          onClick={openDeleteModal}
@@ -12,7 +12,7 @@ import {
 } from "@tabler/icons-react";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { INotification } from "../types/notification.types";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { useMarkReadMutation } from "../queries/notification-query";
@@ -36,20 +36,20 @@ export function NotificationItem({

  const isUnread = !notification.readAt;

-  const getNotificationMessage = (): string => {
+  const getNotificationMessageKey = (): string => {
    switch (notification.type) {
      case "comment.user_mention":
-        return t("mentioned you in a comment");
+        return "<bold>{{name}}</bold> mentioned you in a comment";
      case "comment.created":
-        return t("commented on a page");
+        return "<bold>{{name}}</bold> commented on a page";
      case "comment.resolved":
-        return t("resolved a comment");
+        return "<bold>{{name}}</bold> resolved a comment";
      case "page.user_mention":
-        return t("mentioned you on a page");
+        return "<bold>{{name}}</bold> mentioned you on a page";
      case "page.permission_granted":
        return notification.data?.role === "writer"
-          ? t("gave you edit access to a page")
-          : t("gave you view access to a page");
+          ? "<bold>{{name}}</bold> gave you edit access to a page"
+          : "<bold>{{name}}</bold> gave you view access to a page";
      default:
        return "";
    }
@@ -95,10 +95,11 @@ export function NotificationItem({

        <div style={{ flex: 1, minWidth: 0 }}>
          <Text size="sm" lineClamp={2}>
-            <Text span fw={600}>
-              {notification.actor?.name}
-            </Text>{" "}
-            {getNotificationMessage()}
+            <Trans
+              i18nKey={getNotificationMessageKey()}
+              values={{ name: notification.actor?.name }}
+              components={{ bold: <Text span fw={600} /> }}
+            />
          </Text>

          {notification.page && (
@@ -28,9 +28,11 @@ import { IPage } from "@/features/page/types/page.types.ts";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ConfluenceIcon } from "@/components/icons/confluence-icon.tsx";
-import { getFileImportSizeLimit, isCloud } from "@/lib/config.ts";
+import { getFileImportSizeLimit } from "@/lib/config.ts";
 import { formatBytes } from "@/lib";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 import { getFileTaskById } from "@/features/file-task/services/file-task-service.ts";
 import { queryClient } from "@/main.tsx";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
@@ -82,7 +84,6 @@ interface ImportFormatSelection {
 function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
  const { t } = useTranslation();
  const [treeData, setTreeData] = useAtom(treeDataAtom);
-  const [workspace] = useAtom(workspaceAtom);
  const [fileTaskId, setFileTaskId] = useState<string | null>(null);
  const emit = useQueryEmit();

@@ -93,8 +94,9 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
  const confluenceFileRef = useRef<() => void>(null);
  const zipFileRef = useRef<() => void>(null);

-  const canUseConfluence = isCloud() || workspace?.hasLicenseKey;
-  const canUseDocx = isCloud() || workspace?.hasLicenseKey;
+  const canUseConfluence = useHasFeature(Feature.CONFLUENCE_IMPORT);
+  const canUseDocx = useHasFeature(Feature.DOCX_IMPORT);
+  const upgradeLabel = useUpgradeLabel();

  const handleZipUpload = async (selectedFile: File, source: string) => {
    if (!selectedFile) {
@@ -360,7 +362,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
        >
          {(props) => (
            <Tooltip
-              label={t("Available in enterprise edition")}
+              label={upgradeLabel}
              disabled={canUseDocx}
            >
              <Button
@@ -399,7 +401,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
        >
          {(props) => (
            <Tooltip
-              label={t("Available in enterprise edition")}
+              label={upgradeLabel}
              disabled={canUseConfluence}
            >
              <Button
@@ -22,9 +22,9 @@ import {
 import { useTranslation } from "react-i18next";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import { useLicense } from "@/ee/hooks/use-license";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
 import classes from "./search-spotlight-filters.module.css";
-import { isCloud } from "@/lib/config.ts";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";

@@ -42,7 +42,7 @@ export function SearchSpotlightFilters({
  isAiMode = false,
 }: SearchSpotlightFiltersProps) {
  const { t } = useTranslation();
-  const { hasLicenseKey } = useLicense();
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);
  const [selectedSpaceId, setSelectedSpaceId] = useState<string | null>(
    spaceId || null,
  );
@@ -87,7 +87,7 @@ export function SearchSpotlightFilters({
    {
      value: "attachment",
      label: t("Attachments"),
-      disabled: !isCloud() && !hasLicenseKey,
+      disabled: !hasAttachmentIndexing,
    },
  ];

@@ -11,15 +11,16 @@ import { useUnifiedSearch } from "../hooks/use-unified-search.ts";
 import { useAiSearch } from "../../../ee/ai/hooks/use-ai-search.ts";
 import { SearchResultItem } from "./search-result-item.tsx";
 import { AiSearchResult } from "../../../ee/ai/components/ai-search-result.tsx";
-import { useLicense } from "@/ee/hooks/use-license.tsx";
-import { isCloud } from "@/lib/config.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";

 interface SearchSpotlightProps {
  spaceId?: string;
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
  const { t } = useTranslation();
-  const { hasLicenseKey } = useLicense();
+  const hasAiFeature = useHasFeature(Feature.AI);
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);
  const [query, setQuery] = useState("");
  const [debouncedSearchQuery] = useDebouncedValue(query, 300);
  const [filters, setFilters] = useState<{
@@ -84,7 +85,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {

  // Determine result type for rendering
  const isAttachmentSearch =
-    filters.contentType === "attachment" && (hasLicenseKey || isCloud());
+    filters.contentType === "attachment" && hasAttachmentIndexing;

  const resultItems = (searchResults || []).map((result) => (
    <SearchResultItem
@@ -134,7 +135,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
              }
            }}
          />
-          {isAiMode && hasLicenseKey && (
+          {isAiMode && hasAiFeature && (
            <Button
              size="xs"
              leftSection={<IconSparkles size={16} />}
@@ -8,8 +8,8 @@ import {
  IPageSearch,
  IPageSearchParams,
 } from "@/features/search/types/search.types";
-import { useLicense } from "@/ee/hooks/use-license";
-import { isCloud } from "@/lib/config";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";

 export type UnifiedSearchResult = IPageSearch | IAttachmentSearch;

@@ -21,10 +21,10 @@ export function useUnifiedSearch(
  params: UseUnifiedSearchParams,
  enabled: boolean = true,
 ): UseQueryResult<UnifiedSearchResult[], Error> {
-  const { hasLicenseKey } = useLicense();
+  const hasAttachmentIndexing = useHasFeature(Feature.ATTACHMENT_INDEXING);

  const isAttachmentSearch =
-    params.contentType === "attachment" && (isCloud() || hasLicenseKey);
+    params.contentType === "attachment" && hasAttachmentIndexing;
  const searchType = isAttachmentSearch ? "attachment" : "page";

  return useQuery({
@@ -180,7 +180,7 @@ export default function ShareShell({
      <AppShell.Main>
        {children}

-        {data && shareId && !data.hasLicenseKey && <ShareBranding />}
+        {data && shareId && !(data.features?.length > 0) && <ShareBranding />}
      </AppShell.Main>

      <AppShell.Aside
@@ -41,7 +41,7 @@ export interface ISharedPage extends IShare {
    level: number;
    sharedPage: { id: string; slugId: string; title: string; icon: string };
  };
-  hasLicenseKey: boolean;
+  features?: string[];
 }

 export interface IShareForPage extends IShare {
@@ -71,5 +71,5 @@ export interface IShareInfoInput {
 export interface ISharedPageTree {
  share: IShare;
  pageTree: Partial<IPage[]>;
-  hasLicenseKey: boolean;
+  features?: string[];
 }
@@ -19,7 +19,6 @@ import {
  ResponsiveSettingsRow,
 } from "@/components/ui/responsive-settings-row.tsx";
 import SpacePublicSharingToggle from "@/ee/security/components/space-public-sharing-toggle.tsx";
-import useEnterpriseAccess from "@/ee/hooks/use-enterprise-access.tsx";

 interface SpaceDetailsProps {
  spaceId: string;
@@ -28,8 +27,7 @@ interface SpaceDetailsProps {
 export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
  const { t } = useTranslation();
  const { data: space, isLoading, refetch } = useSpaceQuery(spaceId);
-  const hasEnterpriseAccess = useEnterpriseAccess();
-  const showSharingToggle = !readOnly && hasEnterpriseAccess;
+  const showSharingToggle = !readOnly;
  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
    useDisclosure(false);
  const [isIconUploading, setIsIconUploading] = useState(false);
@@ -1,4 +1,4 @@
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import React, { useEffect } from "react";
 import useCurrentUser from "@/features/user/hooks/use-current-user";
@@ -11,10 +11,14 @@ import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
 import { useNotificationSocket } from "@/features/notification/hooks/use-notification-socket.ts";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
 import { Error404 } from "@/components/ui/error-404.tsx";
+import { useEntitlements } from "@/ee/entitlement/use-entitlements";
+import { entitlementAtom } from "@/ee/entitlement/entitlement-atom";

 export function UserProvider({ children }: React.PropsWithChildren) {
  const [, setCurrentUser] = useAtom(currentUserAtom);
+  const setEntitlements = useSetAtom(entitlementAtom);
  const { data, isLoading, error, isError } = useCurrentUser();
+  const { data: entitlements } = useEntitlements();
  const { i18n } = useTranslation();
  const [, setSocket] = useAtom(socketAtom);
  // fetch collab token on load
@@ -56,6 +60,12 @@ export function UserProvider({ children }: React.PropsWithChildren) {
    }
  }, [data, isLoading]);

+  useEffect(() => {
+    if (entitlements) {
+      setEntitlements(entitlements);
+    }
+  }, [entitlements]);
+
  if (isLoading) return <></>;

  if (isError && error?.["response"]?.status === 404) {
@@ -20,7 +20,6 @@ export interface IWorkspace {
  emailDomains: string[];
  memberCount?: number;
  plan?: string;
-  hasLicenseKey?: boolean;
  enforceMfa?: boolean;
  aiSearch?: boolean;
  generativeAi?: boolean;
@@ -84,7 +83,6 @@ export interface IPublicWorkspace {
  hostname: string;
  enforceSso: boolean;
  authProviders: IAuthProvider[];
-  hasLicenseKey?: boolean;
 }

 export interface IVersion {