From 42ba4e4f0e3d4b08412338fcbd5ca9afb971fc2a Mon Sep 17 00:00:00 2001 From: Yi Date: Thu, 14 Nov 2024 18:26:16 +0800 Subject: [PATCH] chore: update the plugins tab button --- .../components/header/plugins-nav/index.tsx | 9 ++++++++- .../install-from-github/steps/loaded.tsx | 10 ++++++---- .../components/plugins/plugin-page/index.tsx | 4 ++-- web/i18n/en-US/plugin.ts | 1 + web/i18n/zh-Hans/plugin.ts | 1 + web/service/plugins.ts | 11 ---------- web/service/use-plugins.ts | 20 +++++++++++++++++++ 7 files changed, 38 insertions(+), 18 deletions(-) diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx index 7cef0ce6fb..8bc654d860 100644 --- a/web/app/components/header/plugins-nav/index.tsx +++ b/web/app/components/header/plugins-nav/index.tsx @@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next' import Link from 'next/link' import classNames from '@/utils/classnames' import { Group } from '@/app/components/base/icons/src/vender/other' +import { useSelectedLayoutSegment } from 'next/navigation' + type PluginsNavProps = { className?: string } @@ -12,12 +14,17 @@ const PluginsNav = ({ className, }: PluginsNavProps) => { const { t } = useTranslation() + const selectedSegment = useSelectedLayoutSegment() + const activated = selectedSegment === 'plugins' return ( -
+
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx index 6338e387f7..6b63c24aea 100644 --- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx +++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx @@ -7,7 +7,8 @@ import Card from '../../../card' import Badge, { BadgeState } from '@/app/components/base/badge/index' import { pluginManifestToCardPluginProps } from '../../utils' import { useTranslation } from 'react-i18next' -import { installPackageFromGitHub, updateFromGitHub } from '@/service/plugins' +import { updateFromGitHub } from '@/service/plugins' +import { useInstallPackageFromGitHub } from '@/service/use-plugins' import { RiLoader2Line } from '@remixicon/react' import { usePluginTaskList } from '@/service/use-plugins' import checkTaskStatus from '../../base/check-task-status' @@ -40,6 +41,7 @@ const Loaded: React.FC = ({ }) => { const { t } = useTranslation() const [isInstalling, setIsInstalling] = React.useState(false) + const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub() const { handleRefetch } = usePluginTaskList() const { check } = checkTaskStatus() @@ -72,12 +74,12 @@ const Loaded: React.FC = ({ onInstalled() } else { - const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub( - `${owner}/${repo}`, + const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub({ + repoUrl: `${owner}/${repo}`, selectedVersion, selectedPackage, uniqueIdentifier, - ) + }) if (isInstalled) { onInstalled() diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx index 2cba8cf939..d089d37543 100644 --- a/web/app/components/plugins/plugin-page/index.tsx +++ b/web/app/components/plugins/plugin-page/index.tsx @@ -132,7 +132,7 @@ const PluginPage = ({ options={options} />
-
+
{canManagement && ( - Drop plugin package here to install + {t('plugin.installModal.dropPluginToInstall')}
{currentFile && ( trusted source.', + dropPluginToInstall: 'Drop plugin package here to install', labels: { repository: 'Repository', version: 'Version', diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index f3c34a8219..2e9f234af6 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -103,6 +103,7 @@ const translation = { readyToInstallPackage: '即将安装以下插件', readyToInstallPackages: '即将安装以下 {{num}} 个插件', fromTrustSource: '请保证仅从可信源安装插件。', + dropPluginToInstall: '拖放插件包到此处安装', labels: { repository: '仓库', version: '版本', diff --git a/web/service/plugins.ts b/web/service/plugins.ts index 4782738be5..46a90b885c 100644 --- a/web/service/plugins.ts +++ b/web/service/plugins.ts @@ -54,17 +54,6 @@ export const uploadGitHub = async (repoUrl: string, selectedVersion: string, sel }) } -export const installPackageFromGitHub = async (repoUrl: string, selectedVersion: string, selectedPackage: string, uniqueIdentifier: string) => { - return post('/workspaces/current/plugin/install/github', { - body: { - repo: repoUrl, - version: selectedVersion, - package: selectedPackage, - plugin_unique_identifier: uniqueIdentifier, - }, - }) -} - export const fetchIcon = (tenantId: string, fileName: string) => { return get(`workspaces/current/plugin/icon?tenant_id=${tenantId}&filename=${fileName}`) } diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index c9f8058e8f..5de2b5f7fd 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -60,6 +60,26 @@ export const useInstallPackageFromLocal = () => { }) } +export const useInstallPackageFromGitHub = () => { + return useMutation({ + mutationFn: ({ repoUrl, selectedVersion, selectedPackage, uniqueIdentifier }: { + repoUrl: string + selectedVersion: string + selectedPackage: string + uniqueIdentifier: string + }) => { + return post('/workspaces/current/plugin/install/github', { + body: { + repo: repoUrl, + version: selectedVersion, + package: selectedPackage, + plugin_unique_identifier: uniqueIdentifier, + }, + }) + }, + }) +} + export const useDebugKey = () => { return useQuery({ queryKey: [NAME_SPACE, 'debugKey'],