feat(core): support creating cloud workspaces to different servers (#9006)

2026-02-13 21:05:19 +00:00 · 2024-12-04 06:39:13 +00:00
parent dddefcf768
commit 1fa1a95c10
24 changed files with 621 additions and 67 deletions
--- a/packages/frontend/core/src/commands/affine-creation.tsx
+++ b/packages/frontend/core/src/commands/affine-creation.tsx
@@ -62,7 +62,7 @@ export function registerAffineCreationCommands({
      run() {
        track.$.cmdk.workspace.createWorkspace();

-        globalDialogService.open('create-workspace', undefined);
+        globalDialogService.open('create-workspace', {});
      },
    })
  );
--- a/packages/frontend/core/src/components/hooks/affine/use-enable-cloud.tsx
+++ b/packages/frontend/core/src/components/hooks/affine/use-enable-cloud.tsx
@@ -1,5 +1,5 @@
 import { notify, useConfirmModal } from '@affine/component';
-import { AuthService } from '@affine/core/modules/cloud';
+import { AuthService, ServersService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import { useI18n } from '@affine/i18n';
 import type { Workspace } from '@toeverything/infra';
@@ -22,6 +22,7 @@ interface ConfirmEnableCloudOptions {
   */
  onFinished?: () => void;
  openPageId?: string;
+  serverId?: string;
 }
 type ConfirmEnableArgs = [Workspace, ConfirmEnableCloudOptions | undefined];

@@ -33,6 +34,9 @@ export const useEnableCloud = () => {
  const globalDialogService = useService(GlobalDialogService);
  const { openConfirmModal, closeConfirmModal } = useConfirmModal();
  const workspacesService = useService(WorkspacesService);
+  const serversService = useService(ServersService);
+  const serverList = useLiveData(serversService.servers$);
+
  const { jumpToPage } = useNavigateHelper();

  const enableCloud = useCallback(
@@ -42,7 +46,8 @@ export const useEnableCloud = () => {
        if (!account) return;
        const { id: newId } = await workspacesService.transformLocalToCloud(
          ws,
-          account.id
+          account.id,
+          'affine-cloud'
        );
        jumpToPage(newId, options?.openPageId || 'all');
        options?.onSuccess?.();
@@ -56,9 +61,13 @@ export const useEnableCloud = () => {
    [account, jumpToPage, t, workspacesService]
  );

-  const openSignIn = useCallback(() => {
-    globalDialogService.open('sign-in', {});
-  }, [globalDialogService]);
+  const openSignIn = useCallback(
+    () =>
+      globalDialogService.open('sign-in', {
+        step: 'signIn',
+      }),
+    [globalDialogService]
+  );

  const signInOrEnableCloud = useCallback(
    async (...args: ConfirmEnableArgs) => {
@@ -76,13 +85,22 @@ export const useEnableCloud = () => {

  const confirmEnableCloud = useCallback(
    (ws: Workspace, options?: ConfirmEnableCloudOptions) => {
-      const { onSuccess, onFinished } = options ?? {};
+      const { onSuccess, onFinished, serverId, openPageId } = options ?? {};

      const closeOnSuccess = () => {
        closeConfirmModal();
        onSuccess?.();
      };

+      if (serverList.length > 1) {
+        globalDialogService.open('enable-cloud', {
+          workspaceId: ws.id,
+          serverId,
+          openPageId,
+        });
+        return;
+      }
+
      openConfirmModal(
        {
          title: t['Enable AFFiNE Cloud'](),
@@ -110,7 +128,15 @@ export const useEnableCloud = () => {
        }
      );
    },
-    [closeConfirmModal, loginStatus, openConfirmModal, signInOrEnableCloud, t]
+    [
+      closeConfirmModal,
+      globalDialogService,
+      loginStatus,
+      openConfirmModal,
+      serverList.length,
+      signInOrEnableCloud,
+      t,
+    ]
  );

  return confirmEnableCloud;
--- a/packages/frontend/core/src/components/server-selector/index.tsx
+++ b/packages/frontend/core/src/components/server-selector/index.tsx
@@ -0,0 +1,40 @@
+import { Menu, MenuItem, type MenuProps, MenuTrigger } from '@affine/component';
+import type { Server } from '@affine/core/modules/cloud';
+import { useMemo } from 'react';
+
+import { triggerStyle } from './style.css';
+
+export const ServerSelector = ({
+  servers,
+  selectedSeverName,
+  onSelect,
+  contentOptions,
+}: {
+  servers: Server[];
+  selectedSeverName: string;
+  onSelect: (server: Server) => void;
+  contentOptions?: MenuProps['contentOptions'];
+}) => {
+  const menuItems = useMemo(() => {
+    return servers.map(server => (
+      <MenuItem key={server.id} onSelect={() => onSelect(server)}>
+        {server.config$.value.serverName} ({server.baseUrl})
+      </MenuItem>
+    ));
+  }, [servers, onSelect]);
+
+  return (
+    <Menu
+      items={menuItems}
+      contentOptions={{
+        ...contentOptions,
+        style: {
+          ...contentOptions?.style,
+          width: 'var(--radix-dropdown-menu-trigger-width)',
+        },
+      }}
+    >
+      <MenuTrigger className={triggerStyle}>{selectedSeverName}</MenuTrigger>
+    </Menu>
+  );
+};
--- a/packages/frontend/core/src/components/server-selector/style.css.ts
+++ b/packages/frontend/core/src/components/server-selector/style.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const triggerStyle = style({
+  width: '100%',
+});
--- a/packages/frontend/core/src/components/sign-in/index.tsx
+++ b/packages/frontend/core/src/components/sign-in/index.tsx
@@ -24,12 +24,18 @@ export interface SignInState {
 export const SignInPanel = ({
  onClose,
  server: initialServerBaseUrl,
+  initStep,
 }: {
  onClose: () => void;
  server?: string;
+  initStep?: SignInStep | undefined;
 }) => {
  const [state, setState] = useState<SignInState>({
-    step: initialServerBaseUrl ? 'addSelfhosted' : 'signIn',
+    step: initStep
+      ? initStep
+      : initialServerBaseUrl
+        ? 'addSelfhosted'
+        : 'signIn',
    initialServerBaseUrl: initialServerBaseUrl,
  });

--- a/packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.css.ts
+++ b/packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.css.ts
@@ -0,0 +1,38 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  gap: '20px',
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+});
+
+export const title = style({
+  fontSize: cssVar('fontH6'),
+  fontWeight: 600,
+  lineHeight: '26px',
+});
+
+export const description = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: 400,
+  lineHeight: '24px',
+  color: cssVar('textSecondaryColor'),
+});
+
+export const serverSelector = style({
+  width: '100%',
+});
+
+export const button = style({
+  width: '100%',
+});
--- a/packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.tsx
@@ -0,0 +1,38 @@
+import type { Server } from '@affine/core/modules/cloud';
+import { CloudWorkspaceIcon } from '@blocksuite/icons/rc';
+
+import { ServerSelector } from '../../server-selector';
+import * as styles from './enable-cloud.css';
+
+export const CustomServerEnableCloud = ({
+  serverList,
+  selectedServer,
+  setSelectedServer,
+  title,
+  description,
+}: {
+  serverList: Server[];
+  selectedServer: Server;
+  title?: string;
+  description?: string;
+  setSelectedServer: (server: Server) => void;
+}) => {
+  return (
+    <div className={styles.root}>
+      <CloudWorkspaceIcon width={'36px'} height={'36px'} />
+      <div className={styles.textContainer}>
+        {title ? <div className={styles.title}>{title}</div> : null}
+        {description ? (
+          <div className={styles.description}>{description}</div>
+        ) : null}
+      </div>
+      <div className={styles.serverSelector}>
+        <ServerSelector
+          servers={serverList}
+          selectedSeverName={`${selectedServer.config$.value.serverName} (${selectedServer.baseUrl})`}
+          onSelect={setSelectedServer}
+        />
+      </div>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/components/workspace-selector/enable-cloud/index.ts
+++ b/packages/frontend/core/src/components/workspace-selector/enable-cloud/index.ts
@@ -0,0 +1 @@
+export * from './enable-cloud';
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.css.ts
+++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.css.ts
@@ -0,0 +1,23 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+export const ItemContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '8px 14px',
+  gap: '14px',
+  cursor: 'pointer',
+  borderRadius: '8px',
+  transition: 'background-color 0.2s',
+  fontSize: '24px',
+  color: cssVar('iconSecondary'),
+});
+export const ItemText = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  color: cssVar('textSecondaryColor'),
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.tsx
@@ -0,0 +1,37 @@
+import { MenuItem } from '@affine/component/ui/menu';
+import { useI18n } from '@affine/i18n';
+import { PlusIcon } from '@blocksuite/icons/rc';
+import {
+  FeatureFlagService,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
+
+import * as styles from './index.css';
+
+export const AddServer = ({ onAddServer }: { onAddServer?: () => void }) => {
+  const t = useI18n();
+  const featureFlagService = useService(FeatureFlagService);
+  const enableMultipleServer = useLiveData(
+    featureFlagService.flags.enable_multiple_cloud_servers.$
+  );
+
+  if (!enableMultipleServer) {
+    return null;
+  }
+  return (
+    <div>
+      <MenuItem
+        block={true}
+        prefixIcon={<PlusIcon />}
+        onClick={onAddServer}
+        data-testid="new-server"
+        className={styles.ItemContainer}
+      >
+        <div className={styles.ItemText}>
+          {t['com.affine.workspaceList.addServer']()}
+        </div>
+      </MenuItem>
+    </div>
+  );
+};
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx
@@ -14,10 +14,9 @@ import {
 } from '@toeverything/infra';
 import { useCallback } from 'react';

-import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
+import { AddServer } from './add-server';
 import { AddWorkspace } from './add-workspace';
 import * as styles from './index.css';
-import { UserAccountItem } from './user-account';
 import { AFFiNEWorkspaceList } from './workspace-list';

 export const SignInItem = () => {
@@ -90,7 +89,7 @@ const UserWithWorkspaceListInner = ({
      return openSignInModal();
    }
    track.$.navigationPanel.workspaceList.createWorkspace();
-    globalDialogService.open('create-workspace', undefined, payload => {
+    globalDialogService.open('create-workspace', {}, payload => {
      if (payload) {
        onCreatedWorkspace?.(payload);
      }
@@ -117,28 +116,15 @@ const UserWithWorkspaceListInner = ({
    onEventEnd?.();
  }, [globalDialogService, onCreatedWorkspace, onEventEnd]);

+  const onAddServer = useCallback(() => {
+    globalDialogService.open('sign-in', { step: 'addSelfhosted' });
+  }, [globalDialogService]);
+
  const workspaceManager = useService(WorkspacesService);
  const workspaces = useLiveData(workspaceManager.list.workspaces$);

-  const onOpenPricingPlan = useCatchEventCallback(() => {
-    globalDialogService.open('setting', {
-      activeTab: 'plans',
-      scrollAnchor: 'cloudPricingPlan',
-    });
-  }, [globalDialogService]);
-
  return (
    <div className={styles.workspaceListWrapper}>
-      {isAuthenticated ? (
-        <UserAccountItem
-          email={session.session.account.email ?? 'Unknown User'}
-          onEventEnd={onEventEnd}
-          onClick={onOpenPricingPlan}
-        />
-      ) : (
-        <SignInItem />
-      )}
-      <Divider size="thinner" />
      <AFFiNEWorkspaceList
        onEventEnd={onEventEnd}
        onClickWorkspace={onClickWorkspace}
@@ -150,6 +136,7 @@ const UserWithWorkspaceListInner = ({
        onAddWorkspace={onAddWorkspace}
        onNewWorkspace={onNewWorkspace}
      />
+      <AddServer onAddServer={onAddServer} />
    </div>
  );
 };
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts
+++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts
@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const workspaceListsWrapper = style({
  display: 'flex',
@@ -15,11 +16,19 @@ export const workspaceListWrapper = style({
 export const workspaceServer = style({
  display: 'flex',
  justifyContent: 'space-between',
-  alignItems: 'center',
  gap: 4,
-  padding: '0px 12px',
+  paddingLeft: '12px',
+  marginBottom: '4px',
 });

+export const workspaceServerContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  color: cssVarV2('text/secondary'),
+  gap: 4,
+  width: '100%',
+  overflow: 'hidden',
+});
 export const workspaceServerName = style({
  display: 'flex',
  alignItems: 'center',
@@ -27,10 +36,19 @@ export const workspaceServerName = style({
  fontWeight: 500,
  fontSize: cssVar('fontXs'),
  lineHeight: '20px',
-  color: cssVar('textSecondaryColor'),
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+export const account = style({
+  fontSize: cssVar('fontXs'),
+  overflow: 'hidden',
+  width: '100%',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 export const workspaceTypeIcon = style({
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/primary'),
+  fontSize: '16px',
 });
 export const scrollbar = style({
  width: '4px',
@@ -39,3 +57,25 @@ export const workspaceCard = style({
  height: '44px',
  padding: '0 12px',
 });
+
+export const ItemContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '8px 14px',
+  gap: '14px',
+  cursor: 'pointer',
+  borderRadius: '8px',
+  transition: 'background-color 0.2s',
+  fontSize: '24px',
+  color: cssVarV2('icon/secondary'),
+});
+export const ItemText = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  color: cssVarV2('text/secondary'),
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
--- a/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx
@@ -11,11 +11,14 @@ import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-he
 import type { Server } from '@affine/core/modules/cloud';
 import { AuthService, ServersService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { ServerDeploymentType } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import {
  CloudWorkspaceIcon,
  LocalWorkspaceIcon,
  MoreHorizontalIcon,
+  PlusIcon,
+  TeamWorkspaceIcon,
 } from '@blocksuite/icons/rc';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
@@ -54,6 +57,7 @@ const CloudWorkSpaceList = ({
  onClickWorkspaceSetting?: (workspaceMetadata: WorkspaceMetadata) => void;
  onClickEnableCloud?: (meta: WorkspaceMetadata) => void;
 }) => {
+  const t = useI18n();
  const globalContextService = useService(GlobalContextService);
  const globalDialogService = useService(GlobalDialogService);
  const serverName = useLiveData(server.config$.selector(c => c.serverName));
@@ -67,6 +71,8 @@ const CloudWorkSpaceList = ({
    globalContextService.globalContext.workspaceFlavour.$
  );

+  const serverType = server.config$.value.type;
+
  const handleDeleteServer = useCallback(() => {
    serversService.removeServer(server.id);

@@ -94,18 +100,38 @@ const CloudWorkSpaceList = ({
    });
  }, [globalDialogService, server.baseUrl]);

+  const onNewWorkspace = useCallback(() => {
+    globalDialogService.open(
+      'create-workspace',
+      {
+        serverId: server.id,
+        forcedCloud: true,
+      },
+      payload => {
+        if (payload) {
+          navigateHelper.openPage(payload.metadata.id, 'all');
+        }
+      }
+    );
+  }, [globalDialogService, navigateHelper, server.id]);
+
  return (
    <div className={styles.workspaceListWrapper}>
      <div className={styles.workspaceServer}>
-        <div className={styles.workspaceServerName}>
-          <CloudWorkspaceIcon
-            width={14}
-            height={14}
-            className={styles.workspaceTypeIcon}
-          />
-          {serverName}&nbsp;-&nbsp;
-          {account ? account.email : 'Not signed in'}
+        <div className={styles.workspaceServerContent}>
+          <div className={styles.workspaceServerName}>
+            {serverType === ServerDeploymentType.Affine ? (
+              <CloudWorkspaceIcon className={styles.workspaceTypeIcon} />
+            ) : (
+              <TeamWorkspaceIcon className={styles.workspaceTypeIcon} />
+            )}
+            <div className={styles.account}>{serverName}</div>
+          </div>
+          <div className={styles.account}>
+            {account ? account.email : 'Not signed in'}
+          </div>
        </div>
+
        <Menu
          items={[
            server.id !== 'affine-cloud' && (
@@ -125,7 +151,9 @@ const CloudWorkSpaceList = ({
            ),
          ]}
        >
-          <IconButton icon={<MoreHorizontalIcon />} />
+          <div>
+            <IconButton icon={<MoreHorizontalIcon />} />
+          </div>
        </Menu>
      </div>
      <WorkspaceList
@@ -134,6 +162,16 @@ const CloudWorkSpaceList = ({
        onSettingClick={onClickWorkspaceSetting}
        onEnableCloudClick={onClickEnableCloud}
      />
+      <MenuItem
+        block={true}
+        prefixIcon={<PlusIcon />}
+        onClick={onNewWorkspace}
+        className={styles.ItemContainer}
+      >
+        <div className={styles.ItemText}>
+          {t['com.affine.workspaceList.addWorkspace.create']()}
+        </div>
+      </MenuItem>
    </div>
  );
 };
--- a/packages/frontend/core/src/desktop/dialogs/create-workspace/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/create-workspace/index.tsx
@@ -23,6 +23,8 @@ import * as styles from './dialog.css';

 interface NameWorkspaceContentProps extends ConfirmModalProps {
  loading: boolean;
+  forcedCloud?: boolean;
+  serverId?: string;
  onConfirmName: (
    name: string,
    workspaceFlavour: string,
@@ -33,15 +35,14 @@ interface NameWorkspaceContentProps extends ConfirmModalProps {
 const NameWorkspaceContent = ({
  loading,
  onConfirmName,
+  forcedCloud,
+  serverId,
  ...props
 }: NameWorkspaceContentProps) => {
  const t = useI18n();
  const [workspaceName, setWorkspaceName] = useState('');
-  const featureFlagService = useService(FeatureFlagService);
-  const enableLocalWorkspace = useLiveData(
-    featureFlagService.flags.enable_local_workspace.$
-  );
-  const [enable, setEnable] = useState(!enableLocalWorkspace);
+
+  const [enable, setEnable] = useState(!!forcedCloud);
  const session = useService(AuthService).session;
  const loginStatus = useLiveData(session.status$);

@@ -62,8 +63,8 @@ const NameWorkspaceContent = ({
  );

  const handleCreateWorkspace = useCallback(() => {
-    onConfirmName(workspaceName, enable ? 'affine-cloud' : 'local');
-  }, [enable, onConfirmName, workspaceName]);
+    onConfirmName(workspaceName, enable ? serverId || 'affine-cloud' : 'local');
+  }, [enable, onConfirmName, serverId, workspaceName]);

  const onEnter = useCallback(() => {
    if (workspaceName) {
@@ -120,7 +121,7 @@ const NameWorkspaceContent = ({
              <Switch
                checked={enable}
                onChange={onSwitchChange}
-                disabled={!enableLocalWorkspace}
+                disabled={forcedCloud}
              />
            </div>
            <div className={styles.cardDescription}>
@@ -131,7 +132,7 @@ const NameWorkspaceContent = ({
            <CloudSvg />
          </div>
        </div>
-        {!enableLocalWorkspace ? (
+        {forcedCloud ? (
          <a
            className={styles.cloudTips}
            href={BUILD_CONFIG.downloadUrl}
@@ -147,9 +148,15 @@ const NameWorkspaceContent = ({
 };

 export const CreateWorkspaceDialog = ({
+  forcedCloud,
+  serverId,
  close,
 }: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['create-workspace']>) => {
  const workspacesService = useService(WorkspacesService);
+  const featureFlagService = useService(FeatureFlagService);
+  const enableLocalWorkspace = useLiveData(
+    featureFlagService.flags.enable_local_workspace.$
+  );
  const [loading, setLoading] = useState(false);

  const onConfirmName = useAsyncCallback(
@@ -185,6 +192,8 @@ export const CreateWorkspaceDialog = ({
    <NameWorkspaceContent
      loading={loading}
      open
+      serverId={serverId}
+      forcedCloud={forcedCloud || !enableLocalWorkspace}
      onOpenChange={onOpenChange}
      onConfirmName={onConfirmName}
    />
--- a/packages/frontend/core/src/desktop/dialogs/enable-cloud/dialog.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/enable-cloud/dialog.css.ts
@@ -0,0 +1,86 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const dialogContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: cssVarV2('text/primary'),
+  padding: '16px',
+});
+
+export const mainIcon = style({
+  width: 36,
+  height: 36,
+  color: cssVarV2('icon/primary'),
+});
+
+export const mainTitle = style({
+  fontSize: '18px',
+  lineHeight: '26px',
+  textAlign: 'center',
+  marginTop: '16px',
+  fontWeight: 600,
+});
+
+export const desc = style({
+  textAlign: 'center',
+  color: cssVarV2('text/secondary'),
+  marginBottom: '20px',
+});
+
+export const mainButton = style({
+  width: '100%',
+  fontSize: '14px',
+  height: '42px',
+});
+
+export const modal = style({
+  maxWidth: '352px',
+});
+
+export const workspaceSelector = style({
+  margin: '0 -16px',
+  width: 'calc(100% + 32px)',
+  border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+  padding: '0 16px',
+});
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  gap: '20px',
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+});
+
+export const title = style({
+  fontSize: cssVar('fontH6'),
+  fontWeight: 600,
+  lineHeight: '26px',
+});
+
+export const description = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: 400,
+  lineHeight: '24px',
+  color: cssVar('textSecondaryColor'),
+});
+
+export const serverSelector = style({
+  width: '100%',
+});
+
+export const button = style({
+  width: '100%',
+  marginTop: '20px',
+});
--- a/packages/frontend/core/src/desktop/dialogs/enable-cloud/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/enable-cloud/index.tsx
@@ -0,0 +1,169 @@
+import { Button, Modal, notify } from '@affine/component';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
+import { ServerSelector } from '@affine/core/components/server-selector';
+import {
+  AuthService,
+  type Server,
+  ServersService,
+} from '@affine/core/modules/cloud';
+import {
+  type DialogComponentProps,
+  type GLOBAL_DIALOG_SCHEMA,
+  GlobalDialogService,
+} from '@affine/core/modules/dialogs';
+import { useI18n } from '@affine/i18n';
+import { CloudWorkspaceIcon } from '@blocksuite/icons/rc';
+import {
+  FrameworkScope,
+  useLiveData,
+  useService,
+  WorkspacesService,
+} from '@toeverything/infra';
+import { useCallback, useState } from 'react';
+
+import * as styles from './dialog.css';
+
+const Dialog = ({
+  workspaceId,
+  close,
+  selectedServer,
+  setSelectedServer,
+  serverList,
+  openPageId,
+}: {
+  workspaceId: string;
+  serverList: Server[];
+  selectedServer: Server;
+  setSelectedServer: (server: Server) => void;
+  openPageId?: string;
+  serverId?: string;
+  close?: () => void;
+}) => {
+  const t = useI18n();
+  const authService = useService(AuthService);
+  const account = useLiveData(authService.session.account$);
+  const loginStatus = useLiveData(useService(AuthService).session.status$);
+  const globalDialogService = useService(GlobalDialogService);
+  const workspacesService = useService(WorkspacesService);
+  const workspaceMeta = useLiveData(
+    workspacesService.list.workspace$(workspaceId)
+  );
+  const { workspace } = workspaceMeta
+    ? workspacesService.open({ metadata: workspaceMeta })
+    : { workspace: undefined };
+
+  const { jumpToPage } = useNavigateHelper();
+
+  const enableCloud = useCallback(async () => {
+    try {
+      if (!workspace) return;
+      if (!account) return;
+
+      const { id: newId } = await workspacesService.transformLocalToCloud(
+        workspace,
+        account.id,
+        selectedServer.id
+      );
+      jumpToPage(newId, openPageId || 'all');
+      close?.();
+    } catch (e) {
+      console.error(e);
+      notify.error({
+        title: t['com.affine.workspace.enable-cloud.failed'](),
+      });
+    }
+  }, [
+    workspace,
+    account,
+    workspacesService,
+    selectedServer.id,
+    jumpToPage,
+    openPageId,
+    close,
+    t,
+  ]);
+
+  const openSignIn = useCallback(() => {
+    globalDialogService.open('sign-in', {
+      server: selectedServer.baseUrl,
+    });
+  }, [globalDialogService, selectedServer.baseUrl]);
+
+  const signInOrEnableCloud = useAsyncCallback(async () => {
+    // not logged in, open login modal
+    if (loginStatus === 'unauthenticated') {
+      openSignIn();
+    }
+
+    if (loginStatus === 'authenticated') {
+      await enableCloud();
+    }
+  }, [enableCloud, loginStatus, openSignIn]);
+  return (
+    <div className={styles.root}>
+      <CloudWorkspaceIcon width={'36px'} height={'36px'} />
+      <div className={styles.textContainer}>
+        <div className={styles.title}>
+          {t['com.affine.enableAffineCloudModal.custom-server.title']({
+            workspaceName: workspace?.name$.value || 'untitled',
+          })}
+        </div>
+        <div className={styles.description}>
+          {t['com.affine.enableAffineCloudModal.custom-server.description']()}
+        </div>
+      </div>
+      <div className={styles.serverSelector}>
+        <ServerSelector
+          servers={serverList}
+          selectedSeverName={`${selectedServer.config$.value.serverName} (${selectedServer.baseUrl})`}
+          onSelect={setSelectedServer}
+        />
+      </div>
+
+      <Button
+        className={styles.button}
+        onClick={signInOrEnableCloud}
+        size="extraLarge"
+        variant="primary"
+      >
+        {t['com.affine.enableAffineCloudModal.custom-server.enable']()}
+      </Button>
+    </div>
+  );
+};
+
+export const EnableCloudDialog = ({
+  workspaceId,
+  openPageId,
+  serverId,
+  close,
+}: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['enable-cloud']>) => {
+  const serversService = useService(ServersService);
+  const serverList = useLiveData(serversService.servers$);
+  const [selectedServer, setSelectedServer] = useState<Server>(serverList[0]);
+
+  return (
+    <Modal
+      open
+      modal={true}
+      persistent
+      contentOptions={{
+        className: styles.modal,
+      }}
+      onOpenChange={() => close()}
+    >
+      <FrameworkScope key={selectedServer.id} scope={selectedServer.scope}>
+        <Dialog
+          workspaceId={workspaceId}
+          openPageId={openPageId}
+          serverId={serverId}
+          close={close}
+          serverList={serverList}
+          selectedServer={selectedServer}
+          setSelectedServer={setSelectedServer}
+        />
+      </FrameworkScope>
+    </Modal>
+  );
+};
--- a/packages/frontend/core/src/desktop/dialogs/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/index.tsx
@@ -11,6 +11,7 @@ import { ChangePasswordDialog } from './change-password';
 import { CollectionEditorDialog } from './collection-editor';
 import { CreateWorkspaceDialog } from './create-workspace';
 import { DocInfoDialog } from './doc-info';
+import { EnableCloudDialog } from './enable-cloud';
 import { ImportDialog } from './import';
 import { ImportTemplateDialog } from './import-template';
 import { ImportWorkspaceDialog } from './import-workspace';
@@ -30,6 +31,7 @@ const GLOBAL_DIALOGS = {
  'sign-in': SignInDialog,
  'change-password': ChangePasswordDialog,
  'verify-email': VerifyEmailDialog,
+  'enable-cloud': EnableCloudDialog,
 } satisfies {
  [key in keyof GLOBAL_DIALOG_SCHEMA]?: React.FC<
    DialogComponentProps<GLOBAL_DIALOG_SCHEMA[key]>
--- a/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx
@@ -1,5 +1,5 @@
 import { Modal } from '@affine/component';
-import { SignInPanel } from '@affine/core/components/sign-in';
+import { SignInPanel, type SignInStep } from '@affine/core/components/sign-in';
 import type {
  DialogComponentProps,
  GLOBAL_DIALOG_SCHEMA,
@@ -7,6 +7,7 @@ import type {
 export const SignInDialog = ({
  close,
  server: initialServerBaseUrl,
+  step,
 }: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['sign-in']>) => {
  return (
    <Modal
@@ -19,7 +20,11 @@ export const SignInDialog = ({
        style: { padding: '44px 40px 20px' },
      }}
    >
-      <SignInPanel onClose={close} server={initialServerBaseUrl} />
+      <SignInPanel
+        onClose={close}
+        server={initialServerBaseUrl}
+        initStep={step as SignInStep}
+      />
    </Modal>
  );
 };
--- a/packages/frontend/core/src/modules/dialogs/constant.ts
+++ b/packages/frontend/core/src/modules/dialogs/constant.ts
@@ -14,7 +14,7 @@ export type SettingTab =
  | `workspace:${'preference' | 'properties'}`;

 export type GLOBAL_DIALOG_SCHEMA = {
-  'create-workspace': () => {
+  'create-workspace': (props: { serverId?: string; forcedCloud?: boolean }) => {
    metadata: WorkspaceMetadata;
    defaultDocId?: string;
  };
@@ -31,9 +31,14 @@ export type GLOBAL_DIALOG_SCHEMA = {
    workspaceMetadata?: WorkspaceMetadata | null;
    scrollAnchor?: string;
  }) => void;
-  'sign-in': (props: { server?: string; step?: 'sign-in' }) => void;
+  'sign-in': (props: { server?: string; step?: string }) => void;
  'change-password': (props: { server?: string }) => void;
  'verify-email': (props: { server?: string; changeEmail?: boolean }) => void;
+  'enable-cloud': (props: {
+    workspaceId: string;
+    openPageId?: string;
+    serverId?: string;
+  }) => boolean;
 };

 export type WORKSPACE_DIALOG_SCHEMA = {