Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 12:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): init feature flag service (#7856)

Browse Source
This commit is contained in:
EYHN
2024-08-14 10:35:21 +00:00
parent 339c39c1ec
commit 0504d0b0ff
19 changed files with 361 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/infra/src/atom/settings.ts
-123
View File
@@ -1,12 +1,9 @@
import { DebugLogger } from '@affine/debug';
import { setupGlobal } from '@affine/env/global';
import type { DocCollection } from '@blocksuite/store';
import { atom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import { atomEffect } from 'jotai-effect';
import { getCurrentStore } from './root-store';
setupGlobal();
const logger = new DebugLogger('affine:settings');
@@ -31,9 +28,7 @@ export type AppSetting = {
enableNoisyBackground: boolean;
autoCheckUpdate: boolean;
autoDownloadUpdate: boolean;
enableMultiView: boolean;
enableTelemetry: boolean;
editorFlags: Partial<Omit<BlockSuiteFlags, 'readonly'>>;
};
export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
'frameless',
@@ -73,40 +68,8 @@ const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
autoCheckUpdate: true,
autoDownloadUpdate: true,
enableTelemetry: true,
enableMultiView: false,
editorFlags: {},
});
export function setupEditorFlags(docCollection: DocCollection) {
const store = getCurrentStore();
const syncEditorFlags = () => {
try {
const editorFlags = getCurrentStore().get(appSettingBaseAtom).editorFlags;
Object.entries(editorFlags ?? {}).forEach(([key, value]) => {
docCollection.awarenessStore.setFlag(
key as keyof BlockSuiteFlags,
value
);
});
// override this flag in app settings
// TODO(@eyhn): need a better way to manage block suite flags
Object.entries(blocksuiteFeatureFlags).forEach(([key, value]) => {
if (value.defaultState !== undefined) {
docCollection.awarenessStore.setFlag(
key as keyof BlockSuiteFlags,
value.defaultState
);
}
});
} catch (err) {
logger.error('syncEditorFlags', err);
}
};
store.sub(appSettingBaseAtom, syncEditorFlags);
syncEditorFlags();
}
type SetStateAction<Value> = Value | ((prev: Value) => Value);
// todo(@pengx17): use global state instead
@@ -143,89 +106,3 @@ export const appSettingAtom = atom<
});
}
);
export type BuildChannel = 'stable' | 'beta' | 'canary' | 'internal';
export type FeedbackType = 'discord' | 'email' | 'github';
export type PreconditionType = () => boolean | undefined;
export type Flag<K extends string> = Partial<{
[key in K]: {
displayName: string;
description?: string;
precondition?: PreconditionType;
defaultState?: boolean; // default to open and not controlled by user
feedbackType?: FeedbackType;
};
}>;
const isNotStableBuild: PreconditionType = () => {
return runtimeConfig.appBuildType !== 'stable';
};
const isDesktopEnvironment: PreconditionType = () => environment.isDesktop;
const neverShow: PreconditionType = () => false;
export const blocksuiteFeatureFlags: Flag<keyof BlockSuiteFlags> = {
enable_database_attachment_note: {
displayName: 'Database Attachment Note',
description: 'Allows adding notes to database attachments.',
precondition: isNotStableBuild,
},
enable_database_statistics: {
displayName: 'Database Block Statistics',
description: 'Shows statistics for database blocks.',
precondition: isNotStableBuild,
},
enable_block_query: {
displayName: 'Todo Block Query',
description: 'Enables querying of todo blocks.',
precondition: isNotStableBuild,
},
enable_synced_doc_block: {
displayName: 'Synced Doc Block',
description: 'Enables syncing of doc blocks.',
precondition: neverShow,
defaultState: true,
},
enable_edgeless_text: {
displayName: 'Edgeless Text',
description: 'Enables edgeless text blocks.',
precondition: neverShow,
defaultState: true,
},
enable_color_picker: {
displayName: 'Color Picker',
description: 'Enables color picker blocks.',
precondition: neverShow,
defaultState: true,
},
enable_ai_chat_block: {
displayName: 'AI Chat Block',
description: 'Enables AI chat blocks.',
precondition: neverShow,
defaultState: true,
},
enable_ai_onboarding: {
displayName: 'AI Onboarding',
description: 'Enables AI onboarding.',
precondition: neverShow,
defaultState: true,
},
enable_expand_database_block: {
displayName: 'Expand Database Block',
description: 'Enables expanding of database blocks.',
precondition: neverShow,
defaultState: true,
},
};
export const affineFeatureFlags: Flag<keyof AppSetting> = {
enableMultiView: {
displayName: 'Split View',
description:
'The Split View feature in AFFiNE allows users to divide their workspace into multiple sections, enabling simultaneous viewing and editing of different documents.The Split View feature in AFFiNE allows users to divide their workspace into multiple sections, enabling simultaneous viewing and editing of different documents.',
feedbackType: 'discord',
precondition: isDesktopEnvironment,
},
};
packages/common/infra/src/index.ts
+3
View File
@@ -6,6 +6,7 @@ export * from './initialization';
export * from './livedata';
export * from './modules/db';
export * from './modules/doc';
export * from './modules/feature-flag';
export * from './modules/global-context';
export * from './modules/lifecycle';
export * from './modules/storage';
@@ -17,6 +18,7 @@ export * from './utils';
import type { Framework } from './framework';
import { configureWorkspaceDBModule } from './modules/db';
import { configureDocModule } from './modules/doc';
import { configureFeatureFlagModule } from './modules/feature-flag';
import { configureGlobalContextModule } from './modules/global-context';
import { configureLifecycleModule } from './modules/lifecycle';
import {
@@ -35,6 +37,7 @@ export function configureInfraModules(framework: Framework) {
configureGlobalStorageModule(framework);
configureGlobalContextModule(framework);
configureLifecycleModule(framework);
configureFeatureFlagModule(framework);
}
export function configureTestingInfraModules(framework: Framework) {
packages/common/infra/src/modules/feature-flag/constant.ts
+88
View File
@@ -0,0 +1,88 @@
import type { FlagInfo } from './types';
const isNotStableBuild = runtimeConfig.appBuildType !== 'stable';
const isDesktopEnvironment = environment.isDesktop;
const isCanaryBuild = runtimeConfig.appBuildType === 'canary';
export const AFFINE_FLAGS = {
enable_database_attachment_note: {
category: 'blocksuite',
bsFlag: 'enable_database_attachment_note',
displayName: 'Database Attachment Note',
description: 'Allows adding notes to database attachments.',
configurable: isNotStableBuild,
},
enable_database_statistics: {
category: 'blocksuite',
bsFlag: 'enable_database_statistics',
displayName: 'Database Block Statistics',
description: 'Shows statistics for database blocks.',
configurable: isNotStableBuild,
},
enable_block_query: {
category: 'blocksuite',
bsFlag: 'enable_block_query',
displayName: 'Todo Block Query',
description: 'Enables querying of todo blocks.',
configurable: isNotStableBuild,
},
enable_synced_doc_block: {
category: 'blocksuite',
bsFlag: 'enable_synced_doc_block',
displayName: 'Synced Doc Block',
description: 'Enables syncing of doc blocks.',
configurable: false,
defaultState: true,
},
enable_edgeless_text: {
category: 'blocksuite',
bsFlag: 'enable_edgeless_text',
displayName: 'Edgeless Text',
description: 'Enables edgeless text blocks.',
configurable: false,
defaultState: true,
},
enable_color_picker: {
category: 'blocksuite',
bsFlag: 'enable_color_picker',
displayName: 'Color Picker',
description: 'Enables color picker blocks.',
configurable: false,
defaultState: true,
},
enable_ai_chat_block: {
category: 'blocksuite',
bsFlag: 'enable_ai_chat_block',
displayName: 'AI Chat Block',
description: 'Enables AI chat blocks.',
configurable: false,
defaultState: true,
},
enable_ai_onboarding: {
category: 'blocksuite',
bsFlag: 'enable_ai_onboarding',
displayName: 'AI Onboarding',
description: 'Enables AI onboarding.',
configurable: false,
defaultState: true,
},
enable_expand_database_block: {
category: 'blocksuite',
bsFlag: 'enable_expand_database_block',
displayName: 'Expand Database Block',
description: 'Enables expanding of database blocks.',
configurable: false,
defaultState: true,
},
enable_multi_view: {
category: 'affine',
displayName: 'Split View',
description:
'The Split View feature in AFFiNE allows users to divide their workspace into multiple sections, enabling simultaneous viewing and editing of different documents.The Split View feature in AFFiNE allows users to divide their workspace into multiple sections, enabling simultaneous viewing and editing of different documents.',
feedbackType: 'discord',
configurable: isDesktopEnvironment,
defaultState: isCanaryBuild,
},
} satisfies { [key in string]: FlagInfo };
export type AFFINE_FLAGS = typeof AFFINE_FLAGS;
packages/common/infra/src/modules/feature-flag/entities/flags.ts
+62
View File
@@ -0,0 +1,62 @@
import { NEVER } from 'rxjs';
import { Entity } from '../../../framework';
import { LiveData } from '../../../livedata';
import type { GlobalStateService } from '../../storage';
import { AFFINE_FLAGS } from '../constant';
import type { FlagInfo } from '../types';
const FLAG_PREFIX = 'affine-flag:';
export type Flag<F extends FlagInfo = FlagInfo> = {
readonly value: F['defaultState'] extends boolean
? boolean
: boolean | undefined;
set: (value: boolean) => void;
// eslint-disable-next-line rxjs/finnish
$: F['defaultState'] extends boolean
? LiveData<boolean>
: LiveData<boolean> | LiveData<boolean | undefined>;
} & F;
export class Flags extends Entity {
private readonly globalState = this.globalStateService.globalState;
constructor(private readonly globalStateService: GlobalStateService) {
super();
Object.entries(AFFINE_FLAGS).forEach(([flagKey, flag]) => {
const configurable = flag.configurable ?? true;
const defaultState =
'defaultState' in flag ? flag.defaultState : undefined;
const item = {
...flag,
value: configurable
? (this.globalState.get<boolean>(FLAG_PREFIX + flagKey) ??
defaultState)
: defaultState,
set: (value: boolean) => {
if (!configurable) {
return;
}
this.globalState.set(FLAG_PREFIX + flagKey, value);
},
$: configurable
? LiveData.from<boolean | undefined>(
this.globalState.watch<boolean>(FLAG_PREFIX + flagKey),
undefined
).map(value => value ?? defaultState)
: LiveData.from(NEVER, defaultState),
} as Flag<typeof flag>;
Object.defineProperty(this, flagKey, {
get: () => {
return item;
},
});
});
}
}
export type FlagsExt = Flags & {
[K in keyof AFFINE_FLAGS]: Flag<AFFINE_FLAGS[K]>;
};
packages/common/infra/src/modules/feature-flag/index.ts
+13
View File
@@ -0,0 +1,13 @@
import type { Framework } from '../../framework';
import { GlobalStateService } from '../storage';
import { Flags } from './entities/flags';
import { FeatureFlagService } from './services/feature-flag';
export { AFFINE_FLAGS } from './constant';
export type { Flag } from './entities/flags';
export { FeatureFlagService } from './services/feature-flag';
export type { FlagInfo } from './types';
export function configureFeatureFlagModule(framework: Framework) {
framework.service(FeatureFlagService).entity(Flags, [GlobalStateService]);
}
packages/common/infra/src/modules/feature-flag/services/feature-flag.ts
+21
View File
@@ -0,0 +1,21 @@
import { OnEvent, Service } from '../../../framework';
import type { Workspace } from '../../workspace';
import { WorkspaceInitialized } from '../../workspace/events';
import { AFFINE_FLAGS } from '../constant';
import { Flags, type FlagsExt } from '../entities/flags';
@OnEvent(WorkspaceInitialized, e => e.setupBlocksuiteEditorFlags)
export class FeatureFlagService extends Service {
flags = this.framework.createEntity(Flags) as FlagsExt;
setupBlocksuiteEditorFlags(workspace: Workspace) {
for (const [key, flag] of Object.entries(AFFINE_FLAGS)) {
if (flag.category === 'blocksuite') {
const value = this.flags[key as keyof AFFINE_FLAGS].value;
if (value !== undefined) {
workspace.docCollection.awarenessStore.setFlag(flag.bsFlag, value);
}
}
}
}
}
packages/common/infra/src/modules/feature-flag/types.ts
+17
View File
@@ -0,0 +1,17 @@
type FeedbackType = 'discord' | 'email' | 'github';
export type FlagInfo = {
displayName: string;
description?: string;
configurable?: boolean;
defaultState?: boolean; // default to open and not controlled by user
feedbackType?: FeedbackType;
} & (
| {
category: 'affine';
}
| {
category: 'blocksuite';
bsFlag: keyof BlockSuiteFlags;
}
);
packages/common/infra/src/modules/workspace/events/index.ts
+5
View File
@@ -1,6 +1,11 @@
import { createEvent } from '../../../framework';
import type { WorkspaceEngine } from '../entities/engine';
import type { Workspace } from '../entities/workspace';
export const WorkspaceEngineBeforeStart = createEvent<WorkspaceEngine>(
'WorkspaceEngineBeforeStart'
);
export const WorkspaceInitialized = createEvent<Workspace>(
'WorkspaceInitialized'
);
packages/common/infra/src/modules/workspace/index.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export type { WorkspaceProfileInfo } from './entities/profile';
export { Workspace } from './entities/workspace';
export { WorkspaceEngineBeforeStart } from './events';
export { WorkspaceEngineBeforeStart, WorkspaceInitialized } from './events';
export { globalBlockSuiteSchema } from './global-schema';
export type { WorkspaceMetadata } from './metadata';
export type { WorkspaceOpenOptions } from './open-options';
packages/common/infra/src/modules/workspace/services/repo.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { DebugLogger } from '@affine/debug';
import { setupEditorFlags } from '../../../atom';
import { fixWorkspaceVersion } from '../../../blocksuite';
import { Service } from '../../../framework';
import { ObjectPool } from '../../../utils';
import type { Workspace } from '../entities/workspace';
import { WorkspaceInitialized } from '../events';
import type { WorkspaceOpenOptions } from '../open-options';
import type { WorkspaceFlavourProvider } from '../providers/flavour';
import { WorkspaceScope } from '../scopes/workspace';
@@ -103,7 +103,7 @@ export class WorkspaceRepositoryService extends Service {
// apply compatibility fix
fixWorkspaceVersion(workspace.docCollection.doc);
setupEditorFlags(workspace.docCollection);
this.framework.emitEvent(WorkspaceInitialized, workspace);
this.profileRepo
.getProfile(openOptions.metadata)
packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.css.ts
-4
View File
@@ -56,10 +56,6 @@ export const switchRow = style({
justifyContent: 'space-between',
width: '100%',
});
export const switchDisabled = style({
opacity: 0.5,
pointerEvents: 'none',
});
export const subHeader = style({
fontWeight: '600',
color: cssVar('textSecondaryColor'),
packages/frontend/core/src/components/affine/setting-modal/general-setting/experimental-features/index.tsx
+34 -104
View File
@@ -1,6 +1,5 @@
import { Button, Checkbox, Loading, Switch, Tooltip } from '@affine/component';
import { SettingHeader } from '@affine/component/setting-components';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
import { useI18n } from '@affine/i18n';
import {
@@ -10,9 +9,11 @@ import {
GithubIcon,
} from '@blocksuite/icons/rc';
import {
affineFeatureFlags,
blocksuiteFeatureFlags,
type FeedbackType,
AFFINE_FLAGS,
FeatureFlagService,
type Flag,
useLiveData,
useServices,
} from '@toeverything/infra';
import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
@@ -86,7 +87,7 @@ const ExperimentalFeaturesPrompt = ({
);
};
const FeedbackIcon = ({ type }: { type: FeedbackType }) => {
const FeedbackIcon = ({ type }: { type: Flag['feedbackType'] }) => {
switch (type) {
case 'discord':
return <DiscordIcon fontSize={16} />;
@@ -99,55 +100,45 @@ const FeedbackIcon = ({ type }: { type: FeedbackType }) => {
}
};
const feedbackLink: Record<FeedbackType, string> = {
const feedbackLink: Record<NonNullable<Flag['feedbackType']>, string> = {
discord: 'https://discord.gg/whd5mjYqVw',
email: 'mailto:support@toeverything.info',
github: 'https://github.com/toeverything/AFFiNE/issues',
};
const ExperimentalFeaturesItem = ({
title,
description,
feedbackType,
isMutating,
checked,
onChange,
testId,
}: {
title: React.ReactNode;
description?: React.ReactNode;
feedbackType?: FeedbackType;
isMutating?: boolean;
checked: boolean;
onChange: (checked: boolean) => void;
testId?: string;
}) => {
const link = feedbackType ? feedbackLink[feedbackType] : undefined;
const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => {
const value = useLiveData(flag.$);
const onChange = useCallback(
(checked: boolean) => {
flag.set(checked);
},
[flag]
);
const link = flag.feedbackType ? feedbackLink[flag.feedbackType] : undefined;
if (flag.configurable === false) {
return null;
}
return (
<div className={styles.rowContainer}>
<div className={styles.switchRow}>
{title}
<Switch
checked={checked}
onChange={onChange}
className={isMutating ? styles.switchDisabled : ''}
data-testid={testId}
/>
{flag.displayName}
<Switch checked={value} onChange={onChange} />
</div>
{!!description && (
<Tooltip content={description}>
<div className={styles.description}>{description}</div>
{!!flag.description && (
<Tooltip content={flag.description}>
<div className={styles.description}>{flag.description}</div>
</Tooltip>
)}
{!!feedbackType && (
{!!flag.feedbackType && (
<a
className={styles.feedback}
href={link}
target="_blank"
rel="noreferrer"
>
<FeedbackIcon type={feedbackType} />
<FeedbackIcon type={flag.feedbackType} />
<span>Discussion about this feature</span>
<ArrowRightSmallIcon
fontSize={20}
@@ -159,74 +150,9 @@ const ExperimentalFeaturesItem = ({
);
};
const SplitViewSettingRow = () => {
const { appSettings, updateSettings } = useAppSettingHelper();
const onToggle = useCallback(
(checked: boolean) => {
updateSettings('enableMultiView', checked);
},
[updateSettings]
);
const multiViewFlagConfig = affineFeatureFlags['enableMultiView'];
const shouldShow = multiViewFlagConfig?.precondition?.();
if (!multiViewFlagConfig || !shouldShow) {
return null;
}
return (
<ExperimentalFeaturesItem
title={multiViewFlagConfig.displayName}
description={multiViewFlagConfig.description}
feedbackType={multiViewFlagConfig.feedbackType}
checked={appSettings.enableMultiView}
onChange={onToggle}
/>
);
};
const BlocksuiteFeatureFlagSettings = () => {
const { appSettings, updateSettings } = useAppSettingHelper();
const toggleSetting = useCallback(
(flag: keyof BlockSuiteFlags, checked: boolean) => {
updateSettings('editorFlags', {
...appSettings.editorFlags,
[flag]: checked,
});
},
[appSettings.editorFlags, updateSettings]
);
type EditorFlag = keyof typeof appSettings.editorFlags;
return (
<>
{Object.entries(blocksuiteFeatureFlags).map(([key, value]) => {
const hidden = value.precondition && !value.precondition();
if (hidden) {
return null;
}
return (
<ExperimentalFeaturesItem
key={key}
title={'Block Suite: ' + value.displayName}
description={value.description}
feedbackType={value.feedbackType}
checked={!!appSettings.editorFlags?.[key as EditorFlag]}
onChange={checked =>
toggleSetting(key as keyof BlockSuiteFlags, checked)
}
/>
);
})}
</>
);
};
const ExperimentalFeaturesMain = () => {
const t = useI18n();
const { featureFlagService } = useServices({ FeatureFlagService });
return (
<>
@@ -242,8 +168,12 @@ const ExperimentalFeaturesMain = () => {
className={styles.settingsContainer}
data-testid="experimental-settings"
>
<SplitViewSettingRow />
<BlocksuiteFeatureFlagSettings />
{Object.keys(AFFINE_FLAGS).map(key => (
<ExperimentalFeaturesItem
key={key}
flag={featureFlagService.flags[key as keyof AFFINE_FLAGS]}
/>
))}
</div>
</>
);
packages/frontend/core/src/components/page-list/operation-cell.tsx
+18 -6
View File
@@ -6,7 +6,6 @@ import {
toast,
useConfirmModal,
} from '@affine/component';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
@@ -34,6 +33,7 @@ import {
} from '@blocksuite/icons/rc';
import type { DocMeta } from '@blocksuite/store';
import {
FeatureFlagService,
useLiveData,
useService,
useServices,
@@ -67,13 +67,25 @@ export const PageOperationCell = ({
onRemoveFromAllowList,
}: PageOperationCellProps) => {
const t = useI18n();
const currentWorkspace = useService(WorkspaceService).workspace;
const { appSettings } = useAppSettingHelper();
const {
featureFlagService,
workspaceService,
compatibleFavoriteItemsAdapter: favAdapter,
workbenchService,
} = useServices({
FeatureFlagService,
WorkspaceService,
CompatibleFavoriteItemsAdapter,
WorkbenchService,
});
const enableSplitView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const currentWorkspace = workspaceService.workspace;
const { setTrashModal } = useTrashModalHelper(currentWorkspace.docCollection);
const [openDisableShared, setOpenDisableShared] = useState(false);
const favAdapter = useService(CompatibleFavoriteItemsAdapter);
const favourite = useLiveData(favAdapter.isFavorite$(page.id, 'doc'));
const workbench = useService(WorkbenchService).workbench;
const workbench = workbenchService.workbench;
const { duplicate } = useBlockSuiteMetaHelper(currentWorkspace.docCollection);
const blocksuiteDoc = currentWorkspace.docCollection.getDoc(page.id);
@@ -201,7 +213,7 @@ export const PageOperationCell = ({
{t['com.affine.workbench.tab.page-menu-open']()}
</MenuItem>
{environment.isDesktop && appSettings.enableMultiView ? (
{environment.isDesktop && enableSplitView ? (
<MenuItem
onClick={onOpenInSplitView}
preFix={
packages/frontend/core/src/components/page-list/view/collection-operations.tsx
+21 -7
View File
@@ -1,6 +1,5 @@
import type { MenuItemProps } from '@affine/component';
import { Menu, MenuIcon, MenuItem } from '@affine/component';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -16,7 +15,12 @@ import {
PlusIcon,
SplitViewIcon,
} from '@blocksuite/icons/rc';
import { useLiveData, useService } from '@toeverything/infra';
import {
FeatureFlagService,
useLiveData,
useService,
useServices,
} from '@toeverything/infra';
import type { PropsWithChildren, ReactElement } from 'react';
import { useCallback, useMemo } from 'react';
@@ -37,10 +41,17 @@ export const CollectionOperations = ({
openRenameModal?: () => void;
onAddDocToCollection?: () => void;
}>) => {
const {
collectionService: service,
workbenchService,
featureFlagService,
} = useServices({
CollectionService,
WorkbenchService,
FeatureFlagService,
});
const deleteInfo = useDeleteCollectionInfo();
const { appSettings } = useAppSettingHelper();
const service = useService(CollectionService);
const workbench = useService(WorkbenchService).workbench;
const workbench = workbenchService.workbench;
const { open: openEditCollectionModal, node: editModal } =
useEditCollection();
const t = useI18n();
@@ -48,6 +59,9 @@ export const CollectionOperations = ({
useEditCollectionName({
title: t['com.affine.editCollection.renameCollection'](),
});
const enableMultiView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const showEditName = useCallback(() => {
// use openRenameModal if it is in the sidebar collection list
@@ -167,7 +181,7 @@ export const CollectionOperations = ({
name: t['com.affine.workbench.tab.page-menu-open'](),
click: openCollectionNewTab,
},
...(appSettings.enableMultiView
...(enableMultiView && environment.isDesktop
? [
{
icon: (
@@ -197,6 +211,7 @@ export const CollectionOperations = ({
},
],
[
enableMultiView,
t,
showEditName,
showEdit,
@@ -204,7 +219,6 @@ export const CollectionOperations = ({
favorite,
onToggleFavoritePage,
openCollectionNewTab,
appSettings.enableMultiView,
openCollectionSplitView,
service,
deleteInfo,
packages/frontend/core/src/modules/explorer/views/nodes/collection/operations.tsx
+13 -5
View File
@@ -5,7 +5,6 @@ import {
MenuSeparator,
useConfirmModal,
} from '@affine/component';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
import { track } from '@affine/core/mixpanel';
import { CollectionService } from '@affine/core/modules/collection';
@@ -21,7 +20,12 @@ import {
PlusIcon,
SplitViewIcon,
} from '@blocksuite/icons/rc';
import { DocsService, useLiveData, useServices } from '@toeverything/infra';
import {
DocsService,
FeatureFlagService,
useLiveData,
useServices,
} from '@toeverything/infra';
import { useCallback, useMemo } from 'react';
import type { NodeOperation } from '../../tree/types';
@@ -32,20 +36,24 @@ export const useExplorerCollectionNodeOperations = (
onOpenEdit: () => void
): NodeOperation[] => {
const t = useI18n();
const { appSettings } = useAppSettingHelper();
const {
workbenchService,
docsService,
collectionService,
compatibleFavoriteItemsAdapter,
featureFlagService,
} = useServices({
DocsService,
WorkbenchService,
CollectionService,
CompatibleFavoriteItemsAdapter,
FeatureFlagService,
});
const deleteInfo = useDeleteCollectionInfo();
const enableMultiView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const favorite = useLiveData(
useMemo(
() =>
@@ -200,7 +208,7 @@ export const useExplorerCollectionNodeOperations = (
</MenuItem>
),
},
...(appSettings.enableMultiView
...(environment.isDesktop && enableMultiView
? [
{
index: 99,
@@ -241,7 +249,7 @@ export const useExplorerCollectionNodeOperations = (
},
],
[
appSettings.enableMultiView,
enableMultiView,
favorite,
handleAddDocToCollection,
handleDeleteCollection,
packages/frontend/core/src/modules/explorer/views/nodes/doc/operations.tsx
+22 -11
View File
@@ -6,7 +6,6 @@ import {
toast,
useConfirmModal,
} from '@affine/component';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
import { track } from '@affine/core/mixpanel';
import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
@@ -22,7 +21,12 @@ import {
PlusIcon,
SplitViewIcon,
} from '@blocksuite/icons/rc';
import { DocsService, useLiveData, useServices } from '@toeverything/infra';
import {
DocsService,
FeatureFlagService,
useLiveData,
useServices,
} from '@toeverything/infra';
import { useCallback, useMemo } from 'react';
import type { NodeOperation } from '../../tree/types';
@@ -35,13 +39,20 @@ export const useExplorerDocNodeOperations = (
}
): NodeOperation[] => {
const t = useI18n();
const { appSettings } = useAppSettingHelper();
const { workbenchService, docsService, compatibleFavoriteItemsAdapter } =
useServices({
DocsService,
WorkbenchService,
CompatibleFavoriteItemsAdapter,
});
const {
workbenchService,
docsService,
compatibleFavoriteItemsAdapter,
featureFlagService,
} = useServices({
DocsService,
WorkbenchService,
CompatibleFavoriteItemsAdapter,
FeatureFlagService,
});
const enableMultiView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const { openConfirmModal } = useConfirmModal();
const docRecord = useLiveData(docsService.list.doc$(docId));
@@ -179,7 +190,7 @@ export const useExplorerDocNodeOperations = (
</MenuItem>
),
},
...(appSettings.enableMultiView
...(enableMultiView && environment.isDesktop
? [
{
index: 100,
@@ -243,7 +254,7 @@ export const useExplorerDocNodeOperations = (
},
],
[
appSettings.enableMultiView,
enableMultiView,
favorite,
handleAddLinkedPage,
handleMoveToTrash,
packages/frontend/core/src/modules/explorer/views/nodes/tag/operations.tsx
+24 -12
View File
@@ -5,7 +5,6 @@ import {
MenuSeparator,
toast,
} from '@affine/component';
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { track } from '@affine/core/mixpanel';
import { FavoriteService } from '@affine/core/modules/favorite';
import { TagService } from '@affine/core/modules/tag';
@@ -19,7 +18,12 @@ import {
PlusIcon,
SplitViewIcon,
} from '@blocksuite/icons/rc';
import { DocsService, useLiveData, useServices } from '@toeverything/infra';
import {
DocsService,
FeatureFlagService,
useLiveData,
useServices,
} from '@toeverything/infra';
import { useCallback, useMemo } from 'react';
import type { NodeOperation } from '../../tree/types';
@@ -33,19 +37,27 @@ export const useExplorerTagNodeOperations = (
}
): NodeOperation[] => {
const t = useI18n();
const { appSettings } = useAppSettingHelper();
const { docsService, workbenchService, tagService, favoriteService } =
useServices({
WorkbenchService,
TagService,
DocsService,
FavoriteService,
});
const {
docsService,
workbenchService,
tagService,
favoriteService,
featureFlagService,
} = useServices({
WorkbenchService,
TagService,
DocsService,
FavoriteService,
FeatureFlagService,
});
const favorite = useLiveData(
favoriteService.favoriteList.favorite$('tag', tagId)
);
const tagRecord = useLiveData(tagService.tagList.tagByTagId$(tagId));
const enableMultiView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const handleNewDoc = useCallback(() => {
if (tagRecord) {
@@ -114,7 +126,7 @@ export const useExplorerTagNodeOperations = (
</MenuItem>
),
},
...(appSettings.enableMultiView
...(enableMultiView && environment.isDesktop
? [
{
index: 100,
@@ -178,7 +190,7 @@ export const useExplorerTagNodeOperations = (
},
],
[
appSettings.enableMultiView,
enableMultiView,
favorite,
handleMoveToTrash,
handleNewDoc,
packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+15 -6
View File
@@ -1,7 +1,10 @@
import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
import { isNewTabTrigger } from '@affine/core/utils';
import { useLiveData, useService } from '@toeverything/infra';
import {
FeatureFlagService,
useLiveData,
useServices,
} from '@toeverything/infra';
import { type To } from 'history';
import { forwardRef, type MouseEvent } from 'react';
@@ -16,8 +19,14 @@ export const WorkbenchLink = forwardRef<
} & React.HTMLProps<HTMLAnchorElement>
>
>(function WorkbenchLink({ to, onClick, ...other }, ref) {
const workbench = useService(WorkbenchService).workbench;
const { appSettings } = useAppSettingHelper();
const { featureFlagService, workbenchService } = useServices({
FeatureFlagService,
WorkbenchService,
});
const enableMultiView = useLiveData(
featureFlagService.flags.enable_multi_view.$
);
const workbench = workbenchService.workbench;
const basename = useLiveData(workbench.basename$);
const link =
basename +
@@ -30,7 +39,7 @@ export const WorkbenchLink = forwardRef<
}
const at = (() => {
if (isNewTabTrigger(event)) {
return event.altKey && appSettings.enableMultiView
return event.altKey && enableMultiView && environment.isDesktop
? 'tail'
: 'new-tab';
}
@@ -39,7 +48,7 @@ export const WorkbenchLink = forwardRef<
workbench.open(to, { at });
event.preventDefault();
},
[appSettings.enableMultiView, onClick, to, workbench]
[enableMultiView, onClick, to, workbench]
);
// eslint suspicious runtime error
tests/affine-desktop/e2e/tabs.spec.ts
+2 -31
View File
@@ -132,35 +132,7 @@ test('tab title will change when navigating', async ({ page }) => {
}
});
// temporary way to enable split view
async function enableSplitView(page: Page) {
await page.evaluate(() => {
const settingKey = 'affine-settings';
window.localStorage.setItem(
settingKey,
JSON.stringify({
clientBorder: false,
fullWidthLayout: false,
windowFrameStyle: 'frameless',
fontStyle: 'Serif',
dateFormat: 'MM/dd/YYYY',
startWeekOnMonday: false,
enableBlurBackground: true,
enableNoisyBackground: true,
autoCheckUpdate: true,
autoDownloadUpdate: true,
enableMultiView: true,
editorFlags: {},
})
);
});
await page.reload({
timeout: 30000,
});
}
test('open new tab via cmd+click page link', async ({ page }) => {
await enableSplitView(page);
await clickNewPageButton(page);
await page.waitForTimeout(500);
await page.keyboard.press('Enter');
@@ -177,7 +149,6 @@ test('open new tab via cmd+click page link', async ({ page }) => {
});
test('open split view', async ({ page }) => {
await enableSplitView(page);
await clickNewPageButton(page);
await page.waitForTimeout(500);
await page.keyboard.press('Enter');
@@ -229,10 +200,10 @@ test('reorder tabs', async ({ page }) => {
await createLinkedPage(page, titles[0]);
await createLinkedPage(page, titles[1]);
await page.locator(`.affine-reference-title:has-text("${titles[0]}")`).click({
modifiers: ['ControlOrMeta', 'Alt'],
modifiers: ['ControlOrMeta'],
});
await page.locator(`.affine-reference-title:has-text("${titles[1]}")`).click({
modifiers: ['ControlOrMeta', 'Alt'],
modifiers: ['ControlOrMeta'],
});
await expectTabTitle(page, 0, 'Untitled');