From 2ee2cbfe36bff3559f3006565dbe349a4b042926 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 12 Nov 2024 06:53:46 +0000 Subject: [PATCH] feat(core): add i18n to descriptions of experimental feature (#8788) close AF-1554 AF-1556 OPE-185 --- .../src/modules/feature-flag/constant.ts | 121 ++++++++++++------ .../appearance/theme-editor-setting.tsx | 13 +- .../experimental-features/index.tsx | 7 +- .../new-workspace-setting-detail/labels.tsx | 98 ++++++++------ packages/frontend/i18n/src/resources/en.json | 53 ++++++++ 5 files changed, 202 insertions(+), 90 deletions(-) diff --git a/packages/common/infra/src/modules/feature-flag/constant.ts b/packages/common/infra/src/modules/feature-flag/constant.ts index 349a7f930f..3ef3601bf3 100644 --- a/packages/common/infra/src/modules/feature-flag/constant.ts +++ b/packages/common/infra/src/modules/feature-flag/constant.ts @@ -8,8 +8,10 @@ const isMobile = BUILD_CONFIG.isMobileEdition; export const AFFINE_FLAGS = { enable_ai: { category: 'affine', - displayName: 'Enable AI', - description: 'Enable or disable ALL AI features.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-ai.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-ai.description', hide: true, configurable: true, defaultState: true, @@ -17,77 +19,96 @@ export const AFFINE_FLAGS = { enable_database_full_width: { category: 'blocksuite', bsFlag: 'enable_database_full_width', - displayName: 'Database Full Width', - description: 'The database will be displayed in full-width mode.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-database-full-width.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-database-full-width.description', configurable: isCanaryBuild, }, enable_database_attachment_note: { category: 'blocksuite', bsFlag: 'enable_database_attachment_note', - displayName: 'Database Attachment Note', - description: 'Allows adding notes to database attachments.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-database-attachment-note.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-database-attachment-note.description', configurable: isNotStableBuild, }, enable_block_query: { category: 'blocksuite', bsFlag: 'enable_block_query', - displayName: 'Todo Block Query', - description: 'Enables querying of todo blocks.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-block-query.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-block-query.description', configurable: isCanaryBuild, }, enable_synced_doc_block: { category: 'blocksuite', bsFlag: 'enable_synced_doc_block', - displayName: 'Synced Doc Block', - description: 'Enables syncing of doc blocks.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-synced-doc-block.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-synced-doc-block.description', configurable: false, defaultState: true, }, enable_edgeless_text: { category: 'blocksuite', bsFlag: 'enable_edgeless_text', - displayName: 'Edgeless Text', - description: 'Enables edgeless text blocks.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-edgeless-text.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-edgeless-text.description', configurable: false, defaultState: true, }, enable_color_picker: { category: 'blocksuite', bsFlag: 'enable_color_picker', - displayName: 'Color Picker', - description: 'Enables color picker blocks.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-color-picker.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-color-picker.description', configurable: false, defaultState: true, }, enable_ai_chat_block: { category: 'blocksuite', bsFlag: 'enable_ai_chat_block', - displayName: 'AI Chat Block', - description: 'Enables AI chat blocks.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-ai-chat-block.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-ai-chat-block.description', configurable: false, defaultState: true, }, enable_ai_onboarding: { category: 'blocksuite', bsFlag: 'enable_ai_onboarding', - displayName: 'AI Onboarding', - description: 'Enables AI onboarding.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-ai-onboarding.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-ai-onboarding.description', configurable: false, defaultState: true, }, enable_mind_map_import: { category: 'blocksuite', bsFlag: 'enable_mind_map_import', - displayName: 'Mind Map Import', - description: 'Enables mind map import.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-mind-map-import.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-mind-map-import.description', configurable: false, defaultState: true, }, enable_multi_view: { category: 'affine', - displayName: 'Split View', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-multi-view.name', description: - 'The Split View feature enables you to divide your tab into multiple sections for simultaneous viewing and editing of different documents.', + 'com.affine.settings.workspace.experimental-features.enable-multi-view.description', feedbackType: 'discord', feedbackLink: 'https://discord.com/channels/959027316334407691/1280009690004324405', @@ -96,9 +117,11 @@ export const AFFINE_FLAGS = { }, enable_emoji_folder_icon: { category: 'affine', - displayName: 'Emoji Folder Icon', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.name', description: - 'Once enabled, you can use an emoji as the folder icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.', + 'com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.description', + feedbackType: 'discord', feedbackLink: 'https://discord.com/channels/959027316334407691/1280014319865696351/1280014319865696351', @@ -107,9 +130,10 @@ export const AFFINE_FLAGS = { }, enable_emoji_doc_icon: { category: 'affine', - displayName: 'Emoji Doc Icon', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.name', description: - 'Once enabled, you can use an emoji as the page icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.', + 'com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.description', feedbackType: 'discord', feedbackLink: 'https://discord.com/channels/959027316334407691/1280014319865696351', @@ -118,63 +142,76 @@ export const AFFINE_FLAGS = { }, enable_editor_settings: { category: 'affine', - displayName: 'Editor Settings', - description: 'Enables editor settings.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-editor-settings.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-editor-settings.description', configurable: false, defaultState: true, }, enable_offline_mode: { category: 'affine', - displayName: 'Offline Mode', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-offline-mode.name', description: - 'Stop Connecting to the Internet. Even with AFFiNE Cloud, enabling this toggle stops internet connection and keeps everything local, but syncing will be disabled.', + 'com.affine.settings.workspace.experimental-features.enable-offline-mode.description', configurable: isDesktopEnvironment, defaultState: false, }, enable_theme_editor: { category: 'affine', - displayName: 'Theme Editor', - description: 'Enables theme editor.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-theme-editor.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-theme-editor.description', configurable: isCanaryBuild, defaultState: isCanaryBuild, }, enable_local_workspace: { category: 'affine', - displayName: 'Allow create local workspace', - description: 'Allow create local workspace.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-local-workspace.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-local-workspace.description', configurable: isCanaryBuild, defaultState: isDesktopEnvironment || isCanaryBuild, }, enable_advanced_block_visibility: { category: 'blocksuite', bsFlag: 'enable_advanced_block_visibility', - displayName: 'Advanced block visibility control', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-advanced-block-visibility.name', description: - 'To provide detailed control over which edgeless blocks are visible in page mode.', + 'com.affine.settings.workspace.experimental-features.enable-advanced-block-visibility.description', configurable: true, defaultState: false, }, enable_mobile_keyboard_toolbar: { category: 'blocksuite', bsFlag: 'enable_mobile_keyboard_toolbar', - displayName: 'Mobile Keyboard Toolbar', - description: 'Enables the mobile keyboard toolbar.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-mobile-keyboard-toolbar.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-mobile-keyboard-toolbar.description', configurable: false, defaultState: isMobile, }, enable_mobile_linked_doc_menu: { category: 'blocksuite', bsFlag: 'enable_mobile_linked_doc_menu', - displayName: 'Mobile Linked Doc Widget', - description: 'Enables the mobile linked doc menu.', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-mobile-linked-doc-menu.name', + description: + 'com.affine.settings.workspace.experimental-features.enable-mobile-linked-doc-menu.description', configurable: false, defaultState: isMobile, }, enable_snapshot_import_export: { category: 'affine', - displayName: 'Enable Snapshot Import Export', + displayName: + 'com.affine.settings.workspace.experimental-features.enable-snapshot-import-export.name', description: - 'Once enabled, users can import and export blocksuite snapshots', + 'com.affine.settings.workspace.experimental-features.enable-snapshot-import-export.description', hide: true, configurable: true, defaultState: false, diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/theme-editor-setting.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/theme-editor-setting.tsx index 020d0f4010..aeda2da5c9 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/theme-editor-setting.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/appearance/theme-editor-setting.tsx @@ -3,6 +3,7 @@ import { SettingRow } from '@affine/component/setting-components'; import { DesktopApiService } from '@affine/core/modules/desktop-api'; import { ThemeEditorService } from '@affine/core/modules/theme-editor'; import { UrlService } from '@affine/core/modules/url'; +import { useI18n } from '@affine/i18n'; import { DeleteIcon } from '@blocksuite/icons/rc'; import { useLiveData, @@ -26,10 +27,12 @@ export const ThemeEditorSetting = () => { } }, [desktopApi, urlService]); + const t = useI18n(); + return (
{modified ? ( @@ -45,10 +48,12 @@ export const ThemeEditorSetting = () => { variant="secondary" prefix={} > - Reset all + {t['com.affine.appearanceSettings.customize-theme.reset']()} ) : null} - +
); diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/experimental-features/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/experimental-features/index.tsx index e88e0f2978..59c8148160 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/experimental-features/index.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/experimental-features/index.tsx @@ -108,6 +108,7 @@ const feedbackLink: Record, string> = { const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => { const value = useLiveData(flag.$); + const t = useI18n(); const onChange = useCallback( (checked: boolean) => { flag.set(checked); @@ -127,12 +128,12 @@ const ExperimentalFeaturesItem = ({ flag }: { flag: Flag }) => { return (
- {flag.displayName} + {t[flag.displayName]()}
{!!flag.description && ( - -
{flag.description}
+ +
{t[flag.description]()}
 )} {!!flag.feedbackType && ( 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/new-workspace-setting-detail/labels.tsx index 45ac0374c0..6613ceaeea 100644 --- 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/new-workspace-setting-detail/labels.tsx @@ -1,4 +1,6 @@ import { WorkspacePermissionService } from '@affine/core/modules/permissions'; +import { useI18n } from '@affine/i18n'; +import type { Workspace } from '@toeverything/infra'; import { useLiveData, useService, WorkspaceService } from '@toeverything/infra'; import { useEffect, useMemo } from 'react'; @@ -34,47 +36,12 @@ const Label = ({ value, background }: LabelProps) => {
); }; -export const LabelsPanel = () => { - const workspace = useService(WorkspaceService).workspace; - const permissionService = useService(WorkspacePermissionService); - const isOwner = useLiveData(permissionService.permission.isOwner$); - useEffect(() => { - permissionService.permission.revalidate(); - }, [permissionService]); - const labelMap: LabelMap = useMemo( - () => ({ - local: { - value: 'Local', - background: 'var(--affine-tag-orange)', - }, - syncCloud: { - value: 'Sync with AFFiNE Cloud', - background: 'var(--affine-tag-blue)', - }, - syncDocker: { - value: 'Sync with AFFiNE Docker', - background: 'var(--affine-tag-green)', - }, - selfHosted: { - value: 'Self-Hosted Server', - background: 'var(--affine-tag-purple)', - }, - joinedWorkspace: { - value: 'Joined Workspace', - background: 'var(--affine-tag-yellow)', - }, - availableOffline: { - value: 'Available Offline', - background: 'var(--affine-tag-green)', - }, - publishedToWeb: { - value: 'Published to Web', - background: 'var(--affine-tag-blue)', - }, - }), - [] - ); - const labelConditions: labelConditionsProps[] = [ + +const getConditions = ( + isOwner: boolean | null, + workspace: Workspace +): labelConditionsProps[] => { + return [ { condition: !isOwner, label: 'joinedWorkspace' }, { condition: workspace.flavour === 'local', label: 'local' }, { @@ -82,6 +49,55 @@ export const LabelsPanel = () => { label: 'syncCloud', }, ]; +}; + +const getLabelMap = (t: ReturnType): LabelMap => ({ + local: { + value: t['com.affine.settings.workspace.state.local'](), + background: 'var(--affine-tag-orange)', + }, + syncCloud: { + value: t['com.affine.settings.workspace.state.sync-affine-cloud'](), + background: 'var(--affine-tag-blue)', + }, + syncDocker: { + value: t['com.affine.settings.workspace.state.sync-affine-docker'](), + background: 'var(--affine-tag-green)', + }, + selfHosted: { + value: t['com.affine.settings.workspace.state.self-hosted'](), + background: 'var(--affine-tag-purple)', + }, + joinedWorkspace: { + value: t['com.affine.settings.workspace.state.joined'](), + background: 'var(--affine-tag-yellow)', + }, + availableOffline: { + value: t['com.affine.settings.workspace.state.available-offline'](), + background: 'var(--affine-tag-green)', + }, + publishedToWeb: { + value: t['com.affine.settings.workspace.state.published'](), + background: 'var(--affine-tag-blue)', + }, +}); + +export const LabelsPanel = () => { + const workspace = useService(WorkspaceService).workspace; + const permissionService = useService(WorkspacePermissionService); + const isOwner = useLiveData(permissionService.permission.isOwner$); + const t = useI18n(); + + useEffect(() => { + permissionService.permission.revalidate(); + }, [permissionService]); + + const labelMap = useMemo(() => getLabelMap(t), [t]); + + const labelConditions = useMemo( + () => getConditions(isOwner, workspace), + [isOwner, workspace] + ); return (
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 7538b0e779..6945ed34e9 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -202,6 +202,10 @@ "com.affine.appearanceSettings.clientBorder.title": "Client border style", "com.affine.appearanceSettings.color.description": "Choose your colour mode", "com.affine.appearanceSettings.color.title": "Colour mode", + "com.affine.appearanceSettings.customize-theme.description": "Edit all AFFiNE theme variables here", + "com.affine.appearanceSettings.customize-theme.title": "Customize Theme", + "com.affine.appearanceSettings.customize-theme.reset": "Reset all", + "com.affine.appearanceSettings.customize-theme.open": "Open Theme Editor", "com.affine.appearanceSettings.font.description": "Choose your font style", "com.affine.appearanceSettings.font.title": "Font style", "com.affine.appearanceSettings.fontStyle.mono": "Mono", @@ -1185,8 +1189,57 @@ "com.affine.settings.workspace.experimental-features.prompt-header": "Do you want to use the plugin system that is in an experimental stage?", "com.affine.settings.workspace.experimental-features.prompt-warning": "You are about to enable an experimental feature. This feature is still in development and may contain errors or behave unpredictably. Please proceed with caution and at your own risk.", "com.affine.settings.workspace.experimental-features.prompt-warning-title": "WARNING MESSAGE", + "com.affine.settings.workspace.experimental-features.enable-ai.name": "Enable AI", + "com.affine.settings.workspace.experimental-features.enable-ai.description": "Enable or disable ALL AI features.", + "com.affine.settings.workspace.experimental-features.enable-database-full-width.name": "Database Full Width", + "com.affine.settings.workspace.experimental-features.enable-database-full-width.description": "The database will be displayed in full-width mode.", + "com.affine.settings.workspace.experimental-features.enable-database-attachment-note.name": "Database Attachment Note", + "com.affine.settings.workspace.experimental-features.enable-database-attachment-note.description": "Allows adding notes to database attachments.", + "com.affine.settings.workspace.experimental-features.enable-block-query.name": "Todo Block Query", + "com.affine.settings.workspace.experimental-features.enable-block-query.description": "Enables querying of todo blocks.", + "com.affine.settings.workspace.experimental-features.enable-synced-doc-block.name": "Synced Doc Block", + "com.affine.settings.workspace.experimental-features.enable-synced-doc-block.description": "Enables syncing of doc blocks.", + "com.affine.settings.workspace.experimental-features.enable-edgeless-text.name": "Edgeless Text", + "com.affine.settings.workspace.experimental-features.enable-edgeless-text.description": "Enables edgeless text blocks.", + "com.affine.settings.workspace.experimental-features.enable-color-picker.name": "Color Picker", + "com.affine.settings.workspace.experimental-features.enable-color-picker.description": "Enables color picker blocks.", + "com.affine.settings.workspace.experimental-features.enable-ai-chat-block.name": "AI Chat Block", + "com.affine.settings.workspace.experimental-features.enable-ai-chat-block.description": "Enables AI chat blocks.", + "com.affine.settings.workspace.experimental-features.enable-ai-onboarding.name": "AI Onboarding", + "com.affine.settings.workspace.experimental-features.enable-ai-onboarding.description": "Enables AI onboarding.", + "com.affine.settings.workspace.experimental-features.enable-mind-map-import.name": "Mind Map Import", + "com.affine.settings.workspace.experimental-features.enable-mind-map-import.description": "Enables mind map import.", + "com.affine.settings.workspace.experimental-features.enable-multi-view.name": "Split View", + "com.affine.settings.workspace.experimental-features.enable-multi-view.description": "The Split View feature enables you to divide your tab into multiple sections for simultaneous viewing and editing of different documents.", + "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.name": "Emoji Folder Icon", + "com.affine.settings.workspace.experimental-features.enable-emoji-folder-icon.description": "Once enabled, you can use an emoji as the folder icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.", + "com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.name": "Emoji Doc Icon", + "com.affine.settings.workspace.experimental-features.enable-emoji-doc-icon.description": "Once enabled, you can use an emoji as the page icon. When the first character of the folder name is an emoji, it will be extracted and used as its icon.", + "com.affine.settings.workspace.experimental-features.enable-editor-settings.name": "Editor Settings", + "com.affine.settings.workspace.experimental-features.enable-editor-settings.description": "Enables editor settings.", + "com.affine.settings.workspace.experimental-features.enable-offline-mode.name": "Offline Mode", + "com.affine.settings.workspace.experimental-features.enable-offline-mode.description": "Stop Connecting to the Internet. Even with AFFiNE Cloud, enabling this toggle stops internet connection and keeps everything local, but syncing will be disabled.", + "com.affine.settings.workspace.experimental-features.enable-theme-editor.name": "Theme Editor", + "com.affine.settings.workspace.experimental-features.enable-theme-editor.description": "Enables theme editor.", + "com.affine.settings.workspace.experimental-features.enable-local-workspace.name": "Allow create local workspace", + "com.affine.settings.workspace.experimental-features.enable-local-workspace.description": "Allow create local workspace", + "com.affine.settings.workspace.experimental-features.enable-advanced-block-visibility.name": "Advanced block visibility control", + "com.affine.settings.workspace.experimental-features.enable-advanced-block-visibility.description": "To provide detailed control over which edgeless blocks are visible in page mode.", + "com.affine.settings.workspace.experimental-features.enable-mobile-keyboard-toolbar.name": "Mobile Keyboard Toolbar", + "com.affine.settings.workspace.experimental-features.enable-mobile-keyboard-toolbar.description": "Enables the mobile keyboard toolbar.", + "com.affine.settings.workspace.experimental-features.enable-mobile-linked-doc-menu.name": "Mobile Linked Doc Widget", + "com.affine.settings.workspace.experimental-features.enable-mobile-linked-doc-menu.description": "Enables the mobile linked doc menu.", + "com.affine.settings.workspace.experimental-features.enable-snapshot-import-export.name": "Enable Snapshot Import Export", + "com.affine.settings.workspace.experimental-features.enable-snapshot-import-export.description": "Once enabled, users can import and export blocksuite snapshots.", "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.state.local": "Local", + "com.affine.settings.workspace.state.sync-affine-cloud": "Sync with AFFiNE Cloud", + "com.affine.settings.workspace.state.sync-affine-docker": "Sync with AFFiNE Docker", + "com.affine.settings.workspace.state.self-hosted": "Self-Hosted Server", + "com.affine.settings.workspace.state.joined": "Joined Workspace", + "com.affine.settings.workspace.state.available-offline": "Available Offline", + "com.affine.settings.workspace.state.published": "Published to Web", "com.affine.settings.workspace.properties": "Properties", "com.affine.settings.workspace.properties.add_property": "Add property", "com.affine.settings.workspace.properties.all": "All",