From 8058a1dbe493bb7148f351b2d1181ffd9225b654 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 5 Nov 2024 16:47:09 +0800 Subject: [PATCH 1/3] feat: handle update --- .../update-plugin/from-market-place.tsx | 56 +++++++++++++++---- web/service/plugins.ts | 6 ++ 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx index e0f9e2bc01..e0b54a1acf 100644 --- a/web/app/components/plugins/update-plugin/from-market-place.tsx +++ b/web/app/components/plugins/update-plugin/from-market-place.tsx @@ -10,6 +10,9 @@ import Badge, { BadgeState } from '@/app/components/base/badge/index' import type { UpdateFromMarketPlacePayload } from '../types' import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils' import useGetIcon from '../install-plugin/base/use-get-icon' +import { updateFromMarketPlace } from '@/service/plugins' +import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status' +import { usePluginTasksStore } from '@/app/components/plugins/plugin-page/store' const i18nPrefix = 'plugin.upgrade' @@ -43,7 +46,18 @@ const UpdatePluginModal: FC = ({ setIcon(icon) })() }, [originalPackageInfo, getIconUrl]) + const { + check, + stop, + } = checkTaskStatus() + const handleCancel = () => { + stop() + onCancel() + } + const [uploadStep, setUploadStep] = useState(UploadStep.notStarted) + const setPluginTasksWithPolling = usePluginTasksStore(s => s.setPluginTasksWithPolling) + const configBtnText = useMemo(() => { return ({ [UploadStep.notStarted]: t(`${i18nPrefix}.upgrade`), @@ -52,19 +66,41 @@ const UpdatePluginModal: FC = ({ })[uploadStep] }, [t, uploadStep]) - const handleConfirm = useCallback(() => { + const handleConfirm = useCallback(async () => { if (uploadStep === UploadStep.notStarted) { setUploadStep(UploadStep.upgrading) - setTimeout(() => { - setUploadStep(UploadStep.installed) - }, 1500) - return + const { + all_installed: isInstalled, + task_id: taskId, + } = await updateFromMarketPlace({ + original_plugin_unique_identifier: originalPackageInfo.id, + new_plugin_unique_identifier: targetPackageInfo.id, + }) + if (isInstalled) { + onSave() + return + } + setPluginTasksWithPolling() + await check({ + taskId, + pluginUniqueIdentifier: targetPackageInfo.id, + }) + onSave() } if (uploadStep === UploadStep.installed) { onSave() onCancel() } - }, [onCancel, onSave, uploadStep]) + }, [onCancel, onSave, uploadStep, check, originalPackageInfo.id, setPluginTasksWithPolling, targetPackageInfo.id]) + const usedInAppInfo = useMemo(() => { + return ( +
+
{t(`${i18nPrefix}.usedInApps`, { num: 3 })}
+ {/* show the used apps */} + +
+ ) + }, [t]) return ( = ({ {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`} -
-
{t(`${i18nPrefix}.usedInApps`, { num: 3 })}
- {/* show the used apps */} - -
+ {false && usedInAppInfo} } /> @@ -101,7 +133,7 @@ const UpdatePluginModal: FC = ({
{uploadStep === UploadStep.notStarted && ( diff --git a/web/service/plugins.ts b/web/service/plugins.ts index e122b8efea..774dbc54f2 100644 --- a/web/service/plugins.ts +++ b/web/service/plugins.ts @@ -71,6 +71,12 @@ export const installPackageFromLocal = async (uniqueIdentifier: string) => { }) } +export const updateFromMarketPlace = async (body: Record) => { + return post('/workspaces/current/plugin/upgrade/marketplace', { + body, + }) +} + export const uploadGitHub = async (repoUrl: string, selectedVersion: string, selectedPackage: string) => { return post('/workspaces/current/plugin/upload/github', { body: { From 4c516a50b87c6a2f72b23aedd51067af59ecebe3 Mon Sep 17 00:00:00 2001 From: twwu Date: Tue, 5 Nov 2024 16:53:54 +0800 Subject: [PATCH 2/3] fix: update type from InstalledPlugin to PluginDetail in detail-header component --- .../components/plugins/plugin-detail-panel/detail-header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx index c91cba093d..37831368e2 100644 --- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx +++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx @@ -7,7 +7,7 @@ import { RiHardDrive3Line, RiVerifiedBadgeLine, } from '@remixicon/react' -import type { InstalledPlugin } from '../types' +import type { PluginDetail } from '../types' import { PluginSource } from '../types' import Description from '../card/base/description' import Icon from '../card/base/card-icon' @@ -30,7 +30,7 @@ import cn from '@/utils/classnames' const i18nPrefix = 'plugin.action' type Props = { - detail: InstalledPlugin + detail: PluginDetail onHide: () => void onDelete: () => void } From 08bb6bf85842a2d5e4dc142cc1ea677e75daeb8c Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Tue, 5 Nov 2024 17:35:18 +0800 Subject: [PATCH 3/3] fix: tags --- .../model-provider-page/index.tsx | 2 +- web/app/components/plugins/hooks.ts | 49 ++++++++++++------- .../marketplace/search-box/tags-filter.tsx | 10 ++-- web/app/components/tools/labels/filter.tsx | 2 +- web/app/components/tools/labels/selector.tsx | 2 +- .../workflow/block-selector/all-tools.tsx | 2 +- web/i18n/en-US/plugin-tags.ts | 36 ++++++++------ web/i18n/zh-Hans/plugin-tags.ts | 36 ++++++++------ 8 files changed, 82 insertions(+), 57 deletions(-) diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx index 6d508f0de1..7faf3f3de7 100644 --- a/web/app/components/header/account-setting/model-provider-page/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/index.tsx @@ -123,7 +123,7 @@ const ModelProviderPage = ({ searchText }: Props) => { const [collapse, setCollapse] = useState(false) const { - plugins, + plugins = [], queryPlugins, queryPluginsWithDebounced, isLoading: isPluginsLoading, diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts index ef69cf5f23..0abadd7a90 100644 --- a/web/app/components/plugins/hooks.ts +++ b/web/app/components/plugins/hooks.ts @@ -1,72 +1,87 @@ import { useTranslation } from 'react-i18next' +type Tag = { + name: string + label: string +} + export const useTags = () => { const { t } = useTranslation() - return [ + const tags = [ { name: 'search', - label: t('pluginTags.search'), + label: t('pluginTags.tags.search'), }, { name: 'image', - label: t('pluginTags.image'), + label: t('pluginTags.tags.image'), }, { name: 'videos', - label: t('pluginTags.videos'), + label: t('pluginTags.tags.videos'), }, { name: 'weather', - label: t('pluginTags.weather'), + label: t('pluginTags.tags.weather'), }, { name: 'finance', - label: t('pluginTags.finance'), + label: t('pluginTags.tags.finance'), }, { name: 'design', - label: t('pluginTags.design'), + label: t('pluginTags.tags.design'), }, { name: 'travel', - label: t('pluginTags.travel'), + label: t('pluginTags.tags.travel'), }, { name: 'social', - label: t('pluginTags.social'), + label: t('pluginTags.tags.social'), }, { name: 'news', - label: t('pluginTags.news'), + label: t('pluginTags.tags.news'), }, { name: 'medical', - label: t('pluginTags.medical'), + label: t('pluginTags.tags.medical'), }, { name: 'productivity', - label: t('pluginTags.productivity'), + label: t('pluginTags.tags.productivity'), }, { name: 'education', - label: t('pluginTags.education'), + label: t('pluginTags.tags.education'), }, { name: 'business', - label: t('pluginTags.business'), + label: t('pluginTags.tags.business'), }, { name: 'entertainment', - label: t('pluginTags.entertainment'), + label: t('pluginTags.tags.entertainment'), }, { name: 'utilities', - label: t('pluginTags.utilities'), + label: t('pluginTags.tags.utilities'), }, { name: 'other', - label: t('pluginTags.other'), + label: t('pluginTags.tags.other'), }, ] + + const tagsMap = tags.reduce((acc, tag) => { + acc[tag.name] = tag + return acc + }, {} as Record) + + return { + tags, + tagsMap, + } } diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx index c7a1a4e57e..670d7af6ed 100644 --- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx +++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx @@ -1,6 +1,7 @@ 'use client' import { useState } from 'react' +import { useTranslation } from 'react-i18next' import { RiArrowDownSLine, RiCloseCircleFill, @@ -26,9 +27,10 @@ const TagsFilter = ({ onTagsChange, size, }: TagsFilterProps) => { + const { t } = useTranslation() const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState('') - const options = useTags() + const { tags: options, tagsMap } = useTags() const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchText.toLowerCase())) const handleCheck = (id: string) => { if (tags.includes(id)) @@ -65,10 +67,10 @@ const TagsFilter = ({ size === 'small' && 'px-0.5 py-1', )}> { - !selectedTagsLength && 'All Tags' + !selectedTagsLength && t('pluginTags.allTags') } { - !!selectedTagsLength && tags.slice(0, 2).join(',') + !!selectedTagsLength && tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',') } { selectedTagsLength > 2 && ( @@ -100,7 +102,7 @@ const TagsFilter = ({ showLeftIcon value={searchText} onChange={e => setSearchText(e.target.value)} - placeholder='Search tags' + placeholder={t('pluginTags.searchTags') || ''} />
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx index f33a63f480..8f6e954b92 100644 --- a/web/app/components/tools/labels/filter.tsx +++ b/web/app/components/tools/labels/filter.tsx @@ -27,7 +27,7 @@ const LabelFilter: FC = ({ const { t } = useTranslation() const [open, setOpen] = useState(false) - const labelList = useTags() + const { tags: labelList } = useTags() const [keywords, setKeywords] = useState('') const [searchKeywords, setSearchKeywords] = useState('') diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx index 0c64ebb142..88b910e87c 100644 --- a/web/app/components/tools/labels/selector.tsx +++ b/web/app/components/tools/labels/selector.tsx @@ -26,7 +26,7 @@ const LabelSelector: FC = ({ const { t } = useTranslation() const [open, setOpen] = useState(false) - const labelList = useTags() + const { tags: labelList } = useTags() const [keywords, setKeywords] = useState('') const [searchKeywords, setSearchKeywords] = useState('') diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index c7bd877775..43d887a4d5 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -66,7 +66,7 @@ const AllTools = ({ const { queryPluginsWithDebounced: fetchPlugins, - plugins: notInstalledPlugins, + plugins: notInstalledPlugins = [], } = useMarketplacePlugins() useEffect(() => { diff --git a/web/i18n/en-US/plugin-tags.ts b/web/i18n/en-US/plugin-tags.ts index 6eca3ac8a2..e96f415053 100644 --- a/web/i18n/en-US/plugin-tags.ts +++ b/web/i18n/en-US/plugin-tags.ts @@ -1,20 +1,24 @@ const translation = { - search: 'Search', - image: 'Image', - videos: 'Videos', - weather: 'Weather', - finance: 'Finance', - design: 'Design', - travel: 'Travel', - social: 'Social', - news: 'News', - medical: 'Medical', - productivity: 'Productivity', - education: 'Education', - business: 'Business', - entertainment: 'Entertainment', - utilities: 'Utilities', - other: 'Other', + allTags: 'All Tags', + searchTags: 'Search Tags', + tags: { + search: 'Search', + image: 'Image', + videos: 'Videos', + weather: 'Weather', + finance: 'Finance', + design: 'Design', + travel: 'Travel', + social: 'Social', + news: 'News', + medical: 'Medical', + productivity: 'Productivity', + education: 'Education', + business: 'Business', + entertainment: 'Entertainment', + utilities: 'Utilities', + other: 'Other', + }, } export default translation diff --git a/web/i18n/zh-Hans/plugin-tags.ts b/web/i18n/zh-Hans/plugin-tags.ts index f8251d339d..4c9b2c6370 100644 --- a/web/i18n/zh-Hans/plugin-tags.ts +++ b/web/i18n/zh-Hans/plugin-tags.ts @@ -1,20 +1,24 @@ const translation = { - search: '搜索', - image: '图片', - videos: '视频', - weather: '天气', - finance: '金融', - design: '设计', - travel: '旅行', - social: '社交', - news: '新闻', - medical: '医疗', - productivity: '生产力', - education: '教育', - business: '商业', - entertainment: '娱乐', - utilities: '工具', - other: '其他', + allTags: '所有标签', + searchTags: '搜索标签', + tags: { + search: '搜索', + image: '图片', + videos: '视频', + weather: '天气', + finance: '金融', + design: '设计', + travel: '旅行', + social: '社交', + news: '新闻', + medical: '医疗', + productivity: '生产力', + education: '教育', + business: '商业', + entertainment: '娱乐', + utilities: '工具', + other: '其他', + }, } export default translation