fix: modify experimental features to app-level (#6823)

packages/common/env/src/global.ts

@@ -23,6 +23,7 @@ export const runtimeFlagsSchema = z.object({
   enableEnhanceShareMode: z.boolean(),
   enablePayment: z.boolean(),
   enablePageHistory: z.boolean(),
+  enableExperimentalFeature: z.boolean(),
   allowLocalWorkspace: z.boolean(),
   // this is for the electron app
   serverUrlPrefix: z.string(),

packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx

@@ -26,7 +26,7 @@ const ExperimentalFeaturesPrompt = ({
   }, []);
 
   return (
-    <div className={styles.promptRoot}>
+    <div className={styles.promptRoot} data-testid="experimental-prompt">
       <div className={styles.promptTitle}>
         {t[
           'com.affine.settings.workspace.experimental-features.prompt-header'
@@ -49,14 +49,23 @@ const ExperimentalFeaturesPrompt = ({
       <div className={styles.spacer} />
 
       <label className={styles.promptDisclaimer}>
-        <Checkbox checked={checked} onChange={onChange} />
+        <Checkbox
+          checked={checked}
+          onChange={onChange}
+          data-testid="experimental-prompt-disclaimer"
+        />
         {t[
           'com.affine.settings.workspace.experimental-features.prompt-disclaimer'
         ]()}
       </label>
 
       <div className={styles.promptDisclaimerConfirm}>
-        <Button disabled={!checked} onClick={onConfirm} type="primary">
+        <Button
+          disabled={!checked}
+          onClick={onConfirm}
+          type="primary"
+          data-testid="experimental-confirm-button"
+        >
           {t[
             'com.affine.settings.workspace.experimental-features.get-started'
           ]()}
@@ -158,7 +167,10 @@ const ExperimentalFeaturesMain = () => {
           'com.affine.settings.workspace.experimental-features.header.plugins'
         ]()}
       />
-      <div className={styles.settingsContainer}>
+      <div
+        className={styles.settingsContainer}
+        data-testid="experimental-settings"
+      >
         <SplitViewSettingRow />
         <BlocksuiteFeatureFlagSettings />
       </div>

packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx

@@ -1,17 +1,21 @@
+import { UserFeatureService } from '@affine/core/modules/cloud/services/user-feature';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   AppearanceIcon,
+  ExperimentIcon,
   InformationIcon,
   KeyboardIcon,
 } from '@blocksuite/icons';
-import { useLiveData, useService } from '@toeverything/infra';
+import { useLiveData, useServices } from '@toeverything/infra';
 import type { ReactElement, SVGProps } from 'react';
+import { useEffect } from 'react';
 
 import { AuthService, ServerConfigService } from '../../../../modules/cloud';
 import type { GeneralSettingKey } from '../types';
 import { AboutAffine } from './about';
 import { AppearanceSettings } from './appearance';
 import { BillingSettings } from './billing';
+import { ExperimentalFeatures } from './experimental-features';
 import { PaymentIcon, UpgradeIcon } from './icons';
 import { AFFiNEPricingPlans } from './plans';
 import { Shortcuts } from './shortcuts';
@@ -27,11 +31,22 @@ export type GeneralSettingList = GeneralSettingListItem[];
 
 export const useGeneralSettingList = (): GeneralSettingList => {
   const t = useAFFiNEI18N();
-  const status = useLiveData(useService(AuthService).session.status$);
+  const { authService, serverConfigService, userFeatureService } = useServices({
-  const serverConfig = useService(ServerConfigService).serverConfig;
+    AuthService,
+    ServerConfigService,
+    UserFeatureService,
+  });
+  const status = useLiveData(authService.session.status$);
   const hasPaymentFeature = useLiveData(
-    serverConfig.features$.map(f => f?.payment)
+    serverConfigService.serverConfig.features$.map(f => f?.payment)
   );
+  const isEarlyAccess = useLiveData(
+    userFeatureService.userFeature.isEarlyAccess$
+  );
+
+  useEffect(() => {
+    userFeatureService.userFeature.revalidate();
+  }, [userFeatureService]);
 
   const settings: GeneralSettingListItem[] = [
     {
@@ -71,6 +86,15 @@ export const useGeneralSettingList = (): GeneralSettingList => {
     }
   }
 
+  if (isEarlyAccess || runtimeConfig.enableExperimentalFeature) {
+    settings.push({
+      key: 'experimental-features',
+      title: t['com.affine.settings.workspace.experimental-features'](),
+      icon: ExperimentIcon,
+      testId: 'experimental-features-trigger',
+    });
+  }
+
   return settings;
 };
 
@@ -90,6 +114,8 @@ export const GeneralSetting = ({ generalKey }: GeneralSettingProps) => {
       return <AFFiNEPricingPlans />;
     case 'billing':
       return <BillingSettings />;
+    case 'experimental-features':
+      return <ExperimentalFeatures />;
     default:
       return null;
   }

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -234,10 +234,6 @@ const subTabConfigs = [
     key: 'preference',
     title: 'com.affine.settings.workspace.preferences',
   },
-  {
-    key: 'experimental-features',
-    title: 'com.affine.settings.workspace.experimental-features',
-  },
   {
     key: 'properties',
     title: 'com.affine.settings.workspace.properties',
@@ -267,9 +263,6 @@ const WorkspaceListItem = ({
   const currentWorkspace = workspaceService.workspace;
   const isCurrent = currentWorkspace.id === meta.id;
   const t = useAFFiNEI18N();
-  const isEarlyAccess = useLiveData(
-    userFeatureService.userFeature.isEarlyAccess$
-  );
 
   useEffect(() => {
     userFeatureService.userFeature.revalidate();
@@ -280,30 +273,23 @@ const WorkspaceListItem = ({
   }, [onClick]);
 
   const subTabs = useMemo(() => {
-    return subTabConfigs
+    return subTabConfigs.map(({ key, title }) => {
-      .filter(({ key }) => {
+      return (
-        if (key === 'experimental-features') {
+        <div
-          return information?.isOwner && isEarlyAccess;
+          data-testid={`workspace-list-item-${key}`}
-        }
+          onClick={() => {
-        return true;
+            onClick(key);
-      })
+          }}
-      .map(({ key, title }) => {
+          className={clsx(style.sidebarSelectSubItem, {
-        return (
+            active: activeSubTab === key,
-          <div
+          })}
-            data-testid={`workspace-list-item-${key}`}
+          key={key}
-            onClick={() => {
+        >
-              onClick(key);
+          {t[title]()}
-            }}
+        </div>
-            className={clsx(style.sidebarSelectSubItem, {
+      );
-              active: activeSubTab === key,
+    });
-            })}
+  }, [activeSubTab, onClick, t]);
-            key={key}
-          >
-            {t[title]()}
-          </div>
-        );
-      });
-  }, [activeSubTab, information?.isOwner, isEarlyAccess, onClick, t]);
 
   return (
     <>

packages/frontend/core/src/components/affine/setting-modal/types.ts

@@ -4,13 +4,10 @@ export const GeneralSettingKeys = [
   'about',
   'plans',
   'billing',
+  'experimental-features',
 ] as const;
 
-export const WorkspaceSubTabs = [
+export const WorkspaceSubTabs = ['preference', 'properties'] as const;
-  'preference',
-  'experimental-features',
-  'properties',
-] as const;
 
 export type GeneralSettingKey = (typeof GeneralSettingKeys)[number];
 

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx

@@ -1,6 +1,6 @@
 import type { WorkspaceMetadata } from '@toeverything/infra';
 
-import { ExperimentalFeatures } from './experimental-features';
+import type { WorkspaceSubTab } from '../types';
 import { WorkspaceSettingDetail } from './new-workspace-setting-detail';
 import { WorkspaceSettingProperties } from './properties';
 
@@ -9,13 +9,11 @@ export const WorkspaceSetting = ({
   subTab,
 }: {
   workspaceMetadata: WorkspaceMetadata;
-  subTab: 'preference' | 'experimental-features' | 'properties';
+  subTab: WorkspaceSubTab;
 }) => {
   switch (subTab) {
     case 'preference':
       return <WorkspaceSettingDetail workspaceMetadata={workspaceMetadata} />;
-    case 'experimental-features':
-      return <ExperimentalFeatures />;
     case 'properties':
       return (
         <WorkspaceSettingProperties workspaceMetadata={workspaceMetadata} />

packages/frontend/i18n/src/resources/en.json

@@ -1129,7 +1129,7 @@
   "com.affine.settings.translucent-style-description": "Use transparency effect on the sidebar.",
   "com.affine.settings.workspace": "Workspace",
   "com.affine.settings.workspace.description": "You can view current workspace's information here.",
-  "com.affine.settings.workspace.experimental-features": "Plugins",
+  "com.affine.settings.workspace.experimental-features": "Experimental Features",
   "com.affine.settings.workspace.experimental-features.get-started": "Get Started",
   "com.affine.settings.workspace.experimental-features.header.plugins": "Experimental Features",
   "com.affine.settings.workspace.experimental-features.prompt-disclaimer": "I am aware of the risks, and I am willing to continue to use it.",

tests/affine-local/e2e/settings.spec.ts

@@ -2,8 +2,10 @@ import { test } from '@affine-test/kit/playwright';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import {
+  confirmExperimentalPrompt,
   openAboutPanel,
   openAppearancePanel,
+  openExperimentalFeaturesPanel,
   openSettingModal,
   openShortcutsPanel,
 } from '@affine-test/kit/utils/setting';
@@ -87,6 +89,18 @@ test('Open about panel', async ({ page }) => {
   await expect(title).toBeVisible();
 });
 
+test('Open experimental features panel', async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await openSettingModal(page);
+  await openExperimentalFeaturesPanel(page);
+  const prompt = page.getByTestId('experimental-prompt');
+  await expect(prompt).toBeVisible();
+  await confirmExperimentalPrompt(page);
+  const settings = page.getByTestId('experimental-settings');
+  await expect(settings).toBeVisible();
+});
+
 test('Different workspace should have different name in the setting panel', async ({
   page,
 }) => {

tests/kit/utils/setting.ts

@@ -24,6 +24,15 @@ export async function openAboutPanel(page: Page) {
   await page.getByTestId('about-panel-trigger').click();
 }
 
+export async function openExperimentalFeaturesPanel(page: Page) {
+  await page.getByTestId('experimental-features-trigger').click();
+}
+
+export async function confirmExperimentalPrompt(page: Page) {
+  await page.getByTestId('experimental-prompt-disclaimer').click();
+  await page.getByTestId('experimental-confirm-button').click();
+}
+
 export async function openWorkspaceSettingPanel(
   page: Page,
   workspaceName: string

tools/cli/src/webpack/runtime-config.ts

@@ -22,6 +22,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableEnhanceShareMode: false,
       enablePayment: true,
       enablePageHistory: true,
+      enableExperimentalFeature: false,
       allowLocalWorkspace: buildFlags.distribution === 'desktop' ? true : false,
       serverUrlPrefix: 'https://app.affine.pro',
       appVersion: packageJson.version,
@@ -61,6 +62,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableEnhanceShareMode: false,
       enablePayment: true,
       enablePageHistory: true,
+      enableExperimentalFeature: true,
       allowLocalWorkspace: buildFlags.distribution === 'desktop' ? true : false,
       serverUrlPrefix: 'https://affine.fail',
       appVersion: packageJson.version,