feat(core): add split view to experimental features settings (#6093)

packages/backend/server/src/core/features/management.ts

@@ -115,4 +115,10 @@ export class FeatureManagementService {
   async listFeatureWorkspaces(feature: FeatureType) {
     return this.feature.listFeatureWorkspaces(feature);
   }
+
+  async getUserFeatures(userId: string): Promise<FeatureType[]> {
+    return (await this.feature.getUserFeatures(userId)).map(
+      f => f.feature.name
+    );
+  }
 }

packages/backend/server/src/core/user/resolver.ts

@@ -21,7 +21,7 @@ import {
 import { CurrentUser } from '../auth/current-user';
 import { Public } from '../auth/guard';
 import { sessionUser } from '../auth/service';
-import { FeatureManagementService } from '../features';
+import { FeatureManagementService, FeatureType } from '../features';
 import { QuotaService } from '../quota';
 import { AvatarStorage } from '../storage';
 import { UserService } from './service';
@@ -108,6 +108,15 @@ export class UserResolver {
     });
   }
 
+  @Throttle({ default: { limit: 10, ttl: 60 } })
+  @ResolveField(() => [FeatureType], {
+    name: 'features',
+    description: 'Enabled features of a user',
+  })
+  async userFeatures(@CurrentUser() user: CurrentUser) {
+    return this.feature.getUserFeatures(user.id);
+  }
+
   @Throttle({
     default: {
       limit: 10,

packages/backend/server/src/schema.gql

@@ -374,6 +374,9 @@ type UserType {
   """User email verified"""
   emailVerified: Boolean!
 
+  """Enabled features of a user"""
+  features: [FeatureType!]!
+
   """User password has been set"""
   hasPassword: Boolean
   id: ID!

packages/common/infra/src/atom/settings.ts

@@ -25,6 +25,7 @@ export type AppSetting = {
   enableNoisyBackground: boolean;
   autoCheckUpdate: boolean;
   autoDownloadUpdate: boolean;
+  enableMultiView: boolean;
 };
 export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
   'frameless',
@@ -63,6 +64,7 @@ const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
   enableNoisyBackground: true,
   autoCheckUpdate: true,
   autoDownloadUpdate: true,
+  enableMultiView: false,
 });
 
 type SetStateAction<Value> = Value | ((prev: Value) => Value);

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

@@ -5,11 +5,10 @@ import {
 import { Avatar } from '@affine/component/ui/avatar';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useIsWorkspaceOwner } from '@affine/core/hooks/affine/use-is-workspace-owner';
+import { useIsEarlyAccess } from '@affine/core/hooks/affine/use-user-features';
 import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
-import { useWorkspaceAvailableFeatures } from '@affine/core/hooks/use-workspace-features';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Logo1Icon } from '@blocksuite/icons';
 import {
@@ -253,7 +252,7 @@ const WorkspaceListItem = ({
   const isCurrent = currentWorkspace.id === meta.id;
   const t = useAFFiNEI18N();
   const isOwner = useIsWorkspaceOwner(meta);
-  const availableFeatures = useWorkspaceAvailableFeatures(meta);
+  const isEarlyAccess = useIsEarlyAccess();
 
   const onClickPreference = useCallback(() => {
     onClick('preference');
@@ -263,11 +262,7 @@ const WorkspaceListItem = ({
     return subTabConfigs
       .filter(({ key }) => {
         if (key === 'experimental-features') {
-          return (
+          return isOwner && isEarlyAccess;
-            isOwner &&
-            meta.flavour === WorkspaceFlavour.AFFINE_CLOUD &&
-            availableFeatures.length > 0
-          );
         }
         return true;
       })
@@ -287,14 +282,7 @@ const WorkspaceListItem = ({
           </div>
         );
       });
-  }, [
+  }, [activeSubTab, isEarlyAccess, isOwner, onClick, t]);
-    activeSubTab,
-    availableFeatures.length,
-    isOwner,
-    meta.flavour,
-    onClick,
-    t,
-  ]);
 
   return (
     <>

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

@@ -1,5 +1,6 @@
 import { Button, Checkbox, Loading, Switch } 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 {
   useSetWorkspaceFeature,
@@ -79,6 +80,29 @@ interface ExperimentalFeaturesItemProps {
 }
 
 const ExperimentalFeaturesItem = ({
+  title,
+  isMutating,
+  checked,
+  onChange,
+}: {
+  title: React.ReactNode;
+  isMutating?: boolean;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) => {
+  return (
+    <div className={styles.switchRow}>
+      {title}
+      <Switch
+        checked={checked}
+        onChange={onChange}
+        className={isMutating ? styles.switchDisabled : ''}
+      />
+    </div>
+  );
+};
+
+const WorkspaceFeaturesSettingItem = ({
   feature,
   title,
   workspaceMetadata,
@@ -96,14 +120,51 @@ const ExperimentalFeaturesItem = ({
   );
 
   return (
-    <div className={styles.switchRow}>
+    <ExperimentalFeaturesItem
-      {title}
+      title={title}
-      <Switch
+      isMutating={isMutating}
       checked={localEnabled}
       onChange={onChange}
-        className={isMutating ? styles.switchDisabled : ''}
     />
-    </div>
+  );
+};
+
+const CopilotSettingRow = ({
+  workspaceMetadata,
+}: {
+  workspaceMetadata: WorkspaceMetadata;
+}) => {
+  const features = useWorkspaceAvailableFeatures(workspaceMetadata);
+
+  return features.includes(FeatureType.Copilot) ? (
+    <WorkspaceFeaturesSettingItem
+      title="AI POC"
+      workspaceMetadata={workspaceMetadata}
+      feature={FeatureType.Copilot}
+    />
+  ) : null;
+};
+
+const SplitViewSettingRow = () => {
+  const { appSettings, updateSettings } = useAppSettingHelper();
+
+  const onToggle = useCallback(
+    (checked: boolean) => {
+      updateSettings('enableMultiView', checked);
+    },
+    [updateSettings]
+  );
+
+  if (!environment.isDesktop) {
+    return null; // only enable on desktop
+  }
+
+  return (
+    <ExperimentalFeaturesItem
+      title="Split View"
+      checked={appSettings.enableMultiView}
+      onChange={onToggle}
+    />
   );
 };
 
@@ -113,7 +174,6 @@ const ExperimentalFeaturesMain = ({
   workspaceMetadata: WorkspaceMetadata;
 }) => {
   const t = useAFFiNEI18N();
-  const features = useWorkspaceAvailableFeatures(workspaceMetadata);
 
   return (
     <>
@@ -122,14 +182,8 @@ const ExperimentalFeaturesMain = ({
           'com.affine.settings.workspace.experimental-features.header.plugins'
         ]()}
       />
-
+      <CopilotSettingRow workspaceMetadata={workspaceMetadata} />
-      {features.includes(FeatureType.Copilot) ? (
+      <SplitViewSettingRow />
-        <ExperimentalFeaturesItem
-          title="AI POC"
-          workspaceMetadata={workspaceMetadata}
-          feature={FeatureType.Copilot}
-        />
-      ) : null}
     </>
   );
 };

packages/frontend/core/src/hooks/affine/use-user-features.ts

@@ -0,0 +1,24 @@
+import { FeatureType, getUserFeaturesQuery } from '@affine/graphql';
+import type { BareFetcher, Middleware } from 'swr';
+
+import { useQueryImmutable } from '../use-query';
+
+const wrappedFetcher = (fetcher: BareFetcher<any> | null, ...args: any[]) =>
+  fetcher?.(...args).catch(() => null);
+
+const errorHandler: Middleware = useSWRNext => (key, fetcher, config) => {
+  return useSWRNext(key, wrappedFetcher.bind(null, fetcher), config);
+};
+
+export function useIsEarlyAccess() {
+  const { data } = useQueryImmutable(
+    {
+      query: getUserFeaturesQuery,
+    },
+    {
+      use: [errorHandler],
+    }
+  );
+
+  return data?.currentUser?.features.includes(FeatureType.EarlyAccess) ?? false;
+}

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -1,3 +1,4 @@
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useService } from '@toeverything/infra/di';
 import type { To } from 'history';
 import { useCallback } from 'react';
@@ -13,12 +14,13 @@ export const WorkbenchLink = ({
   { to: To } & React.HTMLProps<HTMLAnchorElement>
 >) => {
   const workbench = useService(Workbench);
+  const { appSettings } = useAppSettingHelper();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       // TODO: open this when multi view control is implemented
       if (
-        (window as any).enableMultiView &&
+        appSettings.enableMultiView &&
         environment.isDesktop &&
         (event.ctrlKey || event.metaKey)
       ) {
@@ -29,7 +31,7 @@ export const WorkbenchLink = ({
 
       onClick?.(event);
     },
-    [onClick, to, workbench]
+    [appSettings.enableMultiView, onClick, to, workbench]
   );
   return (
     <a {...other} href="#" onClick={handleClick}>

packages/frontend/graphql/src/graphql/get-user-features.gql

@@ -0,0 +1,5 @@
+query getUserFeatures {
+  currentUser {
+    features
+  }
+}

packages/frontend/graphql/src/graphql/index.ts

@@ -343,6 +343,19 @@ query getPublicWorkspace($id: String!) {
 }`,
 };
 
+export const getUserFeaturesQuery = {
+  id: 'getUserFeaturesQuery' as const,
+  operationName: 'getUserFeatures',
+  definitionName: 'currentUser',
+  containsFile: false,
+  query: `
+query getUserFeatures {
+  currentUser {
+    features
+  }
+}`,
+};
+
 export const getUserQuery = {
   id: 'getUserQuery' as const,
   operationName: 'getUser',

packages/frontend/graphql/src/schema.ts

@@ -387,6 +387,13 @@ export type GetPublicWorkspaceQuery = {
   publicWorkspace: { __typename?: 'WorkspaceType'; id: string };
 };
 
+export type GetUserFeaturesQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetUserFeaturesQuery = {
+  __typename?: 'Query';
+  currentUser: { __typename?: 'UserType'; features: Array<FeatureType> } | null;
+};
+
 export type GetUserQueryVariables = Exact<{
   email: Scalars['String']['input'];
 }>;
@@ -953,6 +960,11 @@ export type Queries =
       variables: GetPublicWorkspaceQueryVariables;
       response: GetPublicWorkspaceQuery;
     }
+  | {
+      name: 'getUserFeaturesQuery';
+      variables: GetUserFeaturesQueryVariables;
+      response: GetUserFeaturesQuery;
+    }
   | {
       name: 'getUserQuery';
       variables: GetUserQueryVariables;

tests/affine-local/e2e/local-first-delete-workspace.spec.ts

@@ -24,6 +24,9 @@ test('Create new workspace, then delete it', async ({ page, workspace }) => {
   await openSettingModal(page);
   await openWorkspaceSettingPanel(page, 'Test Workspace');
   await page.getByTestId('delete-workspace-button').click();
+  await expect(
+    page.getByTestId('affine-notification').first()
+  ).not.toBeVisible();
   const workspaceNameDom = page.getByTestId('workspace-name');
   const currentWorkspaceName = (await workspaceNameDom.evaluate(
     node => node.textContent