From defb0de4dd19b96b33bfc926e28f978890d832ec Mon Sep 17 00:00:00 2001 From: pengx17 Date: Wed, 22 Jan 2025 03:11:27 +0000 Subject: [PATCH] feat(core): reorg workspace settings (#9718) fix AF-2118 --- .../core/src/desktop/dialogs/setting/types.ts | 4 +- .../setting/workspace-setting/index.tsx | 54 +++++++++---- .../members/cloud-members-panel.tsx | 2 +- .../members/confirm-assign-modal.tsx | 0 .../members/index.tsx | 30 ++++--- .../members/member-list.tsx | 0 .../members/member-option.tsx | 0 .../members/styles.css.ts | 6 ++ .../new-workspace-setting-detail/index.tsx | 78 ------------------- .../new-workspace-setting-detail/types.ts | 6 -- .../ai.tsx | 0 .../delete-leave-workspace/delete/index.tsx | 0 .../delete/style.css.ts | 0 .../delete-leave-workspace/index.tsx | 0 .../enable-cloud.tsx | 0 .../workspace-setting/preference/index.tsx | 59 ++++++++++++++ .../labels.tsx | 0 .../profile.tsx | 0 .../sharing.tsx | 0 .../style.css.ts | 0 .../template.css.ts | 0 .../template.tsx | 0 .../workspace-setting/preference/types.ts | 3 + .../export.tsx | 0 .../workspace-setting/storage/index.tsx | 33 ++++++++ .../workspace-setting/storage/style.css.ts | 30 +++++++ .../workspace-quota.tsx | 0 .../core/src/modules/dialogs/constant.ts | 2 +- packages/frontend/i18n/src/resources/en.json | 3 +- tests/affine-cloud/e2e/workspace.spec.ts | 10 +-- tests/affine-desktop/e2e/workspace.spec.ts | 17 ++-- 31 files changed, 209 insertions(+), 128 deletions(-) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/cloud-members-panel.tsx (99%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/confirm-assign-modal.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/index.tsx (61%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/member-list.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/member-option.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => }/members/styles.css.ts (96%) delete mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx delete mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/ai.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/delete-leave-workspace/delete/index.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/delete-leave-workspace/delete/style.css.ts (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/delete-leave-workspace/index.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/enable-cloud.tsx (100%) create mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/labels.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/profile.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/sharing.tsx (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/style.css.ts (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/template.css.ts (100%) rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => preference}/template.tsx (100%) create mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => storage}/export.tsx (100%) create mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx create mode 100644 packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts rename packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/{new-workspace-setting-detail => storage}/workspace-quota.tsx (100%) diff --git a/packages/frontend/core/src/desktop/dialogs/setting/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/types.ts index 38f60d6cb..6df4fd37d 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/types.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/types.ts @@ -1,5 +1,5 @@ import type { SettingTab } from '@affine/core/modules/dialogs/constant'; -import type { ReactNode } from 'react'; +import type { ReactElement } from 'react'; export interface SettingState { activeTab: SettingTab; @@ -9,6 +9,6 @@ export interface SettingState { export interface SettingSidebarItem { key: SettingTab; title: string; - icon: ReactNode; + icon: ReactElement; testId: string; } diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx index 747f30e40..b84e03f41 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx @@ -2,14 +2,22 @@ import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-in import type { SettingTab } from '@affine/core/modules/dialogs/constant'; import { WorkspaceService } from '@affine/core/modules/workspace'; import { useI18n } from '@affine/i18n'; -import { PaymentIcon, PropertyIcon, SettingsIcon } from '@blocksuite/icons/rc'; +import { + CollaborationIcon, + PaymentIcon, + PropertyIcon, + SaveIcon, + SettingsIcon, +} from '@blocksuite/icons/rc'; import { useService } from '@toeverything/infra'; import { useMemo } from 'react'; import type { SettingSidebarItem, SettingState } from '../types'; import { WorkspaceSettingBilling } from './billing'; -import { WorkspaceSettingDetail } from './new-workspace-setting-detail'; +import { MembersPanel } from './members'; +import { WorkspaceSettingDetail } from './preference'; import { WorkspaceSettingProperties } from './properties'; +import { WorkspaceSettingStorage } from './storage'; export const WorkspaceSetting = ({ activeTab, @@ -22,16 +30,20 @@ export const WorkspaceSetting = ({ }) => { switch (activeTab) { case 'workspace:preference': + return ; + case 'workspace:properties': + return ; + case 'workspace:members': return ( - ); - case 'workspace:properties': - return ; case 'workspace:billing': return ; + case 'workspace:storage': + return ; default: return null; } @@ -58,17 +70,27 @@ export const useWorkspaceSettingList = (): SettingSidebarItem[] => { icon: , testId: 'workspace-setting:properties', }, - ...(showBilling - ? [ - { - key: 'workspace:billing' as SettingTab, - title: t['com.affine.settings.workspace.billing'](), - icon: , - testId: 'workspace-setting:billing', - }, - ] - : []), - ]; + { + key: 'workspace:members', + title: t['Members'](), + icon: , + testId: 'workspace-setting:members', + }, + { + key: 'workspace:storage', + title: t['Storage'](), + icon: , + testId: 'workspace-setting:storage', + }, + showBilling && { + key: 'workspace:billing' as SettingTab, + title: t['com.affine.settings.workspace.billing'](), + icon: , + testId: 'workspace-setting:billing', + }, + + // todo(@pengx17): add selfhost's team license + ].filter((item): item is SettingSidebarItem => !!item); }, [showBilling, t]); return items; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx similarity index 99% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx index 63df9df56..37dba6f28 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/cloud-members-panel.tsx @@ -24,7 +24,7 @@ import { ExportIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import type { SettingState } from '../../../types'; +import type { SettingState } from '../../types'; import { MemberList } from './member-list'; import * as styles from './styles.css'; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/confirm-assign-modal.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/confirm-assign-modal.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/confirm-assign-modal.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx similarity index 61% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx index f80f51366..fcac31542 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/index.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/index.tsx @@ -7,19 +7,22 @@ import { useI18n } from '@affine/i18n'; import { useService } from '@toeverything/infra'; import type { ReactElement } from 'react'; -import type { SettingState } from '../../../types'; +import type { SettingState } from '../../types'; +import { EnableCloudPanel } from '../preference/enable-cloud'; import { CloudWorkspaceMembersPanel } from './cloud-members-panel'; import * as styles from './styles.css'; export const MembersPanel = ({ onChangeSettingState, + onCloseSetting, }: { onChangeSettingState: (settingState: SettingState) => void; + onCloseSetting: () => void; }): ReactElement | null => { const workspace = useService(WorkspaceService).workspace; const isTeam = useWorkspaceInfo(workspace.meta)?.isTeam; if (workspace.flavour === 'local') { - return ; + return ; } return ( @@ -31,15 +34,22 @@ export const MembersPanel = ({ ); }; -const MembersPanelLocal = () => { +const MembersPanelLocal = ({ + onCloseSetting, +}: { + onCloseSetting: () => void; +}) => { const t = useI18n(); return ( - -
- - - -
- +
+ +
+ + + +
+ + +
); }; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-list.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-list.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-list.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-option.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/member-option.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/member-option.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts similarity index 96% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts index 4d6f2419c..1c414363e 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/styles.css.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/members/styles.css.ts @@ -29,6 +29,12 @@ export const membersPanel = style({ justifyContent: 'space-between', }); +export const localMembersPanel = style({ + gap: '24px', + display: 'flex', + flexDirection: 'column', +}); + export const goUpgradeWrapper = style({ display: 'inline-flex', alignItems: 'center', diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx deleted file mode 100644 index e1459dbfe..000000000 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { - SettingHeader, - SettingRow, - SettingWrapper, -} from '@affine/component/setting-components'; -import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info'; -import { WorkspaceServerService } from '@affine/core/modules/cloud'; -import { WorkspaceService } from '@affine/core/modules/workspace'; -import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant'; -import { useI18n } from '@affine/i18n'; -import { FrameworkScope, useService } from '@toeverything/infra'; - -import { DeleteLeaveWorkspace } from './delete-leave-workspace'; -import { EnableCloudPanel } from './enable-cloud'; -import { DesktopExportPanel } from './export'; -import { LabelsPanel } from './labels'; -import { MembersPanel } from './members'; -import { ProfilePanel } from './profile'; -import { SharingPanel } from './sharing'; -import { TemplateDocSetting } from './template'; -import type { WorkspaceSettingDetailProps } from './types'; -import { WorkspaceQuotaPanel } from './workspace-quota'; - -export const WorkspaceSettingDetail = ({ - onCloseSetting, - onChangeSettingState, -}: WorkspaceSettingDetailProps) => { - const t = useI18n(); - - const workspace = useService(WorkspaceService).workspace; - const server = workspace?.scope.get(WorkspaceServerService).server; - - const workspaceInfo = useWorkspaceInfo(workspace); - - if (!workspace) { - return null; - } - - return ( - - - - - - - - - - - - - {workspace.flavour !== 'local' && } - {workspace.flavour !== 'local' && ( - - )} - - - {BUILD_CONFIG.isElectron && ( - - - - )} - - - - - - ); -}; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts deleted file mode 100644 index d5856e744..000000000 --- a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { SettingState } from '../../types'; - -export interface WorkspaceSettingDetailProps { - onCloseSetting: () => void; - onChangeSettingState: (settingState: SettingState) => void; -} diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/ai.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/ai.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/ai.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/ai.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/index.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/index.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/style.css.ts similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/delete/style.css.ts diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/index.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/index.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/delete-leave-workspace/index.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/enable-cloud.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/enable-cloud.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/enable-cloud.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx new file mode 100644 index 000000000..c492e4e0a --- /dev/null +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/index.tsx @@ -0,0 +1,59 @@ +import { + SettingHeader, + SettingRow, + SettingWrapper, +} from '@affine/component/setting-components'; +import { useWorkspaceInfo } from '@affine/core/components/hooks/use-workspace-info'; +import { WorkspaceServerService } from '@affine/core/modules/cloud'; +import { WorkspaceService } from '@affine/core/modules/workspace'; +import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant'; +import { useI18n } from '@affine/i18n'; +import { FrameworkScope, useService } from '@toeverything/infra'; + +import { DeleteLeaveWorkspace } from './delete-leave-workspace'; +import { EnableCloudPanel } from './enable-cloud'; +import { LabelsPanel } from './labels'; +import { ProfilePanel } from './profile'; +import { SharingPanel } from './sharing'; +import { TemplateDocSetting } from './template'; +import type { WorkspaceSettingDetailProps } from './types'; + +export const WorkspaceSettingDetail = ({ + onCloseSetting, +}: WorkspaceSettingDetailProps) => { + const t = useI18n(); + + const workspace = useService(WorkspaceService).workspace; + const server = workspace?.scope.get(WorkspaceServerService).server; + + const workspaceInfo = useWorkspaceInfo(workspace); + + return ( + + + + + + + {workspace.flavour === 'local' && ( + + )} + + + + + + + + + ); +}; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/labels.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/labels.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/labels.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/labels.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/profile.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/profile.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/profile.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/profile.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/sharing.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/sharing.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/sharing.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/sharing.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/style.css.ts similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/style.css.ts rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/style.css.ts diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.css.ts similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.css.ts rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.css.ts diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/template.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts new file mode 100644 index 000000000..15824fb29 --- /dev/null +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/preference/types.ts @@ -0,0 +1,3 @@ +export interface WorkspaceSettingDetailProps { + onCloseSetting: () => void; +} diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/export.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/export.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/export.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/export.tsx diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx new file mode 100644 index 000000000..3e871a352 --- /dev/null +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/index.tsx @@ -0,0 +1,33 @@ +import { + SettingHeader, + SettingWrapper, +} from '@affine/component/setting-components'; +import { WorkspaceService } from '@affine/core/modules/workspace'; +import { useI18n } from '@affine/i18n'; +import { useService } from '@toeverything/infra'; + +import { DesktopExportPanel } from './export'; +import { WorkspaceQuotaPanel } from './workspace-quota'; + +export const WorkspaceSettingStorage = () => { + const t = useI18n(); + const workspace = useService(WorkspaceService).workspace; + return ( + <> + + {workspace.flavour !== 'local' && ( + + + + )} + {BUILD_CONFIG.isElectron && ( + + + + )} + + ); +}; diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts new file mode 100644 index 000000000..c448e640c --- /dev/null +++ b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/style.css.ts @@ -0,0 +1,30 @@ +import { cssVar } from '@toeverything/theme'; +import { cssVarV2 } from '@toeverything/theme/v2'; +import { globalStyle, style } from '@vanilla-extract/css'; + +export const storageProgressContainer = style({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); +export const storageProgressWrapper = style({ + flexGrow: 1, +}); +globalStyle(`${storageProgressWrapper} .storage-progress-desc`, { + fontSize: cssVar('fontXs'), + color: cssVarV2('text/secondary'), + height: '20px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 2, +}); +globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, { + height: '8px', + borderRadius: '4px', + backgroundColor: cssVarV2('layer/background/hoverOverlay'), + overflow: 'hidden', +}); +export const storageProgressBar = style({ + height: '100%', +}); diff --git a/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/workspace-quota.tsx b/packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/workspace-quota.tsx similarity index 100% rename from packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/workspace-quota.tsx rename to packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/storage/workspace-quota.tsx diff --git a/packages/frontend/core/src/modules/dialogs/constant.ts b/packages/frontend/core/src/modules/dialogs/constant.ts index 56cf5e6f2..e4238c340 100644 --- a/packages/frontend/core/src/modules/dialogs/constant.ts +++ b/packages/frontend/core/src/modules/dialogs/constant.ts @@ -11,7 +11,7 @@ export type SettingTab = | 'experimental-features' | 'editor' | 'account' - | `workspace:${'preference' | 'properties' | 'billing' | 'license'}`; + | `workspace:${'preference' | 'properties' | 'members' | 'storage' | 'billing' | 'license'}`; export type GLOBAL_DIALOG_SCHEMA = { 'create-workspace': (props: { serverId?: string; forcedCloud?: boolean }) => { diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index ee71ad105..0ac6aed2c 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1337,7 +1337,7 @@ "com.affine.settings.workspace.experimental-features.enable-page-block-header.description": "Once enabled, the header of page block will be displayed.", "com.affine.settings.workspace.not-owner": "Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.", "com.affine.settings.workspace.preferences": "Preference", - "com.affine.settings.workspace.billing": "Billing", + "com.affine.settings.workspace.billing": "Team's Billing", "com.affine.settings.workspace.billing.team-workspace": "Team Workspace", "com.affine.settings.workspace.billing.team-workspace.description.free-trail": "Your workspace is in a free trail period.", "com.affine.settings.workspace.billing.team-workspace.description.billed.annually": "Your workspace is billed annually.", @@ -1368,6 +1368,7 @@ "com.affine.settings.workspace.properties.required-properties": "Required properties", "com.affine.settings.workspace.properties.set-as-required": "Set as required property", "com.affine.settings.workspace.properties.unused": "Unused", + "com.affine.settings.workspace.storage.subtitle": "You can view current workspace's storage and files here.", "com.affine.settings.workspace.publish-tooltip": "Enable AFFiNE Cloud to publish this workspace", "com.affine.settings.workspace.sharing.title": "Sharing", "com.affine.settings.workspace.sharing.url-preview.description": "Allow URL unfurling by Slack & other social apps, even if a doc is only accessible by workspace members.", diff --git a/tests/affine-cloud/e2e/workspace.spec.ts b/tests/affine-cloud/e2e/workspace.spec.ts index 86883e920..7d77e4224 100644 --- a/tests/affine-cloud/e2e/workspace.spec.ts +++ b/tests/affine-cloud/e2e/workspace.spec.ts @@ -12,10 +12,7 @@ import { waitForEditorLoad, waitForEmptyEditor, } from '@affine-test/kit/utils/page-logic'; -import { - openSettingModal, - openWorkspaceSettingPanel, -} from '@affine-test/kit/utils/setting'; +import { openSettingModal } from '@affine-test/kit/utils/setting'; import { createLocalWorkspace } from '@affine-test/kit/utils/workspace'; import { expect } from '@playwright/test'; @@ -58,7 +55,10 @@ test('should have pagination in member list', async ({ page }) => { ); await openSettingModal(page); - await openWorkspaceSettingPanel(page); + await page + .getByTestId('settings-sidebar') + .getByTestId('workspace-setting:members') + .click(); await page.waitForTimeout(1000); diff --git a/tests/affine-desktop/e2e/workspace.spec.ts b/tests/affine-desktop/e2e/workspace.spec.ts index f4156f369..56b0fb334 100644 --- a/tests/affine-desktop/e2e/workspace.spec.ts +++ b/tests/affine-desktop/e2e/workspace.spec.ts @@ -61,9 +61,9 @@ test('export then add', async ({ page, appInfo, workspace }) => { }); }, tmpPath); + await page.getByTestId('workspace-setting:storage').click(); await page.getByTestId('export-affine-backup').click(); await page.waitForSelector('text="Export success"'); - await page.waitForTimeout(1000); expect(await fs.exists(tmpPath)).toBe(true); await page.getByTestId('modal-close-button').click(); @@ -84,18 +84,19 @@ test('export then add', async ({ page, appInfo, workspace }) => { // should show "Added Successfully" dialog // await page.waitForSelector('text="Added Successfully"'); - // await page.getByTestId('create-workspace-continue-button').click(); - // sleep for a while to wait for the workspace to be added :D - await page.waitForTimeout(2000); - const newWorkspace = await workspace.current(); - expect(newWorkspace.meta.id).not.toBe(originalId); + await expect + .poll(async () => { + const newWorkspace = await workspace.current(); + return newWorkspace.meta.id !== originalId; + }) + .toBe(true); + // check its name is correct await expect(page.getByTestId('workspace-name')).toHaveText(newWorkspaceName); // find button which has the title "test1" - const test1PageButton = await page.waitForSelector(`text="test1"`); - await test1PageButton.click(); + await page.getByText('test1').click(); const title = page.locator('[data-block-is-title] >> text="test1"'); await expect(title).toBeVisible();