From f21eb5f272bd91250751ceef01370b1641abd7be Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 17 Jul 2023 17:25:00 +0800 Subject: [PATCH] feat: move plugins config to setting (#3259) --- .../setting-modal/general-setting/index.tsx | 16 +++++- .../general-setting/plugins/index.tsx | 22 +++++++ .../general-setting/plugins/style.css.ts | 9 +++ .../setting-modal/setting-sidebar/index.tsx | 3 + apps/web/src/pages/plugins.tsx | 43 -------------- plugins/copilot/src/UI/debug-content.tsx | 57 ++++++++++++------- tests/affine-local/e2e/settings.spec.ts | 10 ++++ tests/kit/utils/setting.ts | 3 + 8 files changed, 100 insertions(+), 63 deletions(-) create mode 100644 apps/web/src/components/affine/setting-modal/general-setting/plugins/index.tsx create mode 100644 apps/web/src/components/affine/setting-modal/general-setting/plugins/style.css.ts delete mode 100644 apps/web/src/pages/plugins.tsx diff --git a/apps/web/src/components/affine/setting-modal/general-setting/index.tsx b/apps/web/src/components/affine/setting-modal/general-setting/index.tsx index 7b87163b85..1e2fcd54e5 100644 --- a/apps/web/src/components/affine/setting-modal/general-setting/index.tsx +++ b/apps/web/src/components/affine/setting-modal/general-setting/index.tsx @@ -1,5 +1,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { + AiIcon, AppearanceIcon, InformationIcon, KeyboardIcon, @@ -8,9 +9,14 @@ import type { FC, SVGProps } from 'react'; import { AboutAffine } from './about'; import { AppearanceSettings } from './appearance'; +import { Plugins } from './plugins'; import { Shortcuts } from './shortcuts'; -export type GeneralSettingKeys = 'shortcuts' | 'appearance' | 'about'; +export type GeneralSettingKeys = + | 'shortcuts' + | 'appearance' + | 'plugins' + | 'about'; export type GeneralSettingList = { key: GeneralSettingKeys; @@ -34,6 +40,12 @@ export const useGeneralSettingList = (): GeneralSettingList => { icon: KeyboardIcon, testId: 'shortcuts-panel-trigger', }, + { + key: 'plugins', + title: 'Plugins', + icon: AiIcon, + testId: 'plugins-panel-trigger', + }, { key: 'about', title: t['About AFFiNE'](), @@ -53,6 +65,8 @@ export const GeneralSetting = ({ return ; case 'appearance': return ; + case 'plugins': + return ; case 'about': return ; default: diff --git a/apps/web/src/components/affine/setting-modal/general-setting/plugins/index.tsx b/apps/web/src/components/affine/setting-modal/general-setting/plugins/index.tsx new file mode 100644 index 0000000000..5cf89174d9 --- /dev/null +++ b/apps/web/src/components/affine/setting-modal/general-setting/plugins/index.tsx @@ -0,0 +1,22 @@ +import { SettingHeader } from '@affine/component/setting-components'; +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { affinePluginsAtom } from '@toeverything/plugin-infra/manager'; +import { useAtomValue } from 'jotai'; + +export const Plugins = () => { + const t = useAFFiNEI18N(); + const plugins = useAtomValue(affinePluginsAtom); + return ( + <> + + {Object.values(plugins).map(({ definition, uiAdapter }) => { + const Content = uiAdapter.debugContent; + return
{Content && }
; + })} + + ); +}; diff --git a/apps/web/src/components/affine/setting-modal/general-setting/plugins/style.css.ts b/apps/web/src/components/affine/setting-modal/general-setting/plugins/style.css.ts new file mode 100644 index 0000000000..d48509003e --- /dev/null +++ b/apps/web/src/components/affine/setting-modal/general-setting/plugins/style.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; + +export const settingWrapper = style({ + flexGrow: 1, + display: 'flex', + justifyContent: 'flex-end', + minWidth: '150px', + maxWidth: '250px', +}); diff --git a/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx index 6f8932466a..6fd0152d67 100644 --- a/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx +++ b/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx @@ -47,6 +47,9 @@ export const SettingSidebar: FC<{
{t['General']()}
{generalSettingList.map(({ title, icon, key, testId }) => { + if (!runtimeConfig.enablePlugin && key === 'plugins') { + return null; + } return (
{ - const plugins = useAtomValue(affinePluginsAtom); - return ( - -
- {Object.values(plugins).map(({ definition, uiAdapter }) => { - const Content = uiAdapter.debugContent; - return ( -
- {/* todo: support i18n */} - {definition.name.fallback} - {Content && } -
- ); - })} -
- - ); -}; - -export default function PluginPage(): ReactElement { - if (!runtimeConfig.enablePlugin) { - return <>; - } - return ( - - - - - - - - ); -} diff --git a/plugins/copilot/src/UI/debug-content.tsx b/plugins/copilot/src/UI/debug-content.tsx index e2dc392dda..da50803323 100644 --- a/plugins/copilot/src/UI/debug-content.tsx +++ b/plugins/copilot/src/UI/debug-content.tsx @@ -1,4 +1,6 @@ -import { Button, Input } from '@affine/component'; +import { Button, FlexWrapper, Input } from '@affine/component'; +import { SettingRow } from '@affine/component/setting-components'; +import { SettingWrapper } from '@affine/component/setting-components'; import type { PluginUIAdapter } from '@toeverything/plugin-infra/type'; import { useAtom } from 'jotai'; import { useCallback } from 'react'; @@ -8,26 +10,43 @@ import { conversationHistoryDBName } from '../core/langchain/message-history'; export const DebugContent: PluginUIAdapter['debugContent'] = () => { const [key, setKey] = useAtom(openAIApiKeyAtom); + const desc = ( + <> + You can get your API key from + + here. + + + ); return (
- OpenAI API Key: - { - setKey(newValue); - }, - [setKey] - )} - /> - + + + + { + setKey(newValue); + }, + [setKey] + )} + /> + + +
); }; diff --git a/tests/affine-local/e2e/settings.spec.ts b/tests/affine-local/e2e/settings.spec.ts index 38e5302f0d..5b0d20b2b8 100644 --- a/tests/affine-local/e2e/settings.spec.ts +++ b/tests/affine-local/e2e/settings.spec.ts @@ -4,6 +4,7 @@ import { waitEditorLoad } from '@affine-test/kit/utils/page-logic'; import { openAboutPanel, openAppearancePanel, + openPluginsPanel, openSettingModal, openShortcutsPanel, } from '@affine-test/kit/utils/setting'; @@ -61,6 +62,15 @@ test('Open shortcuts panel', async ({ page }) => { await expect(title).toBeVisible(); }); +test('Open plugins panel', async ({ page }) => { + await openHomePage(page); + await waitEditorLoad(page); + await openSettingModal(page); + await openPluginsPanel(page); + const title = await page.getByTestId('plugins-title'); + await expect(title).toBeVisible(); +}); + test('Open about panel', async ({ page }) => { await openHomePage(page); await waitEditorLoad(page); diff --git a/tests/kit/utils/setting.ts b/tests/kit/utils/setting.ts index a3f6ab22fb..bb464d3f3d 100644 --- a/tests/kit/utils/setting.ts +++ b/tests/kit/utils/setting.ts @@ -19,6 +19,9 @@ export async function openAppearancePanel(page: Page) { export async function openShortcutsPanel(page: Page) { await page.getByTestId('shortcuts-panel-trigger').click(); } +export async function openPluginsPanel(page: Page) { + await page.getByTestId('plugins-panel-trigger').click(); +} export async function openAboutPanel(page: Page) { await page.getByTestId('about-panel-trigger').click();