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

This commit is contained in:
Akumatus 2024-05-08 12:21:02 +08:00 committed by GitHub
parent e85548b393
commit 4a032eb260
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 94 additions and 49 deletions

View File

@ -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(),

View File

@ -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>

View File

@ -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 serverConfig = useService(ServerConfigService).serverConfig;
const { authService, serverConfigService, userFeatureService } = useServices({
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;
}

View File

@ -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
.filter(({ key }) => {
if (key === 'experimental-features') {
return information?.isOwner && isEarlyAccess;
}
return true;
})
.map(({ key, title }) => {
return (
<div
data-testid={`workspace-list-item-${key}`}
onClick={() => {
onClick(key);
}}
className={clsx(style.sidebarSelectSubItem, {
active: activeSubTab === key,
})}
key={key}
>
{t[title]()}
</div>
);
});
}, [activeSubTab, information?.isOwner, isEarlyAccess, onClick, t]);
return subTabConfigs.map(({ key, title }) => {
return (
<div
data-testid={`workspace-list-item-${key}`}
onClick={() => {
onClick(key);
}}
className={clsx(style.sidebarSelectSubItem, {
active: activeSubTab === key,
})}
key={key}
>
{t[title]()}
</div>
);
});
}, [activeSubTab, onClick, t]);
return (
<>

View File

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

View File

@ -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} />

View File

@ -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.",

View File

@ -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,
}) => {

View File

@ -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

View File

@ -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,